Марина Александровна

Автор статей по блокчейну, криптовалюте, безопасности и общим темам Представляем наш топ курсов, тренажеров и каналов для фронтенд-разработчиков. Информация будет полезна как новичкам, так и опытным программистам.

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

«Frontend-разработка» (Brainoteka, 91 урок): короткие, но емкие видеоуроки «HTML и CSS», а также «JavaScript» и «jQuery».

«HTML для начинающих» (Code Basics, 41 урок): особенность курса – во встроенном редакторе кода. В итоге ты сможешь самостоятельно «строить» простые html-сайты.

«HTML для начинающих» (LoftBlog, 21 урок): первая часть курса вышла в 2014 году, где рассказывают об основах языка. Вторая часть (2021 год) объясняет изменения в html за эти семь лет.

«JavaScript для начинающих» (Stepik, 17 уроков): самые азы JavaScript для новичков.

«Бесплатный курс по CSS» и «Бесплатный курс по HTML» (Евгений Попов, 45 и 33 урока соответственно): изучение основ HTML и CSS, верстка базовых сайтов для начинающих программистов.

«Бесплатный курс по вёрстке сайтов» (Евгений Андриканич, 54 урока): курс по HTML, CSS и JavaScript. Уроки дополняются и обновляются.

«Вводный курс по HTML и CSS для начинающих» (Дмитрий Лаврик, 5 уроков): пять объемных видеороликов (+ домашние задания) позволят изучить азы верстки и понять «как все это работает».

«Веб-программирование» (Skillbox, 12 уроков): здесь можно изучить JavaScript, CSS и PHP для сложного выбора между бэкэндом и фронтендом.

«Веб-разработчик 10.0» (Glo Academy, 47 уроков): базовые знания HTML и CSS, а также знакомство с WordPress.

«Знакомство с HTML и CSS» (HTML Academy, 83 урока): объемный курс для новичков с практическими занятиями и сайтом для будущего портфолио.

«Курс HTML для начинающих» (WebShake, 12 уроков): базовый html – от тегов до оформления сайта и его запуска. Постоянное общение с преподавателем в Телеграм-чате.

«Курс HTML и CSS — вёрстка сайтов для начинающих» (School-PHP, 11 уроков): основы языков программирования, верстка сайта и использование Photoshop для оформления.

«Курс HTML/CSS» и «Курс JavaScript с нуля до результата» (BeOnMax, 65 и 90 уроков соответственно, вводная часть каждого курса бесплатна): первый курс подойдет новичкам для первого знакомства со средой программирования, а второй будет интересен и опытным айтишникам.

«Обзор Frontend и Backend технологий», «Foundations of Front-End Web Development» и «React JS Frontend Web Development for Beginners» (Udemy, 9, 133 и 32 урока): в первом блоке ты изучишь HTML, CSS, JavaScript, PHP и MySQL. Второй курс на английском языке от иностранного преподавателя содержит 133 (!) видео-лекции по веб-разработке. И третий курс тоже на английском – основы JavaScript и React JS и мобильное приложение-портфолио.

«Основы HTML, CSS и веб-дизайна» (Хекслет, 11 уроков): основы HTML, CSS и дизайна для новичка и создание сайта-портфолио.

«Основы вёрстки сайта» (Нетология, 16 уроков (включая практику)): из особенностей курса – несколько преподавателей, связь с которыми поддерживается через чаты и постоянный доступ к лекциям и заданиям.

«Фронтенд-разработка» (Mail.Ru Group, 13 уроков): основы фронтенда, в том числе и JavaScript.

Больше полезных материалов вы найдете на нашем телеграм-канале «Библиотека фронтендера» Интересно, перейти к каналу

Тренажеры и интерактивное обучение

Edabit (англ.): интерактивное обучение с более чем 10 тысячами заданий. Сами творцы платформы называют свое «детище» – Duolingo для программистов. Можно зарабатывать достижения и повышать свой уровень.

Grid Сritters (англ.): игровой формат изучения CSS Grid – важного инструмента для разметки. Очень красочный и анимированный проект.

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

Interactive Tutorials: благодаря проекту можно программировать сразу в браузере, не тратя время на поиски среды для разработки. Особенность платформы – открытый исходный код.

Ozaria (англ.): игровой сервис для изучения JavaScript. Освоение дизайна интерфейсов и спасение жителей мифического королевства 🙂

Pixactly (англ.): с помощью этой платформы ты научишься на глаз определять параметры страницы и верстать в Pixel Perfect.

Scrimba (англ.): интерактивное обучение в браузере с использованием скринкаста, а также активный чат преподавателей и учащихся в Discord. Здесь можно изучить HTML, CSS и JavaScript.

freeCodeCamp (англ.): видеоуроки, тестовые задания и практика. Можно учиться даже без регистрации.

Отточка навыков

Ace Front-End (англ.): можно не только решить ряд задач по JavaScript, но и подготовиться к собеседованию.

CSS Battles (англ.): можно проверить и улучшить свои навыки в CSS в баттл-стиле.

Coderbyte (англ.): первый блок заданий можно пройти бесплатно. Платформа «оборудована» всеми необходимыми инструментами для фронтенд-разработки.

Codewars (англ.): сайт предлагает проверить свои навыки на 30+ языках программирования. Большинство задач направлены на верстку.

Codewell (англ.): платформа построена на шаблонах Figma, которые идеально подходят для повышения «квалификации» в работе с HTML, CSS и JavaScript. Для регистрации необходим профиль на Github.

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

Front-end Mentor (англ.): процесс развития навыков очень схож с обычной рабочей обстановкой. Можно работать с HTML, CSS, JavaScript и их фреймворками. Регулярно появляются новые задания.

Frontloops (англ.): доступ к заданиям платный (19$ каждый блок). Всего две категории: первая – HTML и CSS (разметка) и JavaScript (элементы).

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

Tree House (англ.): фронтенд-разработчику будет интересен интерактивный курс по JavaScript с блоками заданий и практикой. Стоимость – 25$ в месяц.

Телеграм-каналы

For Web: постоянная публикация свежих новостей из мира айти и ссылки на интересные инструменты.

FrontEnd Books: регулярная публикация новых книг и журналов по фронтенд-разработке и используемым языкам.

FrontEnd Development: ссылки на полезные ресурсы и советы по верстке от опытных программистов.

FrontEndDev: новости, статьи, ссылки и вакансии.

Frontend Info (англ.): статьи по верстке и по каждому языку отдельно.

Frontend&You: полезные советы от практикующего фронтенд-разработчика.

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

Frontender’s notes: статьи и полезные ссылки по HTML, CSS, JavaScript и фреймворкам.

SeniorFrontend: ссылки на полезные ресурсы и практические задачи.

Библиотека фронтендера: большой канал со всей необходимой информацией для фронтенд-разработчика.

Веб-стандарты: первый ру-фронтенд канал в телеграме. Подкасты, советы и полезные ссылки.

Верстальщик от бога: большой канал по верстке.

Задачи по Frontend: тестовые задания для проверки знаний.

Телеграм-чаты

Ember_js: чат по фреймворку Ember.js.

Frontend_ru: большое сообщество по фронтенду.

Javascript_ru: обмен опытом, флуд, советы, полезные ссылки и задачи.

MobX: чат по библиотеке Mobx.

Svelte: обмен опытом по работе с Svelte (фреймворк JS).

angular_js: чат по Angular 1.x.

angular_ru: обсуждение Angular 2.

effector: чат Дмитрия Болдырева – создателя системы Effector.

javascript_jobs: большой чат для поиска работы.

react_js: обсуждение работы в React.

Верстка сайтов HTML/CSS/JS/PHP: чат для обмена опыта и помощи в трудных ситуациях с кодом.

***

Мне нужно оперативно погрузиться во фронтенд. Какой вариант самый быстрый и качественный?

Если 15 лет назад для того, чтобы называть себя фронтенд-разработчиком достаточно было знать HTML, CSS и JavaScript, то сейчас фронтенд-разработка почти не отстает от бэкенд-разработки по количеству фреймворков и сложности стеков. Самый быстрый и качественный вариант — получить знания из первых рук от преподавателей со стажем. Поэтому мы запустили курс «Frontend Basic: принцип работы современного веба», на котором вы:

• освоите стек технологий, который позволит начать работать в любой компании на любом проекте;
• сверстаете свой первый адаптивный макет с учетом семантики и множества декоративных элементов на HTML и CSS;
• поймете, как с помощью JavaScript разрабатывать пользовательские интерфейсы;
• разберетесь, как JavaScript используется в работе с backend и создадите свой первый обмен данными сервером;
• углубитесь в более сложную разработку на React.js и напишете свой интернет-магазин;
• изучите основные команды для работы с GIT, важнейшего инструмента для работы в любой команде.

Интересно, хочу попробовать