Саша Бизиков

Младший дизайнер в ФанБоксе. Делал интерфейсы бизнес-процессов для сотрудников банка Тинькофф. Изучаю дизайн мобильных приложений и редактуру текста.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что дальше?

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

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

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

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

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

Σ

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

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

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

°°°

Задать вопрос

Ещё


  • Andrei Eres

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • JiLiZART

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

  • Tenebricosa

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

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

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

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

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

  • Tenebricosa

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