Привет, Хабр! Мы на курсе Практикума по веб-разработке постоянно смотрим, что новенького появилось в сети для самостоятельного обучения веб-технологиям. И ресурсов в доступе довольно много. Они разнообразны и обучают современным технологиям в разных форматах: видео, учебники, интерактивные курсы, гайды и доклады. Если вы учитесь на курсах или уже работаете во фронтенде, эти материалы помогут улучшить навыки и избавиться от белых пятен. Делимся найденными сокровищами, вот они:  

1. W3schools

Это огромный ресурс с материалами и упражнениями по разным технологиям и языкам программирования. И веб-технологии тоже не исключение, здесь можно найти множество туториалов и примеров по HTML, CSS и JavaScript.

W3schools →

2. learn.javascript

Возможно, один из самых известных онлайн-учебников по JavaScript. Он существует уже давно, и я когда-то тоже узнавал из него подробности о работе JavaScript. Учебник подробно рассказывает про JavaScript — от самых азов до продвинутых тем. И всё это с интерактивными примерами кода, а в конце каждой статьи вы можете пройти задания, чтобы проверить свои знания.

learn.javascript.ru →

3. JavaScript 30

На этом ресурсе вы сможете сделать 30 интересных мини-проектов на JavaScript, HTML и CSS. Здесь будет возможность не только попробовать уже изученные азы, но также узнать много нового, особенно про различные DOM API.

JavaScript 30 →

4. Eloquent JavaScript

Если вам больше нравится изучать язык по учебнику, то эта книга отлично подойдёт. Книга поэтапно расскажет про основы языка, даст возможность написать небольшой проект, а затем объяснит сложные концепции и принципы работы языка в браузере.

Eloquent JavaScript  →

5. You Don't Know JS Yet (book series)

Самая известная серия книг про JavaScript, его устройство и тонкости. Книги разделены по темам, поэтому можно брать только те, которые интересны. Но каждую книгу стоит прочитать — темы раскрыты очень подробно и глубоко. Перед подготовкой к собеседованию эта серия книг будет просто незаменима.

You Don't Know JS Yet (book series)  →

6. JavaScript Allongé

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

JavaScript Allongé  →

7. Джейк Арчибальд. В цикле — JSConf.Asia

Один из самых известных докладов, подробнейшим образом рассказывающий про Event loop и устройство асинхронности в JavaScript. Доклад до сих пор не потерял актуальности — это must watch для любого JavaScript-программиста. До него самым известным был доклад Филиппа Робертса: Что за чертовщина такая event loop? Но доклад Арчибальда актуализирует эту тему и раскрывает больше подробностей.

8. Фронтенд — это не больно

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

Фронтенд — это не больно  →

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

9. MDN Web Docs

Один из популярнейших источников, где веб-программисты ищут информацию о функциях из JavaScript или работы свойства в CSS. Но помимо этого на MDN опубликован огромный набор статей по веб-технологиям. Секция Guides содержит туториалы, которые помогут начать изучать HTML, CSS и JavaScript. Впоследствии вы ещё точно не раз вернётесь на этот сайт, когда будете искать информацию. На ресурсе много англоязычных статей, но у MDN есть отдельная команда волонтёров, которые переводят статьи на русский язык.

MDN Web Docs  →

10. Doka.guide

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

Doka.guide  → 

11. react.dev

React — один из самых популярных фреймворков для написания приложения на JavaScript. Совсем недавно команда React сделала перезапуск своего сайта и создала учебные материалы для пользователей. Гайд подробно рассказывает про свойства фреймворка и даёт возможность попробовать его на интерактивных примерах.

react.dev →

12. Scrimba Learn React

Большой образовательный ресурс с интерактивными уроками на множество тем. В этом курсе вы сможете написать несколько приложений на React и попробовать использовать фреймворк в полную силу.

Scrimba Learn React  →  

13. Youtube-канал «Фронтенд»

Отличный канал, в котором регулярно появляются видео докладов с митапов и конференций, которые проводит Яндекс, такие как Я.Субботник или Я ❤️ Фронтенд. А ещё там публикуют образовательные видеолекции с прошлых выпусков Школы Разработки Интерфейсов. На канале вы сможете почерпнуть множество актуальных знаний о работе веб-технологий и различных инструментов.

14. Frontend masters

Огромный набор видео по различным темам и веб-фреймворкам. Видеолекции ведут известные в индустрии разработчики, работающие в крупных компаниях. Доступ платный, но взамен вы получаете огромное количество углубленного материала.

Frontend masters →

15. Egghead

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

Egghead →

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