Навыки front-end разработчика

Question

[Никита]

сейчас я изучаю HTML/CCS и прочитав эту статью ужасаюсь сколько всего надо учить. что из всего этого необходимо для успешного роста? и в каком порядке\темпе(исключая html\css конечно)

Answer 1

[IVAN SAVCHENKO]

HTML (XHTML, HTML4, HTML5) - обязательно (внимание на HTML5)
CSS (2.1, CSS3, etc.) - обязательно (внимание на все версии)
JavaScript / Ajax - обязательно, классика
jQuery - обязательно, классика
Popular Frameworks (HTML5 Boilerplate, Twitter Bootstrap, etc.) - первый удобный шаблон для html5 проекта, не более, второе уже классический шаблон для адаптивной верстки
Modernizr - библиотека для определения браузеров, клиентов, девайсов - прочитать, усвоить, применять по необходимости что-то определить
OOCSS / BEM / SMACSS (Modular coding methodologies) - способы удобного написания стилей, прочитать, усвоить, применять по необходимости
CSS Grids - не знаю что автор имел ввиду - видимо CSS-сетки, просто надо знать
CSS Frameworks / Resets - ничего сложного технологии обнуления стилей и опять наборы CSS правил с классами типа animate.css
Progressive Enhancement / Graceful Degradation - понятие связанное с кроссбраузерностью и упрощением функционала и отображения в некоторых браузерах
HTML and CSS Specifications (W3C / WHATWG) - чаще проверять код на валидность, это позволяет понять свою ошибки как раз на основе этих спецификаций
UX / Usability - больше для дизайнеров, но тоже пригодится
Website Speed / Performance - плюшки по оптимизации
Developer/Debugging Tools (Chrome Dev Tools, Firebug, etc) - умение ковыряться в консоли, надо знать и применять всегда
YUI Library - по необходимости
Dojo / MooTools / Prototype - изучать и применять по необходимости
Responsive Web Design - надо знать работу с css медиа-запросами
Mobile Web Development - абстрактное понятие связанное с разработкой мобильных веб-приложений
Mobile Web Performance ---
Cross-Browser / Cross-Platform Development - абстрактное понятие связанное с разработкой кроссбраузерных и кроссплатформенных приложений
Document Object Model (DOM) - дом модель - на вводном курсе по js должен знать о ней каждый фронтендер
Cross-Browser Bugs and Inconsistencies (primarily IE6-8) - без комментариев
CSS Pre-Processors (LESS / Sass) - удобные препроцессоры для работы со стилями, рекомендую для упрощения работы с CSS
Version Control (Git / GitHub / CVS / Subversion) - полезный навык, нужный не только фронтендерам, полезен для командной разработки.
HTML5 APIs (Canvas, Geolocation, Video, etc.) - изучать и применять по необходимости
Object-oriented Programming (OOP) - без комментариев
Back-end Templating languages/technologies (PHP, Ruby, .NET, etc) - нужно знать на базовом уровне, что бы понимать как обрабатывать данные на клиенте, возвращенные/отданные сервером, мучать бэкендщика по этому поводу.
Scaffolding, Task Runner tools (Yeoman, Grunt, Bower, etc.) - удобные штуки упрощающие работу
MVC Frameworks (Angular, Backbone, etc.) - изучать и применять по необходимости
MySql - изучать
Accessibility / WAI-ARIA - изучать и применять по необходимости
Microdata / Microformats - изучать и применять по необходимости
HTML5/CSS3 Polyfills - изучать и применять по необходимости
CMS (WordPress, Drupal, Joomla, etc) - изучать и применять по необходимости
Functional Programming - без комментариев, надо знать
Data Formats (e.g. JSON, XML) - надо знать
Internationalization / Localization - абстрактное понятие
Content Strategy - изучать и применять по необходимости
Offline Web Apps - изучать и применять по необходимости
Regular Expressions - надо знать на базовом уровне
.htaccess - изучать и применять по необходимости
SVG - изучать и применять по необходимости
Image Editing Tools (Photoshop, Fireworks, etc.) - надо знать
Web Font Embedding / Licensing - работа со шрифтами
SEO - фронтеднеру надо знать на уровне семантичной вертски
Haml - работа с HTML
CoffeeScript - работа с JS

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

Comments

[Никита]

как бы еще правильно построить процесс обучения. книги хороши, но там только база.

Answer 2

[Сергей Протько]

javascript (без jquery, асинхронность и как с ней жить), DOM-модель (что такое dom, как с ним работать), http (понимание как работает).

это то что нужно знать обязательно. А дальше уже идет специфика, которая познается с опытом, типа баги ie или webkit. Часть проблем решается полифилами/шимами, стоит знать что есть что... Вообще там реально много всего, но основы должны быть.

ну и стоит использовать штуки для автоматизации (grunt/gulp, less/sass и т.д.), покрытие кода тестами (e2e, unit), изучение фреймворков (angular.js, enber.js и т.д.), одного хватит для начала.