Как и где учится верстке самостоятельно 🛗
Предисловие
Верстка макета с помощью кода, то есть с использованием языка разметки HTML, стилизации CSS — это абсолютно рутинная работа. Здесь важно понимать, что верстка не равно программирование. Потому что ты не создаешь ничего нового, ты не пишешь программы, все что ты делаешь, это переносишь дизайн в код с помощью стандартных технологий, суть которых не менялась десятилетиями
Процесс
Процесс переноса макета в код очень линейный:
- Знакомишься с задачей
- Изучаешь макет — какие там блоки, есть ли анимация, какая сетка и тд
- Открываешь чуть ли не блокнот, по крайней мере раньше я делал именно так, сейчас кнч есть VS Code, а дальше начинаешь верстать
Верстка — перевод картинок на понятный браузеру язык (HTML, CSS, JS)
Путь изучения
В первую очередь я бы рекомендовал ознакомиться с общей картиной, что там в этой верстке есть:
Конечно сначала идет изучение основ HTML, с совмещением CSS, забегать к изучению JS я не советую.
А где учиться самому?
Я собрал подборку полезных сайтов, на которых я еще лет 5 назад учился + новые ресурсы:
- freecodecamp — древний ресурс, но с нормально выстроенной программой обучение, и как следует из названия – там все бесплатно
- geeksforgeeks – хороший сайт с множеством советов и бесплатных курсов
- w3schools – прям база для новичков, там много тестов, документации, интерактивных статей и есть русский язык