Я бэкендщик, и во фронтенде мало работаю. Но просто однажды задумался, а что если бы к фулстек программисту (П) обратился новичок (Н) с такой просьбой:
Н: Я хочу научиться писать простой современный веб-сайт.
П: Раньше программирование изучал?
Н: Да, там Delphi, WinForms, WPF
П: Это плохо… будет много вопросов. Ну вначале, тебе нужно изучить HTML. Это язык разметки для веб-страниц, в котором мы указываем как располагаются такие элементы (теги), такие как параграф, заголовки, картинки, ссылки, блоки и другое. Этакий каркас веб-страницы.
Н: Хорошо. А какую среду разработки использовать для создания веб-страниц?
П: Да хоть блокнот!
Н: Задрали. Почему я, всякий гребанный раз, когда что-либо изучаю в программировании, мне всегда советуют использовать блокнот. У программистов на блокнот фетиш какой-то? Вот ты сам используешь блокнот?
П: Нет…
Н: Ну, а зачем тогда его советуешь?
П: Можешь использовать notepad++, sublime text или vsCode (мой любимый). Изучай…
…
Н: Изучил. Дальше что.
П: Дальше изучай CSS. Он позволяет задавать стили, такие как фон страницы, цвет и размер текста, расположение и фон блоков и многое другое.
Н: Хорошо. Ну это я понял для изучения… Потом, я надеюсь, на практике буду использовать визуальные редакторы.
П: Нет.
Н: То есть я не смогу как в Delphi создать форму и накидать туда кнопки, текстбоксы и другие компоненты?
П: Ну… Если уж тебе это сильно приспичит, есть dreamweaver и другие редакторы. Но я бы их использовал как вспомогательные инструменты к коду. При использовании только визуального редактора создается много ненужного кода и нечитаемых стилей, которые в будущем невозможно будет поддерживать. Не рекомендую.
Н: А как же тогда делать дизайн сайта?
П: Ты или кто-то другой рисует дизайн сайта в Фотошопе, потом по дизайну ты кодом рисуешь сайт, там ширину элементов в пикселях измеряешь. Это называется верстка. Изучай.
…
Н: Я изучил CSS и у меня вопрос. А как создать выпадающее меню, в стандартных тегах я его не нашел.
П: А его и нет!
Н: Как нет? Простой комбобокс есть, а меню, которое построено по такому же принципу нет! Даже в Delphi меню было! А как же мне тогда меню создать.
П: Используй список для создания меню + css стили.
Н: Интересно. То есть использовать списки для создания меню - это нормально, а использовать таблицы для создания шапки(хидера), подвала(футера), содержания (контента) и навигации (навбар) до изобретения флексбоксов – это ненормально?
П: Ну вообще-то веб-сайты раньше создавались только для научный статей и инструмент был создан соответствующий. А нынешние веб-сайты созданы скорее всего не благодаря таким инструментам, а вопреки им, всякими энтузиастами, которым не лень написать тысячу строк, чтобы отобразить трехмерное меню.
Н: Окей… А если я не хочу писать меню?
П: Тогда ты в интернете можешь скачать уже готовое меню, указав в стилях ссылку на него.
Н: Блин, оно по дизайну не соответствует моему дизайну, придется его стили менять. А есть ли уже готовые шаблоны в одном стиле, где и меню есть, и кнопки, и таб-панели?
П: Ты что-нибудь слышал о CSS-фреймворках?
Продолжение следует…
