Бесплатные курсы
«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, важнейшего инструмента для работы в любой команде.
Комментарии