1

Этап 1

Командная строка

2

Этап 2

Правильное именование

3

Этап 3

BOILERPLATE

4

Этап 4

Семантика и доступность

5

Этап 5

Изучить Emmet

6

Этап 6

Оптимизация изображений

7

Этап 7

Responsive/adaptive верстка

8

Этап 8

Освоение графических редакторов Photoshop

9

Этап 9

Сборка спрайтов

10

Этап 10

Знания по протоколу HTTP

11

Этап 11

jQuery

12

Этап 12

Инструменты разработчика в браузере

13

Этап 13

Автоматизация: таск-раннеры

14

Этап 14

Английский язык

15

Этап 15

HTML и CSS

16

Этап 16

Подключение шрифтов

17

Этап 17

Работа с SVG

18

Этап 18

SVG-спрайты

19

Этап 19

CSS-анимации и плавные переходы

20

Этап 20

CSS-методологии

21

Этап 21

CSS-фреймворки

22

Этап 22

Верстка писем

23

Этап 23

Git

24

Этап 24

CSS-препроцессоры

25

Этап 25

Шаблонизаторы

26

Этап 26

Тестирование верстки

27

Этап 27

Программирование на Javascript

28

Этап 28

Базовые принципы верстки

29

Этап 29

Технологии асинхронной передачи данных Навыки создания тестовых «затычек» на стороне сервера, чтобы можно было разрабатывать асинхронный обм

30

Этап 30

Базовые знания про UML

31

Этап 31

Дизайн сайта портфолио

32

Этап 32

Контент сайта портфолио

33

Этап 33

SVG-иконки дл сайта при необходимости

34

Этап 34

Форма отправки сообщения

35

Этап 35

Адаптивность

36

Этап 36

Двуязычность

37

Этап 37

Кроссбраузерность

38

Этап 38

Чтение рекомендованной литературы и статей

39

Этап 39

Masking in CSS

40

Этап 40

Изучение flexbox

41

Этап 41

Общее представление о тестировщиках Karma + Mocha + Chai

42

Этап 42

Time Managment и управление проектами

43

Этап 43

TypeScript (and Angular)

44

Этап 44

Микроразметка

45

Этап 45

React + Flux

1

Этап 1

Командная строка

2

Этап 2

Правильное именование

3

Этап 3

BOILERPLATE

4

Этап 4

Семантика и доступность

5

Этап 5

Изучить Emmet

6

Этап 6

Оптимизация изображений

7

Этап 7

Responsive/adaptive верстка

8

Этап 8

Освоение графических редакторов Photoshop

9

Этап 9

Сборка спрайтов

10

Этап 10

Знания по протоколу HTTP

11

Этап 11

jQuery

12

Этап 12

Инструменты разработчика в браузере

13

Этап 13

Автоматизация: таск-раннеры

14

Этап 14

Английский язык

15

Этап 15

HTML и CSS

16

Этап 16

Подключение шрифтов

17

Этап 17

Работа с SVG

18

Этап 18

SVG-спрайты

19

Этап 19

CSS-анимации и плавные переходы

20

Этап 20

CSS-методологии

21

Этап 21

CSS-фреймворки

22

Этап 22

Верстка писем

23

Этап 23

Git

24

Этап 24

CSS-препроцессоры

25

Этап 25

Шаблонизаторы

26

Этап 26

Тестирование верстки

27

Этап 27

Программирование на Javascript

28

Этап 28

Базовые принципы верстки

29

Этап 29

Технологии асинхронной передачи данных Навыки создания тестовых «затычек» на стороне сервера, чтобы можно было разрабатывать асинхронный обм

30

Этап 30

Базовые знания про UML

31

Этап 31

Дизайн сайта портфолио

32

Этап 32

Контент сайта портфолио

33

Этап 33

SVG-иконки дл сайта при необходимости

34

Этап 34

Форма отправки сообщения

35

Этап 35

Адаптивность

36

Этап 36

Двуязычность

37

Этап 37

Кроссбраузерность

38

Этап 38

Чтение рекомендованной литературы и статей

39

Этап 39

Masking in CSS

40

Этап 40

Изучение flexbox

41

Этап 41

Общее представление о тестировщиках Karma + Mocha + Chai

42

Этап 42

Time Managment и управление проектами

43

Этап 43

TypeScript (and Angular)

44

Этап 44

Микроразметка

45

Этап 45

React + Flux

15 июля 2016

Цель заброшена

Автор не отписывался в цели 7 лет 5 месяцев

Общая

Переучиться и стать верстальщиком

В построении плана руководствуюсь двумя очень грамотными на мой взгляд статьями:

http://krekotun.ru/ui-developer-skills

http://copist.ru/blog/2014/12/26/study-web-program...

 Критерий завершения

Подготовленные портфолио и резюме

 Личные ресурсы

Ноутбук, время

  1. Командная строка

    Необходимый инструмент для доступа к радостям жизни: препроцессорам, компиляции шаблонов, запуску таск-раннеров, git и другим полезным вещам.

  2. Правильное именование

    Проверю все ли в этой теме так просто, как кажется. Имена должны нести в себе смысл. Цель — сделать код хорошо читаемым и легко поддерживаемым.

    У новичков часто можно встретить div class=b, или div13 и все в таком духе. Это неправильно. Также нельзя использовать транслитерацию div class=shapka.
    Общепринятый язык для именования — английский.

    1. Слова, часто используемые в CSS-классах https://github.com/yoksel/common-words

    2. How to name CSS classes http://bdavidxyz.com/blog/how-to-name-css-classes/

  3. BOILERPLATE

    Типовая структура проекта с минимальным набором файлов и папок. Чтобы не пришлось создавать самому каждый раз, очень советуют разобраться.

    1. https://html5boilerplate.com/ - документация

    2. https://leveluptutorials.com/tutorials/html5-tutorials/html5-boilerplate - видео на leveluptuts

  4. Семантика и доступность

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

    1. Семантическая вёрстка. Часть первая https://pepelsbey.net/2008/04/semantic-coding-1/

    2. Искусство семантики HTML, часть 1 http://frontender.info/the-art-of-html-semantics-pt1/

    3. Семантический HTML — рекомендация с большими выгодами http://www.xiper.net/learn/tegofenshuj/about-semantic.html

    4. Продвинутая семантика и доступность https://webref.ru/layout/advanced-html-css/semantics-accessibility

    5. Подстраховка web-доступности семантических областей HTML5 через роли WAI-ARIA https://habrahabr.ru/post/240065/

    6. http://web-standards.ru/category/articles/ - в тему

    7. Semantic HTML https://www.pluralsight.com/courses/semantic-html-2329

    8. Основы семантической верстки на HTML5 http://zaurmag.ru/priemy-verstki-html-css/osnovy-semanticheskoj-verstki-na-html5.html

    9. What Makes For a Semantic Class Name? https://css-tricks.com/semantic-class-names/

  5. Изучить Emmet

    Набор сниппетов для HTML и CSS, дающий супер-скорость. Изучение документации:

    http://docs.emmet.io/

    Учим сокращения Эммет(зен-кодинг) в программе Анки http://rublog.orlovmax.com/2013/10/blog-post_3424.html

  6. Оптимизация изображений

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

    Также важно уметь выбрать оптимальный формат графики (jpg, png, gif, svg).

    1. Всё, что нужно знать об оптимизации изображений для сайта http://ru.wix.com/blog/2014/07/%D0%BE%D0%BF%D1%82%D0%B8%D0%BC%D0%B8%D0%B7%D0%B0%D1

    2. Оптимизация изображений https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization?hl=ru

  7. Responsive/adaptive верстка

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

    Изучение методологии.

    1. Адаптивно-отзывчивый: разбираемся в терминологии http://frontender.info/adaptive-vs-responsive-terminology/

    2. Наглядно для заказчика: адаптивный и отзывчивый сайт — в чем разница http://blog.sibirix.ru/2015/04/21/adaptive-responsive/

    3. Beginner’s Guide to Responsive Web Design http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design

    4. Understanding CSS Grid Systems from the Ground Up https://www.sitepoint.com/understanding-css-grid-systems/

    5. Don’t Overthink It Grids https://css-tricks.com/dont-overthink-it-grids/

    6. @media https://webref.ru/css/media

    7. Intro to Media Queries https://varvy.com/mobile/media-queries.html

    8. Почему Mobile First? https://habrahabr.ru/post/269419/

    9. An Introduction to Mobile-First Media Queries https://www.sitepoint.com/introduction-mobile-first-media-queries/

    10. FREE COURSE Responsive Web Design Fundamentals by Google https://www.udacity.com/course/responsive-web-design-fundamentals--ud893

    11. http://blog.froont.com/9-basic-principles-of-responsive-web-design/

    12. https://www.smashingmagazine.com/2016/03/managing-mobile-performance-optimization/

    13. http://jgthms.com/web-design-in-4-minutes/

  8. Освоение графических редакторов Photoshop

    Необходимый минимум, чтобы начать работать:

    • нарезка и экспорт графических элементов;
    • работа со стилями слоя;
    • информация о тексте (размер, шрифт, цвет, межстрочный интервал и пр).
    1. Photoshop для кодера http://xiper.net/learn/photoshop/

    2. Photoshop для HTML‑верстальщика http://nicothin.pro/page/photoshop-dlja-html-verstalshhika

    3. Photoshop экшены для верстальщика http://vovanr.com/posts/photoshop-actions/

    4. Photoshop - пример нарезки макета для верстки http://gearmobile.github.io/photoshop/photoshop-example-cutting-mockup/

    5. Нарезка в Photoshop — New Layer Based Slice http://paulradzkov.com/2012/photoshop_new_layer_based_slice/

    6. Экспорт слоев из Photoshop в один клик! http://jnet.kz/httml/2014/03/13/eksport-sloev-iz-photoshop-v-odin-klik.html

    7. The Ultimate Front-End Developer’s Guide to Photoshop https://www.netguru.co/blog/photoshop-for-front-end-developers

    8. A Web Developer’s Guide to Photoshop http://rafaltomal.com/a-web-developerss-guide-to-photoshop/

    9. Нарезка макета https://www.youtube.com/watch?v=7gjxE_VEA_4

    10. Responsive Patterns - http://bradfrost.github.io/this-is-responsive/patterns.html

    11. Крестики-нолики на CSS http://css.yoksel.ru/tic-tac-toe/

    12. Слайдеры на чистом CSS + бонусный слайдер http://www.sitehere.ru/slajdery-na-chistom-css-bonusnyj-slajder

    13. Делаем зарядку для глаз вместе с миньонами — анимация CSS3 http://www.sitehere.ru/delaem-zaryadku-dlya-glaz-vmeste-s-minonami-animaciya-css3

    14. Building a Circular Navigation with CSS Transforms http://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms

    15. Циклическое слайд-шоу на чистом CSS3 https://habrahabr.ru/post/143025/

    16. Пример слайдера, управляемого только с помощью CSS3 http://htmlbook.ru/blog/primer-slaydera-upravlyaemogo-tolko-s-pomoshchyu-css3

    17. Разбираемся с border-image из CSS3 http://css-live.ru/articles-css/razbiraemsya-s-border-image-iz-css3.html

    18. Grid Item Animation Layout http://tympanus.net/codrops/2015/04/15/grid-item-animation-layout/

    19. 10 Top Image Hover Effects Tutorials http://www.html5templatesdreamweaver.com/hover-effects.html

    20. Caption Hover Effects http://tympanus.net/codrops/2013/06/18/caption-hover-effects/

    21. Полное руководство по псевдоклассам и псевдоэлементам http://prgssr.ru/development/polnoe-rukovodstvo-po-psevdoklassam-i-psevdoelementam.htm

    22. Будущее загрузки CSS http://css-live.ru/articles/budushhee-zagruzki-css.html

    23. How to Animate a Dashed Border with CSS http://www.hongkiat.com/blog/css-animated-dashed-border/

    24. Why Do We Have `repeating-linear-gradient` Anyway? https://css-tricks.com/why-do-we-have-repeating-linear-gradient-anyway/

    25. How to Create Animations and Transitions with Motion UI http://www.hongkiat.com/blog/animations-transitions-motion-ui/

    26. Angled Edges https://github.com/josephfusco/angled-edges

    27. http://codepen.io/AnnushkaV/pen/xOAmqG

    28. Создание подсказок для сайта с помощью EnjoyHint https://habrahabr.ru/post/270665/

    29. Iconate.js — крошечная JavaScript-библиотека для анимированной трансформации иконок. http://bitshadow.github.io/iconate/

    30. Библиотека для анимации при прокрутке https://terwanerik.github.io/ScrollTrigger/

    31. Подборка библиотек для все случаи жизни) Bootstrap, animate.css, font-awesome и др. http://cssdb.co/

    32. Jump.js - библиотека для реализации плавной прокрутки для навигации по странице. Работает без подключения jQuery. http://callmecavs.com/jump

    33. TinyPNG — один из лучших онлайн-сервисов для сжатия изображений в форматах .png и .jpg без потери качества. https://tinypng.com/

    34. Задача плотной упаковки блоков http://css-live.ru/tricks/zadacha-plotnoj-upakovki-blokov.html

    35. http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

  9. Сборка спрайтов

    Спрайт — графический файл, в котором сгруппировано много изображений небольшого размера. Такая организация графики позволяет минимизировать количество запросов за сервер и ускорить загрузку сайта.

    1. Введение в CSS спрайты для чайников http://onjee.ru/css-sprites/

    2. Верстка с использованием CSS спрайтов https://marahtanov.ru/edu/webp/reports/css_sprite.html

    3. CSS Sprites: Image Slicing’s Kiss of Death http://alistapart.com/article/sprites

    4. CSS Sprites: What They Are, Why They’re Cool, and How To Use Them https://css-tricks.com/css-sprites/

  10. Знания по протоколу HTTP

    Прояснить для себя и разобраться в следующих вопросах.

    1. Основа www: протокол HTTP http://www.4stud.info/web-programming/protocol-http.html

    2. Как отправляются запросы, какие бывают «заголовки запроса»

    3. Какими методами передаются данные пользователя (ну, то есть GET, POST, PUT, DELETE, HEAD, OPTIONS и другие), каким образом передаются данные

    4. Как на сервер передаются двоичные файлы по HTTP : какие заголовки, как кодируются в теле запроса; почему файлы быстрее пересылать по FTP ht

    5. Как формируются ответы, какие бывают «заголовки ответа», какие бывают «статусы ответа» http://copist.ru/blog/2014/12/26/study-web-programmi

    6. Что такое «кодировка ответа сервера», как её определить http://copist.ru/blog/2014/12/26/study-web-programming/#ixzz4EWM6pym8

    7. Каким образом сжимаются ответы сервера, всё ли можно и нужно сжимать http://copist.ru/blog/2014/12/26/study-web-programming/#ixzz4EWMBBPPo

    8. Почему HTTPS безопаснее чем HTTP

    9. Зачем и как заставить браузер кэшировать ответы сервера, как предотвратить кэширование http://copist.ru/blog/2014/12/26/study-web-programmi

    10. http://kamranahmed.info/blog/2016/08/13/http-in-depth/?utm_source=mybridge&utm_medium=email&utm_campaign=read_more

  11. jQuery

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

    Надо найти ответы на такие вопросы:

    как манипулировать с объектами DOM: искать, добавлять, удалять как изменять внешний вид объектов как выполнять действия в ответ на события каким образом реализуется анимация как реализуется работа через AJAX как работать с данными в формате JSON и XML что такое «кросс-доменные запросы» как расширять библиотеку (плагины) библиотеки расширений на примере jQuery UI особенности программирования для мобильных устройств на примере jQuery Mobile

    1. Учебник “jQuery для начинающих” - http://anton.shevchuk.name/jquery-book/

    2. Курсы на HTML academy

    3. Курсы на Codecademy

    4. Курсы на Code School

    5. How to Create an Video Player in jQuery, HTML5 & CSS3 http://designmodo.com/video-player/

    6. 50+ CSS JQUERY GRAPH BAR PIE CHART SCRIPT & TUTORIALS https://www.freshdesignweb.com/css-jquery-graph-bar-pie-chart/

    7. Закрепляем jQuery — 25 отличных советов https://habrahabr.ru/post/52201/

    8. What is jQuery? https://jquery.com/ http://learn.jquery.com/ http://learn.jquery.com/effects/intro-to-effects/ http://learn.jquery.com/e

    9. YOU MIGHT NOT NEED JQUERY http://youmightnotneedjquery.com/

  12. Инструменты разработчика в браузере

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

    1. Chrome DevTools https://developer.chrome.com/devtools

    2. Курс от codeschool http://discover-devtools.codeschool.com/

    3. Chrome DevTools, в помощь верстальщику https://www.youtube.com/watch?v=eqJDcbNVe54

    4. Инструменты разработчика Firefox https://developer.mozilla.org/ru/docs/Tools

    5. Важные аспекты работы браузера для разработчиков. Часть 2 https://habrahabr.ru/company/dataart/blog/304934/

    6. Важные аспекты работы браузера для разработчиков. Часть 1 https://habrahabr.ru/company/dataart/blog/304138/

    7. http://discover-devtools.codeschool.com/

  13. Автоматизация: таск-раннеры

    Вся рутина должна быть автоматизирована. Примеры автоматизации — запуск препроцессоров и шаблонизаторов, оптимизация графики, сборка спрайтов, сжатие css и js.

    1. Gulp http://gulpjs.com/

    2. Скринкаст по Gulp https://learn.javascript.ru/screencast/gulp

    3. Gulp for Beginners https://css-tricks.com/gulp-for-beginners/

    4. Getting started with gulp https://markgoodyear.com/2014/01/getting-started-with-gulp/

    5. Продолжаем бороться с frontend-рутиной https://habrahabr.ru/company/2gis/blog/269743/

    6. Grunt http://gruntjs.com/

    7. A Simple Guide to Getting Started With Grunt https://scotch.io/tutorials/a-simple-guide-to-getting-started-with-grunt

    8. Grunt- и Gulp-таски для оптимизации производительности http://frontender.info/performance-optimization/

    9. Grunt, инструмент для сборки javascript проектов http://habrahabr.ru/post/148274/

    10. Grunt для тех, кто считает штуки вроде него странными и сложными http://frontender.info/grunt-is-not-weird-and-hard/

    11. Grunt 0.4: система сборки для фронтенд-разработчиков http://nano.sapegin.ru/all/grunt-0-4

    12. GRUNT The JavaScript Task Runner http://gruntjs.com/

    13. Пересмотренное руководство по Grunt для начинающих https://habrahabr.ru/post/244721/

    14. GulpJS — фантастически быстрый сборщик проектов https://habrahabr.ru/post/208890/

    15. Gulp — как глоток свежего воздуха после Grunt http://frontender.info/no-need-to-grunt-take-a-gulp-of-fresh-air/

    16. Gulp.js #1 - работаем с CSS: concat, minify, rename, notify, watch, dest https://www.youtube.com/watch?v=9zwwmjGz1Vs&list=PLY4rE9dstrJwX

    17. Bower A package manager for the web https://bower.io/

    18. Bower: зачем фронтенду нужен менеджер пакетов http://nano.sapegin.ru/all/bower

    19. Пакетный менеджер Bower http://stepansuvorov.com/blog/2013/03/%D0%BF%D0%B0%D0%BA%D0%B5%D1%82%D0%BD%D1%8B%D0%B9-%D0%BC%D0%B5%D0%BD%D0%B5%D0%B

    20. THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS http://yeoman.io/

    21. Yeoman для новичков https://habrahabr.ru/post/246349/

    22. Быстрая инициализация проекта http://frontender.info/skaffolding-dlya-frontenderov/

    23. Автоматизированный шаблон для front-end проектов https://habrahabr.ru/post/239573/

    24. Cистемы сборки фронтенда. Gulp https://www.youtube.com/watch?v=MfnTJh-pQWM&feature=youtu.be

  14. Английский язык

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

    Этап будет длиться все время, отведенное на проект.

    Через день надо заниматься английским хотя бы пол часа.

    1. Lingualeo

    2. duolingo

    3. https://www.native-english.ru/

    4. http://www.engvid.com/

  15. HTML и CSS

    1. Уроки по HTML и CSS https://webref.ru/layout/learn-html-css

    2. Самоучитель HTML4 http://htmlbook.ru/samhtml

    3. Самоучитель CSS http://htmlbook.ru/samcss

    4. Основы CSS/CSS3 https://www.youtube.com/playlist?list=PL026CCEB5125879C2

    5. HTML Academy Интерактивные онлайн курсы https://htmlacademy.ru/

    6. Codecademy Аналогично https://www.codecademy.com/

    7. При необходимости можно просмотреть курс из Специалиста HTML и CSS. Уровень 1. Создание сайтов на HTML 5 и СSS 3 http://www.specialist.ru/c

    8. хороший учебник, разъясняющий тонкости позиционирования http://softwaremaniacs.org/blog/category/primer/

    9. интерактивное пособие по отступам элементов (padding, margin) http://shpargalkablog.ru/2011/03/svoistva-margin-padding.html

    10. HTML5 и CSS3 http://codenamecrud.ru/html5-and-css3

    11. Creating a Custom HTML5 Audio Element UI https://designshack.net/articles/css/custom-html5-audio-element-ui/

    12. Create a WYSIWYG Editor With the contentEditable Attribute http://code.tutsplus.com/tutorials/create-a-wysiwyg-editor-with-the-contenteditab

    13. Как стать выдающимся фронтенд-разработчиком http://css-live.ru/faq/kak-stat-vydayushhimsya-frontenderom.html

    14. Крестики-нолики на CSS http://css.yoksel.ru/tic-tac-toe/

    15. Делаем зарядку для глаз вместе с миньонами — анимация CSS3 http://www.sitehere.ru/delaem-zaryadku-dlya-glaz-vmeste-s-minonami-animaciya-css3

    16. Слайдеры на чистом CSS + бонусный слайдер http://www.sitehere.ru/slajdery-na-chistom-css-bonusnyj-slajder

    17. Пример слайдера, управляемого только с помощью CSS3 http://htmlbook.ru/blog/primer-slaydera-upravlyaemogo-tolko-s-pomoshchyu-css3

    18. Циклическое слайд-шоу на чистом CSS3 https://habrahabr.ru/post/143025/

    19. Hover.css http://ianlunn.github.io/Hover/

    20. Techniques for Creating Textured Text http://tympanus.net/codrops/2013/12/02/techniques-for-creating-textured-text/

    21. Creative CSS3 Animation Menus http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index2.html

    22. Shazam-Like Morphing Button Effect http://tympanus.net/codrops/2015/11/24/shazam-like-morphing-button-effect/

    23. Animated Buttons http://tympanus.net/Tutorials/AnimatedButtons/index7.html

    24. Some Inspiration for Pricing Tables http://tympanus.net/codrops/2015/11/19/some-inspiration-for-pricing-tables/

    25. Building a Circular Navigation with CSS Transforms http://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transform

    26. Свойство background-clip и его применения http://css-live.ru/articles-css/background-clip-use-cases.html

    27. http://designmodo.com/

    28. Борьба с пробелами между блочно-строчными элементами https://htmlacademy.ru/blog/21-fighting-the-space-between-inline-block-elements

    29. Float'омания: разъяснение как работает css свойство float https://habrahabr.ru/post/136588/

    30. All About Floats https://css-tricks.com/all-about-floats/

    31. All the Generic CSS Data Types https://bitsofco.de/generic-css-data-types/

    32. A COMPREHENSIVE GUIDE TO FONT LOADING STRATEGIES https://www.zachleat.com/web/comprehensive-webfonts/

    33. Use Cases For CSS Vertical Media Queries https://ishadeed.com/article/vertical-media-queries/

    34. How well do you know CSS display? https://www.chenhuijing.com/blog/how-well-do-you-know-display/

    35. Магия CSS. Глава 6. Переходы https://medium.com/@ABatickaya/%D0%BC%D0%B0%D0%B3%D0%B8%D1%8F-css-%D0%B3%D0%BB%D0%B0%D0%B2%D0%B0-6-%D0%BF%D0%B5

    36. Магия CSS. Глава 5. Типографика https://medium.com/@ABatickaya/%D0%BC%D0%B0%D0%B3%D0%B8%D1%8F-css-%D0%B3%D0%BB%D0%B0%D0%B2%D0%B0-5-%D1%82%D0

    37. Магия CSS. Глава 4. Цвет https://medium.com/@ABatickaya/%D0%BC%D0%B0%D0%B3%D0%B8%D1%8F-css-%D0%B3%D0%BB%D0%B0%D0%B2%D0%B0-4-%D1%86%D0%B2%D0%

    38. Магия CSS. Глава 3. Таблицы https://medium.com/@ABatickaya/%D0%BC%D0%B0%D0%B3%D0%B8%D1%8F-css-%D0%B3%D0%BB%D0%B0%D0%B2%D0%B0-3-%D1%82%D0%B0%

    39. Магия CSS. Глава 2. Раскладка https://medium.com/@ABatickaya/%D0%BC%D0%B0%D0%B3%D0%B8%D1%8F-css-%D0%B3%D0%BB%D0%B0%D0%B2%D0%B0-2-%D1%80%D0%B

    40. Магия CSS. Глава 1. Блок https://medium.com/@ABatickaya/%D0%BC%D0%B0%D0%B3%D0%B8%D1%8F-css-64baf79cd9a5#.f99kdtz6c

    41. Хорошие и плохие CSS-практики для начинающих https://medium.com/@ABatickaya/%D1%85%D0%BE%D1%80%D0%BE%D1%88%D0%B8%D0%B5-%D0%B8-%D0%BF%D0%BB%D

    42. Валидация форм на HTML и CSS https://medium.com/russian/%D0%B2%D0%B0%D0%BB%D0%B8%D0%B4%D0%B0%D1%86%D0%B8%D1%8F-%D1%84%D0%BE%D1%80%D0%BC-%D0%

    43. Background-blend-mode http://css.yoksel.ru/background-blend-mode/

    44. Automating Layouts Bring Flipboard’s Magazine Style To Web And Windows https://techcrunch.com/2014/03/23/layout-in-flipboard-for-web-and-win

    45. What is Vertical Align? https://css-tricks.com/what-is-vertical-align/

    46. vertical-align https://css-tricks.com/almanac/properties/v/vertical-align/

    47. Центрирование горизонтальное и вертикальное https://learn.javascript.ru/css-center

    48. 6 Methods For Vertical Centering With CSS http://vanseodesign.com/css/vertical-centering/

    49. Centering in CSS: A Complete Guide https://css-tricks.com/centering-css-complete-guide/

    50. CSS Diner забавная игра с задачками по CSS http://flukeout.github.io/

    51. Изучение CSS Разметки интерактивный учебник, показывающий как создавать раскладки на HTML и CSS http://ru.learnlayout.com/

    52. Google Fonts https://www.google.com/fonts https://css-tricks.com/snippets/css/basics-of-google-font-api/ http://2web-master.ru/rukovodst

    53. High-level advice and guidelines for writing sane, manageable, scalable CSS http://cssguidelin.es/

    54. css https://github.com/primer/primer

    55. css airbnb https://github.com/airbnb/css

    56. Руководство по оформлению HTML/CSS кода от Google https://habrahabr.ru/post/143452/

    57. CSS Style Guides https://css-tricks.com/css-style-guides/

    58. Нетология Правила оформления кода http://netology-university.bitbucket.org/codestyle/index.html

    59. https://css-tricks.com/specifics-on-css-specificity/

    60. http://learnlayout.com/

    61. https://github.com/Droogans/unmaintainable-code

  16. Подключение шрифтов

    Узнаю, как правильно подключать шрифты.

    1. Загрузка своего шрифта https://webref.ru/layout/html5-css3/text/font-face

    2. Как подключить шрифт http://site4business.net/css/kak-podklyuchit-shrift.html

    3. Подключение шрифта к странице: как нужно делать сейчас http://nicothin.pro/page/web-fonts

  17. Работа с SVG

    1. Использование SVG http://frontender.info/using-svg/

    2. SVG http://css.yoksel.ru/svg/

    3. SVG в HTML — из иллюстратора в браузер https://www.youtube.com/watch?v=S0OnkpIoEyQ

    4. Structuring, Grouping, and Referencing in SVG — The <g>, <use>, <defs> and <symbol> Elements https://sarasoueidan.co

    5. An Overview of SVG Sprite Creation Techniques https://24ways.org/2014/an-overview-of-svg-sprite-creation-techniques/

    6. Используем SVG на сайте https://habrahabr.ru/post/260645/

    7. SVG-иконки http://css.yoksel.ru/svg-icons/

    8. Icon System with SVG Sprites https://css-tricks.com/svg-sprites-use-better-icon-fonts/

    9. Использование SVG http://frontender.info/using-svg/

  18. SVG-спрайты

    1. SVG-спрайты http://nicothin.pro/page/svg-sprites

    2. Масштабируем CSS спрайты с SVG, убивая сразу трех зайцев https://habrahabr.ru/post/141654/

    3. SVG спрайты — 4 способа использования векторных спрайтов https://www.youtube.com/watch?v=S_wZSjLiUog

  19. CSS-анимации и плавные переходы

    1. Плавные переходы (transition) https://www.youtube.com/watch?v=QKRmRpq5CQc

    2. Css Animation http://css.yoksel.ru/css-animation/

    3. Очень простое руководство по CSS3-анимациям http://frontender.info/ochen-prostoe-rukovodstvo-po-css-animatsiyam/

  20. CSS-методологии

    1. БЭМ https://ru.bem.info/

    2. SMACSS https://smacss.com/

    3. An Introduction To Object Oriented CSS (OOCSS) https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/

    4. Методологии верстки: БЭМ, AMCSS, OOCSS, Atomic CSS, OPOR, MCSS, SMACSS, FUN, DoCSSa http://html5.by/blog/bem-amcss-oocss-atomiccss-opor-mcss

    5. The Basics of Object-Oriented CSS (OOCSS) http://www.hongkiat.com/blog/basics-of-object-oriented-css/

    6. BEM (БЭМ) & SMACSS — Sass методологии для организации проектов https://www.youtube.com/watch?v=vXW7w3ym8hg

    7. OOCSS, ACSS, BEM, SMACSS: what are they? What should I use? http://clubmate.fi/oocss-acss-bem-smacss-what-are-they-what-should-i-use/

    8. Правильный CSS: OOCSS, SMACSS, BEM и SASS http://codezona.com/css3-rules-oocss.html

    9. Medium’s CSS is actually pretty f***ing good. https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06#.ietexacz2

  21. CSS-фреймворки

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

    1. Bootstrap http://getbootstrap.com/

    2. Foundation http://foundation.zurb.com/sites.html

    3. Pure http://purecss.io/

    4. Skeleton http://getskeleton.com/

    5. 960 Grid System http://960.gs/

    6. Semantic UI http://semantic-ui.com/

  22. Верстка писем

    Тут свои правила и до сих пор верстка таблицами.

    1. Верстка email рассылок от А до Я для чайников https://habrahabr.ru/post/252279/

    2. How-to: Правила вёрстки email-писем https://habrahabr.ru/company/pechkin/blog/255819/

    3. Основы профессиональной верстки электронных писем https://habrahabr.ru/post/180013/

  23. Git

    Популярная система для хранения истории изменений и синхронизации результатов работы между участниками в проекте.

    1. Git - для новичков - #1 - основы https://www.youtube.com/watch?v=PEKN8NtBDQ0

    2. Github Tutorial https://try.github.io/levels/1/challenges/1

    3. Atlassian Git Tutorials https://www.atlassian.com/git/tutorials/

    4. Git How To https://githowto.com/

    5. Моя шпаргалка по работе с Git http://eax.me/git-commands/

    6. Шпаргалка по консольным командам Git https://github.com/nicothin/web-development/tree/master/git

    7. Pro Git, второе издание https://github.com/progit/progit2-ru

    8. Коллекция часто задаваемых вопросов по Git с возможностью поиска http://firstaidgit.ru/#/

    9. Практика работы с системами контроля версий http://eax.me/vcs-practice/

    10. https://try.github.io/levels/1/challenges/1

    11. https://www.atlassian.com/git/tutorials/

    12. https://www.codeschool.com/learn/git

  24. CSS-препроцессоры

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

    1. Sass http://sass-lang.com/ и SCSS

    2. Stylus http://stylus-lang.com/

    3. Less http://lesscss.org/

    4. PostCSS + PreCSS (одна из связок) http://postcss.org/ https://github.com/jonathantneal/precss

    5. Как работать с CSS-препроцессорами и БЭМ http://nicothin.github.io/idiomatic-pre-CSS/

    6. Handy Advanced Sass http://12devs.co.uk/articles/handy-advanced-sass/

    7. Build a Responsive, Single Page Portfolio with Sass and Compass http://webdesign.tutsplus.com/tutorials/build-a-responsive-single-page-portf

    8. http://stylus-lang.com/try.html - песочница для экспериментов. На этом же сайте и документация.

    9. http://css2stylus.com/ - конвертер из CSS в Stylus. Через него переводил normalize.css (всегда свежая версия) в normalize.styl для проекта b

    10. ENG https://www.youtube.com/playlist?list=PLLnpHn493BHFWQGA1PcyQZWAfR96a4CkH - хорошая обучалка по Stylus

    11. http://jeet.gs/ - неплохая сетка (grid) под названием Jeet для stylus. На самом сайте видеоуроки по использованию. Кстати в Codepen.io добав

    12. RUS http://www.youtube.com/watch?v=J5YMHSADniQ - хороший обзор Jeet.

    13. ENG https://www.youtube.com/watch?v=fRVRtO95VhU - видео по Rupture. Нужен для Jeet.

    14. http://prgssr.ru/development/estetichnyj-sass-chast-1-arhitektura-i-organizaciya.html

    15. http://prgssr.ru/development/estetichnyj-sass-chast-2-cveta-i-palitry.html

    16. http://prgssr.ru/development/estetichnyj-sass-chast-3-tipografika-i-vertikalnyj-ritm.html

  25. Шаблонизаторы

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

    1. Pug (бывший Jade) http://jade-lang.com/

    2. HAML http://haml.info/

    3. Twig http://twig.sensiolabs.org/

    4. Blade https://laravel.com/docs/5.1/blade

    5. http://html2jade.org/ - конвертер из HTML в Jade. Не во всех случаях работает корректно. Во всяком случае при конвертировании комментариев д

    6. RUS https://www.youtube.com/watch?v=QCsFDi1cQIk - обзор Jade - 1,5 часа

    7. ENG https://www.youtube.com/playlist?list=PLVHXiuTtgtcxuckHJUzrpe2n9gNIVF6JE - более короткие ролики по Jade

    8. Markdown http://daringfireball.net/projects/markdown/ - вроде как официальный сайт. https://github.com/adam-p/markdown-here/wiki/Markdown-Ch

  26. Тестирование верстки

    Плох тот разработчик, который не тестирует свою работу. Соответственно, цель этапа - научиться проверять, что же было сверстано.

    1. Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать https://habrahabr.ru/post/114256/

    2. Тестирование верстки http://xiper.net/collect/weekdays-front-end-dev/the-work-in-general/testing-layout

    3. Автоматизированное тестирование верстки веб-сайтов http://sqadays.com/talk/37161

  27. Программирование на Javascript

    Надо найти ответы на следующие вопросы:

    1. как сценарии внедряются в HTМL
    2. синтаксис, языковые конструкции, типы данных, массивы
    3. функции и замыкания
    4. что такое «область видимости», как её расширить или ограничить
    5. объекты и методы: объекты базовых типов, создание объектов пользовательских типов
    6. методы для обработки строк, дат
    7. регулярные выражения
    8. что такое «Document Object Model (DOM)», каким образом javascript может менять содержимое страницы HTML
    9. каким образом реализовать постепенное изменение элементов страницы (анимация)
    10. что такое «события» и как можно выполнить действие в ответ на событие
    11. что такое «формы» и «элементы ввода», какие бывают элементы ввода, как данные из формы отправляются на сервер
    12. как реализуется передача данных на сервер без отправки формы
    13. как получать данных с сервера без обновления страницы (AJAX)
    14. что из себя представляет формат JSON, как с ним работать
    15. то же самое про XML
    16. что такое «сборщик мусора»
    17. что такое «CORS», как настраивается
    18. почему на некоторых веб-страницах иногда в исходном коде HTML нет тех блоков, которые явно видно глазами
    19. Важно - нужно знать, откуда копипастить.
      Тебе нужно быть очень хорошо знакомым с одной-двумя-тремя популярными библиотеками на JavaScript. В идеале ты должен иметь представление о том, что определённый класс задач может быть решен с помощью определённых библиотек, хотя бы одной, но такие знания приходят с практикой. Вообще ты должен быть знаком с ними так близко, чтобы помнить, в какой части мануала по библиотеке можно найти описание форматов входных данных нужной тебе функции и какой будет результат, чтобы скопировать и вставить в свой код, а потом поправить, чтобы работало.
    20. Важно - инструменты программиста JavaScript
      У тебя должен быть удобный инструмент для разработки (IDE, Integrated Development Environment), чтобы он тебе подсвечивал код (syntax highlight) и подсказывал о синтаксических ошибках (syntax check), о формальных параметрах функций (type hinting), о стиле кодирования (code style), помогал писать код (live templates).
      Ты должен знать, как отлаживать скрипты в популярных браузерах (Firebug, Chrome Developer Tools и другое). Что такое точки останова, как управлять исполнением во время останова, как посмотреть и поменять содержимое переменных, как настроить останов по условию.

    Можно использовать любую существующую библиотеку.
    Например,
    для построения графиков www.highcharts.com
    для загрузки и передачи данных через AJAX: jquery.com + что-нибудь на сервере
    для всплывающих диалогов с картиками, видео и формами: fancyapps.com/fancybox иhttps://jqueryui.com/dialog/
    для валидации форм rickharrison.github.io/validate.js
    для календаря https://jqueryui.com/datepicker/
    для автодополнения https://jqueryui.com/autocomplete/
    для передачи данных между несколькими пользователями socket.io или обычный AJAX

    1. JavaScript Garden http://bonsaiden.github.io/JavaScript-Garden/ru/

    2. javascript.ru: Современный учебник JavaScript http://learn.javascript.ru/

    3. курсы на HTML academy

    4. курсы на codecademy https://www.codecademy.com/learn/javascript

    5. курсы на code school https://www.codeschool.com/courses/javascript-road-trip-part-1

    6. Паттерн «Модуль» http://forwebdev.ru/javascript/module-pattern/

    7. Возьми из сборника задач по javascript любой скрипт случайно и вслух расскажи, что он делает. Важно - читать и понимать чужой код намного ва

    8. Напиши скрипт на JS, который в заданном тексте удалит один или два символа, выбранных случайно Усложнение: удалять можно только буквы в слов

    9. На страницу HTML нужно встроить график курса доллара по отношению к рублю. Формат входного массива значений курса определи сам, исходя из св

    10. При клике по картинкам, вставленным в текст HTML, показывать всплывающее окно для просмотра увеличенной картинки. Усложнение: в всплывающем

    11. По клику на кнопку "Click me" показать всплывающую форму. Усложнение: реализовать проверку данных на корректность перед отправкой

    12. К форме ввода данных на поле ввода даты "навешать" всплывающий календарь для выбора даты. Усложнение: сделать форму календаря муль

    13. Сделать пред-просмотр веб-страницы HTML с разными темами. Тему страницы выбирать через селектор на javascript, а показывать в фрейме. Усложн

    14. Задачи повышенной сложности, исходя из личного интереса Реализовать форму для многошагового мастера: форма должна состоять из нескольких стр

    15. Реализовать однопользовательскую браузерную игру "змейка", "тетрис", "найди пару"

    16. Реализовать многопользовательскую браузерную игру "крестики-нолики", "морской бой" на два игрока в режиме "hot seat

    17. Реализовать todo-list. Пользователь вводит список, затем он превращается в строки с "чек-боксами". Когда "чекбокс" включ

    18. Реализовать простой графический редактор. Пусть рисуется точка в месте, где пользователь кликнул. Усложнение: добавить переключатель режимов

    19. How to Create a Circular Progress Button http://tympanus.net/codrops/2014/04/09/how-to-create-a-circular-progress-button/

    20. Round Up: 38 Neat CSS & JS Hover Effects http://www.cssdesignawards.com/articles/round-up-38-neat-css-js-hover-effects/101/

    21. Создаем плеер, как вконтакте http://tyufyakin.com/blog/sozdaem_pleer_kak_v_vkontakte/

    22. Выразительный JavaScript: Введение https://habrahabr.ru/post/240219/

    23. Выразительный Javascript https://karmazzin.gitbooks.io/eloquentjavascript_ru/content/

    24. JavaScript Functions and Helpers https://plainjs.com/javascript/

    25. Decoupling Your HTML, CSS, and JavaScript https://philipwalton.com/articles/decoupling-html-css-and-javascript/

    26. http://frontender.info/programmirovanie-klassami-v... - Отличная статья Программирование классами. Здесь также дается отличное понимание тог

    27. http://frontender.info/es6-classes-final/ - огромная классная статья про Финальный синтаксис классов в ES6.

    28. https://github.com/DrkSephy/es6-cheatsheet - хорошая шпаргалка по ES6

    29. https://medium.com/javascript-scene/how-to-learn-e... - подборка материалов по ES6 на Medium.com

    30. ENG https://www.youtube.com/playlist?list=PLnIJ02CcZiYCCbbRZ9uZG6Dbf6AaA-NWY - JavaScript ES6 - The Next Level. Может пригодится.

    31. https://css-tricks.com/lets-learn-es2015/ - Let’s Learn ES2015. небольшой обзор ES6 на английском.

    32. https://habrahabr.ru/post/264813/ - интересная статья на хабре Тонкости ES6: Наследование (часть 1)

    33. https://habrahabr.ru/post/261187/ - интересная статья на хабре Тонкости ES6: Коллекции (часть 1)

    34. https://habrahabr.ru/post/261417/ - интересная статья на хабре Тонкости ES6: Коллекции (часть 2)

    35. https://github.com/rwaldron/tc39-notes - заметки по EcmaScript TC39 встречам

    36. https://learn.javascript.ru/es-modern - учебник по современному ES6 от Ильи Кантора

    37. http://exploringjs.com/es6/ - книга Exploring ES6

    38. интересный курс JavaScript Best Practices на Pluralsight https://www.pluralsight.com/courses/javascript-best-practices

    39. https://github.com/KarafiziArtur/javascript-1 - классный стайлгайд по JavaScript ES6

    40. http://bytearcher.com/articles/understanding-prototype-property-in-javascript/ - понимание prototype в JavaScript

    41. http://www.sitepoint.com/javascript-modules-bundli... - понимание JavaScript модулей Bundling & Transpiling

    42. По JavaScript и ES6 нашел хорошую подборку "книг" на GitHub - https://github.com/getify/You-Dont-Know-JS

    43. По курсу JavaScript in Action JavaScript Projects сделал простейший калькулятор. Курс интересный. Для тех, кто проходит FreeCodeCamp - хорош

    44. JavaScript: подготовка к работе - еще один бесплатный курс от Хекслет, 2-х часовой — "посвящен установке и настройке рабочего окружения

    45. Rapid JavaScript Training (by Mark Zamoyta) на Pluralsight. Курс в очень доступной и понятной форме не только объясняет основные принципы ра

    46. ES6 - Rapid ES6 Training https://www.pluralsight.com/courses/rapid-es6-training

    47. Паттерны для масштабируемых JavaScript-приложений http://largescalejs.ru/

    48. Learning JavaScript Design Patterns https://addyosmani.com/resources/essentialjsdesignpatterns/book/

    49. Ускоренный курс по основам языка от Mozilla Developer Network (MDN) https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web

    50. Грамматика и типы https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Grammar_and_types

    51. Порядок выполнения и обработка ошибок https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Control_flow_and_error_handling

    52. Циклы и итерации https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/%D0%A6%D0%B8%D0%BA%D0%BB%D1%8B_%D0%B8_%D0%B8%D1%82%D0%B5%D1%80%D

    53. Функции в JavaScript https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Functions

    54. Выразительный Javascript https://karmazzin.gitbooks.io/eloquentjavascript_ru/content/

    55. Что такое Объектная Модель Документа (DOM)? https://developer.mozilla.org/ru/docs/DOM/DOM_Reference/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%

    56. JavaScript Objects in Detail http://javascriptissexy.com/javascript-objects-in-detail/

    57. Что такое DOM? http://frontender.info/dom/

    58. Руководство по DOM https://developer.mozilla.org/ru/docs/DOM/DOM_Reference

    59. Events and the DOM https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events

    60. Examples of web and XML development using the DOM https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples

    61. How to create a DOM tree https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/How_to_create_a_DOM_tree

    62. Locating DOM elements using selectors https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_sel

    63. JavaScript Functions and Helpers https://plainjs.com/javascript/

    64. Chrome DevTools https://developers.google.com/web/tools/chrome-devtools/

    65. Инструменты разработчика Firefox https://developer.mozilla.org/ru/docs/Tools/Page_Inspector

    66. Наследование и цепочка прототипов https://developer.mozilla.org/ru/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

    67. Замыкания, область видимости https://learn.javascript.ru/functions-closures

    68. Замыкания https://developer.mozilla.org/ru/docs/Web/JavaScript/Closures

    69. Параллельная модель и цикл событий https://developer.mozilla.org/ru/docs/Web/JavaScript/EventLoop

    70. Всплытие и перехват https://learn.javascript.ru/event-bubbling

    71. Функции call(), apply() и bind() в JavaScript http://getinstance.info/articles/javascript/call-apply-and-bind-functions/

    72. What's the difference between a promise and a callback in Javascript? https://www.quora.com/Whats-the-difference-between-a-promise-and-

    73. Variable and Function Hoisting in JavaScript http://adripofjavascript.com/blog/drips/variable-and-function-hoisting

    74. Привязка контекста и карринг: "bind" https://learn.javascript.ru/bind

    75. The State Of JavaScript - A Shift From Imperative To Declarative http://www.tysoncadenhead.com/blog/the-state-of-javascript-a-shift-from-imp

    76. Three D’s of Web Development #1: Declarative vs. Imperative http://developer.telerik.com/featured/three-ds-of-web-development-1-declarative-

    77. const https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/const

    78. Classes https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Classes

    79. Шаблонные строки https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/template_strings

    80. Наследование и цепочка прототипов https://developer.mozilla.org/ru/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

    81. ES5, ES6, ES2016, ES.Next: What's going on with JavaScript versioning? http://benmccormick.org/2015/09/14/es5-es6-es2016-es-next-whats-

    82. Getting Started with ES6 – The Next Version of JavaScript http://weblogs.asp.net/dwahlin/getting-started-with-es6-%E2%80%93-the-next-version

    83. ECMAScript 6 — New Features: Overview & Comparison http://es6-features.org/#Constants https://github.com/lukehoban/es6features

    84. Decoupling Your HTML, CSS, and JavaScript https://philipwalton.com/articles/decoupling-html-css-and-javascript/

    85. The Observer Pattern https://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript

    86. The Facade Pattern https://addyosmani.com/resources/essentialjsdesignpatterns/book/#facadepatternjavascript

    87. The Revealing Module Pattern https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript

    88. The Singleton Pattern https://addyosmani.com/resources/essentialjsdesignpatterns/book/#singletonpatternjavascript

    89. The Factory Pattern https://addyosmani.com/resources/essentialjsdesignpatterns/book/#factorypatternjavascript

    90. The Decorator Pattern https://addyosmani.com/resources/essentialjsdesignpatterns/book/#decoratorpatternjavascript

    91. Learning JavaScript Design Patterns https://addyosmani.com/resources/essentialjsdesignpatterns/book/

    92. How To Use Arguments And Parameters In ECMAScript 6 https://www.smashingmagazine.com/tag/javascript/

    93. JavaScript Weekly http://javascriptweekly.com/

    94. https://www.reddit.com/r/javascript/

    95. JavaScript Jabber https://devchat.tv/js-jabber

    96. Airbnb JavaScript Style Guide https://github.com/airbnb/javascript

    97. rwaldron/idiomatic.js https://github.com/rwaldron/idiomatic.js/

    98. felixge/node-style-guide https://github.com/felixge/node-style-guide

    99. Coding Style https://developer.mozilla.org/ru/docs/Developer_Guide/Coding_Style

    100. https://github.com/lodash/lodash

    101. https://github.com/jashkenas/underscore

    102. https://github.com/babel/babel

    103. https://github.com/TryGhost/Ghost

    104. https://github.com/NodeBB/NodeBB

    105. https://github.com/keystonejs/keystone

    106. http://www.dofactory.com/javascript/design-patterns

    107. http://nodeschool.io/

    108. https://github.com/getify/You-Dont-Know-JS

    109. https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3#.vwsvpx6da

    110. https://medium.com/javascript-scene/why-hiring-is-so-hard-in-tech-c462c3230017#.lraxp3cu3

  28. Базовые принципы верстки

    Изучение статей, которые помогут лучше понимать специфику работы.

    1. Базовые принципы вёрстки http://copist.ru/blog/2015/08/29/web-layout-basics/

    2. habrahabr: Как сверстать веб-страницу https://habrahabr.ru/post/202408/

    3. Как сверстать веб-страницу. Часть 2 — Bootstrap https://habrahabr.ru/post/211032/

    4. Как сверстать тему для WordPress https://habrahabr.ru/post/228523/

    5. Как сверстать шаблон для Joomla https://habrahabr.ru/post/256635/

    6. Верстка для самых маленьких. Верстаем страницу по БЭМу https://habrahabr.ru/post/203440/

    7. За что HTML-верстальщики так не любят веб-дизайнеров https://habrahabr.ru/post/173271/

    8. Чек-лист вёрстки. Что можно отдавать клиенту, а что надо переделывать https://habrahabr.ru/post/114256/

    9. Еще одни чек-лист https://github.com/ihorzenich/html5checklist

    10. И еще один http://www.slideshare.net/IgorZenich/-15529575

    11. Backend vs Frontend http://copist.ru/blog/2015/08/26/backend-vs-frontend/

  29. Технологии асинхронной передачи данных Навыки создания тестовых «затычек» на стороне сервера, чтобы можно было разрабатывать асинхронный обм

    1. AJAX

    2. WebSocket

    3. Comet

    4. CORS

    5. Навыки создания тестовых «затычек» на стороне сервера, чтобы можно было разрабатывать асинхронный обмен данными, пока бакенд не готов

    6. Что такое AJAX? https://developer.mozilla.org/ru/docs/AJAX/%D0%A1_%D1%87%D0%B5%D0%B3%D0%BE_%D0%BD%D0%B0%D1%87%D0%B0%D1%82%D1%8C

    7. What Is Ajax & How Is It Used In Modern Web Development? http://www.vandelaydesign.com/what-is-ajax-webdev/

    8. ajax https://www.reddit.com/r/explainlikeimfive/comments/19gvn9/explain_it_like_im_5_what_is_ajax/

    9. Fetch API https://developer.mozilla.org/ru/docs/Web/API/Fetch_API

    10. fetch API https://davidwalsh.name/fetch

    11. What is the meaning of polyfills in HTML5? http://stackoverflow.com/questions/7087331/what-is-the-meaning-of-polyfills-in-html5

    12. Документация к polyfill https://github.com/github/fetch

  30. Базовые знания про UML

  31. Дизайн сайта портфолио

  32. Контент сайта портфолио

  33. SVG-иконки дл сайта при необходимости

  34. Форма отправки сообщения

  35. Адаптивность

  36. Двуязычность

  37. Кроссбраузерность

  38. Чтение рекомендованной литературы и статей

    1. Использование мета-описаний https://yandex.ru/support/webmaster/recommendations/using-meta-desc.xml

    2. Brackets для сомневающихся и новичков https://habrahabr.ru/post/242623/

    3. Раздел верстка на http://beloweb.ru/category/vyorstka

    4. Зачем использовать атрибут языка? https://www.w3.org/International/questions/qa-lang-why.ru

    5. Важные аспекты работы браузера для разработчиков. Часть 1 https://habrahabr.ru/company/dataart/blog/304138/

    6. Важные аспекты работы браузера для разработчиков. Часть 2 https://habrahabr.ru/company/dataart/blog/304934/

    7. Как сверстать веб-страницу. Часть 1 https://habrahabr.ru/post/202408/

    8. Создание веб-сайта. Курс молодого бойца https://habrahabr.ru/post/273795/

    9. От нуля до героя фронтенда (Часть 1) https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%83%D0%BB%D1%8F-%D0%B4%D0%BE-%D0%B3%D0%B5%D1%80%D0%BE%

    10. Узнать, что такое рефакторинг https://refactoring.guru/ru

    11. Курсы по веб-разработке https://geekbrains.ru/

    12. Как думать на SQL? https://habrahabr.ru/post/305926/

    13. ES6 по-человечески https://habrahabr.ru/post/305900/

    14. https://www.freecodecamp.com/ Free Code Camp - очень похожи на все остальные курсы такого же плана, но отличаются акцентом на практику, а ко

    15. https://academy.yandex.ru/events/frontend/ Яндекс-ШРИ - Видео-запись лекций от родного поисковика. Ориентация тоже не совсем на начинающих.

    16. Что такое Single Page Application (SPA)

    17. Что такое AMD (RequireJS)

    18. Переводим в код 5 действительно полезных шаблонов адаптивной разметки https://habrahabr.ru/post/141199/

    19. Подборка вопросов на собеседовании на должность Front-end Junior - http://www.pvsm.ru/javascript/37681

    20. Интересная подборка из 400 ссылок по DevOps & Sysadmins - https://medium.com/@MorpheusData/400-free-resource...

    21. Привычка Stack Overflow https://habrahabr.ru/company/Voximplant/blog/281845/

    22. https://developers.google.com/structured-data/testing-tool/ - проверка структурности кода и как будет видеть Google-поиск вашу страницу посл

    23. https://habrahabr.ru/post/282407/ - лучшие практики Yii по мнению автора

    24. Каково это — быть разработчиком, когда тебе сорок https://habrahabr.ru/post/282674/

    25. How Long Does Free Code Camp Take? https://medium.freecodecamp.com/how-long-does-free-code-camp-take-f986202346ef#.3wo9ioqxv

    26. 10 книг https://medium.mybridge.co/the-most-useful-free-ebooks-for-web-developers-3854767ee52f#.8mgzi5fz7

    27. Основы программирования - 16-ти часовой бесплатный курс от Хекслет — "рассчитан на новичков без опыта в программировании, но будет поле

    28. http://it-ebooks.info - сборник книг (в том числе и лучших) IT-сферы. На английском языке. Можно найти все книги O'Reilly и многие друг

    29. Как в IT-компаниях смотрят на программистов без диплома при приёме на работу? https://tproger.ru/experts/17/

    30. Почему стоит нанимать джуниоров https://habrahabr.ru/company/ua-hosting/blog/300928/

    31. HTML5 WebSockets http://htmlhook.ru/html5-websockets.html

    32. WebSockets — полноценный асинхронный веб https://habrahabr.ru/post/79038/

    33. Гильоши https://habrahabr.ru/post/305354/

    34. Жизнь программиста https://ru.hexlet.io/courses/prog-life

    35. Адаптивно-отзывчивый: разбираемся в терминологии http://frontender.info/adaptive-vs-responsive-terminology/

    36. Дизайн для программистов https://medium.com/russian/%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D0%B4%D0%BB%D1%8F-%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D

    37. Что ожидать от собеседования на должность HMTL-Верстальщик/Junior frontend программист. https://medium.com/@ermo4enkov/%D1%87%D1%82%D0%BE-%D

    38. О чём должен помнить веб-дизайнер https://github.com/nicothin/web-design

    39. Процесс визуализации https://developers.google.com/web/fundamentals/performance/critical-rendering-path/?hl=ru

    40. Возвращаемся к вопросу производительности CSS: селекторы, раздутые и тяжелые стили http://frontender.info/css-performance-revisited-selector

    41. Погружение в темные воды загрузки скриптов https://habrahabr.ru/post/182310/

    42. CSS vs SVG: The Final Round(up) http://blogs.adobe.com/dreamweaver/2015/09/css-vs-svg-the-final-roundup.html

    43. Бесплатная книга по типографии Professional Web Typography https://prowebtype.com/

    44. https://dribbble.com/ - много вариантов дизайна

    45. Развиваем дизайнерское чутье https://medium.com/russian/%D1%80%D0%B0%D0%B7%D0%B2%D0%B8%D0%B2%D0%B0%D0%B5%D0%BC-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B

    46. HTML5 Reset https://github.com/murtaugh/HTML5-Reset

    47. https://atom.io/

    48. https://www.sublimetext.com/

    49. Хорошие и плохие CSS-практики для начинающих https://medium.com/@ABatickaya/%D1%85%D0%BE%D1%80%D0%BE%D1%88%D0%B8%D0%B5-%D0%B8-%D0%BF%D0%BB%D

    50. Quick Tip: Create Your Own Simple Reset.css File http://code.tutsplus.com/tutorials/weekend-quick-tip-create-your-own-resetcss-file--net-20

    51. CSS Tools: Reset CSS http://meyerweb.com/eric/tools/css/reset/index.html

    52. CSS Vendor Prefixes http://webdesign.about.com/od/css/a/css-vendor-prefixes.htm

    53. Вендорные префиксы http://starhack.ru/vendor-prefixes/

    54. Постпроцессор http://postcss.org/

    55. CSS Architectures: Refactor Your CSS https://www.sitepoint.com/css-architectures-refactor-your-css/

    56. My (Simple) Workflow To Design And Develop A Portfolio Website https://www.smashingmagazine.com/2013/06/workflow-design-develop-modern-portf

    57. GUI Architectures http://martinfowler.com/eaaDev/uiArchs.html

    58. Understanding MVVM - A Guide For JavaScript Developers https://addyosmani.com/blog/understanding-mvvm-a-guide-for-javascript-developers/

    59. Understanding MVC And MVP (For JavaScript And Backbone Developers) https://addyosmani.com/blog/understanding-mvc-and-mvp-for-javascript-and-

    60. MVC Architecture https://developer.chrome.com/apps/app_frameworks

    61. Web Sites vs. Web Apps: What the experts think http://www.visionmobile.com/blog/2013/07/web-sites-vs-web-apps-what-the-experts-think/

    62. Разделение ответственности https://ru.wikipedia.org/wiki/%D0%A0%D0%B0%D0%B7%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BE%D1%82%D0%B2%D0%

    63. Model-View-Presenter https://ru.wikipedia.org/wiki/Model-View-Presenter

    64. Model-View-ViewModel https://ru.wikipedia.org/wiki/Model-View-ViewModel

    65. Model-View-Controller https://ru.wikipedia.org/wiki/Model-View-Controller

    66. Don’t repeat yourself https://ru.wikipedia.org/wiki/Don%E2%80%99t_repeat_yourself

    67. Разделение ответственности https://ru.wikipedia.org/wiki/%D0%A0%D0%B0%D0%B7%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BE%D1%82%D0%B2%D0%

    68. Принцип единственной обязанности https://ru.wikipedia.org/wiki/%D0%9F%D1%80%D0%B8%D0%BD%D1%86%D0%B8%D0%BF_%D0%B5%D0%B4%D0%B8%D0%BD%D1%81%D1%

    69. Frontend Dev: хороший, плохой, злой. Часть 1: Хороший путь https://medium.com/russian/frontend-dev-%D1%85%D0%BE%D1%80%D0%BE%D1%88%D0%B8%D0%B

    70. https://medium.freecodecamp.com/learning-how-to-learn-the-most-important-developer-skill-7bf62dfaf67d#.nf0kko3wg

    71. https://www.smashingmagazine.com/2016/08/a-beginners-guide-to-progressive-web-apps/?utm_source=mybridge&utm_medium=email&utm_campaig

    72. https://css-tricks.com/case-study-boosting-front-end-performance/?utm_source=mybridge&utm_medium=email&utm_campaign=read_more

    73. https://seesparkbox.com/foundry/performance_during_development?utm_source=mybridge&utm_medium=email&utm_campaign=read_more

    74. https://medium.freecodecamp.com/what-is-an-api-in-english-please-b880a3214a82#.ai45s61ao

    75. https://scotch.io/tutorials/dns-explained-how-your-browser-finds-websites?utm_source=mybridge&utm_medium=email&utm_campaign=read_mor

    76. https://www.smashingmagazine.com/2016/08/using-a-static-site-generator-at-scale-lessons-learned/?utm_source=mybridge&utm_medium=email&am

    77. Offline Storage for Progressive Web Apps

  39. Masking in CSS

    Разобраться, что это такое и насколько необходимо.

    1. Статья на CSS Tricks. https://css-tricks.com/clipping-masking-css/

    2. Статья на HTML5rocks. Не совсем про маски, но к ним применимо. http://www.html5rocks.com/en/tutorials/shapes/getting-started/

    3. Про режимы наложения http://css.yoksel.ru/blend-modes-fallback/

    4. Про маски http://css.yoksel.ru/css-and-svg-masks/

    5. How to make an inkblot avatar with mask-image http://creative-punch.net/2014/02/make-inkblot-avatar-mask-image/

    6. Making glowing lights with CSS http://creative-punch.net/2014/01/making-glowing-lights-css/

  40. Изучение flexbox

    1. Спецификация http://www.w3.org/TR/css-flexbox-1/

    2. Руководство на css-tricks https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    3. Гайд от frontender.info http://frontender.info/a-guide-to-flexbox

    4. Практическое применение FlexBox https://habrahabr.ru/post/242545/

    5. How to Build a News Website Layout with Flexbox http://webdesign.tutsplus.com/tutorials/how-to-build-a-news-website-layout-with-flexbox--cms

    6. Что такое Flexbox? Описание всех css свойств, основные принципы, преимущества и недостатки. http://html5.by/blog/flexbox/

    7. Почему научиться программировать так чертовски тяжело? https://habrahabr.ru/company/hexlet/blog/251411/

    8. MIT - один из престижнейших технологических вузов мира оцифровал и выложил в открытый доступ всю свою учебную программу. http://ocw.mit.ed

    9. http://www.tutorialspoint.com/index.htm - заслуживающий внимание сайт. - библиотека туториалов по невероятому количеству технологий, каждый

    10. Flexbox Fundamentals за 15 минут - серия коротких уроков по флексбок общей сложностью в 15 минут. https://egghead.io/courses/flexbox-fundam

  41. Общее представление о тестировщиках Karma + Mocha + Chai

  42. Time Managment и управление проектами

    1. https://www.primaerp.com/ PrimaERP - чешский сервис полностью русифицирован, полностью бесплатен без ограничений функционала. В бесплатную в

    2. https://trello.com/ Trello - в представлении не нуждается.

  43. TypeScript (and Angular)

    В AngularJS первой версии необходимо скачать файл angular.d.ts для правильного понимания тайпскриптом самого ангуляра, иначе, при компиляции будет писать ошибку TS2304: Cannot find name 'angular'. А также еще нужно будет таким же образом подключить jquery.d.ts, но нужно чтобы он был в папкеjquery выше самого angular.d.ts - ../jquery/jquery.d.ts

    PhpStorm 2016.1 по умолчанию может работать с TypeScript, для этого нужно лишь активировать его в настройках: Ctrl + Alt + S -> Languages & Frameworks -> TypeScript -> поставить галочку Enable TypeScript Compiler. Компилироваться он будет в то же место, где и находится ваш *.ts файл, но можно задать и другой путь.

    1. https://github.com/DefinitelyTyped/DefinitelyTyped - определения типов в файлах *.d.ts для огромной кучи библиотек и фреймворков.

    2. http://www.typescriptlang.org/ - официальный сайт с документацией, песочницей и туториалами.

    3. RUS https://www.youtube.com/watch?v=r_yBvQxEbFg - неплохое введение в TypeScript.

    4. ENG https://www.youtube.com/watch?v=y28iHRuAHnw - 4-х часовая(!) лекция по Angular2 + TypeScript. Осилит только самый суровый IT-шник :)

    5. ENG https://www.youtube.com/watch?v=R62iQvZ0bdQ - Angular2 Beta, RxJS, TypeScript

    6. RUS https://www.youtube.com/watch?v=v6A17KwsV08 - очень полезное часовое видео с разбором TypeScript в песочнице и созданием приложения.

    7. RUS https://www.youtube.com/watch?v=_3n4JdZdXWo - тоже неплохой доклад по TypeScript

    8. ENG https://youtu.be/PyRrbEDu6qs?list=PLwpsA4yH105kF-6HkqamR6dqRy5k0oF1X - туториал по TypeScript типам и далее в плейлисте туториал по функ

    9. ENG https://www.youtube.com/watch?v=7xOubdqyqaY - интересное видео по настройке Gulp + TypeScript + Angular2

    10. ENG https://www.youtube.com/watch?v=_4ltNDqusdA&list=PLPCoRccv3E8XdnXJzawgNGRYul-v7C0ZB&index=2 - конвертирование простого js в Type

    11. http://johnpapa.net/es5-es2015-typescript/ - неплохая статья про ES5/ES6/TypeScript

    12. http://bonsaiden.github.io/JavaScript-Garden/ru/ - не про TypeScript, но про JavaScript - хорошая обучалка/шпаргалка.

    13. http://www.hirez.io/ - "Готовимся к Angular2" - забавный, шуточный мини-курс.

    14. How is AngularJS different from jQuery http://stackoverflow.com/questions/13151725/how-is-angularjs-different-from-jquery

    15. Документ ация https://github.com/AngularjsRUS/angular-doc

    16. Tutorial / 0 - Bootstrapping https://docs.angularjs.org/tutorial/step_00

    17. A curated list of helpful material to start learning Angular 2 https://github.com/timjacobi/angular2-education

    18. Angular Style Guide https://github.com/johnpapa/angular-styleguide

    19. Build an Etsy Clone with Angular and Stamplay (Part 1) https://scotch.io/tutorials/build-an-etsy-clone-with-angular-and-stamplay-part-1

    20. Build a Real-Time Status Update App with AngularJS & Firebase https://www.sitepoint.com/real-time-status-update-app-angularjs-firebase/

    21. The free, weekly newsletter of the best AngularJS content on the web. http://www.ng-newsletter.com/

    22. https://egghead.io/

    23. https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

    24. https://scotch.io/tutorials/creating-a-single-page-todo-app-with-node-and-angular

  44. Микроразметка

    1. http://schema.org - главный сайт по микроразметке. Поддерживается самыми главными поисковиками - Google, Yandex, Yahoo и т.д. И рекомендуетс

    2. http://microformats.org/code/hcard/creator - генератор кода для подобия визитной карточки автора с микроразметкой

    3. http://microformats.org/code/hcalendar/creator - генератор кода для календарного события с микроразметкой

    4. http://microformats.org/code/hreview/creator - генератор кода для отзыва, обзора с микроразметкой

    5. http://rdfa.info/play/ - еще один инструмент по работе с микроразметкой

  45. React + Flux

    1. https://facebook.github.io/flux/

    2. https://facebook.github.io/react/

    3. https://www.youtube.com/watch?list=PLb0IAmt7-GS188xDYE-u1ShQmFFGbrk0v&v=nYkdrAPrdcw

    4. https://facebook.github.io/react/docs/getting-started.html

    5. React.js Introduction For People Who Know Just Enough jQuery To Get By http://reactfordesigners.com/labs/reactjs-introduction-for-people-who

    6. https://facebook.github.io/flux/docs/overview.html

    7. https://github.com/enaqx/awesome-react

    8. How to Build a Todo App Using React, Redux, and Immutable.js https://www.sitepoint.com/how-to-build-a-todo-app-using-react-redux-and-immutab

    9. http://code.tutsplus.com/courses/build-a-microblogging-app-with-flux-and-react

    10. https://scotch.io/tutorials/learning-react-getting-started-and-concepts

    11. https://egghead.io/courses/react-fundamentals

    12. https://facebook.github.io/react/docs/getting-started.html

    13. https://css-tricks.com/learning-react-redux/

    14. https://scotch.io/tutorials/learning-react-getting-started-and-concepts

  • 5010
  • 15 июля 2016, 23:42
Регистрация

Регистрация

Уже зарегистрированы?
Быстрая регистрация через соцсети
Вход на сайт

Входите.
Открыто.

Еще не зарегистрированы?
 
Войти через соцсети
Забыли пароль?