Фронтенд востребован, и подборка из 9 видео даст хороший старт в данном направлении. Разбор представленного багажа знаний займет лишь 12 часов.

1. С чего начать изучение фронтенд? Верстка сайта HTML + CSS.

Вебинар с грифом «для начинающих» не откроет Америку, но позволит освоить базис фронтенд разработки. Как организовать проект, подключить файлы, проверять работоспособность CSS и HTML – все это вы узнаете из данного видео. Уверенное объяснение и понятный схематизированный видеоряд станут развернутым ответом на распространенные вопросы новичков.

https://www.youtube.com/watch?v=1fvCKAMLCpU

2. Chrome DevTools. Обзор основных возможностей веб-инспектора.

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

https://www.youtube.com/watch?v=C8Z-N0y6Sqo

3. Знакомство с ECMASCRIPT 2015

Профессиональный фронтенд разработчик и преподаватель рассказывает о ECMAScript 6. Вебинар основан на презентации, каждый слайд которой дополнен практическим применением теории. Используется Sublime Text, Node.js и транспайлер Babel. Вебинар информативен и заточен под тех, кто только начал изучать фронтенд.

https://www.youtube.com/watch?v=hcbFetwHZoA

4. Что такое Avocode? Полное руководство по Авокод за 10 минут!

Короткий видеоурок, посвященный инструменту для верстки, работающему с макетами популярных графических редакторов (Photoshop, Sketch), Авокод. Информация затрагивает определение, предназначение и использование программной среды Avocode. В общем, полный набор базовых знаний о незаменимом помощнике любого верстальщика.

https://www.youtube.com/watch?v=pAfMkjKY004

5. CSS препроцессоры

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

https://www.youtube.com/watch?v=jrCr9f9bIiM

6. Использование CSS, JS и SVG анимации

Web-анимация – непростой процесс, у которого есть множество вариантов реализации. В ходе вебинара не только расскажут, но и покажут главные отличия различных способов создания анимированных картинок. Интересные яркие примеры и сравнения помогут быстро разобраться в основах Web-анимации.

https://www.youtube.com/watch?v=m9M_m5bY6LE

7. React – это просто

Смелое заявление, но с этим приходится согласиться, так как вебинар исчерпывающий, и эта JavaScript-библиотека раскрывается со всех сторон. В вебинаре говорится о скорости, универсальности и других преимуществах React, которые дополняют знания о фронтенд. Кроме того, наглядная реализация теоретической части позволит «набить руку».

https://www.youtube.com/watch?v=dc9uAO7ObJo

8. Пособие для новичков: Как залить портфолио на хостинг

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

https://www.youtube.com/watch?v=fE7nKrAe9MY

9. JavaScript. Работа с API Telegram, Youtube, VK

Завершающий урок по фронтенд – как вишенка на торте. Что такое API, для чего нужен, и другие немаловажные вопросы раскрываются в полной мере. Наряду с этим, изучается функционал таких популярных сайтов и мессенджеров, как VK, Telegram и Youtube.

https://www.youtube.com/watch?v=w97yw1MohvI

Также рекомендуем Вам посмотреть:

Простыми словами: бэкенд, фронтенд и их взаимодействие
11 шаблонизаторов для фронтенда
Более 70 полезных инструментов для фронтенд-разработчиков
Топ 15 вопросов о React.JS на собеседовании