1

Этап 1

HTML и CSS

2

Этап 2

JavaScript: теория

3

Этап 3

Roadmaps

4

Этап 4

JavaScript: Практика

5

Этап 5

JavaScript-фреймворки. Основы

6

Этап 6

JavaScript at Mozilla Developer Network (MDN)

7

Этап 7

JavaScript: The Right Way

8

Этап 8

Superhero.js

9

Этап 9

JavaScript Garden

10

Этап 10

Learn Javascript by Example

11

Этап 11

Выразительный JavaScript

12

Этап 12

100+ Free resources for learning Full Stack Web Development

13

Этап 13

Laracasts.com > Skills > Front-End

1

Этап 1

HTML и CSS

2

Этап 2

JavaScript: теория

3

Этап 3

Roadmaps

4

Этап 4

JavaScript: Практика

5

Этап 5

JavaScript-фреймворки. Основы

6

Этап 6

JavaScript at Mozilla Developer Network (MDN)

7

Этап 7

JavaScript: The Right Way

8

Этап 8

Superhero.js

9

Этап 9

JavaScript Garden

10

Этап 10

Learn Javascript by Example

11

Этап 11

Выразительный JavaScript

12

Этап 12

100+ Free resources for learning Full Stack Web Development

13

Этап 13

Laracasts.com > Skills > Front-End

21 марта 2017
Подробно Кратко

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

Автор не отписывался в цели 6 лет 3 месяца 6 дней

Автор цели

Mr De

Россия

43 года

Отправить сообщение

Добавить в друзья

Общая

Прокачать Front-End навыки

Хоть я и Back-end разработчик с навыками QA-автоматизации, всё же прокачаю в том числе и Front-End навыки.

Благо, тут и шаблончик классный нашелся. Я его переделал и расширил. Большей частью информацией с других целей на Смартпрогрессе. Надеюсь, обладатели других Front-End целей не обидятся, что я собрал огромные массы ссылок на всякие полезняшки в эту цель.

  1. HTML и CSS

    Основы HTML и CSS

    В разработке фронтенда все начинается с HTML (рус) и CSS (рус.). HTML и CSS контролируют то, что вы видите на странице. HTML диктует содержимое в то время как CSS регулирует стили и раскладку.

    1. Пособия по HTML (рус.) и CSS (рус.) от Mozilla Developer Network (MDN). MDN предоставляет пошаговые объяснения важных концепций HTML и CSS. К тому же каждая глава длинной всего в один экран и проиллюстрирована интерактивными демо на CodePen и JSFiddle.
    2. Курс Создай сайт (англ.) от CodeAcademy. Там основа для построения сайтов на HTML и CSS. А тиак же Построение веб-форм (англ.)  —  еще одно руководство от CodeAcademy.
    3. CSS Diner (англ.) — забавная игра с задачками по CSS.
    4. Другой важный аспект HTML и CSS  —  раскладка. LearnLayout (рус.) — интерактивный учебник, показывающий как создавать раскладки на HTML и CSS.
    5. Освоение Google Fonts (англ.) при помощи статьи Основы Google Font API (англ.) от CSSTricks или Руководство по Google Font API (рус.). Типографика  —  это фундаментальная основа интерфейса. Бесплатная онлайн-книга Professional Web (англ.) от Donny Truong научит всему, что надо знать о типографике во фронтенд-разработке.
    6. CodePen— это площадка для фронтенда (“песочница”), где можно писать HTML и CSS код без создания файлов на компьютере. Там так же есть функция живого предпросмотра, которая обновляется сразу после сохранения кода.

    Практика основ HTML и CSS

    Будем использовать Dribbble, который полон вдохновляющего дизайна. На Dribbble найти дизайн, код для которого можно написать за пару часов. Некоторые примеры, с которых можно начать: 1, 2, 3, 4 и 5. Эти дизайны ориентированны в первую очередь на мобильную разработку, потому что они менее сложны, чем их аналоги для обычных экранов. Затем попробовать сверстать их на CodePen. Если что непонятно, то в помощь StackOverflow (англ.).

    Другой полезной практикой будет пойти на такие сайты, как Medium, AirBnB и Dropbox и при помощи инструментов разработчика (англ.) посмотреть как реализована разметка и стили.

    Еще некоторые примеры на CodePen:

    Некоторые веб-сайты используют CSS фреймворки или обфускацию кода (рус.), затрудняя чтение. Поэтому ниже подборка сайтов с хорошим дизайном и легким для чтения кодом:

    • Dropbox for Business: Попробовать повторить их секцию с баннерами (так называемые hero image (англ.))
    • AirBnB: Попробовать повторить их футер
    • PayPal: Попробовать повторить их навигацию
    • Invision: Попробовать повторить секцию регистрации (signup) в нижней части страницы
    • Stripe: Попробовать повторить секцию оплаты

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

    Семантичная разметка

    Одним из лучших правил для HTML и CSS это написание семантичной разметки. Хорошая веб-семантика означает использование подходящих HTML тегов и “говорящих” названий классов в CSS, которые будут передавать структурный смысл.

    Соглашение об именах в CSS

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

    Сброс CSS

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

    Кроссбраузерная поддержка

    Кроссбраузерная поддержка означает что ваш код поддерживает большую часть современных браузеров. Некоторые свойства CSS например transition, требуют префиксов (англ.) для их верной работы в разных браузерах.

    Препроцессоры и постпроцессоры CSS

    C момента своего появления в 1990-х, CSS проделал огромный путь. Поскольку пользовательские интерфейсы становятся все сложнее, разработчики придумывают инструменты, позволяющие облегчить работу над их созданием. Для этого и предназначены пре- и постпроцессоры.

    Препроцессоры представляют из себя расширения для языка CSS, которые добавляют наворотов типа переменных, миксинов и наследования. Два самых главных препроцессора Sass и Less. На 2016 год Sass более распространен. Bootstrap, популярный CSS фреймворк, переключился с Less на Sass. К тому же когда большинство людей заводят речь о Sass, то они на самом деле говорят о SCSS (рус.).

    Постпроцессоры CSS вносят изменения в код после того, как он был написан или после компиляции препроцессора. Например, некоторые постпроцессоры, тот же PostCSS, имеют плагины для автоматического добавления префиксов.

    Когда разработчик впервые открывает для себя препроцессоры и постпроцессоры, появляется соблазн использовать их везде. Тем не менее, добавлять переменные, миксины лучше только там, где это действительно необходимо. CSS у Medium чертовски хорош (англ.), так же рассказывает о том, какие возможны излишки при работе с препроцессорами.

    Система сеток и отзывчивость

    Сетки в CSS это структура, позволяющая вам “укладывать” элементы горизонтально и вертикально.

    Такие фреймворки, как Bootstrap, Skeleton и Foundation предусматривают стили, управляющие строками и колонками в раскладке. В то время как фреймворки, безусловно, полезны, стоит понимать саму суть работы сеток. Прекрасные обзоры на эту тему: Понимание CSS сеток (англ.) и Don’t Overthink Grids (англ.).

    Одна из главных возможностей, которую дают сетки – это обеспечение отзывчивости вашего сайта. Отзывчивость (responsiveness) означает, что сайт изменяет свои размеры в зависимости от ширины окна браузера. Долгое время отзывчивость достигалась при помощи медиавыражений в CSS (рус.): правил, срабатывающих только при определенных размерах экрана.

    Стайлгайды

    Стайлгайды в вебе это наборы CSS компонентов и паттернов, которые могут быть использованы на разных сайтах. Ключевой вещью для обучения является понимание того, как повторно использовать компоненты на основе HTML и CSS и не нарушать принцип “Не повторяйся” (рус.).

    Соглашения о коде

    Соглашения о коде призваны сделать код читабельным и легким в поддержке. Некоторые из этих ссылок, например CSS Guidelines (англ.), являются набором советов по улучшению написания HTML и CSS в то время, как другие ссылки, например Github internal CSS toolkit and guidelines (англ.) являются примерами эффективного кода.

    Отработка лучших практик HTML и CSS

    Выбрать один (или несколько) прошлых экспериментов и провести рефакторинг своего кода с использованием знаний, полученных выше. Рефакторинг означает редактирование вашего кода так, чтобы он стал проще, в том числе в плане читаемости.

    Умение проводить эффективный рефакторинг кода  —  очень важный навык для фронтенд-разработчика. Создание эффективного кода – постоянный процесс.

    CSS архитектура: рефакторинг CSS (англ.)  — статья, которая подойдет как отправная точка для работы над рефакторингом.

    Ниже несколько вопросов, на которые надо себе ответить в процессе рефакторинга:

    • Не двусмысленны ли названия классов? Через полгода я все еще смогу понять, что означает название класса?
    • Семантичен ли мой HTML и CSS? Можно ли с первого взгляда определить структуру и взаимоотношения элементов?
    • Использую ли я одни и те же цвета в коде? Не будет ли логичнее вынести их в переменные Sass (англ.)?
    • Работает ли мой код в Safari так же хорошо, как в Chrome?
    • Нельзя ли заменить часть кода на систему сеток, например Skeleton?
    • Не слишком ли часто я использую !important? Как я могу это исправить?

    В качестве еще одного эксперимента создать собственный сайт-портфолио. Для фронтенд-разработчика портфолио — самый важный актив. Статьи в помощь:

    HTML и CSS: Полезные ссылки

    Блоги по фронтенду

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

    Другие практики по HTML и CSS

  2. JavaScript: теория

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

    Что почитать начинающему

    1. Перед началом изучения области применения JavaScript в вебе — учебники от Mozilla Developer Network (MDN):
      1. Изучение Веб-разработки
      2. Ускоренный курс по основам языка
    2. Руководство по JavaScript от MDN. На первом шаге надо знать хотя бы это:
      1. Грамматика и типы
      2. Порядок выполнения и обработка ошибок
      3. Циклы и итерации
      4. Функции
    3. И еще пара обучалок от MDN для новичков:
      1. Обзор технологий JavaScript — Введение в JavaScript для веб-браузеров.
      2. Введение в объектно-ориентированный JavaScript —Введение в концепции объектно-ориентированного программирования на JavaScript.
    4. Выразительный JavaScript  —  Великолепная бесплатная электронная книга, которую должен прочитать каждый начинающий фронтенд-разработчик.
    5. Современный учебник Javascript —  Популярный обучающий ресурс на русском языке.
    6. Курс JavaScript на Codecademy.

    DOM

    Для понимания того, как JavaScript взаимодействует с сайтами, надо узнать об объектной модели документа (DOM).

    DOM является отражением структуры HTML-документа. Это древовидная структура, состоящая из объектов JavaScript, которые соответствуют узлам HTML. Для дальнейшего изучения DOM — Что такое DOM? в переводе Frontender Magazine. Статья даст простое и понятное объяснение понятия DOM.

    JavaScript взаимодействует с DOM и изменяет или обновляет его. Вот пример, в котором мы выбираем HTML элемент и изменяем его содержимое:

    var container = document.getElementById(“container”);
    container.innerHTML = 'New Content!';

    Чтобы узнать больше о использовании JavaScript для взаимодействий с DOM: Руководство по DOM в документации MDN.

    На данном этапе уже должны быть ответы на следующие вопросы:

    • Что такое DOM?
    • Как обратится к элементам?
    • Как добавить обработчик событий?
    • Как изменить свойства узла DOM?

    Для получения полного списка доступных манипуляций с DOM при помощи JavaScript: JavaScript Functions and Helpers от PlainJS. Этот сайт содержит объяснения того, как, например, менять свойства стилей HTML-элементов или обрабатывать события клавиатуры. При желании копнуть глубже: прочитать раздел о DOM в книге Выразительный JavaScript.

    Инспектор

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

    Тут есть инструкция по использованию инструментов разработчика в Chrome. Для Firefox — ссылка.

    Промежуточные проверка знаний

    По мере того, как в работе будет появляться все больше JavaScript, будут встречаться понятия более высокого уровня. И прежде чем двигаться дальше, надо убедиться, что представленные ниже пункты известны и понятны:

    Выразительный JavaScript охватывает большую часть этих тем.

    Императивный vs. Декларативный

    Есть два типа подхода к тому, как JavaScript взаимодействует в DOM: императивный и декларативный. С одной стороны декларативное программирование сосредоточено на том, что происходит. С другой стороны императивное программирование сосредоточено не только на том, что происходит, но и как.

    var hero = document.querySelector('.hero')
    hero.addEventListener(‘click’, function() {<br> var newChild = document.createElement(‘p’)
    newChild.appendChild(document.createTextNode(‘Hello world!’))<br> newChild.setAttribute(‘class’, ‘text’)<br> newChild.setAttribute(‘data-info’, ‘header’)<br> hero.appendChild(newChild)<br> })<br>}

    Это пример императивного программирования, когда мы вручную запрашиваем элемент и вкладываем структуру в DOM. Другими словами концентрируемся на том, как достичь чего-то. Самая большая проблема этого кода  —  он слишком хрупкий. Если кто-то в процессе работы поменяет имя класса в HTML с hero (герой) на villain (злодей), обработчик событий больше не будет срабатывать, поскольку в DOM нет никакого класса hero.

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

    Для получения большей информации:

    Это руководство в первую очередь учит вас императивному подходу перед введением декларативного подхода с фреймворками, например Angular, и библиотеками типа React. Рекомендую обучаться именно в таком порядке потому что это позволит вам увидеть проблемы, которые решает декларативное программирование на JavaScript.

    AJAX

    Ajax  —  это технология, позволяющая странице взаимодействовать с сервером при помощи JavaScript. Например, когда мы отправляем форму на сайте, значения полей собираются и формируется HTTP запрос, который отправляет данные на сервер.

    Подробнее об Ajax можно прочитать:

    Новые браузеры стандартно используют Fetch для создания HTTP запросов. Больше о Fetch в можно узнать в статье, которую написал Dan Walsh. В ней рассказано, как работает Fetch и как его использовать. Тк же можно найти полифилы для Fetch и документацию к ним.

    jQuery

    До сего момента вы производили манипуляции с DOM только при помощи JavaScript. Правда в том, что существует множество библиотек для манипуляций с DOM, которые предоставляют API-интерфейсы, облегчающие написание кода.

    Одна из самых популярных таких библиотек  —  jQuery. jQuery является императивной библиотекой. Она была написана еще до того, как фронтенд системы стали такими сложными как сегодня. Теперь для управления сложными интерфейсами чаще используют декларативные фреймворки и библиотеки наподобие Angular и React. Тем не менее jQuery всё-равно используется.

    Для изучения основ jQuery:

    Но jQuery не всегда подходит для императивного манипулирования DOM. PlainJS и You Might Not Need jQuery  —  два хороших ресурса, которые покажут эквиваленты функций jQuery на чистом JavaScript.

    ES5 vs. ES6

    Еще одна важная концепция, которую нужно понять, это отношение ECMAScript к JavaScript. Есть два основных направления в JavaScript, c которыми можно столкнуться в повседневной работе: ES5 и ES6. ES5 и ES6 это стандарты ECMAScript, которые использует JavaScript. Окончательная спецификация ES5 была выпущена в 2009 и мы пользуемся ею до сих пор.

    ES6, так же известный как ES2015, является обновленным стандартом и предусматривает новые конструкции языка JavaScript, например константы, классы и шаблонные строки. Важно отметить, что ES6 привносит новые возможности языка, но по прежнему определяет их семантику с точки зрения ES5. К примеру, классы в ES6 являются лишь “синтаксическим сахаром” для уже существующих в JavaScript прототипных наследований.

    Важно знать оба стандарта, ES5 и ES6, поскольку на текущий момент в разработке приложений могут использоваться как один, так и другой.

    Хорошие инструкции по ES6:

    Как всегда лучшим способом обучение является обучение на примерах.

    Стайлгайды

    Стайлгайды для JavaScript представляют собой наборы соглашений в вопросах написания кода и созданы для того, чтобы ваш код легко читался и был прост в плане поддержки.

    Базы кода

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

    Архитектурные шаблоны

    Прежде чем углубляться в изучение фреймворков, важно понять несколько моделей архитектуры, которые используются в них: модель MVC, модель MVVM и модель MVP. Эти паттерны были спроектированы для создания понятного разделения ответственности между уровнями приложения.

    Разделение ответственности это принцип, по которому приложение разделяется на отдельные специфичные области. Например, вместо того, чтобы хранить структуру приложения в HTML, можно использовать объект JavaScript  —  обычно называемый моделью  —  для хранения структуры.

    Чтобы узнать больше об этих моделях, для начала надо бы почитать о MVC в Chrome Developers. После этого — Understanding MVC And MVP (For JavaScript And Backbone Developers), абстрагированно от Backbone, просто пройтись по частям, объясняющим MVC и MVP.

    Addy Osman так же написал о MVVM в статье Understanding MVVM — A Guide For JavaScript Developers. Чтобы узнать о причинах и истории возникновения MVC надо прочитать эссе на GUI Architectures от Martin Fowler. И наконец раздел JavaScript MV* Patterns в книге Learning JavaScript Design Patterns. Это фантастическая и совершенно бесплатная книга.

    Шаблоны проектирования

    JavaScript-фреймворки не изобретают колесо. Большинство из них основано на шаблонах проектирования. Ниже наиболее популярные шаблоны.

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

    JavaScript: Быть в курсе

    Как и остальная часть фронтенда, область JavaScript стремительно меняется. Очень важно всегда быть в курсе происходящего. Ниже список наиболее интересных и информативных сайтов, блогов и форумов по состоянию на 2016 год.

    1. Что почитать начинающему

    2. DOM

    3. Инспектор

    4. Промежуточная проверка знаний

    5. Императивный vs. Декларативный

    6. AJAX

    7. jQuery

    8. ES5 vs. ES6

    9. Стайлгайды

    10. Базы кода

    11. Архитектурные шаблоны

    12. Шаблоны проектирования

    13. JavaScript: Быть в курсе

  3. Roadmaps

    1. Раз
    2. Два
    3. Три
    4. Четыре

  4. JavaScript: Практика

    Давайте используем знания на практике.

    Эксперимент с JavaScript 1

    Для этого эксперимента идите на AirBnB, откройте панель инспектора и перейдите во вкладку Console. В этой вкладке вы можете выполнять JavaScript код на странице. Мы собираемся немного повеселится и совершить несколько манипуляций с элементами на странице. Посмотрим сможете ли вы проделать все описанные ниже манипуляции с DOM.

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

    • Выберите тег заголовка с уникальным именем класса и поменяйте текст
    • Выберите любой элемент на странице и удалите его
    • Выберите любой элемент и измените у него одно CSS свойство
    • Выберите одну определенную секцию (тег section) и переместите ее на 250 пикселей вниз
    • Выберите любой компонент, например панель, и измените его видимость (visibility)
    • Напишите функцию с именем doSomething, которая будет выводить уведомление (alert) “Hello world” и вызовите ее
    • Выберите определенный тег параграфа (p), добавьте обработчик события click на него и вызывайте функцию doSomething каждый раз, когда событие происходит

    Если вы застряли, то вернитесь к статье JavaScript Functions and Helpers и освежите знания. В большинстве заданий я основываюсь на этом документе. Ниже приведено возможное решение первого задания в списке:

    var header = document.querySelector(‘.text-branding’)
    header.innerText = ‘Boop'

    Главная цель эксперимента  —  посмотреть как реально работают те вещи, которые вы узнали о JavaScript и DOM.

    Эксперимент с JavaScript 2

    Используя CodePen, напишите не сложный, но функциональный код JavaScript, применяя манипуляции c DOM и программную логику в функциях. Сфокусируйтесь в этом эксперименте на том, чтобы взять знания и объединить их с JavaScript. Вот несколько вдохновляющих примеров:

    Эксперимент с JavaScript 3

    Эксперимент 7 сфокусирован на том, чтобы отточить навыки работы с DOM манипуляциями и jQuery. Для этого эксперимента мы применим более структурированный подход. Мы будем клонировать главную страницу Flipboard, и добавлять интерактив при помощи знаний из руководства по JavaScript.

    Во время прохождения курса сосредоточьтесь на понимании того, как сделать сайт интерактивным, когда это действительно нужно и как применять при этом jQuery.

    Эксперимент с JavaScript 4

    Эксперимент 8 объединяет все что вы узнали о HTML и CSS, а так же знания по JavaScript. В рамках этого задания вы создадите часы с собственным дизайном и сделаете их интерактивными при помощи JavaScript. Перед началом я рекомендую прочитать Decoupling Your HTML, CSS, and JavaScript с целью изучения основных соглашений по именованию классов в случаях, когда в разработке участвует JavaScript. Вот список примеров на CodePen. Вы можете использовать их как шпаргалки для этого эксперимента. Если нужно больше  —  поищите по слову clock на CodePen.

    Есть два способа выполнения этого задания. Можете начать с проектирования и создания макета на HTML и CSS, а затем добавить JavaScript. Или вы можете сначала написать логику на JavaScript, а затем перейти к разметке и стилям. Вы можете использовать jQuery или чистый JavaScript.

    1. Эксперимент с JavaScript 1

    2. Эксперимент с JavaScript 2

    3. Эксперимент с JavaScript 3

    4. Эксперимент с JavaScript 4

  5. JavaScript-фреймворки. Основы

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

    Краткий перечень основных фреймворков на 2016 год: Angular, React + Flux, Ember, Aurelia, Vue и Meteor.

    Ниже рассмотрена пара фреймворков: AngularJS и React.

    Теория

    AngularJS

    AngularJS  —  это JavaScript-фреймворк с MVC и иногда MVVM. Он поддерживается корпорацией Google и взял сообщество JavaScript штурмом в момент своего выхода в 2010.

    Angular является декларативным фреймворком. Одним из самых полезных для меня материалов с точки зрения понимания того, как перейти от императивного к декларативному программированию на JavaScript, оказался How is AngularJS different from jQuery на StackOverflow.

    Документация по AngularJS. У них так же есть туториал под названием Angular Cat, который позволит с ходу окунутся в разработку. Более полное и детальное руководство по Angular можно найти в Github репозитории у Tim Jacobi. Так же желательно изучить: best practice styleguide от John Papa.

    React + Flux

    Angular решает множество проблем, с которыми сталкивается фронтенд-разработчик в процессе работы над комплексными системами. Другим популярным инструментом является React, представляющий из себя библиотеку для создания пользовательских интерфейсов. Его можно представить как V в MVC. Поскольку React это только библиотека, он часто встречается как компонент архитектуры под названием Flux.

    Facebook создал React и Flux для решения некоторых недостатков MVC и проблем с масштабированием. Их широко известная презентация: Hacker Way: Rethinking Web App Development at Facebook. В ней говорится о происхождении и особенностях Flux.

    Чтоб начать работу с React и Flux, сперва надо изучить React. Хорошим учебником для начинающих будет документация React. После этого —  React.js Introduction For People Who Know Just Enough jQuery To Get By, чтобы помочь себе отойти от jQuery-мышления.

    Затем можно начать изучать Flux. Стоит сперва прочитать официальную документацию Flux. После этого Awesome React  —  сборник ссылок, которые помогут продвинуться дальше в обучении.

    Практика

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

    Эксперимент с фреймворками 1

    Эксперимент заключается в том чтобы взять и построить заново часть Todo MVC приложения, игнорируя фреймворки. Другими словами, использовать старый добрый JavaScript. Целью этого эксперимента является демонстрация того, как MVC работает без смешения со специфичным синтаксисом фреймворков.

    Перед началом надо посмотреть, как это будет выглядеть в конечном результате TodoMVC. Первым делом начните новый проект локально и создайте три компонента MVC. Поскольку это довольно сложный эксперимент, все исходники к нему можно найти на Github. Скачайте репозиторий и поиграйтесь с разными компонентами MVC до тех пор, пока не поймете их отношения друг с другом.

    Эксперимент с фреймворками 2

    Эксперимент будет хорошей тренировкой работы с MVC. Понимание MVC является крайне важным при изучении основ JavaScript-фреймворков.

    Build an Etsy Clone with Angular and Stamplay научит как создавать веб-приложения на Angular, интерфейсы с API и как структурировать большие проекты. После прохождения всех уроков уже должны быть ответы на следующие вопросы:

    • Что такое веб-приложение?
    • Как MVC/MVVM взаимодействует с Angular?
    • Что такое API и какие функции выполняет?
    • Как организовать и структурировать большие объемы кода?
    • В чем преимущества разделения вашего интерфейса на компоненты?

    Если есть желание построить больше приложений на основе Angular, то попробуйте Build a Real-Time Status Update App with AngularJS & Firebase.

    Эксперимент с фреймворками 3

    Теперь пришло время Flux. Эксперимент заключается в создании списка задач с использованием React и Flux. Можно найти полный учебный курс на сайте с документацией Facebook’s Flux. Курс шаг за шагом объяснит, как использовать React и как Flux применяется для создания веб-приложений.

    После окончания этого курса полезно будет изучить учебники How to Build a Todo App Using React, Redux, and Immutable.js и Build a Microblogging App With Flux and React.

    1. Теория

    2. Эксперимент с фреймворками 1

    3. Эксперимент с фреймворками 2

    4. Эксперимент с фреймворками 3

  6. JavaScript at Mozilla Developer Network (MDN)

    https://developer.mozilla.org/ru/docs/Web/JavaScript

    Учебники

    Начальный уровень в этапе "теория". Здесь более продвинутые уровни.

    Средний уровень

    1. Повторное введение в JavaScript
      Обзор для тех, кто думает, что знает JavaScript.
    2. Структуры данных JavaScript
      Обзор существующих структур данных в JavaScript.
    3. Операторы сравнения и тождественности
      JavaScript предоставляет три различных оператора сравнения значений: строгое равенство ===, с приведением типов == и метод Object.is().

    Продвинутый уровень

    1. Наследование и цепочка прототипов
      Статья разъясняет бытующие заблуждения и недооцененность наследования, основанного на прототипах.
    2. Строгий режим или "use strict"
      Строгий режим говорит, что вы не можете использовать какую-либо переменную до её объявления. Это ограниченный вариант ECMAScript 5, для более быстрой производительности и простой отладки.
    3. Типизированные массивы
      Типизированные массивы предоставляют механизм для работы с необработанными двоичными данными в JavaScript.
    4. Управление памятью
      Жизненный цикл памяти и сборка мусора в JavaScript.
    5. Модель параллелизма (мультипоточности) и цикл событий
      В JavaScript есть модель параллелизма, основанная на "цикле событий".

    Справочник

    Подробный справочник по JavaScript.

    1. Стандартные встроенные объекты
      Узнайте о стандартных встроенных объектах Array, Boolean, Date, Error, Function, JSON, Math, Number, Object, RegExp, String, Map, Set, WeakMap , WeakSet и других.
    2. Выражения и операторы
      Узнайте о поведении таких операторов в JavaScript, как instanceof, typeof, new, this, приоритете операторов и многом другом.
    3. Инструкции и объявления
      Узнайте о do-while, for-in, for-of, try-catch, let, var, const, if-else, switch и многих других выражениях и ключевых словах в JavaScript.
    4. Функции
      Узнайте, как работать с функциями в JavaScript, чтобы разрабатывать свои приложения.

    Инструменты и дополнительные ресурсы

    Полезные инструменты для написания и отладки вашего JavaScript кода.

    1. Инструменты разработчика Firefox
      Простой редактор JavaScript, Веб-консоль, JavaScript Профайлер, Отладчик и другие.
    2. Firebug
      Редактируйте, отлаживайте и проверяйте CSS, HTML и JavaScript вживую на любой странице.
    3. JavaScript шеллы
      JavaScript шеллы позволяют быстро проверять фрагменты JavaScript кода.
    4. TogetherJS
      Объединение усилий стало проще.
    5. Stack Overflow
      Вопросы по JavaScript на Stack Overflow.
    6. Версии JavaScript и информация о релизах
      Просмотрите историю возможностей JavaScript и их статус.
    7. JSFiddle
      Редактируйте JavaScript, CSS, HTML и получайте живые результаты. Используйте экспериментальные ресурсы и взаимодействуйте с вашей командой онлайн.

    1. Средний уровень

    2. Продвинутый уровень

    3. Инструменты

  7. JavaScript: The Right Way

    http://jstherightway.org

    1. Getting Started

    2. JavaScript Code Style

    3. The Good Parts

    4. Must See

    5. Patterns

    6. Testing Tools

    7. Frameworks

    8. Game Engines

    9. News

    10. Reading

    11. Podcasts

    12. Screencasts

    13. Who to follow

    14. PaaS Providers

    15. Helpers

  8. Superhero.js

    http://superherojs.com

    1. Understanding JavaScript: Syntax, style and gotchas

    2. Organizing your code: API design, patterns and frameworks

    3. Testing your application: Testable code, readable tests

    4. Tools of the trade: Workflow, developer tools and debugging

    5. Performance and Profiling: Fast and memory-efficient code

    6. Securing your app: Principles, access control and validation

    7. Under the hood: Understanding the browser

    8. On the horizon: Stuff to keep an eye on

    9. The league of awesome: Other superheroic resources

  9. JavaScript Garden

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

    1. Intro

    2. Objects

    3. Functions

    4. Arrays

    5. Types

    6. Core

    7. Other

  10. Learn Javascript by Example

    https://www.learneroo.com/modules/64

    1. Javascript Basics

    2. Strings, Arrays and Objects

    3. Control Structures

    4. Functions, Scope and Closures

    5. Object Functions, Constructors and Prototypes

    6. Javascript Next

  11. Выразительный JavaScript

    http://habrahabr.ru/post/240219/

    1. Введение

    2. Величины, типы и операторы

    3. Структура программ

    4. Функции

    5. Структуры данных: объекты и массивы

    6. Функции высшего порядка

    7. Тайная жизнь объектов

    8. Проект: электронная жизнь

    9. Поиск и обработка ошибок

    10. Регулярные выражения

    11. Модули

    12. Проект: язык программирования

    13. JavaScript и браузер

    14. Document Object Model

    15. Обработка событий

    16. Проект: игра-платформер

    17. Рисование на холсте

    18. HTTP

    19. Формы и поля форм

    20. Проект: Paint

    21. Node.js

    22. Проект: веб-сайт по обмену опытом

    23. Песочница для кода

  12. 100+ Free resources for learning Full Stack Web Development

    https://github.com/bmorelli25/Become-A-Full-Stack-Web-Developer

    1. Start Here

    2. How to learn

    3. What is the Most Useful CS Bookmark You have

    4. Programs & Classes

    5. Learn HTML

    6. Learn CSS

    7. Learn JavaScript

    8. Learn React.js

    9. Full Stack Tutorials

    10. Learn Node.js

    11. Learn APIs

    12. Learn Databases

    13. Learn Authentication

    14. Learn Git

    15. Games & Challenge Websites

    16. Free Programming Books

    17. Open Source Contribution Opportunities

    18. Am I Ready to be a Developer?

    19. Software Developer Success Stories

    20. Resume's, Portfolio's, LinkedIn, Interview Prep, & Salary Information

  13. Laracasts.com > Skills > Front-End

    https://laracasts.com/skills/javascript

    1. ES2015 Crash Course

    2. Learning Vue 1.0: Step By Step

    3. Learn Vue 2: Step By Step

    4. Do You React?

    5. Painless Builds With Elixir

    6. Charting and You

  • 3927
  • 21 марта 2017, 08:28

Цель состоит в группе

Веб-разработка

  • 1714

    участников

  • 2434

    цели
Регистрация

Регистрация

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

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

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

Виджет вашей цели

Большой (450×150 px)

Маленький (250×100 px)

Чтобы вставить виджет на ваш сайт или блог, скопируйте код и внедрите его в исходный html-код вашего блога/сайта.

Только для PRO

Вы можете купить PRO аккаунт, либо получить его бесплатно, пригласив 3 друзей на SmartProgress

Пригласить друзей

Неограни­ченное
число целей

Купить

Email на все случаи и по любым вопросам

  • Максим Маликов

    основатель

  • Сергей Захаров

    основатель