Так выглядела моя работа целиком: от вопроса «а зачем вообще» до адреса, который можно кому-то отправить. Двадцать одна страница, и каждый этап заканчивается чем-то работающим.
Как читать этот раздел
Этапы стоят в том порядке, в котором я их проходил: каждый опирается на предыдущий. Если какое-то слово незнакомо — не страшно, рядом с ним всегда стоит ссылка на объяснение.
1 страница Без кода, только разговор
Начинается всё не с кода, а с вопроса «зачем». Кому сегодня нужен свой сайт, почему соцсетей часто не хватает и что изменилось за последние пару лет, раз за это берётся школьник.
В конце этапа: вы понимаете, ради чего всё затевается и что получится в итоге.
6 страниц С примерами кода
Что такое система управления сайтом и чем она лучше папки с HTML-файлами. Почему из всех вариантов я взял Evolution CMS и что за слова придётся выучить: шаблон, чанк, сниппет, TV.
В конце этапа: вы знаете устройство CMS и понимаете, из чего будет собран сайт.
Страницы этапа
6 страниц Мои запросы к нейросети целиком
Сколько типов страниц на самом деле нужно сайту и как описать их словами так, чтобы нейросеть выдала не «что-то красивое», а то, что вы задумали. С разбором, почему ответ вышел таким.
В конце этапа: готовая вёрстка главной и внутренней страницы — пока обычными файлами, без всякой CMS.
Страницы этапа
4 страницы По шагам, со скриншотами
Превращаем домашний компьютер в маленький сервер: ставим Open Server, разворачиваем Evolution и первый раз заходим в панель управления. Хостинг для этого не нужен.
В конце этапа: у вас на компьютере открывается настоящий сайт и админка к нему.
Страницы этапа
3 страницы Больше всего кода
Самое интересное. Готовая страница разбирается на шаблон, чанки и сниппеты — и дальше собирается сама, а тексты и меню редактируются мышкой из админки.
В конце этапа: сайт живёт на CMS: новая страница добавляется за минуту, вёрстка при этом одна на всех.
Страницы этапа
1 страница Финал пути
Где вообще живут сайты и сколько это стоит школьнику. Как перенести свой сайт с домашнего компьютера на хостинг, подключить домен и что проверить сразу после переезда.
В конце этапа: сайт открывается по собственному адресу с любого телефона.
Бывает, что весь путь проходить не надо: нужно сделать одну вещь или разобраться в одном понятии. Для этого есть два других раздела.
Двенадцать коротких инструкций: мегаменю, слайдер, хлебные крошки, форма обратной связи. Каждая — про один блок, с готовым кодом, который можно скопировать себе.
Объяснения без спешки: HTML, CSS, микроразметка, доступность, скорость загрузки. Сюда удобно заглядывать, когда в этапе встретилось незнакомое слово.
Он короткий и без единой строчки кода — там я объясняю, зачем вообще браться за свой сайт и почему сейчас это проще, чем кажется.