I tried to create a step-by-step plan to make your learning process easier. As a result you will get a strong background for your career development and possibility to start working in this field.

Briefly

• HTML and CSS
• UI editors
• Developer Tools in browsers
• Emmet
• Semantics and Accessibility
• Right naming
• Responsive and Adaptive markup
• jQuery
• Web Fonts
• CSS Sprites
• Image Optimization
• Working With SVG
• SVG-Sprites
• CSS Animations and Transitions
• CSS Methodologies
• CSS Frameworks
• Coding Email Templates
• Command Line
• Git
• CSS Preprocessors
• Template Engines
• Automatization: Task Runners
• Testing

HTML and CSS

The start point of the path.

• Codecademy
• Learn to Code HTML & CSS
• HTML Dog: HTML Tutorials
• HTML Dog: CSS Tutorials
• Intro to HTML/CSS: Making webpages
• Dash
• w3schools

UI editors

The most popular are Photoshop and Sketch.

In ~90% of cases Photoshop is enough. You should know that Sketch doesn’t work on Windows, but there is a way to open Sketch file by zeplin.

The minimum you should know:

• how to slice and export images;
• how to work with layer styles;
• where to get the info about any text layer (font size, font name, color, line-height and so on).
• The Ultimate Front-End Developer’s Guide to Photoshop
• A Web Developer’s Guide to Photoshop
• Photoshop Extensions for Front-end Developers
• Sketch vs. Photoshop: why & how I moved to Sketch 3 and am not going back

Developer Tools in browsers

This is a set of tools which will help you find a bug and fix it. It saves a lot of your nerves and time.

• Chrome DevTools
• Course on codeschool
• Firefox dev tools
• DevTools Tips
• 15 Must-Know Chrome DevTools Tips and Tricks

Emmet

A set of snippets for HTML and CSS which will speed up your work. take a look at the demo and your life will never be the same.

Semantics and Accessibility

• Let’s Talk about Semantics
• HTML5 Semantics
• Extending Semantics & Accessibility
• Accessibility in HTML5
• WebAIM
• A Look Into Proper HTML5 Semantics

Right naming

• How to name CSS classes
• Naming CSS Stuff Is Really Hard
• Thoughts on semantic HTML class names and maintainability
• What Makes For a Semantic Class Name?
• On class names, semantics and accessibility

Responsive and Adaptive markup

• The Difference Between Responsive and Adaptive Design
• Responsive Web Design
• Beginner’s Guide to Responsive Web Design
• Creating a Mobile-First Responsive Web Design

jQuery

• A guide to the basics of jQuery
• Learning Center
• Learning jQuery
• jQuery Tutorial for Beginners: Nothing But the Goods

Web Fonts

• Using @font-face
• Web Font Anti-Patterns
• Using Web Fonts The Best Way
• Web Font Anti-Pattern: DATA Uris
• Critical Web Fonts

CSS Sprites

• CSS Sprites: Image Slicing’s Kiss of Death
• CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
• The Mystery Of CSS Sprites: Techniques, Tools And Tutorials

Image Optimization

Nowadays it is easy to forget about image optimization while developing a website. I bet you have a high-speed internet, but think about other people with 3G connection or (god help us) dial-up. They will suffer in case you don’t optimize.

Not so long ago I checked a project of a newbie. I was shoked after I optimized the images. Just think about it: in total they have lost 86% of their weight (16MB).

Also, it’s very important to know the difference between JPG, PNG, GIF, SVG and when to use them.

• Google Developers: Image optimization
• Optimizing images for web
• How To Properly Optimize Images for Web…In Photoshop
• TinyPNG

Working With SVG

• Using SVG
• SVG ON THE WEB — A Practical Guide
• THE BEST WAY TO ADD AN SVG IMAGE TO YOUR WEBSITE
• Using SVGs

SVG-Sprites

• Icon System with SVG Sprites
• An Overview of SVG Sprite Creation Techniques
• SVG Sprites and Icon Systems Are Super

CSS Animations and Transitions

• CSS3 Transitions 101: What are Transitions?
• How to create CSS animations and Transitions
• CSS Animation 101
• Transitions & Animations
• Bradshaw: CSS Transitions
• Bradshaw: CSS Animation
• CSS Transitions and Transforms for Beginners

CSS Methodologies

There are tons of them: OOCSS, BEM, SMACSS and more. It’s not necessary to use each of them, but you have to know about the best practices in CSS-architercture.

• An Introduction To Object Oriented CSS (OOCSS)
• CSS Naming Conventions: Fewer Rules, more Fun
• BEM 101

CSS Frameworks

I don’t recommend to use frameworks in your projects. Most of the UIs are unique and Bootstrap will not help you get the work done faster. The main idea behind frameworks is to have a set of components for fast prototyping.

Nevertheless it’s very helpful to explore how these components are implemented in a framework. It’s a treasure for a beginner.

• Bootstrap
• Foundation
• Pure
• Skeleton

Coding Email Templates

• How to Code HTML Email Newsletters
• Creating a Simple Responsive HTML Email
• Your First Responsive Email Build With Foundation for Emails

Command Line

Is a MUST for today. This skill opens the door to a wonderful world of preprocessors, templates, task runners, git and other really useful things.

• Basic & Essential Command Lines Every Web Designers Should Grasp
• The Command Line for Web Design
• Command Line Tools for Frontend Developers

Git

• Learn Git in 30 Minutes
• Github Tutorial
• Atlassian Git Tutorials
• Git How To

CSS Preprocessors

Preprocessors speed up your work, make your life easier and allow you to use new features that are still not implemented in web browsers.

• Sass
• Stylus
• Less
• PostCSS + PreCSS

Template Engines

Imagine that you have 10 layouts and you have to make a change in the same part of every layout. And later it can happen again, and again, and again.

One of the template’s feature is to create an independent block and include it wherever you need. When you make a change in a block it automagically applies for all of the places where it was included. In this case you do 10x less work.

• Pug (Jade in past)
• HAML
• Twig
• Blade

Automatization: Task Runners

Routine should be automated. I guess you don’t want to run preprocessors, templates compilations, image optimizations manually on every change. Task runners will take care of these operations.

• Gulp for Beginners
• Getting started with gulp
• Grunt
• A Simple Guide to Getting Started With Grunt

Testing

Pixel Perfect

• PerfectPixel by WellDoneCode

Code

• HTML Validator
• CSS Validator

Crossbrowser

• https://crossbrowsertesting.com/
• https://www.browserstack.com/
• https://www.browserling.com/
• https://www.sitepoint.com/the-7-cross-browser-testing-tools-you-need-in-2016/

Accessibility

• Accessibility testing
• Web Accessibility Evaluation Tools List
• Web Accessibility Checklist

Conclusion

This list can’t make you a good developer in a snap. You’ll only become a top developer if you love your work and do your best. Only day by day practice will make you better.

P.S. I often hear designers complain that UI developers don’t care about the details in the design files. They forget about blocks’ and fonts’ sizes, grid, etc. You as a professional should follow given design files, pixel by pixel. If you have questions, ask the designer. If you have any ideas how to improve the design, talk to the designer. The more the working process is transparent, the better is the final result.

Проект уже пару месяцев находился в разработке. Бэкенд писался на Laravel (PHP фреймворк), а над фронтендом никто работу не начинал, но стек был определен — CoffeeScript и Backbone.js.

Первый этап простой — подготовить архитектуру, настроить сборщик и сверстать около 80 страниц с респонсивом.

С версткой я закончил быстро и сел разбираться с Backbone. Мозг не хотел понимать модель MVC, как я ни стрался. Книга Эдди Османи была прочитана и примеры перепечатаны, но все тщетно. К счастью, первый модуль был немного похож по структуре на TODO приложение из книги, и спустя пару дней я закончил. Оно работало, но я еще не понимал как у меня это получилось.

Так модуль за модулем я осваивал Backbone. Позже мне понадобилась помощь и мы нашли неплохого разработчика. Он показал как правильно писать и организовывать приложения на бэкбоне, как подключать валидацию и связывать вьюшку с моделью. Тогда меня и накрыло от возможностей.

За год работы с бэкбоном я прошел 3 или 4 этапа, после каждого я дико фэйспалмил на свой старый код. Вот уже месяца 4 я не ощущал конкретных сдвигов в развитии и чувствую, что это предел. К тому же, все меняется во фронтенд разработке и бэкбон потерял свою актуальность.

Продуктивность

Благодаря этому проекту за прошлый год я сильно расслабился. Мне платили хорошие деньги за то, что я разрабатывал продукт и одновременно учил новое. Идеальные условия для разработчика. К концу года я задумался о своей продуктивности. Из-за долгой работы над проектом я начал терять к нему интерес. Взгляд замылился, я перестал видеть целостную картину и стал много времени уделять мелочам. Именно в этот момент разработчик становится крайне непродуктивным, хотя и работает много.

Я вижу тут несколько решений проблемы:

1. Чаще выкатывать релизы.
2. Взять отпуск от работы и вернуться со свежей головой.
3. Поменять фокус. Если ты пилишь UI, взяться за тесты или другую работу по проекту.
4. Поменять технологию или ввести новую. Редко возможно, для бизнеса это невыгодно.
5. Уволиться.

Для поднятия продуктивности я пробовал технику pomodoro, трекал количество времени проведенного в программах, использовал selfControl. В итоге ничто не дало хороший результат. Сначала ты воодушевлен и мотивирован, делаешь все правильно, твоя продуктивность поднимается, но со временем ты возвращаешься в привычный темп. Сейчас я таймер ставлю, чтобы легче было начать работу над задачей и не забывать делать перерывы.

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

Стайлгайды и новые разработчики

Всегда пиши документацию и стайлгайды. Это сэкономит кучу времени и нервов для тебя и новых разработчиков. Каждый пишет в своем стиле и если он не будет знать как принято в этом проекте, продолжит писать по-своему.

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

Правила очевидные и простые, но я их не соблюдал. В итоге получил небольшой хаос на проекте и частые вопросы вида «А как это работает?». Хорошо хоть .editorconfig настроил и табы на мешаются с пробелами.

Никогда не поздно начать

Мой отец в 47 лет начал учиться верстать веб-сайты. Он быстро разобрался с основами html и css, и начал верстать простые странички. К настоящему моменту он выполнил пару коммерческих проектов и заказчики остались довольны.

Честно говоря, я сначала думал, что процесс обучения затянется, ведь с годами учить новые вещи становится все труднее и труднее. Мне, когда я начинал, было довольно сложно обучаться. Может причина была в отсутствии мотивации или конечной цели. Еще допускаю вариант нехватки информации на русском языке. Сейчас очень много обучающего материала, интерактивных и видео уроков.

Я часто слышу “Слишком поздно что-то менять” и “У меня нет времени на это”, да и сам этим грешу. Время можно найти всегда, если есть желание и мотивация. Главное понять, что ты выиграешь в будущем, если сегодня не посмотришь сериал после работы и проснешься пораньше.

Попытка собрать команду

Я пару лет хотел собрать свою команду и брать клевые заказы на верстку веб-сайтов, но “нет времени”. Но все сложилось само — папа уже вышел на приемлемый уровень качества и мне предложили средний проект (шаблон для themeforest). У меня была основная работа, которая занимала от 5 до 7 часов в день, и я решил, что смогу еще пару часов в день найти, чтобы заняться сторонним проектом.

Я рассчитывал закончить за 3 недели, но в итоге это растянулось на 2 месяца (с постоянными правками и нововведениями от заказчика). К счастью проект не был горящим, а заказчик понимающим. Мы закончили проект на хорошей ноте и я остался доволен результатом.

Я совершил несколько ошибок:

1. Работал над проектом параллельно с основным. Мозг уставал постоянно переключаться с проекта на проект. Выделить определенные часы не получалось, потому что вопросы от отца приходили, когда я работал над другим проектом.
2. Плохо оценил время и бюджет. Внешне проект кажется простым, но реализация некоторых частей проекта заняла больше времени. Плюс постоянные дополнения и правки.
3. Переоценил уровень папы. Много времени ушло на то, чтобы он разобрался с git и gulp, и понял как я организовываю проект. Еще уходило время на код-ревью и переделки с учетом моих замечаний. В итоге проект я доверстывал сам.
4. Не добавил в проект шаблонизатор. Я не хотел нагружать отца дополнительным материалом, но потерял в сумме больше времени. Часто приходилось вносить изменения в блоки, которые повторяются на некоторых страницах. Я проклинал себя.

Результат работы.

Сейчас мне предложили сверстать еще один шаблон и я не знаю, соглашаться или нет. Либо я снова зафейлю проект, либо выиграю.

Путешествия

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

Я пришел к выводу, что нужно научиться работать в путешествиях. В первый раз я не взял с собой ноутбук и 2 недели не писал код. Когда вернулся, потратил 1 неделю, чтобы влиться в проект.

Идеальный вариант — когда берешь ноутбук и работаешь около 5 часов в день. Я просыпался в 5 утра, работал до 10–11 и потом шел гулять.

В поиске жилья я активно использовал Airbnb. Сначала переживал за сохранность своих вещей, но потом решил, что владельцам квартир нет смысла портить себе репутацию. Снимать комнату/квартиру выгоднее, чем номер в отеле, потому что можно готовить себе еду, а это большая экономия.

Вывод

Год выдался неплохой, но жалею, что был не так продуктивен и часто тратил время впустую.

Папа все подначивал, чтобы я сел за освоение фотошопа, но на уме были одни лишь игры и все 2 часа я тратил впустую. Через какое-то время я все-таки взялся выполнять разные уроки по созданию огненного текста и ему подобных эффектов. Мне нравился результат и потихоньку я увлекся.

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

Как-то решил зайти в читальный зал, посмотреть, что есть интересно там. Первым делом бросилась в глаза объемная книга по 3ds max, тоже из серии “библия пользователя”. Загорелся, взял, полистал, вернул на место. Уж очень объемная книга была, мне явно не хватило бы терпения учиться по ней. Когда возвращал, заметил на полке книгу “Сам себе WEB программист” и попросил дать ее. Ее содержимое меня зацепило, уже с первых страницы были приведены листинги кода, тогда еще непонятные мне, но сходу захватившие мое внимание. Почитал немного и понял, что это именно то, что я хотел бы выучить.

Брать книги с собой из читального зала запрещалось, поэтому в следующий раз я пришел с тетрадкой в 90 листов и ручкой. Я читал книгу и постепенно делал конспект. Было очень много кода, который приходилось переписывать, чтобы дома можно было попробовать, но я не сдавался. Честно, не помню, как много времени у меня ушло на то, чтобы законспектировать часть про html, но, кажется, не меньше недели я каждый день после школы приходил в библиотеку и сидел там по несколько часов.

Первый проект, который я сделал со своим одноклассником Кириллом, был сайт для школьного эко-кружка “Discovery”. В качестве хостинга использовали narod.ru, с выбором доменного имени долго не мучались discovery10.narod.ru (К сожалению, по основному адресу ничего не откроется, но можно пощелкать в меню http://discovery10.narod.ru/menu.html ).

Для меня это был довольно серьезный опыт разработки целого “сайта”, были применены все навыки, полученные в ходе изучения книги. Из плюсов того времени — не нужно было париться о кроссбраузерности, у всех был установлен Internet Explorer 6.

Значимый 2006 год

Как-то летом меня отправили в местный лагерь “Садово”, где мне посчастливилось встретить Валентина Котельникова. Помню, он тогда он рассказывал, что занимается веб-разработкой и ведет сайт о Гарри Поттере. В лагере мы как-то не очень активно общались, в большей степени из-за моей застенчивости, но его ник я запомнил.

в 2006 я делал коллажи, userbar’ы и прочую чепуху.

Не помню почему, но в какой-то момент я начал искать контакты Валика. Вышел на связь с ним на местном торренте трэкере torrents.md. Не помню как так вышло, но через какое-то время я уже работал на Валика. У него было 2 “белых” каталога сайтов и я модерировал приходящие заявки. В день выходило работы на пару часов, в месяц я получал 20$. В то время это были большие для меня деньги, помню как радовался первой получке, пошел купил большую пачку чипсов и колу.

Время шло, я начал больше интересоваться веб-разработкой. Просил Валика меня научить верстать, тогда еще мода была на табличную верстку. Он как раз должен был сесть за реализацию какого-то своего фентези-проекта (кажется, одна из версий фентези чата). Я сидел рядом и смотрел, как идет процесс верстки. В принципе, я мало чего понял сразу, но начало было положено.

Следующий уровень

Следующей ключевой точкой был переход в 10 класс, где встретил Бориса, которого решил обучить азам html/css и фотошопа. Ученик довольно способный и быстро разобрался во всей теме и был готов работать.

Параллельно с Валиком и парой ребят была организована студия веб-разработок Corner Studio. В качестве офиса была снята квартира в 100 метрах от моей школы. Так что я довольно часто проходил мимо школы и шел работать. Для учительницы у меня болел живот, причем каждую среду стабильно меня вырубало ☺. Работали за своими компьютерами, принесенными из дому. Заказы каждый искал сам себе, но деньги сливались в общак.

Потихоньку уровень верстки рос, рос и мой рейтинг на фрилансру, довольно долго держался в топе-10 среди верстальщиков. Потом ввели новую систему рейтинга, потом другую систему рейтинга и так я скатился до 15 места.

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

К концу школы начался бум своих проектов, когда и появился instudies. Изложу это в следующей статье.