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

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

1. Lingualeo

2. duolingo

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

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

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

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

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

Работа с 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/

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

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/

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

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/

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

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

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

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

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

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

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

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

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

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

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

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

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

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/

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

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

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

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

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

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

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

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

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

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

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

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

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/

Изучение 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

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

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

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

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

TypeScript (and Angular)

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

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

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/ - еще один инструмент по работе с микроразметкой

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