Если вдруг вы проснулись сегодня утром и точно решили войти в IT и выбрали именно front-end разработку - тогда перед вами точно стоит вопрос: "С чего начать и куда бежать"
Кто-то скажет: "Лучший сборник информации - официальная документация". Не поспоришь, но если вы только начинаете обучение, язык документации понять будет крайне сложно и это просто отобьём всё желание учиться. В этой статье я поделюсь своими шагами и ресурсами, где можно постепенно разбирать темы.
Шаг 1. HTML (язык гипертекстовой разметки)
На просторах интернета существует огромное количество бесплатных курсов, а на YouTube есть уроки по данной теме. Самое главное - пробуйте все делать руками! Не достаточно смотреть, записывать или копировать информацию к себе. Важно руками попробовать каждый тег. Как его ставить, куда его ставить и какие ошибки могут появиться.
Я бы рекомендовала начать с нескольких бесплатный курсах на Stepik, которые лично мне помогли начать и понять что происходит:
Паралельно можно просматривать статьи в онлайн-книге:
https://code.mu/ru/markup/book/prime/ (Учебник по верстке для новичков)
Конечно же YouTube, но лично для меня в большинстве онлан-курсов поток информации просто невероятен, поэтому именно пройдя вот эту базу, повторив всё на 100500 раз можно просмотреть пару курсов для закрепления материала.
P.S. Обратите внимание на метод Emmet, который поможет писать код быстрее.
Шаг 2. CSS (формальный язык описания внешнего вида документа)
Одним HTML красивый сайт мы точно сделать не сможем. Здесь нам на помощь может прийти CSS.
Добавление стилей и оживление каждого элимента - это безумно интересный процесс.
Всё в том же учебники и на курсах Stepik выложено достаточно информации для старта. Я не рекомендую смотреть видео по верстке сайта т.к. простое копирование информации не отложит в голове достаточное количество знаний. Вы просто будете знать где это можно скопировать, но вряд ли поймёте почему так произошло. Поэтому, освоив базовые понятия класса, атрибутов и параметров, устанавливаем себе любой текстовый редактор (например, visual studio code), ищем в Figma любой макет лендинговой страницы и начинаем верствать HTML и CSS файлы.
Кажется невероятно и сложно, и сначала будет огромное количество ошибок, непонятное поведение селекторов, но только самостоятельное изучение ошибок, причин почему это произошло, поможет вам не допускать их в будующем.
Не нужно не куда торопиться ведь даже на втором этапе у нас появляются дополнительные программы как текстовый редактор и Figma. Со всем этим тоже нужно разобраться и это заберёт ни один день. Поэтому настраивайтесь на рабочий лад и получайте удовольствие от маленьких успехов в виде правильно свёрстанных страниц.
P.S. Когда почувствуете себя уверенно в CSS, попробуйте препроцессоры (SASS/SCSS, Less). Очень интересная вещь! Посмотреть сейчас на свою свёрстанную страницу и представьте, что вам нужно поменять задний фон каждого контейнера с белого на голубой. Представили сколько строк кода в CSS вам нужно изменить с background-color: white на background-color: blue... а если таких изменений больше и страниц на сайте больше, а заказчик хочет всё уже вчера...В таких случиях SCSS справится за минуту. Просто изначально при вёрстке вам нужно заводить переменные с отдельным цветом/шрифтом/формой и т.д. и затем просто в одном месте менять значение этой переменной, а браузер всё поменяет за вас. Идеальное преступление :)
Мне очень понравился курс по SCSS: https://www.youtube.com/watch?v=TOlqVNC86XI&list=PL0lO_mIqDDFVv3vF9BG1j1RwfGcQEoxs2
Следующие шаги обязательно будут в других статьях!