Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/filimonovalexey/awesome-frontend-dev

Подборка полезных материалов для начинающих веб-разработчиков!
https://github.com/filimonovalexey/awesome-frontend-dev

List: awesome-frontend-dev

awesome-list awesome-lists collection css frontend html javascript nodejs react readme web

Last synced: 2 days ago
JSON representation

Подборка полезных материалов для начинающих веб-разработчиков!

Awesome Lists containing this project

README 

        

# Полезные материалы по веб-разработке! [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/FilimonovAlexey/awesome-frontend-dev)



Собрал все в одном месте! Подборка учебных материалов по HTML, CSS, JavaScript, React, а также сервисов и программ, которые пригодятся веб-разработчику! Также тут собраны материалы для подготовки к собеседованию.








  






    

      telegram group

    

    

      Youtube

    

    

      VK Badge

    

    

      Zen Badge

    




## Полезные проекты



 - [Мультиссылка для социальных сетей на React js](https://github.com/FilimonovAlexey/link-bio-page)

 - [Telegram бот обратной связи на JavaScript](https://github.com/FilimonovAlexey/YouTubeHelperTgBot)

 - [Telegram Бот для подготовки к собеседованию на Frontend разработчика](https://github.com/FilimonovAlexey/tech-interview-trainer)

 - [Telegram бот для управления сервером на JavaScript](https://github.com/FilimonovAlexey/ControlServerBot)

 - [Telegram бот фильтр мата на JavaScript](https://github.com/FilimonovAlexey/anti-spam-telegram-bot)



## Видео-гайды на YouTube



 - [Как создать Telegram бота с ChatGPT?](https://youtu.be/2K69fwmCGQc?si=tpA_F_ooT5DNpMGT)

 - [Правильное оформление своего профиля на GitHub](https://youtu.be/CRK1dIGb5gg?si=Otocef8kk4EX7qBg)

 - [Как получить GitHub Student Developer Pack?](https://youtu.be/xs_l-mVjM_w?si=bHN3YKDAsgo25XiM)

 - [Как разместить Telegram Бота на Сервере?](https://youtu.be/vPqAYdjkm4o?si=a0ev6sKhHbyIWhWe)

 - [Как пользоваться YouTrack для Программистов?](https://youtu.be/dWWPqutNEjM?si=dKpb5dCuEU_v-hSS)

 - [Бесплатный хостинг Vercel для сайта | Как разместить сайт в интернете?](https://youtu.be/yO0XL-DqEck?si=rlOaUjS-5DAsvqDa)



## HTML и CSS



 - [Справочник по HTML и CSS](https://github.com/xsltdev/hcdev.ru)

 - [Тема на Хабре по HTML](https://habr.com/ru/hub/html5/)

 - [Тема на Хабре по CSS](https://habr.com/ru/hub/css/)

 - [HTML5Book](https://html5book.ru/)

 - [HTML](https://html.com/)

 - [HTMLBook](http://htmlbook.ru/)

 - [Основы HTML](https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics)

 - [HTML и CSS референс](https://webref.ru/)

 - [CSS референс](https://cssreference.io/)

 - [Шпаргалка по GRID](https://grid.malven.co/)

 - [Шпаргалка по FLEX](https://flexbox.malven.co/)

 - [Автопрефиксер CSS](https://autoprefixer.github.io/ru/)

 - [Генерации CSS-элемента с тенью](https://cssgenerator.org/box-shadow-css-generator.html)



## JavaScript



 - [Современный учебник JavaScript](https://learn.javascript.ru/)

 - [MDN](https://developer.mozilla.org/ru/docs/Web/JavaScript)

 - [Тема на Хабре](https://habr.com/ru/hub/javascript/)

 - [Awesome-javascript](https://github.com/sorrycc/awesome-javascript)

 - [MyJS](https://github.com/harryheman/my-js)

 - [Основной учебник JavaScript](https://code.mu/ru/javascript/book/prime/)



 ## Node js



 - [Справочник по Node js](https://github.com/xsltdev/nodejsdev.ru)



## React JS



 - [Справочник по React JS](https://github.com/xsltdev/reactdev.ru)

 - [Документация](https://ru.reactjs.org/)

 - [Тема на Хабре](https://habr.com/ru/hub/reactjs/)

 - [Awesome-react](https://github.com/enaqx/awesome-react)

 - [Cборник готового кода](https://devhints.io/react)

 - [Cборник готового кода](https://reactcheatsheet.com/)

 - [Справочник React](https://reactdev.ru/)

 - [reactplay](https://reactplay.io/)

 - [Учебник по Next JS](https://nextjs.org/learn)

 - [Руководство по Next JS на Хабр](https://habr.com/ru/companies/timeweb/articles/804663/)



## SQL

 - [Бесплатный курс + тренажер по SQL](https://sql-academy.org/ru)

 - [Онлайн курс по SQL](https://learndb.ru/)

 - [SQL Tutorial](https://www.w3schools.com/sql/)



## Общее



 - [Дорожная карта фронтендера](https://roadmap.sh/frontend)

 - [Дока (HTML, CSS, JavaScript)](https://doka.guide/)

 - [10 игр для изучения JavaScript](https://techrocks.ru/2023/01/09/10-games-for-javascript-learning/)

 - [Proglib](https://proglib.io/)

 - [Tproger](https://tproger.ru/)

 - [Учебники и статьи для Программистов](https://codernet.ru/)

 - [Документация, методология БЭМ](https://ru.bem.info/)

 - [Создание аватара](https://pfpmaker.com/)

 - [Проверка совместимости технологий](https://caniuse.com/)

 - [Коллекция нейронных сетей](https://github.com/ai-collection/ai-collection)

 - [Иконки](https://thenounproject.com/)

 - [Библиотека кода github](https://grep.app/)

 - [Metanit - сайт о программировании](https://metanit.com/)

 - [Поисковик онлайн-репозиториев](https://libraries.io/)

 - [Cервис для автоматической проверки качества кода](https://www.codefactor.io/)

 - [Cервис для облегчения создания резюме](https://resume.io/)

 - [Коллекция инструментов для дизайна](https://undesign.learn.uno/)



 ## Подготовка к собеседованию



 - [70 вопросов по JavaScript](https://habr.com/ru/articles/486820/)

 - [Front-end. Вопросы на собеседовании](https://www.youtube.com/watch?v=ycYp7CYOnO0&list=PLNkWIWHIRwMFSLI9wBuHxuGI5lAZ7QNUg&ab_channel=webDev)

 - [Dev Questions - Шпаргалки по вопросам с IT-собеседований](https://dev-questions.com/)

 - [Владилен Минин - Подготовка к JavaScript собеседованию](https://youtu.be/M_pclb-58ZY)

 - [Решение задач, itresume](https://itresume.ru/)



## Полезные программы



 - [VS Code - лучшая среда разработки](https://code.visualstudio.com/)

 - [Postman - тестирование API](https://www.postman.com/)

 - [Организация сниппетов кода](https://snipit.io/)

 - [Документация](https://kapeli.com/dash)

 - [Notion - заметки](https://www.notion.so/)



## Хостинг проектов



 - [Timeweb Cloud](https://timeweb.cloud/?i=108133)

 - [Vercel](https://vercel.com/)

 - [Netlify](https://www.netlify.com/)

 - [Heroku](https://www.heroku.com/)



## Оформление профиля на GitHub



 - [Коллекция классных Readme](https://github.com/abhisheknaiidu/awesome-github-profile-readme)

 - [Генератор кастомных бейджей](https://shields.io/)

 - [Виджет с наградами пользователя](https://github.com/ryo-ma/github-profile-trophy)

 - [Статистика используемых языков](https://github.com/anuraghazra/github-readme-stats)

 - [График вашей активности на GitHub](https://github.com/Ashutosh00710/github-readme-activity-graph)

 - [Статистика вашей активности на GitHub](https://github.com/vn7n24fzkq/github-profile-summary-cards)

 - [Генератор Readme](https://arturssmirnovs.github.io/github-profile-readme-generator/)

 - [Генератор Readme](https://profilinator.rishav.dev/)

 - [Генератор Readme](https://rahuldkjain.github.io/gh-profile-readme-generator/)

 - [Генератор Readme](https://www.profileme.dev/)

 - [Составление файла Readme](https://readme.so/ru)



## Telegram каналы



 - [Много полезных материалов в одном месте](https://t.me/tehnomaniak07)

 - [Всё по фронтенду, бэкенду и девопсу в одном месте](https://t.me/tproger_web)

 - [Полезные материалы по всему, что может быть интересно программисту](https://t.me/proglibrary)

 - [Библиотека программиста](https://t.me/frontendbooksit)

 - [Годные статьи для Frontend разработчиков](https://t.me/frontendnoteschannel)

 - [Регулярные заметки по практическому JavaScript](https://t.me/notesjs)

 - [Уникальные статьи и переводы](https://t.me/nuancesprog)

 - [Обо всём что связано с frontend разработкой](https://t.me/frontend_mind)

 - [Лагерь IT-специалистов](https://t.me/codecamp)

 - [Канал для подготовки к собеседованиям по фронтенду](https://t.me/frontendInterview)

 - [Твой наставник в мире веб-разработки](https://t.me/WebMentor)

 - [Полезные материалы по всему, что может быть интересно frontend-разработчику](https://t.me/frontendproglib)



## YouTube каналы



 - [Техноманьяк - гайды, полезные материалы, гаджеты для Программистов](https://www.youtube.com/@tehno.maniak)

 - [webDev - образовательный канал о веб-разработке](https://www.youtube.com/@YauhenKavalchuk/featured)

 - [Гоша Дударь - различные подборки видео уроков по созданию сайтов, игр, программ](https://www.youtube.com/c/gosha_dudar)

 - [Хауди Хо - Просто о мире IT](https://www.youtube.com/@HowdyhoNet)

 - [Владилен Минин - видео про фронтенд](https://www.youtube.com/@HowdyhoNet)

 - [Михаил Непомнящий - просто о веб-разработке](https://www.youtube.com/@mishanep/featured)



## Бесплатные курсы



 - [Изучение возможностей git](https://learngitbranching.js.org/?locale=ru_RU)

 - [Курсы от microsoft](https://learn.microsoft.com/ru-ru/training/)

 - [JavaScript для начинающих](https://stepik.org/course/2223/syllabus)

 - [Знакомство с HTML и CSS](https://htmlacademy.ru/courses/basic-html-css)

 - [Основы HTML, CSS и веб-дизайна](https://ru.hexlet.io/courses/html?ref=287543)

 - [Основы программирования](https://ru.hexlet.io/courses/programming-basics?ref=287543)

 - [Первые шаги в JavaScript: создаём сайт](https://netology.ru/programs/javascript-free)

 - [RS School - бесплатная школа программирования](https://rs.school/index.html)

 - [Школа 21 - бесплатная школа от Сбера](https://21-school.ru/)

 - [Alfa campus - бесплатная школа Альфа банка](https://alfa-campus.ru/)

 - [Flexbox](https://scrimba.com/learn/flexbox?utm_campaign=sschool24&utm_content=pre-registration&utm_medium=email&utm_source=mindbox)

 - [CSS Grid](https://scrimba.com/learn/cssgrid?utm_campaign=sschool24&utm_content=pre-registration&utm_medium=email&utm_source=mindbox)

 - [CSS Variables](https://scrimba.com/learn/cssvariables?utm_campaign=sschool24&utm_content=pre-registration&utm_medium=email&utm_source=mindbox)

 - [CSS Animations](https://scrimba.com/learn/cssanimations?utm_campaign=sschool24&utm_content=pre-registration&utm_medium=email&utm_source=mindbox)

 - [ES6+](https://scrimba.com/learn/introtoes6?utm_campaign=sschool24&utm_content=pre-registration&utm_medium=email&utm_source=mindbox)

 - [JavaScript](https://scrimba.com/learn/es6?utm_campaign=sschool24&utm_content=pre-registration&utm_medium=email&utm_source=mindbox)

 - [TypeScript](https://scrimba.com/learn/typescript?utm_campaign=sschool24&utm_content=pre-registration&utm_medium=email&utm_source=mindbox)

 - [React](https://scrimba.com/learn/learnreact?utm_campaign=sschool24&utm_content=pre-registration&utm_medium=email&utm_source=mindbox)

 - [React Hooks](https://scrimba.com/learn/reacthooks?utm_campaign=sschool24&utm_content=pre-registration&utm_medium=email&utm_source=mindbox)



## Тренировка написания кода



 - [LeetCode](https://leetcode.com/)

 - [Codewars](https://www.codewars.com/)

 - [Сoderun](https://coderun.yandex.ru/catalog)

 - [Coderbyte](https://coderbyte.com/)

 - [HackerRank](https://www.hackerrank.com/)

 - [Project Euler](https://projecteuler.net/)

 - [Codeforces](https://codeforces.com/)



## Нейросети для программистов



 - [GitHub Copilot](https://github.com/features/copilot)

 - [GigaCode](https://gigacode.ru/)

 - [Tabnine](https://www.tabnine.com/)

 - [Amazon CodeWhisperer](https://aws.amazon.com/codewhisperer?ref=codesubmit)

 - [Replit GhostWriter](https://replit.com/site/ghostwriter)



## Что почитать?



 - [Хабр](https://habr.com/ru/articles/)

 - [tproger](https://tproger.ru/)

 - [proglib](https://proglib.io/)

 - [Блог Selectel](https://selectel.ru/blog/)



## Автор



- [@FilimonovAlexey](https://github.com/FilimonovAlexey)