Привет, Хабр! Мы на курсе Практикума по веб-разработке постоянно смотрим, что новенького появилось в сети для самостоятельного обучения веб-технологиям. И ресурсов в доступе довольно много. Они разнообразны и обучают современным технологиям в разных форматах: видео, учебники, интерактивные курсы, гайды и доклады. Если вы учитесь на курсах или уже работаете во фронтенде, эти материалы помогут улучшить навыки и избавиться от белых пятен. Делимся найденными сокровищами, вот они:
1. W3schools
![](https://habrastorage.org/getpro/habr/upload_files/983/20f/a2f/98320fa2f24d7b80f5e4fd1d1aea12e1.png)
Это огромный ресурс с материалами и упражнениями по разным технологиям и языкам программирования. И веб-технологии тоже не исключение, здесь можно найти множество туториалов и примеров по HTML, CSS и JavaScript.
2. learn.javascript
![](https://habrastorage.org/getpro/habr/upload_files/eb8/764/546/eb8764546e896310fb1e52cd34613833.png)
Возможно, один из самых известных онлайн-учебников по JavaScript. Он существует уже давно, и я когда-то тоже узнавал из него подробности о работе JavaScript. Учебник подробно рассказывает про JavaScript — от самых азов до продвинутых тем. И всё это с интерактивными примерами кода, а в конце каждой статьи вы можете пройти задания, чтобы проверить свои знания.
3. JavaScript 30
![](https://habrastorage.org/getpro/habr/upload_files/b3c/253/d00/b3c253d0018a28dbd12b5b21a991d97d.png)
На этом ресурсе вы сможете сделать 30 интересных мини-проектов на JavaScript, HTML и CSS. Здесь будет возможность не только попробовать уже изученные азы, но также узнать много нового, особенно про различные DOM API.
4. Eloquent JavaScript
![](https://habrastorage.org/getpro/habr/upload_files/c0d/361/d45/c0d361d456002312253ce6e5f6916138.png)
Если вам больше нравится изучать язык по учебнику, то эта книга отлично подойдёт. Книга поэтапно расскажет про основы языка, даст возможность написать небольшой проект, а затем объяснит сложные концепции и принципы работы языка в браузере.
5. You Don't Know JS Yet (book series)
![](https://habrastorage.org/getpro/habr/upload_files/7be/392/1f6/7be3921f62725603235d41f47a385c79.png)
Самая известная серия книг про JavaScript, его устройство и тонкости. Книги разделены по темам, поэтому можно брать только те, которые интересны. Но каждую книгу стоит прочитать — темы раскрыты очень подробно и глубоко. Перед подготовкой к собеседованию эта серия книг будет просто незаменима.
You Don't Know JS Yet (book series) →
6. JavaScript Allongé
![](https://habrastorage.org/getpro/habr/upload_files/3c4/32c/a71/3c432ca71d0fc811337e59566eac7cc7.png)
Довольно необычная книга, которая рассказывает про функциональное программирование на JavaScript. Несмотря на то что книга рассказывает и про азы языка, я бы рекомендовал приступить к ней, когда у вас уже будут базовые знания и представления.
7. Джейк Арчибальд. В цикле — JSConf.Asia
Один из самых известных докладов, подробнейшим образом рассказывающий про Event loop и устройство асинхронности в JavaScript. Доклад до сих пор не потерял актуальности — это must watch для любого JavaScript-программиста. До него самым известным был доклад Филиппа Робертса: Что за чертовщина такая event loop? Но доклад Арчибальда актуализирует эту тему и раскрывает больше подробностей.
8. Фронтенд — это не больно
Огромная статья с набором ссылок, которые помогут вам стать лучше как фронтенд-разработчик. Статья в основном нетехническая, но рассказывает о том, как можно сделать свою жизнь лучше, в какую сторону расти и о чём стоит задуматься.
Некоторые перечисленные материалы используют и на курсе веб-разработки Яндекс Практикума. Студенты курса и их наставники делятся друг с другом полезными материалами в специальном чате, вместе обсуждают варианты решений задач из учебников и примеры в туториалах. Так материал усваивается лучше и уж точно интереснее.
9. MDN Web Docs
![](https://habrastorage.org/getpro/habr/upload_files/36d/d2d/f2d/36dd2df2dd3817ad71e4dbc1a55fa0f6.png)
Один из популярнейших источников, где веб-программисты ищут информацию о функциях из JavaScript или работы свойства в CSS. Но помимо этого на MDN опубликован огромный набор статей по веб-технологиям. Секция Guides содержит туториалы, которые помогут начать изучать HTML, CSS и JavaScript. Впоследствии вы ещё точно не раз вернётесь на этот сайт, когда будете искать информацию. На ресурсе много англоязычных статей, но у MDN есть отдельная команда волонтёров, которые переводят статьи на русский язык.
10. Doka.guide
![](https://habrastorage.org/getpro/habr/upload_files/468/ae4/e3c/468ae4e3c6f5381d3f474508f08f7d8c.png)
Если предыдущий сайт был изначально англоязычным, то Дока — полностью русскоязычный. На Доке опубликовано множество статей как про отдельные методы и функции в JavaScript, теги в HTML и свойства в CSS, так и про архитектуру приложений и доступность. Текст старательно пишется так, чтобы его было легче воспринимать новичкам. Почти каждая статья содержит интересные практические советы по теме.
11. react.dev
![](https://habrastorage.org/getpro/habr/upload_files/2aa/016/7d6/2aa0167d6168e82ff56f66f5fdded2e0.png)
React — один из самых популярных фреймворков для написания приложения на JavaScript. Совсем недавно команда React сделала перезапуск своего сайта и создала учебные материалы для пользователей. Гайд подробно рассказывает про свойства фреймворка и даёт возможность попробовать его на интерактивных примерах.
12. Scrimba Learn React
Большой образовательный ресурс с интерактивными уроками на множество тем. В этом курсе вы сможете написать несколько приложений на React и попробовать использовать фреймворк в полную силу.
13. Youtube-канал «Фронтенд»
Отличный канал, в котором регулярно появляются видео докладов с митапов и конференций, которые проводит Яндекс, такие как Я.Субботник или Я ❤️ Фронтенд. А ещё там публикуют образовательные видеолекции с прошлых выпусков Школы Разработки Интерфейсов. На канале вы сможете почерпнуть множество актуальных знаний о работе веб-технологий и различных инструментов.
14. Frontend masters
Огромный набор видео по различным темам и веб-фреймворкам. Видеолекции ведут известные в индустрии разработчики, работающие в крупных компаниях. Доступ платный, но взамен вы получаете огромное количество углубленного материала.
15. Egghead
![](https://habrastorage.org/getpro/habr/upload_files/e5a/5c4/618/e5a5c4618bcb0d456f423a8f82f4e9bd.png)
Это ресурс с набором коротких видео, лаконично, но подробно раскрывающим тему. Большая часть доступна по подписке, но для ознакомления вы сможете найти множество открытых уроков.
Это далеко не все ресурсы, которые могут быть полезны веб-разработчику. Делитесь любимыми в комментариях — будем расширять список вместе.