Курсы — HTML Academy

На курсе вы создадите свой первый сайт и запрограммируете его компоненты

Начать курс бесплатно

  • Подходит ли вам курс

    Этот курс подойдёт для полных новичков, для тех, кто не сталкивался ни с миром веб-разработки, ни с технологиями HTML, CSS и JavaScript. Мы изучим основы веб-технологий, и вы попробуете себя в роли верстальщика и фронтендера.

  • Ваш уровень после курса

    Когда вы пройдёте курс, вы сможете на любительском уровне верстать простые странички и оживлять небольшие компоненты на сайте. А также будете готовы осваивать продвинутые темы и начать прокачку до уровня фрилансера или стажёра в небольшой веб-студии.

  • Чему вы научитесь:
    • изучите базовые конструкции языков HTML, CSS и JavaScript,
    • разберётесь с тегами и их параметрами, CSS-свойствами, селекторами и каскадностью,
    • изучите команды JavaScript, переменные условия, циклы,
    • попробуете себя в роли фронтендера:
      • внесёте правки в вёрстку и скрипты страницы,
      • сверстаете с нуля сайт из графического макета,
      • напишете с нуля интерактивные компоненты по техническому заданию.

  1. Раздел 1. Знакомство с фронтендом

    • Что такое HTML? Основные понятия: теги, одиночные и парные теги, атрибуты тегов.
    • Что такое CSS? Основные понятия: CSS-свойства и их значения, CSS-правила, селекторы.
    • Пробуем себя в роли верстальщика, вносим правки в содержание и оформление существующей веб-страницы.
    • Отрабатываем приёмы стилизации по классам и миксование классов.
    • Что такое JavaScript? Основные понятия: скрипт, программа, команда, переменная, консоль, методы, события и их обработчики.
    • Приёмы для работы с элементами страницы: поиск элементов по селектору, управление списком классов, реагирование на событие, получение и изменение значений атрибутов.
    • Пробуем себя в роли фронтендера, оживляем компонент для переключения тем и программируем уведомление в форме.

  2. Раздел 2. Знакомство с HTML и CSS

    • Doctype в HTML. Основные теги страницы html, head, body. Теги для описания служебной информации.
    • Теги для описания смысловых разделов, навигации.
    • Заголовки, параграфы, списки. Вложенные списки.
    • Цитаты, фрагменты кода, дата и время.
    • Нижний и верхний индекс, акцентирование внимания, важная информация.
    • Универсальные теги div и span.
    • Ссылки, адреса ссылок. Относительные и абсолютные адреса. Ссылка-якорь.
    • Тег img, изображение. Обзор основных форматов. Управление размерами изображений.
    • Теги figure и figcaption, демонстративный материал.
    • Синтаксис CSS-правил, селекторов, свойств и значений. Обычные и составные свойства.
    • Типы значений: абсолютные и относительные.
    • Стили по умолчанию, каскад и конфликт свойств.
    • Встроенные стили, атрибут style. Встраивание и подключение внешних стилей.
    • CSS-свойства для управления текстовыми параметрами: семейство, размер и насыщенность шрифта, высота строки, цвет, курсив.
    • Абсолютные и относительные размеры шрифта и высоты строк.
    • Горизонтальное и вертикальное выравнивание текста, отступы.
    • Управление пробелами и регистром символов, подчёркивание, зачёркивание и другие текстовые эффекты.
  3. Раздел 3. Мастер-класс «Создание семантической разметки по макету»
    • Что такое разметка и что такое разметка по макету. Качества хорошей разметки: валидность и семантичность.
    • Пошаговый алгоритм создания разметки по макету.
    • Разбираем примеры разметки страниц и отдельных компонентов на основе графического макета.
    • Практикуемся самостоятельно делать разметку страницы по макету в тренажёре-мастерской.
    • Работаем с учебным проектом: создаём разметку страницы.
  4. Раздел 4. Базовые механики стилизации
    • Селекторы по тегам, по классам и по id. Селекторы атрибутов.
    • Контекстные, соседние и дочерние селекторы.
    • Псевдоклассы. Псевдоклассы :nth-child, :hover, :focus, :link, :visited и :active.
    • Динамические эффекты с помощью :hover.
    • Наследование. Наследуемые и ненаследуемые свойства. Принудительное наследование. «Перекрёстное» наследование.
    • Каскадирование. Специфичность селекторов. Расчёт значения специфичности.
    • Управление цветом фона и фоновыми изображениями.
    • Расположение, повторение и режим прокрутки фоновых изображений.
    • Задание нескольких фонов. Эффекты с повторяющимся фоном.
    • Использование растровых спрайтов.
  5. Раздел 5. Мастер-класс «Экспорт графики и базовая стилизация по макету»
    • Что такое стилизация по макету, какие задачи решаются во время базовой стилизации. Что такое экспорт графики.
    • Графический редактором Figma. Интерфейсы редактора, инструменты редактора для экспорта графики и параметров стилизации из макета.
    • Использование абсолютных и относительных путей в проекте.
    • Пошаговые алгоритмы экспорта графики и выбора формата изображения.
    • Примеры экспорта графики и параметров CSS-свойств из графического макета.
  6. Раздел 6. Боксовая модель и позиционирование
    • Боксовая модель и поток. Свойство display, управление типом бокса.
    • Особенности блочных, строчных и блочно-строчных типов бокса.
    • Ширина, высота, рамки, внутренние и внешние отступы боксов. Особенности внешних отступов блочных боксов.
    • Стандартный режим расчёта размеров блочных боксов. Управление этим режимом с помощью box-sizing.
    • Знакомство с семейством табличных боксов.
    • Режимы позиционирования: статичное, относительное, абсолютное и фиксированное.
    • Управление координатами позиционированных элементов.
    • Точка отсчёта координат. Явная и неявная точка отсчёта.
    • Свойство z-index, управление «глубиной» позиционированных элементов.
  7. Раздел 7. Базовые механики построения сеток
    • Сетка и макет страницы. Отличия сеток страниц от сеток компонентов (микросеток).
    • Основные понятия гридов: грид-шаблон, грид-контейнер и грид-элемент.
    • Описание грид-шаблонов, управление размерами грид-областей и отступами между ними.
    • Создание ассиметричных грид-шаблонов. Грид-шаблоны с динамическим количеством колонок.
    • Распределение грид-элементов по грид-областям, ручное и автоматическое. Режимы автозаполнения грид-контейнера.
    • Управление выравниванием грид-элементов.
    • Основные понятия флексов: флекс-контейнер, флекс-элемент, оси, флекс-ряды.
    • Управление размерами и отступами флекс-элементов. Автоматические внешние отступы.
    • Выравнивание флекс-элементов вдоль главной и поперечной осей.
    • Многострочный флекс-контейнер, выравнивание флекс-рядов.
    • Управление визуальным порядком флекс-элементов.
    • Примеры вёрстки типовых сеток страниц и компонентов на флексах и гридах.
  8. Раздел 8. Мастер-класс «Создание сеток страниц по макету с помощью флексбоксов»
    • Выделим базовые типы сеток, способы их создания и тонкости, которые надо учитывать.
    • Затем научимся комбинировать базовые типы для создания более сложных сеток страницы.
    • Рассмотрим приемы для получения размеров, нужных для создания сеток, из редактора Figma.
  9. Раздел 9. Мастер-класс «Вёрстка компонентов интерфейса по макету»
    • Завершаем стилизацию страницы.
    • Научимся строить сетки отдельных компонентов, стилизовать интерфейсные тексты.
    • Разберемся с тонкостями стилизации текстового потока.
    • Познакомимся с особенностями создания мелких декоративных элементов.
  10. Раздел 10. Базовые механики «оживления» интерфейсов
    • Условия. Булевы значения. Операторы сравнения: больше, меньше, равенство, строгое равенство, неравенство, строгое неравенство.
    • Комбинирование условий с помощью операторов «логическое И» и «логическое ИЛИ».
    • Проверка наличия класса у элемента с помощью classList.contains.
    • Создание элементов с помощью createElement и добавление их на страницу с помощью append.
    • Поиск элементов с помощью querySelectorAll, коллекции, доступ к элементам коллекции по индексу.
    • Цикл for of. Перебор коллекций с помощью цикла.
    • Добавление обработчиков событий внутри цикла.
    • Работа с data-атрибутами.
    • Обработка события отправки формы.
    • Обработчик событий oninput, получение значений из текстовых полей, обработка текста во время ввода.
    • Обработчик событий onchange, получение значений из раскрывающихся списков.
    • Отличия onchange и oninput.
    • Свойство checked. Получение значения чекбокса.
    • Обработка событий прокрутки страницы. Работа с координатами прокрутки.
    • Управление прокруткой c помощью метода scrollTo, плавная прокрутка.
    • Управление стилями элемента с помощью style.
  11. Раздел 11. Мастер-класс «Создание интерактивных компонентов интерфейса»
    • Научимся создавать динамические страницы, которые реагируют на действия пользователя.
    • Узнаем, как управлять элементами веб-страницы через JavaScript.
    • Рассмотрим полезные свойства и методы элементов для работы с содержанием.
    • Запрограммируем несколько типовых компонентов.

10 курсов по HTML и CSS для новичков

Нетология Fructcode Hexlet HTML Academy: профессиональная вёрстка сайтов Яндекс.Практикум Codecademy Udacity Университет Джона Хопкинса на Coursera Udemy: master of basics HTML5 & CSS3 Udemy: Advanced CSS Для тех, кто не хочет проходить курсы

По исследованиям Хабра, зарплаты веб-разработчиков уровня Junior стартуют от 50 000 ₽, а Senior-разработчики берут от 185 000 ₽. Изучение HTML и CSS — один из способов войти в эту профессию. Но не только: языки пригодятся и редактору, и дизайнеру, и email-маркетологу.

В нашей подборке — лучшие курсы по HTML и CSS на русском и английском языке. Большая часть из них — для новичков, но есть и полезные программы для более опытных.

Для начинающих: Нетология, Fructcode, Hexlet, Яндекс.Практикум, Codecademy, Udacity, Университет Джона Хопкинса на Coursera, Udemy: master of basics HTML5 & CSS3

Для продолжающих: HTML Academy: профессиональная вёрстка сайтов, Codecademy, Udemy: Advanced CSS

На русском: Нетология, Fructcode, Hexlet, HTML Academy: профессиональная вёрстка сайтов, Яндекс.Практикум

На английском: Codecademy, Udacity, Университет Джона Хопкинса на Coursera, Udemy: master of basics HTML5 & CSS3, Udemy: Advanced CSS

Бесплатно: Нетология, Udacity, Udemy: master of basics HTML5 & CSS3

Нетология

Сайт. https://netology.ru/programs/html-css-base/

Язык.

Русский

Кому подойдёт. Начинающим разработчикам, которые хотят развиваться в HTML и CSS. Дизайнерам, контент-менеджерам и интернет-маркетологам, которые хотят научиться работать в коде и верстать сайты.

Срок обучения. 3 недели в виде интенсива. 

Цена. Бесплатно.

Чему учат:

  • работать с HTML и CSS;
  • вносить правки в код страницы и верстать текстовые блоки с нуля;
  • изменять оформление и стиль блоков сайта;
  • готовить контент к публикации на сайте.

В курсе 16 практических заданий, о которых рассказывают за 5 занятий. Каждое занятие — новая тема:

Теги для разметки и атрибуты. Расскажут о тегах для абзацев, цитат, ссылок, картинок. Объяснят, как сделать разметку читабельной. 

Списки и таблицы. Научат создавать разметку для многоуровневого списка, оформлять таблицы, делать заголовки и объединять ячейки с помощью атрибутов.

Селекторы и свойства. Объяснят, как описывать CSS-правила, изменять размер шрифта, его начертание и цвет. 

Оформление текстовых блоков с помощью CSS. Помогут изменить маркеры в списках и установить вместо стандартного символа оригинальную картинку. Расскажут о форматах указания цвета и покажут, как изменить фон сайта.

Основы клиент-серверного взаимодействия. Введут в понятие DNS и HTTP, объяснят разницу между backend и frontend.

Весь курс — это видеолекции и презентации, которые преподаёт Владимир Языков, веб-разработчик со стажем 13 лет, разработчик проектов для S7, ВТБ, Tele2.

Fructcode

Сайт. https://fructcode.com/ru/courses/html-and-css-advanced/

Язык. Русский

Кому подойдёт. Тем, кто хочет разобраться в основах веб-разработки.

Срок обучения. Видео на 17 часов.

Цена. Доступ по подписке: $7,6 на месяц; $11,6 на полгода; $15,6 на год.

Курс представляет собой видеоуроки, в которых рассказывают об основах HTML и CSS. Программа онлайн обучения разделена на 19 частей, в каждой — несколько видео по 2–10 минут. Первые 11 частей посвящены теории. Остальные — практические задания.

Темы теоретической части:

Базовые HTML и HTML5. О базовой разметке и тегах.

Базовый CSS. О CSS селекторах и псевдоподклассах. Объяснят CSS-свойства Margin, Padding, Box-sizing и свойства display — block, inline, inline-block, none.

Позиционирование CSS Grid и Flexbox. О свойствах grid-template и различных видах позиционирования.

Подключение шрифтов к сайту. Покажут простой и продвинутый способы.

Адаптивная вёрстка. Объяснят единицы измерения: px, проценты, vw, vh.

В практической части вы научитесь:

  • работать в Figma;
  • создавать header, footer, блок фильмов и сериалов, блок hero;
  • адаптировать вёрстку под ПК и смартфоны;
  • создавать страницу для просмотра фильмов и авторизации.

В конце обучения вы создадите собственный сайт для просмотра фильмов и получите сертификат о прохождении курса.

Hexlet

Сайт. https://ru.hexlet.io/categories/html/courses

Язык. Русский

Кому подойдёт. Новичкам, которые приходят в профессию с нуля. Самоучкам, которые не справляются с обучением без преподавателя.

Срок обучения. 105 часов.

Цена. 3900 ₽ в месяц за доступ ко всем курсам.

Такой сертификат получают выпускники после прохождения курса по верстке. Источник

На курсе дают базу по HTML и CSS, учат верстать адаптивные страницы и работать с препроцессорами, рассказывают о Flex, Sass, Bootstrap.

Всего у Hexlet 193 текстовых урока, которые разбиты на 13 модулей и посвящены таким темам:

Основы веб-разработки. Введут в базовую терминологию.

HTML5. Расскажут о разметке веб-страниц и работе со стилями.

CSS. Покажут, как визуально оформлять сайт и сделать анимации интерфейсов.

Адаптивность. Научат создавать страницы, чтобы с ними было одинаково удобно работать на ПК и на смартфонах.

Инфраструктура. Объяснят, как работать с командной строкой, Git, NPM и линтерами.

Инструменты автоматизации Sass, Pug и Gulp. Научат автоматизировать процессы на  HTML и CSS.

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

За время обучения вы выполните 130 упражнений и сделаете 3 проекта в портфолио на GitHub. Также выполните 11 Open Source проектов и научитесь работать с чужим кодом.

HTML Academy: профессиональная вёрстка сайтов

Сайт. https://htmlacademy.ru/courses/basic-html-css

Язык. Русский.

Кому подойдет. Новичкам, которые прошли тренажёры от HTML Academy.

Срок обучения. Стандартный — 2 месяца по 20 часов в неделю. Расширенный — 5,5 месяцев по 8 часов в неделю.

Цена. Стандартный — 15 400 ₽, в рассрочку 3850 ₽ в месяц. Расширенный — 36 900 ₽ или 9220 ₽ в месяц по рассрочке.

Курс с лайвами, практикой и ревью кода. Перед тем, как его покупать, нужно пройти тренажёры от академии. Тренажёры — это 4 модуля по несколько частей. Они познакомят новичков с веб-разработкой, HTML, CSS, JavaScript и PHP.

Курс состоит из 10 частей, последняя — защита диплома. В остальных рассматривают такие темы:

Разметка. Расскажут о синтаксисе HTML, категории тегов и правила их выкладывания. Познакомят с интерфейсом Figma.

Графика. Объяснят интерфейс Figma подробнее. Научат создавать файловую структуру проектов и выбирать правильный формат файлов.

Базовая стилизация. Обучат CSS с нуля, объяснят шрифты и типографику. Помогут установить контентную и декоративную графику на страницы проекта.

Сетки страниц и компонентов на флексах. Научат анализировать сетки на макетах и расскажут о Flexible box layout — CSS раскладке для создания пользовательских интерфейсов.

Сетки компонентов на гридах. В нём познакомят с Grid Layout — ещё одна CSS раскладка.

Декоративные элементы. Объяснят, как использовать декоративную графику. Научат типографике и визуальному оформлению контента.

Попапы, слайдеры, формы. Покажут, как верстать всплывающие формы и встраивать модальные окна на страницы.

За время обучения вы создадите один проект в портфолио. Есть расширенный формат, за который студенты выполняют три проекта для портфолио.

Те, кто прошёл курс «Профессиональная вёрстка», могут приобрести следующий — «Адаптивная вёрстка». Он рассчитан на опытных верстальщиков. На курсе научат делать разметку по методу БЭМ, писать CSS-код на препроцессорах, формировать адаптивную сетку и автоматизировать сборку проектов. 

Обучаться можно по стандартному пакету (23 900 ₽ — 2 месяца по 20 часов в неделю) или расширенному (48 900 ₽ — 5,5 месяцев по 8 часов в неделю).

Яндекс.Практикум

Сайт. https://practicum. yandex.ru/web/

Язык. Русский

Кому подойдёт. Новичкам, которые хотят стать веб-разработчиками и работать с HTML, CSS, NodeJS, React и другими технологиями. Тем, кто хочет вырасти из верстальщика в веб-программиста.

Срок обучения. 10 месяцев по 20 часов в неделю.

Цена. 140 000 ₽. Можно в кредит — от 7613 ₽/мес. Для тех, кто не уверен в курсе и выборе профессии, есть бесплатная вводная часть об основах разработки на 20 часов.

Здесь рассказывают об основах и возможностях HTML и CSS, учат работать с макетами и адаптивной вёрсткой, а также вводят в JavaScript и React.

Курс разбит на 6 модулей, по несколько недель каждый. О чём рассказывают:

Вводный модуль HTML, CSS, JavaScript. Научат правилам разметки HTML с нуля и работе со стилями: управлять цветом, шрифтами, расположением блоков на странице. Расскажут о базовом синтаксисе HTML и CSS, наборе тегов и стилистических правилах.

Расширенные возможности HTML и CSS. Расскажут о методологии БЭМ. Научат строить модульные сетки, подключать к проекту систему контроля версий Git и работать с командной строкой.

Адаптивная вёрстка и работа с макетом. Объяснят макеты и их виды. Научат создавать интерфейсы для разных устройств.

Базовый JavaScript и работа с браузером. Научат работать с условиями, циклами и функциями, создавать интерактивные формы с проверкой данных.

Погружение в JavaScript. Введут в объектно-ориентированное программирование, асинхронность и обмен данными с сервером. Научат писать модульный код.

Интерфейсы на React. Познакомят с концепцией React и созданием сложных интерфейсов.

Основы бэкенда для frontend-разработчиков. Научат создавать веб-приложения со взаимодействием с сервером.

В конце курса у вас будет 5 работ в портфолио, которые пригодятся в поиске работы. А сам курс закончится защитой дипломной работы.

Codecademy

Сайт. https://www. codecademy.com/catalog/language/html-css

Язык. Английский.

Кому подойдёт. Новичкам, которые хотят попробовать веб-разработку. Тем, кто уже знает основы HTML и CSS и хочет прокачать навыки.

Срок обучения. Без ограничений.

Цена. Обучение доступно по подписке: версия Pro Lite стоит $11,99; версия Pro (помогают подготовиться к собеседованию и найти работу) — $15,99. 

Если вы студент и хотите изучать веб-разработку, можете получить скидку 35% на подписку. Для этого нужно предъявить студенческий.

На Codeacademy есть 13 текстовых курсов, которые разбиты по уровням сложности: для начинающих и миддлов. Также они делятся на платные и бесплатные.   

Бесплатный вводный курс состоит из 6 уроков и рассчитан на 9 часов. Темы курса:

Элементы и структуры HTML. Расскажут об основах кода и стандартах HTML.

Таблицы. Научат представлять информацию в виде таблиц.

Формы. Объяснят, как их создавать и настраивать.

Синтаксис. Расскажут, как писать чистый и понятный код, используя семантические HTML-коды.

В платном курсе для начинающих информации больше. Время прохождения зависит от вас, т.к. курс открыт постоянно. В нём рассказывают о базовом и промежуточном CSS, адаптивном дизайне, CSS flexible и transitions. В конце курса вы напишете проект на GitHub.

Udacity

Сайт. https://www.udacity.com/course/intro-to-html-and-css—ud001

Язык. Английский.

Кому подойдёт. Подходит для изучения новичкам, которые знают английский и хотят определиться, интересна им веб верстка или нет.

Срок обучения. 3 недели, около 5 часов в неделю.

Цена. Бесплатно.

Здесь обучают основам HTML и CSS, рассказывают, как использовать код для создания веб-сайтов и работать в редакторах кода.

Курс разделён на 4 урока по несколько видео или текстовых файлов. Темы обучения:

HTML-синтаксис и HTML-теги. Расскажут о древовидной структуре HTML и текстовых редакторах.

Работа с визуальным контентом. Научат добавлять изображения и списки на сайты. Добавлять заголовки, структурировать страницы и создавать списки элементов. 

Синтаксис CSS. Объяснят блочную структуру CSS, наборы правил и инструменты разработчика.

Декоративные элементы. Научат стилизовать изображения и страницы, обучат типографике.

Университет Джона Хопкинса на Coursera

Сайт. https://www.coursera.org/learn/html-css-javascript-for-web-developers

Язык. Английский.

Кому подойдет. Тем, кто хочет создавать сайты с нуля и работать с последними версиями HTML и CSS.

Срок обучения. 5 недель, 40 часов видео.

Цена. $79.

Курс по основам веб-разработки с использованием HTML, CSS и JavaScript. После обучения вы научитесь писать программы на JavaScript, работать с HTML и CSS, делать страницы интерактивными и адаптивными.

Обучение разбито на 5 модулей по несколько видео в каждом. Длительность одного модуля — одна неделя. В каждом модуле есть материалы для самостоятельного обучения и тесты. Видеоуроки посвящены таким темам:

Основы HTML5. Расскажут, как правильно изучать программирование. Объяснят основы HTML5: структуру документа, основные и семантические теги.

Основы CSS3. Научат визуальному оформлению страниц, блочной структуре. Помогут создать адаптивный дизайн. Познакомят с Twitter Bootstrap с его основной сеточной системой.

Создание статичного сайта. Объяснят основы взаимодействия с клиентом через веб-сайт, помогут создать сайт с нуля.

Основы JavaScript. Расскажут о конструкциях языка и типах Javascript. Объяснят объекты, функции, массивы, замыкания и другие понятия.

Использование JavaScript при создании веб-приложений. Научат управлять компонентами веб-страницы с помощью API. Расскажут об Ajax — способе передачи информации на сайты. Объяснят, что такое HTTP и как работать с JSON — текстовым форматом данных.

В конце обучения вы подключите сайт к серверам, чтобы тот динамически обновлял информацию на странице без ручной перезагрузки.

Udemy: master of basics HTML5 & CSS3

Сайт. https://www.udemy.com/course/master-the-basics-of-html5-css3-beginner-web-development/

Язык. Английский.

Кому подойдет. Новичкам, которые знают английский и хотят узнать базовую информацию о веб-разработке.

Срок обучения. 3 часа.

Цена. Бесплатно.

Небольшой видеокурс, в котором закадровый голос объясняет происходящее на экране и рассказывает об основах HTML и CSS.

Курс состоит из 38 лекций на 3 часа по 5–10 минут каждая. Чему научитесь за это время:

В разделе HTML: создавать веб-страницы, добавлять изображения, изменять цвета и строить списки. Также объяснят про теги и ссылки.

В разделе CSS: стилизовать веб-страницы, изменять цвета и размеры шрифта, добавлять поле содержимого на веб-страницу.

Udemy: Advanced CSS

Сайт. https://www.udemy.com/course/advanced-css-and-sass/

Язык. Английский.

Кому подойдет. Тем, кто уже знаком с HTML и CSS и умеет с ними работать.

Срок обучения. 28 часов.

Цена. $85 (как правило, действует скидка, и будет значительно дешевле).

Курс по продвинутому HTML и Sass. Программа обучения состоит из 10 разделов и 126 лекций. 

Чему учат на лекциях:

Продвинутые HTML и CSS. Расскажут об адаптивных изображениях в HTML и CSS, которые ускоряют загрузку страниц. Научат работать с SVG-изображениями и видео — создавать фоновые видеоэффекты.

CSS-анимации. Объяснят, как работать с ключевыми кадрами, анимацией и красивыми переходами. Расскажут об архитектуре CSS: компонентном дизайне, методологии БЭМ, создании повторно используемого кода.

Макеты Flexbox. Помогут создать гибкий макет с использованием этой технологии.

Макеты CSS Grid. Покажут, как создать проект на грид-раскладке.

Использование Sass в реальных проектах. Расскажут о глобальных переменных, архитектуре CSS и управлении медиа-запросами.

Продвинутый адаптивный дизайн. Научат создавать адаптивные страницы под мобильные устройства и ПК. Расскажут об адаптивных изображениях в HTML и CSS для быстрой загрузки страниц

Экосистема NPM. Объяснят рабочие процессы разработки и процессы построения веб-проектов.

После прохождения курса вы получите сертификат об окончании обучения.

Для тех, кто не хочет проходить курсы

Если не нравятся курсы или проходить их неинтересно, можно изучать HTML и CSS самостоятельно. Есть справочники, в которых собран большой объём информации для обучения.

Webref — полное руководство для тех, кто хочет самостоятельно разобраться в HTML и CSS. Книга рассказывает об основных принципах и этапах веб-разработки: блочных моделях, позиционировании, типографики, фонах и т. д. 

Каждая глава разделена на блоки и содержит примеры с демонстрациями на макетах. В них можно смотреть, как код выглядит в результате, как он описан в HTML и CSS.

HtmlBook — ещё один самоучитель, который предназначен для новичков. Он содержит множество иллюстраций с примерами кода, вопросами для проверки и заданиями для самостоятельной работы. Это поможет выучить код и сразу применять его на практике.

Самоучитель разделён на 13 глав. В них рассказывается о тегах, структуре документов, шрифтах, якорях, таблицах, списках и т.д. Также на сайте есть справочник по различным HTML-тегам с описанием, зачем их используют. Есть статьи по HTML5.

CSSBook — самоучитель на том же сайте, что и HtmlBook. В нём также есть примеры кода, иллюстрации и задания.

Книга состоит из 22 глав, в которых рассказывают о базовых правилах CSS, селекторах тегов, идентификаторах, псевдоклассах и т.д.

Кроме этого, на сайте есть справочник по CSS и рецепты, в которых собраны готовые ответы на задачи по вёрстке, работе с изображениями, списками. Рецепты построены так: даётся задача — и описывается её решение с примерами.

Но и это не всё — есть полезные статьи по CSS3.

Developer.Mozilla — большое руководство по работе с HTML и CSS для начинающих. Здесь рассказывают о мультимедиа, таблицах, макетах и текстах. Есть информация и по JavaScript.

Минус руководства в том, что с английского на русский его переводило сообщество разработчиков, поэтому некоторые моменты объяснены сложным языком.

W3Schools — библиотека информации по разным языкам программирования, в том числе HTML и CSS. Уроки написаны на английском, но все объяснения подкреплены примерами использования. А в конце объяснения можно поработать с кодом самостоятельно.

В учебнике по HTML собрана информация по тегам, формам, API, графике, ссылкам. Также есть 100 упражнений, которые можно выполнять на сайте и прокачивать навыки.

В справочнике по CSS рассказывают о базовых вещах: шрифты, таблицы, изображения и т.д. Есть материалы для продвинутых разработчиков — о переменных, масках, 2D и 3D графике.

CSS Tricks — это не просто самоучитель, а сборник трюков, фишек и гайдов с подробным описанием всех новых технологий в области HTML/CSS. Книга на английском языке.

На CSS Tricks разные разработчики выкладывают свои методы работы с кодом и рассказывают, как можно сделать красивую форму, список, шрифт и другие элементы. И это не просто текстовые описания — это готовые примеры кода, которые можно копировать и использовать в своих проектах.

Поделиться

СВЕЖИЕ СТАТЬИ

Другие материалы из этой рубрики

Не пропускайте новые статьи

Подписывайтесь на соцсети

Делимся новостями и свежими статьями, рассказываем о новинках сервиса

«Честно» — авторская рассылка от редакции Unisender

Искренние письма о работе и жизни. Свежие статьи из блога. Эксклюзивные кейсы и интервью с экспертами диджитала.

Оставляя свой email, я принимаю Политику конфиденциальности

Наш юрист будет ругаться, если вы не примете 🙁

Изучите HTML CSS

Изучите HTML CSS

Самый простой способ выучить

семантику и доступный HTML и CSS шаг за шагом.

Учитесь в интерактивной среде.
Читайте короткие уроки, делайте заметки и выполняйте задания прямо в браузере.

Попробуйте →

Анонимные файлы cookie используются для повышения качества курса.

Пришло время изучить


 HTML CSS с
 правильной семантикой и доступностью.

Изучите HTML CSS с нуля и попрактикуйтесь в интуитивно понятной среде. На протяжении этого курса вы узнаете о семантике и доступности.

Вы будете читать короткие уроки и решать задачи и проекты шаг за шагом. Попробуйте первые 50 уроков, задач и карточек бесплатно. Вы можете перейти на учетную запись Pro с единовременным платежом, который дает вам доступ на 5 лет.

Изучение HTML CSS подходит как для начинающих, так и для опытных разработчиков, которые хотят правильно изучить HTML CSS.

Чему вы научитесь

Этот курс охватывает HTML и CSS с нуля. Хотя вы можете легко получить результат на экране с помощью HTML и CSS, важно иметь правильную семантику и доступность.

У нас уникальный подход, так как нам нравится объяснять концепции шаг за шагом, чтобы вы могли полностью понять, как это работает.

Уроки и задачи шаг за шагом проведут вас по этим темам:

  • Доступность
  • Семантика
  • Заголовки
  • Метатеги
  • Семантические элементы
  • Несемантические элементы
  • Проверка HTML
  • Направление слева направо
  • Горизонтальный режим письма
    • 900 34 Ориентиры
  • Режим чтения
  • DevTools (проверка)
  • Изображения
  • Шрифты
  • Единицы
  • Отзывчивость
  • Блочные модели
  • Селекторы
  • Сворачивающиеся поля
  • CSS (ось) Сокращения
  • Anchors
  • UI Kit
  • Доступность цвета
  • Пользовательские свойства
  • Flex
  • Сетка
  • Позиционирование
  • Формы
  • Переменный шрифт s
  • Контексты стекирования
  • Контейнерные запросы
  • Scroll Snap
  • Адаптивные утилиты
  • Многое другое . ..

Реальные проекты

Чтобы применить полученные знания, у нас есть для вас 2 проекта. Эти 2 проекта повторяются на протяжении всего курса, помогая вам применить полученные знания.

После завершения курса вы сможете использовать эти проекты в своей (необразовательной) работе.

HTML Карточки CSS

Этот курс разработан для учащихся. Вот почему мы разработали отдельное приложение с карточками, где вы можете закрепить новые понятия, которые вы узнали, используя интервальные повторения.

Повторение с интервалами оказалось более эффективным методом обучения.

Что говорят люди


Тодд 🦞

@toddlibby

Это то, о чем я говорю уже пару недель. Такое образование крайне необходимо в развитии.

Брайан Хинтон 🐧

@RealTinyPenguin

Я занимаюсь кодированием и более 20 лет, и я до сих пор учусь понемногу из курса @JoubranJad #learnhtmlcss. Хорошее напоминание о том, что мы все забываем основные вещи с годами и никогда не должны прекращать учиться.

Об инструкторе


 

Джад Джубран — эксперт Google по разработке, самый ценный профессионал Microsoft (2019–2022) и внештатный консультант по веб-производительности из Амстердама.

Его страсть к JavaScript привела его к созданию и разработке наиболее интерактивных пошаговых курсов по JavaScript, React, основам программирования и HTML CSS.

Зачем изучать HTML CSS с помощью этого курса?

Уроки

  • Чтение кратких уроков
  • Сохранение заметок в уроках
  • Экспорт и печать заметок
  • Прочитать краткий обзор изученных тем
  • Рекомендуемые популярные моменты
  • Прочитать краткий обзор каждого урока

Практика

  • Практика прямо в браузере
  • Решайте интерактивные задачи
    • 9 0034 Тестовая среда
  • Решение реальных задач проекты
  • Продолжить на телефоне
  • Сравните с официальным решением

Карточки

  • Освежите память
  • Учитесь на ходу
  • Польза от повторения с интервалами
  • Обзор каждой главы
  • Поддержание полосы прогресса
  • 200+ карточек

Современный


Цены

Бесплатная пробная версия

Попробуйте первые 50 уроков, заданий, проектов (первые 15 глав) и карточки бесплатно. Нет ограничения по времени.
Для остальных глав требуется учетная запись PRO.

Разовый платеж

Мы не любим подписки. Вот почему Learn HTML CSS PRO можно разблокировать за один платеж, который дает вам доступ на 5 лет.
Проверить страницу оплаты. Мы рекомендуем пройти бесплатную пробную версию перед обновлением.

Самый простой способ выучить

семантику и доступный  HTML CSS  шаг за шагом

Присоединяйтесь к более чем 125 000 учащихся.

Попробуйте →

Обучение HTML и CSS — Code Conquest

HTML или язык гипертекстовой разметки — это код, который используется для написания и структурирования каждой страницы в Интернете. CSS или каскадные таблицы стилей — это сопутствующий код, описывающий, как отображать HTML. Оба кода чрезвычайно важны в современном мире, ориентированном на Интернет.

Независимо от того, являетесь ли вы просто блоггером-любителем или серьезно рассматриваете перспективы карьерного роста веб-программиста или дизайнера, навыки работы с HTML и CSS вам пригодятся. Их легко освоить, и существует множество доступных тренировок.

Вот 7 лучших рекомендаций Code Conquest по обучению HTML и CSS. В каждой категории есть что-то — бесплатное и платное, онлайн и офлайн, базовое и расширенное, практическое и теоретическое. Гарантированно, один из них — идеальное обучение для вас.

Перейти к рекомендации:

  • Дом на дереве – Трек веб-дизайна
  • Code School — путь HTML и CSS
  • Lynda.com — базовое обучение HTML
  • Codecademy – Основы Интернета
  • Книги — основы HTML5 и основы CSS3
  • Книга – HTML и CSS: Дизайн и создание веб-сайтов
  • Книги — HTML для детей и CSS для детей

Treehouse – Курс веб-дизайна

Веб-дизайн – курс от Treehouse, который поможет вам стать мастером HTML и CSS. Некоторые из тем включают:

  • Как создать сайт
  • HTML
  • Основы CSS
  • Основы Photoshop
  • Основы SEO

На треке сочетаются практические, практические проекты и теоретические темы. Самое замечательное в Веб-дизайн то, что он ставит на первое место практические проекты, позволяя вам создать свой первый простой сайт, прежде чем углубляться в теорию. Это хороший выбор, если вы хотите учиться на практике.

Нажмите здесь и попробуйте Treehouse бесплатно…
Щелкните здесь для подробного обзора Treehouse

Code School — HTML and CSS Path

HTML and CSS Path от Code School уделяет особое внимание обучению хорошему дизайну, фронтенд-разработке и тому, как создать хорошего пользователя опыт. Темы следующие:

  • CSS Cross-Country
  • Функциональный HTML5 и CSS3
  • Путешествие в мобильный
  • Сборка Sass — части 1 и 2
  • Основы дизайна

CSS Внедорожник — это введение в основы и ключевые понятия CSS, а — Функциональный HTML5 и CSS3. — обзор новых дополнений в HTML5 и CSS3. Путь к мобильным устройствам посвящен адаптивному дизайну.

Самым уникальным элементом обучения является курс из двух частей по Sass, популярному препроцессору CSS. Sass особенно полезен в Ruby on Rails, поэтому это обучение — отличный выбор, если вы хотите стать разработчиком Rails.
Щелкните здесь для подробного обзора Code School

Lynda.com – Обучение основам HTML

Билл Вейнман

Библиотека lynda.com предлагает ряд специализированных курсов как по HTML, так и по CSS, однако курс HTML Essentials предназначен для общего ознакомления. Есть 17 глав, некоторые из которых перечислены ниже:

  • Основы HTML
  • Метаданные и заголовок документа
  • A Грунтовка CSS
  • Структурно-смысловые элементы
  • Аудио и видео
  • Микроданные HTML5
  • Полное тематическое исследование

Билл Вейнман составил исчерпывающий и актуальный курс, который идеально подойдет начинающим веб-дизайнерам или программистам. После того, как вы закончите Базовый курс HTML , вы сможете перейти к другим курсам HTML и CSS в библиотеке lynda.com.

Щелкните здесь для подробного обзора Lynda

Codecademy — HTML и CSS

HTML и CSS — это бесплатный трек Codecademy, который знакомит вас со строительными блоками Интернета, HTML и CSS. Он начинается с нуля и предполагает, что вы абсолютный новичок, который никогда раньше не видел ни строчки кода.

Этот трек состоит из шести этапов, каждый из которых заканчивается очень простым проектом, который вы можете выполнить за один присест — идеально, если у вас мало времени. В конце курса вы будете знать достаточно, чтобы создать и оформить свою первую полноценную веб-страницу.

HTML и CSS для вас, если вы онлайн-веб-мастер, блогер или журналист, который хотел бы выучить HTML и CSS ровно настолько, чтобы быть опасным.

Нажмите здесь, чтобы начать бесплатно…
Нажмите здесь, чтобы прочитать подробный обзор Codecademy

Книги — HTML5 Foundations и CSS3 Foundations

HTML5 Foundations Мэтта Уэста и CSS3 Foundations Яна Ланна входят в серию книг Treehouse. Оба полноцветные и доступны в мягкой обложке и в изданиях для Kindle.

Основы HTML5 на самом деле представляет собой полное обучение HTML и CSS в одной книге, охватывающее все практические навыки, необходимые для создания современных веб-сайтов с HTML5, CSS3 и JavaScript.

Если вы уже знаете HTML и хотите сделать следующий шаг, то Основы CSS3 для вас. Он более подробно описывает CSS3, так что вы можете пройти путь от обычного кодера HTML до мастера веб-дизайна.

Получить HTML5 Fendations от Amazon…
Получить CSS3 Fendations от Amazon…

от Jon Duckett

Эта полноцветная книга в мягкой обложке представляет HTML и CSS в том, как они делают их доступными для всех. Как и HTML5 Foundations , это полное руководство по проектированию и созданию современного веб-сайта.

На самом деле, HTML и CSS: Дизайн и создание веб-сайтов на самом деле больше похож на журнал, с красочными фотографиями и графикой, которые простираются прямо до края страницы.

Эта книга для вас, если вас когда-либо пугали или не вдохновляли концепции технического программирования. Это доказывает, что HTML и CSS не должны быть сухими и скучными, и идеально подходят, если вы визуальный ученик.

No related posts.