Как быстро вкатиться в фронтенд
Публичный постКогда-то давно, когда AJAX еще только-только зарождался, CSS уже изобрели но продолжали верстать табличками, я подрабатывал джуном-фуллстеком. Потом занялся пакетным софтом и бекендами и за происходящим в браузерах следить перестал.
И вот захотелось закрыть гештальт и запилить себе небольшую домашнюю страничку. Поднял сервер, базенку настроил, надо и о внешнем виде задуматься. По старой памяти начал собирать страницы из кусочков html и css, но быстро понял что это дорога в ад. Наверное человечество уже что-то придумало за это время, чтобы раз-раз и сайт готов, подумал я.
Открыл гугл, а там фреймворков и библиотек наплодили, божечки! Судя по статьям, люди годы тратят на изучение ХХХ и потом презирают и гневно плюются в тех кто все эти годы изучал УУУ.
Мне уже наверное поздно в этом всем разбираться, я уже старенький, да и не хочу быть настоящим фронтендером.
Подскажите, какие сейчас есть инструменты, чтобы тот html что выдает мой сервер выглядел более-менее прилично? Ну, типа клуба, наверное: супер-дизайна и всяких интерактивных штук кроме кнопок и ссылок мне не надо.
Всё-таки «вкатиться во фронтенд» != «запилить небольшую домашнюю страничку». Для последнего реакт нахер не нужон, как тут уже насоветовали.
Для сборки я бы взял любой static site generator типа Eleventy. Чтобы не морочиться с версткой — любой css framework как посоветовал @petter
Берёшь React/Vue, чтобы это всё работало, изучаешь, мануалов тысячи
Потом берёшь Material/Bootstrap для CSS, чтобы хорошо смотрелось, изучаешь, мануалов тысячи
Потом понимаешь что есть всякие готовые компоненты на выбранном фреймворке CSS/JS
Потом открываешь MDN, начинаешь вникать во всякие тонкости, вот тут уже можешь начинать плакать, перестаёшь смеяться от
'1' + 0 == 10и одновременно радоваться что IE/Edge был убит Microsoft и немного радуешьсяКак только достиг просветления, берёшь и переписываешь всё на Svelte
Я вообще не фронтендер, но мне надо было запилить страничку для игры. Я выбрала бутстрап и получилось нормально вроде. Почти все, что там есть - из коробки. Кастомного css очень немного. Статика на Jekyll. Можно и просто html сделать, безо всяких генераторов.
Такой инструмент называется css framework
План такой:
Сходите в яндекс.практикум на фронтэнд — станете богом верстки за первые 2-3 месяца. Остальное время в курсе идет js.
Плюс в том, что они дают vanila html/css/js с БЭМом (сейчас вроде расширили немного реактом). Этого достаточно, чтобы потом при необходимости войти в тайпскрипт + условный vuejs, если появится желание в spa vs server-render.
У них, говорят, остальные курсы зашкварные по отзывам, но именно этот ничего (знания получите, подтверждаю). Точнее, он тоже был феерический: я когда проходил для систематизации два года назад, под сотню тикетов, минимум, сделал. За что мне бесплатно в итоге дали курс = вернули деньги в обмен на фидбек (и чтобы поменьше поливал их матом за такое качество за такие деньги в слэке потока среди желторотых студентов, кек). Наставник(!), например, понятия не имел про 2х картинки и зачем нужно отписываться от событий (и так сойдет). Но если у вас бэк-прошлое на нормальном™ языке кровавого энтерпрайза™ без говнокода, не пропадете.
Нашел у них тогда же «уязвимость»: их notion торчал голой жопой в интернет без пароля (со всеми планами типа выхода на международные рынки, интервью, внутренние материалы и т. д.). «Щедро» отблагодарили пачкой молотого кофе с доставкой курьером — то, что у меня неспрессо, не спросили :-)
Начинаешь учить модный фреймворк типа реакта, через пару часов сможешь написать hello world, к этому времени фреймворк уже устареет и все будут писать на чем-то более новом типа svelte.
Вы можете писать привычный HTML, а стилизовать его с помощью https://tailwindcss.com/, это быстрее и проще. Главное попробовать, а не остановиться на чтении документации :)
С Tailwind у вас получится консистентный внешний вид, но, в отличие от Bootstrap, дизайн будет более уникальный
Вообще есть tailwind чтоб страничку собрать. Вы же там не клиентское приложение пишете, чтоб js фреймворк цеплять?
Мне в свое время помогли вкатиться вот эти два ютюб канала - просто смотрел какой-нибудь курс для новичка и перепичатывал всё что там говорят:
https://youtube.com/c/TraversyMedia
https://youtube.com/c/Academind
😱 Комментарий удален его автором...