"Я хочу научиться писать простой современный веб-сайт" часть первая⁠⁠

Я бэкендщик, и во фронтенде мало работаю. Но просто однажды задумался, а что если бы к фулстек программисту (П) обратился новичок (Н) с такой просьбой:

Н: Я хочу научиться писать простой современный веб-сайт.

П: Раньше программирование изучал?

Н: Да, там Delphi, WinForms, WPF

П: Это плохо… будет много вопросов. Ну вначале, тебе нужно изучить HTML. Это язык разметки для веб-страниц, в котором мы указываем как располагаются такие элементы (теги), такие как параграф, заголовки, картинки, ссылки, блоки и другое. Этакий каркас веб-страницы.

Н: Хорошо. А какую среду разработки использовать для создания веб-страниц?

П: Да хоть блокнот!

Н: Задрали. Почему я, всякий гребанный раз, когда что-либо изучаю в программировании, мне всегда советуют использовать блокнот. У программистов на блокнот фетиш какой-то? Вот ты сам используешь блокнот?

П: Нет…

Н: Ну, а зачем тогда его советуешь?

П: Можешь использовать notepad++, sublime text или vsCode (мой любимый). Изучай…

…

Н: Изучил. Дальше что.

П: Дальше изучай CSS. Он позволяет задавать стили, такие как фон страницы, цвет и размер текста, расположение и фон блоков и многое другое.

Н: Хорошо. Ну это я понял для изучения… Потом, я надеюсь, на практике буду использовать визуальные редакторы.

П: Нет.

Н: То есть я не смогу как в Delphi создать форму и накидать туда кнопки, текстбоксы и другие компоненты?

П: Ну… Если уж тебе это сильно приспичит, есть dreamweaver и другие редакторы. Но я бы их использовал как вспомогательные инструменты к коду. При использовании только визуального редактора создается много ненужного кода и нечитаемых стилей, которые в будущем невозможно будет поддерживать. Не рекомендую.

Н: А как же тогда делать дизайн сайта?

П: Ты или кто-то другой рисует дизайн сайта в Фотошопе, потом по дизайну ты кодом рисуешь сайт, там ширину элементов в пикселях измеряешь. Это называется верстка. Изучай.

…

Н: Я изучил CSS и у меня вопрос. А как создать выпадающее меню, в стандартных тегах я его не нашел.

П: А его и нет!

Н: Как нет? Простой комбобокс есть, а меню, которое построено по такому же принципу нет! Даже в Delphi меню было! А как же мне тогда меню создать.

П: Используй список для создания меню + css стили.

Н: Интересно. То есть использовать списки для создания меню - это нормально, а использовать таблицы для создания шапки(хидера), подвала(футера), содержания (контента) и навигации (навбар) до изобретения флексбоксов – это ненормально?

П: Ну вообще-то веб-сайты раньше создавались только для научный статей и инструмент был создан соответствующий. А нынешние веб-сайты созданы скорее всего не благодаря таким инструментам, а вопреки им, всякими энтузиастами, которым не лень написать тысячу строк, чтобы отобразить трехмерное меню.

Н: Окей… А если я не хочу писать меню?

П: Тогда ты в интернете можешь скачать уже готовое меню, указав в стилях ссылку на него.

Н: Блин, оно по дизайну не соответствует моему дизайну, придется его стили менять. А есть ли уже готовые шаблоны в одном стиле, где и меню есть, и кнопки, и таб-панели?

П: Ты что-нибудь слышал о CSS-фреймворках?

Продолжение следует…