Аркадий Мочульский:
Саша, привет. Прочитал последний пост на канале и возник вопрос к тебе. Я бы хотел немножко фронтенд подучить. С чего начать? Знаю базовый HTML/CSS, совсем азы JS.
Аркадий, привет!
Базовые знания — это хорошо. Можно начинать верстать. В процессе придёт понимание того, каких знаний не хватает. Потом идешь читать статьи, книги, смотреть видео уроки, возможно стоит записаться на курсы.
С чего начать?
Моё знакомство с вёрсткой началось в 10 классе. Стало интересно, как делают сайты. Зарегистрировался на каком-то бесплатном хостинге и начал верстать сайт. Попутно читал статьи как что-то реализовать. После этого начал за деньги делать сайты для учителей.
Для начала необходимо попробовать. Понравилось? Можно начинать учить.
Установи редактор кода, например, Atom. Попробуй:
1. Сверстать домашнюю страницу своего сайта
В заметке про процесс обновления своей главной указал ссылки на интересные домашние страницы, посмотри их
2.Придумать идею для небольшого веб-сервиса и самостоятельно запрограммировать
Посмотри примеры: помидорковый таймер, тяжеловато. Мой первый проект был XSLT редактор, он упрощал работу по созданию новых XSLT-файлов
Как только сталкиваешься с проблемой — ищи решение в интернете. 99% твоих проблем уже решены и описаны в статьях. Описание HTML-тегов и свойств стилей CSS можно смотреть на htmlbook.ru.
Параллельно с вёрсткой старайся читать книги. У ребят из A List Apart есть серия книг для дизайнеров. Они короткие, написаны простым языком. Тебе будут полезны:
— HTML5 для веб-дизайнеров
— CSS3 для веб-дизайнеров
— Отзывчивый веб-дизайн
Научись работать c веб-инcпектором: смотреть и редактировать вёрстку, стили, отлаживать скрипты. Если понравился чей-то сайт, не стесняйся заглянуть «под капот» и посмотреть как там всё сделано.
Иногда встречаются весёлые сообщения:
Если в процессе вёрстки что-то пошло не так, то открывай инспектор и ищи ошибку. Чтобы узнать как с ним работать — посмотри эти видео:
— Обзор основных возможностей веб-инспектора
— Суперсилы Chrome Dev Tools
— Отладка кода в браузере
Когда начнешь уверенно чувствовать себя в вёрстке — переходи к изучению JavaScript. Cначала разберись с возможностями языка, а потом уже переходи к изучению библиотек и фреймворков.
Изучение языка советую начать с книги Дэвида Флэнагана — «JavaScript. Подробное руководство». Книга большая, но не пугайся. Читать целиком необязательно.
Достаточно прочитать с первой по восьмую главы — это основы JavaScript, без них никуда.
Ещё можешь посмотреть видеокурсы, на ютубе их много. Вот пара интересных:
— Основы JavaScript
— Школа разработки интерфейсов 2016
Что дальше?
Понравилось верстать? Теперь можно ускорить работу. Изучи какой-нибудь препроцессор для стилей: SASS, LESS или Stylus. Автоматизируй сборку стилей и их обработку через Gulp или PostCSS.
Прочитай книгу про системы контроля версий: Pro Git.
Заведи аккаут на GitHub и установи их приложение на компьютер. Научись работать с репозиториями и ветками. Этот навык будет полезен в командной разработке.
Опубликуй свой проект в репозиторий, попроси знакомого разработчика посмотреть на качество и прокомментировать слабые места в коде.
Если решил крепко связать свою жизнь с фронтендом — запишись на курсы в HTML Academy.
Σ
Практика, теория, практика, теория. Когда появится опыт переходи на новый уровень. Посмотри заметку про инструменты, чтобы составить план по изучению фронтенда.
Краткий чеклист:
— Придумать проект для вёрстки
— Начать верстать
— В процессе вёрстки читать книги, статьи и смотреть видео уроки
— Повторять до уровня, который тебя начнет устраивать