Саша Бизиков

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

Аркадий Мочульский:
Саша, привет. Прочитал последний пост на канале и возник вопрос к тебе. Я бы хотел немножко фронтенд подучить. С чего начать? Знаю базовый 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 22 июня 2017

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

  2. Саша Бизиков 22 июня 2017

    Всегда есть возможность задать вопрос про типографику и вёрстку на странице bizikov.ru/ask/ ?

  3. Artem Sapegin 22 июня 2017

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

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

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

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

    ¹ abookapart.com/products/responsive-web-design

    ² github.com/getify/You-Dont-Know-JS

  4. Саша Бизиков 22 июня 2017

    Артём, спасибо за дополнение!

    Тема редакторов кода довольно халиварная, каждый использует то, что ему удобно. Считаю, что новичка лучше не погружать в эту тему с самого начала. Главное поверстать, а в чём — это уже другой вопрос.

    Если Атом не понравится, попробует другие редакторы. Ничего страшного в этом нет.

    Про «новые стандарты» согласен с тобой, по привычке написал. Не такие уж они и новые уже.

  5. Artem Sapegin 22 июня 2017

    Именно об этом я говорю — писать «установи Атом» — фигня.

  6. Саша Бизиков 22 июня 2017

    Ты же понимаешь, что мы долго будем спорить какой редактор кода стоит установить новичку? ;—)

    Мне нравится Атом, поэтому предложил для начала его установить.

  7. Artem Sapegin 22 июня 2017

    Беда в том, что я не советую никакой, а ты пишешь, что ставить надо именно Атом. Это плохо. Но это твоя аудитория, и тебе видней, что им проповедовать.

  8. Саша Бизиков 22 июня 2017

    Есть две ситуации:

    1. Читаешь в статье «Установи любой редактор кода и начинай верстать». Начинаю гуглить редактор кода. Вижу, что есть Atom, Sublime Text, Visual Studio Code, Brackets, IDEA, PHP Storm, Eclipse Блокнот в конце концов. Пытаюсь разобраться какой редактор лучше, проходит время, в каждой статье рекомендуют разные редакторы. Не могу определиться, т.к не знаю что мне лучше подойдет. Забиваю на вёрстку.

    2. Читаю в статье «Установи Атом». Устанавливаю Атом. Начинаю верстать. Набираюсь опыта, понимаю что Атом меня не устраивает и ищу новый редактор. (Если Атом продолжает устраивать — верстаю и дальше в нём.) В выборе редактора отталкиваюсь от уже накопленного опыта в вёрстке. Смотрю что мне надо, а что нет.

    В заметке придерживаюсь второго сценарий. Для меня важнее, чтобы читатель скорее приступил к вёрстке, а выбор редактора отложил на потом.

  9. Artem Sapegin 22 июня 2017

    А можно написать «Установите редактор кода, например, Атом». Но если нравится формат проповеди — дело твоё 😉

  10. Саша Бизиков 22 июня 2017

    Обновил заметку ?

  11. JiLiZART 23 июня 2017

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

  12. Tenebricosa 25 июня 2017

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

  13. Саша Бизиков 4 июля 2017

    *При условии, что человек знает английский язык.

    Да, «английский должны знать все айтишники», слышал. Но так и не умею нормально понимать английскую речь, чтобы читать книги и тем более смотреть видео курсы.

    Советую такие материалы, которые доступны на русском языке.

  14. Саша Бизиков 4 июля 2017

    Да, крутой ресурс!

  15. Tenebricosa 4 июля 2017

    Есть русские субтитры и переводы книг github.com/azat-io/you-dont-know-js-ru ¯_ (ツ) _/¯

🔒 Обсуждение закрыто

Ещё заметки

Правильный перенос сайта Вордпрес на новый домен

Рассказываю как правильно перенести сайт на WordPress на новый домен с помощью Search Replace DB.

Перенос записей в WordPress

В заметке рассмотрим как перенести большое количество записей в формате CSV на WordPress. Решение подойдёт даже для случая больше 100 000 записей.

Неделя @cssunderhood

На прошлой неделе мне довелось побывать ведущим последнего и самого молодого коллективного твиттера — @cssunderhood.

Двухфакторная аутентификация в WordPress

Если у вас есть сайт или блог на WordPress, то его можно обезопасить от взлома. Один из таких способов повышения безопасности сайта — настройка двухфакторной аутентификации.

Что выбрать: Jekyll или WordPress?

Целый год мой блог работал на Jekyll и размещался на GitHub. Месяц назад вернулся обратно к WordPress и в заметке расскажу почему.

IBM Process Designer 8.5: чтение и запись данных в Coach View

В Coach View среды IBM Process Designer 8.5 взаимодействие с переменными происходит через JavaScript, который разделён на блоки.

Как перевести тему WordPress на русский язык

В большинстве тем для WordPress присутствует папка languages, которая позволяет перевести на необходимый язык весь её интерфейс. Перевод заключается в редактировании .po-файла. В заметке рассказываю как перевести тему WordPress на русский язык.

Оптимизация сайта: включаем gzip-сжатие

У Google есть хороший сервис: PageSpeed Insights, который подскажет, что необходимо оптимизировать у вас на сайте. Одним из советов является включение gzip сжатия на хостинге (или сервере), где размещается ваш сайт.

Меняем фон верхней панели браузера

С выходом Android 5.0 мобильный браузер Chrome начал поддерживать метатег theme-color. Для примера сделаем верхнюю панель красной.

Страница в Sharepoint 2013 c областями для веб-частей

Мне тут по работе довелось верстать под Sharepoint 2013. Многие вещи оказались для меня далеко не тривиальными. Поэтому свой опыт хочу задокументировать в виде статьи, где опишу процесс создания .aspx-страницы с зонами для вставки веб-частей.

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

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

Система сеток с использованием LESS

В этой заметке пойдет речь о примере использования LESS с целью упрощения верстки проектов.

Полезные ресурсы по Sharepoint

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

Как сделать сайт WordPress мультиязычным

Данное решение подойдет только для тех, кто использует WordPress, в качестве основы сайта. Весь необходимый функционал предоставляет плагин qTranslate. Русский файл перевода уже включён в последние версии плагина qTranslate, но по неизвестным причинам, его нет в списке.

Работаем с куками через JavaScript

Рассказываю как записывать и считывать значения из куки.

Что такое LESS и как его использовать

Коротко рассказываю о том, что такое LESS и как его использовать.

Бесплатный хостинг на Гитхаб

Рассказываю как использовать GitHub Pages в качестве хостинга сайта.

Перенос Вордпрес на новый домен

Описываю как правильно выполнить перенос сайта на WordPress.

Установка и настройка Git

Описываю по шагам как установить Git к себе на компьютер.

Отключить топик-ссылки и фотосеты в LiveStreet

При создании сайта на CMS LiveStreet часто приходится производить много настроек. Например, иногда полезно отключить некоторые виды постов. В заметке привожу пример кода, отключающий некоторые виды постов.

Настройка виртуального сервера для работы с LiveStreet

Мне необходимо было перейти на выделенный сервер, где будет работать сайт на LiveStreet. Настраивал сервер впервые, узнал много нового. В заметке опишу основные этапы настройки.

Настройка файла .htaccess после установки LiveStreet

Решение ошибки когда главная страница работает, а при переходе на любую другую — получаю 404 ошибку.