Саша Бизиков

С чего начать изучение вёрстки

Аркадий Мочульский:
Саша, привет. Прочитал последний пост на канале и возник вопрос к тебе. Я бы хотел немножко фронтенд подучить. С чего начать? Знаю базовый HTML/CSS, совсем азы JS.

Аркадий, привет!

Базовые знания — это хорошо. Можно начинать верстать. В процессе придёт понимание того, каких знаний не хватает. Потом идешь читать статьи, книги, смотреть видео уроки, возможно стоит записаться на курсы.

С чего начать?

Моё знакомство с вёрсткой началось в 10 классе. Стало интересно, как делают сайты. Зарегистрировался на каком-то бесплатном хостинге и начал верстать сайт. Попутно читал статьи как что-то реализовать. После этого начал за деньги делать сайты для учителей.

Для начала необходимо попробовать. Понравилось? Можно начинать учить.

Установи редактор кода, например, Atom. Попробуй:

Как только сталкиваешься с проблемой — ищи решение в интернете. 99% твоих проблем уже решены и описаны в статьях. Описание HTML-тегов и свойств стилей CSS можно смотреть на htmlbook.ru.

Параллельно с вёрсткой старайся читать книги. У ребят из A List Apart есть серия книг для дизайнеров. Они короткие, написаны простым языком. Тебе будут полезны:

Научись работать c веб-инcпектором: смотреть и редактировать вёрстку, стили, отлаживать скрипты. Если понравился чей-то сайт, не стесняйся заглянуть «под капот» и посмотреть как там всё сделано.

Иногда встречаются весёлые сообщения:

Если в процессе вёрстки что-то пошло не так, то открывай инспектор и ищи ошибку. Чтобы узнать как с ним работать — посмотри эти видео:

Когда начнешь уверенно чувствовать себя в вёрстке — переходи к изучению JavaScript. Cначала разберись с возможностями языка, а потом уже переходи к изучению библиотек и фреймворков.

Изучение языка советую начать с книги Дэвида Флэнагана — «JavaScript. Подробное руководство». Книга большая, но не пугайся. Читать целиком необязательно.

Достаточно прочитать с первой по восьмую главы — это основы JavaScript, без них никуда.

Ещё можешь посмотреть видеокурсы, на ютубе их много. Вот пара интересных:

Что дальше?

У Ильи Кантора есть классный скринкаст по Gulp
Понравилось верстать? Теперь можно ускорить работу. Изучи какой-нибудь препроцессор для стилей: SASS, LESS или Stylus. Автоматизируй сборку стилей и их обработку через Gulp или PostCSS.

Прочитай книгу про системы контроля версий: Pro Git.

Заведи аккаут на GitHub и установи их приложение на компьютер. Научись работать с репозиториями и ветками. Этот навык будет полезен в командной разработке.

Опубликуй свой проект в репозиторий, попроси знакомого разработчика посмотреть на качество и прокомментировать слабые места в коде.

Если решил крепко связать свою жизнь с фронтендом — запишись на курсы в HTML Academy.

Σ

Практика, теория, практика, теория. Когда появится опыт переходи на новый уровень. Посмотри заметку про инструменты, чтобы составить план по изучению фронтенда.

Краткий чеклист:

  1. Придумать проект для вёрстки
  2. Начать верстать
  3. В процессе вёрстки читать книги, статьи и смотреть видео уроки
  4. Повторять до уровня, который тебя начнет устраивать
, ,

Веду имейл-рассылку о презентациях.

Читая рассылку, можно узнать о том, как сделать хотя бы не уродскую презентацию. В идеале — научиться доносить идеи понятно и красиво.

Будет полезно всем, кто делает презентации для отправки по почте, демонстрации на встречах, проведения уроков, курсов или выступления на публичных мероприятиях.

Подписаться на рассылку 🚀

15 комментариев

  1. Andrei Eres

    По заголовку подумал, ты о типографике и вёрстке расскажешь 🙂

  2. Artem Sapegin

    Не стоит так категорично советовать Атом 😉 Есть и хорошие бесплатные редакторы — например, Код.

    HTML5 и CSS3 уже давно реальность, а не новые стандарты. У книги Итана Маркотта три года назад вышло второе издание¹ — нет смысла давать ссылку на первое, которому уже шесть лет.

    Вместо Фленагана я бы советовал читать You don’t know JavaScript Кайла Симпсона² — они современные, короткие и можно читать их бесплатно, пока не станет слишком сложно.

    У HTML-академии есть клёвая рассылка с макетами, которые можно верстать, а их курсы я бы подвину в самое начало — они как раз об основах вёрстки.

    ¹ https://abookapart.com/products/responsive-web-design
    ² https://github.com/getify/You-Dont-Know-JS

  3. JiLiZART

    по javascript еще есть исчерпывающий материал http://learn.javascript.ru/ где есть вообще все

  4. Tenebricosa

    Мне кажется очень странным в наше время рекомендовать к прочтению Флэнагана. Книга реально большая, написана в виде справочника, но ценный информации и объяснений, как все работает, там с гулькин нос. Серия книг YDKJS намного полнее раскрывает суть языка. Она простая, понятная и содержит в себе исчерпывающие знания. А еще ее прекрасно дополняет видеокурс Кайла Симпсона «Advanced Javascript».

Написать комментарий

Ещё заметки

Как отключить сжатие записей в Диктофоне

В iOS 13 появилась функция записи звука в стандартном диктофоне без потери качества. По умолчанию все равно стоит опция сжимать, сделано в целях экономии места на телефоне.

Повторяющиеся задачи в Trello

Распробовал повторяющиеся задачи. В Трело есть «Улучшения», одно из таких улучшений называется Card Repeater. В заметке рассказываю для чего использую повторяющиеся задачи.

Как поставить обучение на поток при небольшом количестве времени

Отвечаю на вопрос читательницы о том, как у меня устроен процесс обучения.

Эффективное использование mixin в LESS

Я люблю LESS. Правда. Это очень клевая штука, которая позволяет упростить написание CSS. В этой записи пойдет речь о Mixin.