Порядочный фронтендер знает HTML и CSS, разбирается во фреймворках и библиотеках, понимает, что находится «под капотом» на серверной стороне. Плюс, обязательно умеет работать с контролем версий, использовать графические редакторы, разбираться в шаблонах разных CMS.
Сегодня наша подборка посвящена именно фронтенд-разработке. В нее вошли 15 бесплатных курсов из раздела Образование на Хабр Карьере, которые познакомят с основами основ — HTML, CSS, JavaScript — и еще с кучей полезных вещей.
Если вы где-то видели интересный бесплатный курс и не нашли его в этом списке — делитесь ссылками в комментариях.
CSS Basics · edX
Вы только начали свой путь в веб-разработке? На этом курсе вас научат профессионально оформлять внешний вид сайтов. В программе рассматриваются базовые свойства CSS и основные, CSS-селекторы, разработка макетов страниц с помощью относительного позиционирования CSS и лучшие практики в веб-дизайне.
HTML Fundamentals · SoloLearn
Это не курс, а обучающая игра по HTML для всех, кто хочет научиться создавать сайты с использованием тегов, элементов и атрибутов. Она состоит из тестов, увлекательных упражнений, контрольных точек и практики, чтобы вы получили больше знаний и драйва от их применения.
Programming for the Web with JavaScript · edX
Здесь вы узнаете, что позволяет браузерам отправлять и получать веб-контент, как создавать динамические интерактивные веб-страницы на JS, а также познакомитесь с объектной моделью документа (DOM), с jQuery, клиентскими библиотеками JavaScript и фреймворками. Обо всем расскажут преподаватели из Университета Пенсильвании.
JavaScript Tutorial · SoloLearn
Курс охватывает все основные функции разработки на JavaScript, в том числе способы сделать сайт более интерактивным, менять его содержимое, проверять формы, создавать файлы cookie и многое другое.
HTML для начинающих · Code Basics
Отличный базовый курс об основах работы с HTML-разметкой. Программа состоит из семи модулей и научит вас основам форматирования текста, встраиванию в документ фото, видео и аудио, структуре документа и семантическим элементам HTML5.
Знакомство с HTML и CSS · HTML Academy
На этом курсе вы познаете основы HTML и CSS и на практике разберетесь с семантической разметкой и базовыми механизмами стилизации на примере небольшого сайта. В программе 5 глав, домашка к каждой, а еще интересные задания и испытания, чтобы вы не заскучали от переизбытка теории.
CSS для начинающих · Code Basics
Каскадные таблицы стилей позволяют оформлять содержимое страницы. После прохождения этого курса вы научитесь настраивать внешний вид текста и блоков на сайте: отступы, цвет, размер шрифта и многие другие параметры. В программе четыре подробных модуля с лекциями и упражнениями.
HTML5 and CSS Fundamentals · edX
Узнайте, как создавать сайты с использованием HTML5 и базового CSS. Курс состоит из шести модулей, где вас познакомят с «большой тройкой» — HTML5, CSS и JavaScript, расскажут об элементах, тегах, атрибутах и стилях, а также об отладке багов и об основах лейаута страниц.
Курс Javascript / jQuery · FructCode
Мини-курс, который даст вам начальное представление о работе с DOM, как с помощью JavaScript ES5, так и с помощью jQuery. Курс подходит для начинающих с нуля, но знать основы HTML/CSS все же нужно. Программа включает четыре блока и 21 задание, чтобы потренировать полученные навыки.
JavaScript для начинающих · Stepik
Этот курс познакомит слушателей с основами разработки на JavaScript и подготовит к практическому применению этого инструмента. Он рассчитан на новичков в программировании. Чтобы освоить программу достаточно желания, внимательности и общей компьютерной грамотности.
Веб разработчик · Яндекс.Практикум
Бесплатный вводный курс, на котором вы сможете попробовать себя в качестве веб-разработчика и обучиться азам этой профессии. Полученный опыт позволит оценить возможности, силу мотивации, и решить, нужно ли идти дальше. В бесплатную часть входит 20 часов теории и 215 практических заданий.
Курс HTML / CSS · beONmax
Окончив этот курс, вы будете знать основы HTML и CSS, уметь создавать адаптивные HTML страницы. Благодаря интерактивным тестам и заданиям, вы сможете закрепить полученные знания по HTML и CSS верстке и разработке сайтов на практике.
HTML для начинающих · Loftblog
За 11 компактных видеоуроков этого курса вы познакомитесь с тегами и атрибутами, списками, таблицами, фреймами, формами и семантическими особенностями HTML5.
Основы HTML и CSS · Нетология
Здесь вас научит вносить правки в HTML-код страницы и верстать текстовые блоки, менять оформление и стиль отдельных элементов сайта. А еще вы узнаете, какие специалисты работают над разными частями веб-проектов и как их работа соединяется в общий результат.
Курс HTML / CSS · FructCode
С помощью этого видеокурса вы научитесь верстать адаптивные HTML-страницы и самостоятельно создадите портал КиноМонстр, работающий как на компьютерах, так и на мобильных устройствах.
Больше бесплатных и платных курсов для фронтендеров, тестировщиков, девопсов, дизайнеров и менеджеров — в разделе Образование на Хабр карьере.
.timeline{display:flex;overflow:unset}.post__text{overflow:initial}.timeline a,.timeline a:visited{color:#558cb7;text-decoration:none}.tm-article-body .timeline__container_years{display:none}.timeline__container_items{display:flex;flex-direction:column;}.timeline_reverse .timeline__container_items{flex-direction:column-reverse;}.timeline_reverse .timeline__years{flex-direction:column-reverse;}.timeline_reverse .timeline__group{display:flex;flex-direction:column-reverse;}.timeline_reverse .timeline__years a:last-child{margin-bottom:28px;}.timeline_reverse .timeline__years a:first-child{margin-bottom:0;}.timeline__years{display:flex;flex-direction:column;border:1px solid #e7e7e7;box-sizing:border-box;border-radius:8px;padding:24px 16px;margin-right:24px;position:sticky;top:14px}.timeline__years a,.timeline__years a:visited{display:block;margin-bottom:28px;font-size:14px;letter-spacing:.2px;color:#111}.timeline__years a.active{text-decoration-line:underline;text-decoration-style:dotted;color:#558cb7}.timeline__years a:last-child{margin-bottom:0}.timeline__item{border:1px solid #e7e7e7;box-sizing:border-box;border-radius:8px;padding:24px;color:#000;margin-bottom:24px}.timeline__group:last-child .timeline__item:last-child{margin-bottom:0}.timeline__date{font-size:14px;letter-spacing:.2px;margin-bottom:8px}.timeline__title{font-family:Fira Sans;font-style:normal;font-weight:500;font-size:24px;line-height:120%;letter-spacing:.2px;margin-bottom:12px}.timeline a:hover{text-decoration:underline; text-decoration-style:dotted;}.timeline img.timeline__image{margin:0 -24px 16px;width:calc(100% + 48px);max-width:initial}.here_now{padding-bottom: 24px}.timeline__revert{margin:12px auto 32px;display:block;border:1px solid #639fbc;color:#639fbc;border-radius:32px;padding:6px 46px;font-size:14px;cursor:pointer;background:#fff;outline:none;}.timeline__button-next{border:1px solid #75aeca;background-color:transparent;padding:0 13px;height:36px;border-radius:3px;font-size:13px;display:inline-flex;align-items:center;justify-content:center;color:#548eaa;text-decoration:none!important}.timeline__button-next:hover{border:1px solid transparent;background-color:#7aa1bd;color:#fff!important}
Автор: Хабр Карьера