ChatGPT для вёрстки: 50 готовых промптов для изучения HTML и CSS

Стас Ростов

ChatGPT для вёрстки: 50 готовых промптов для изучения HTML и CSS

ChatGPT для вёрстки: 50 готовых промптов для изучения HTML и CSS

Как пользоваться набором

50 готовых промптов для тех, кто изучает вёрстку сам: с нуля, для первой работы в веб-разработке, для своего сайта или блога. Первая страница, теги и структура, CSS, Flexbox и Grid, адаптивность под телефон, формы, доступность, разбор ошибок, код-ревью, учебные проекты и портфолио. Промпты работают в ChatGPT, YandexGPT, GigaChat и Claude. HTML в примерах этой книги проверен валидатором Nu HTML Checker, а результат вёрстки — в браузере Chromium.

1. Начните с промпта №39: нейросеть задаст вопросы о вашем уровне и цели и составит личный план. Сохраните его и возвращайтесь к нему каждую неделю.

2. Замените всё в [квадратных скобках] на свои данные: тему, свой HTML и CSS, что видите на экране и что ожидали, в каком браузере и на какой ширине экрана смотрите.

3. Правьте ответ диалогом: «объясни проще», «покажи без Grid, только Flexbox», «не давай готовый код, только подсказку».

Важно. Нейросеть ошибается и в коде, и в объяснениях: открывайте каждую страницу в браузере сами, проверяйте разметку валидатором validator.w3.org и сверяйте свойства с документацией MDN Web Docs. Поддержку новых свойств в браузерах проверяйте отдельно, нейросеть может ошибиться. Не вставляйте в чат пароли, ключи доступа, личные данные и код рабочих проектов, который нельзя показывать посторонним. Учебные задания и тестовые задания работодателей делайте сами: нейросеть объясняет и проверяет, а верстаете вы.

Содержание

Первые шаги в HTML (1–12)

1. Объяснение темы с нуля · 2. Как устроена страница · 3. Первая страница · 4. В чём разница · 5. Разбор кода построчно · 6. Семантическая разметка · 7. Шпаргалка по теме · 8. Ссылки, картинки, списки, таблицы · 9. Где писать и как смотреть · 10. Словарь терминов · 11. Документация простыми словами · 12. Что я увижу на странице

CSS и вёрстка (13–26)

13. Селекторы · 14. Блочная модель · 15. Flexbox по шагам · 16. Grid по шагам · 17. Задачи по вёрстке · 18. Подсказки по ступенькам · 19. Проверь мою вёрстку · 20. Цвета, шрифты и отступы · 21. Позиционирование · 22. Вёрстка по макету · 23. Формы · 24. Разбор чужой вёрстки · 25. Мини-контрольная · 26. Карточки для повторения

Адаптивность и разбор ошибок (27–38)

27. Разбор ошибки · 28. Инструменты разработчика · 29. Горизонтальная прокрутка на телефоне · 30. Адаптивная версия · 31. Адаптивные картинки и текст · 32. Код-ревью как наставник · 33. Имена классов · 34. Блок не по центру · 35. Стили не применяются · 36. Проверка валидатором · 37. Повторы в CSS · 38. Проверка перед публикацией

Проекты, доступность и рост (39–50)

39. Персональный план · 40. Идеи учебных проектов · 41. План лендинга · 42. Проверка доступности · 43. README для проекта · 44. Первый репозиторий · 45. Что изучать дальше · 46. Вопросы на собеседовании · 47. Портфолио · 48. Дневник обучения · 49. Если застрял и бросаю · 50. Разбор месяца

Примеры готовых ответов · Как получать ответы лучше · Бонус: шпаргалка «как поправить ответ»

Первые шаги в HTML (1–12)

1. Объяснение темы с нуля. Ты опытный преподаватель вёрстки для начинающих. Я изучаю HTML и CSS с нуля, уже знаю: [темы]. Объясни тему [тема] простыми словами: зачем она нужна, как выглядит в коде, 2 типичные ошибки новичков. Каждый фрагмент кода до 15 строк, после него — что я увижу в браузере.

2. Как устроена страница. Объясни, из чего состоит HTML-страница: DOCTYPE, html, head, body, теги и атрибуты, вложенность. Покажи структуру деревом на примере простой страницы: что видно в браузере, а что нет.

3. Первая страница. Помоги сделать мою первую страницу: [о чём она, что на ней должно быть]. Полный код до 25 строк без CSS, затем объясни каждый тег и как открыть файл в браузере. В конце — 3 задания, чтобы дополнить страницу самому.

4. В чём разница. Объясни разницу между [div и span / section и article / strong и b / id и class / margin и padding]. Таблица: что это, когда использовать, пример кода, частая ошибка.

5. Разбор кода построчно. Вот код, который я не понимаю: [HTML и CSS]. Объясни каждую строку простыми словами: что делает и как это выглядит на странице.

6. Семантическая разметка. Вот моя страница, свёрстанная одними div: [код]. Объясни, какие семантические теги подойдут вместо них: header, nav, main, section, article, footer. Покажи исправленную разметку.

7. Шпаргалка по теме. Составь шпаргалку на 1 страницу по теме [тема]: синтаксис, 5 коротких примеров, 3 частые ошибки. Только то, что нужно новичку.

8. Ссылки, картинки, списки, таблицы. Объясни теги [a / img / ul и ol / table] на моём примере: [что хочу показать на странице]. Обязательные атрибуты, зачем alt у картинки, ссылка на другой файл и на раздел страницы.

9. Где писать и как смотреть. Объясни пошагово, как начать верстать на [Windows / macOS / Linux]: редактор [VS Code или другой], создание файлов index.html и style.css, подключение CSS, просмотр в браузере.

10. Словарь терминов. Составь словарик из 15 терминов вёрстки: термин по-английски, перевод, объяснение в одну фразу и мини-пример кода.

11. Документация простыми словами. Вот фрагмент статьи из MDN Web Docs: [вставить]. Перескажи его простыми словами, объясни значения свойства и покажи 2 примера с тем, что я увижу на странице.

12. Что я увижу на странице. Составь 5 вопросов «как это будет выглядеть» по теме [тема]: короткий HTML и CSS до 12 строк, я описываю словами результат. Показывай по одному, жди мой ответ, потом объясняй.

CSS и вёрстка (13–26)

13. Селекторы. Объясни селекторы CSS на моей разметке: [код]. Тег, класс, id, вложенность, псевдоклассы :hover и :first-child. Для каждого — правило и какие элементы оно заденет. Что победит, если два правила спорят.

14. Блочная модель.