Саша Бизиков

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

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

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

  3. Artem Sapegin 22 июня 2017

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

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

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

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

    ¹ https://abookapart.com/products/responsive-web-design
    ² https://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 еще есть исчерпывающий материал http://learn.javascript.ru/ где есть вообще все

  12. Tenebricosa 25 июня 2017

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

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

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

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

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

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

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

  15. Tenebricosa 4 июля 2017

    Есть русские субтитры и переводы книг https://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 сжатия на хостинге (или сервере), где размещается ваш сайт. Описывать, зачем нужно ускорять загрузку своего сайта, думаю, нет необходимости. Для включения gzip сжатия необходимо иметь работающий сайт на php и хостинг или сервер,

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

С выходом Android 5.0 мобильный браузер Chrome начал поддерживать метатег theme-color. Для примера сделаем верхнюю панель красной: <meta name=»theme-color» content=»red»> Мобильный браузер Firefox в Firefox OS, начиная с версии 2.1, тоже поддерживает этот метатег. С выходом альфа-версии Яндекс.Браузера появились новые возможности для манипулирования внешним видом браузера. Можно задавать свои стили для верхней и нижней панелей браузера

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

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

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

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

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

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

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

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

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

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

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

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

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

Тема давно не новая, но все все равно не могу обойти стороной такую замечательную функцию GitHub.com, как генератор статических страниц. Суть заключается в том, что создавая репозиторий на GitHub, можно разместить исходники статического сайта и показывать их как сайт. Эта функция будет полезна для тех, кому нужно где то разместить простенький сайт или сайт-визитку и

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

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

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

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

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

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

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

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

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

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