ТОП 35 онлайн-курсов по HTML/CSS, бесплатные и платные

Обновлено
Просмотры 988
Автор
На чтение 20 мин
Оценка 4.2
Комментарии 1
Навигация по странице:
Курсы
Платные курсы для начинающих
Платные курсы для продвинутых
Бесплатные курсы для начинающих
Бесплатные курсы для продвинутых
ТОП 35 онлайн-курсов по HTML/CSS, бесплатные и платные

HTML — стандартизированный язык разметки веб-страниц.

CSS — Cascading Style Sheets — это каскадные таблицы стилей, тоесть то, что отвечает за формирование внешнего вида HTML-документа.

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

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

На этой странице для удобного поиска все курсы разделены на 4 группы.

Курс обучения профессии верстальщик с нуля для новичков с использованием CSS, Flex, SASS и других инструментов.  Получите консультации по учебному и профессиональному развитию, а также документ, подтверждающий вашу специализацию.

Школа: Хекслет - школа программирования

Сайт: https://ru.hexlet.io/

Дата начала: Начать изучать можно сразу после приобретения

Длительность: Срок обучения не ограничен

Интенсивность: 15-20 часов в неделю

Формат обучения: Видеолекции, практические занятия на тренажере, обратная связь от ментора

Кому подойдет: Данный курс подойдет новичкам, которые хотят начать работать с верстальщиками и освоить CSS и сопутствующие инструменты.

Ваши навыки после обучения:

  • HTML5
  • CSS
  • Bootstrap
  • Инструменты автоматизации (SASS, Pug, Gulp)
  • Адаптивность
  • Верстка

Особенности обучения:

  • Сертификат об окончании
  • 2 проекта в портфолио
  • Помощь с трудоустройством
  • Подписку можно в любой момент
  • Помощь в «Обсуждениях»
  • Доступ к остальным программам при оплате
  • Сообщество в Slack
  • Выпускники школы работают во множестве крупных IT-компаниях
  • Возможность переключиться на любую другую программу
  • Возврат денег в течение первых двух недель

Онлайн-обучение HTML с нуля даст вам знания и привьет полезные навыки верстки. Попробуйте себя в IT, изучите разные языки программирования и постройте карьеру в прибыльной сфере. Также онлайн-курс пригодится, если вы работаете фрилансером через интернет.

Школа: HEDU - курсы дистанционного обучения

Сайт: https://irs.academy/

Длительность: 18 часов

Формат обучения: Видеоуроки. Личные консультации. Домашние задания. Тесты. Защита дипломного проекта.

Кому подойдет: Новичков. Студентов. Желающих работать в IT. Владельцев бизнеса. Фрилансеров. Всех, кого интересует HTML.

Программа:

Программа курса состоит из 9 уроков

  1. Знакомство
  2. Особенности структуры
  3. Основы CSS
  4. Разметка текста
  5. Работа со ссылками
  6. Изображения
  7. Таблицы
  8. Работа с формами
  9. Сборка и выкладка

Чему научитесь:

  • Создавать качественные веб-интерфейсы
  • Сверстать адаптивный сайт
  • Обрести дополнительный источник дохода
  • Устроиться в веб-студию

Особенности обучения:

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

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

Школа: beONmax - онлайн курсы программирования

Сайт: https://beonmax.com/

Дата начала: В любое время

Длительность: 5 часов

Формат обучения: Видеокурс

Кому подойдет: Для новичков

Программа:

Всего заданий: 65, видеоуроки: 31, интерактивные задания: 18, тесты: 16

  1. Введение
  2. Подготовка к работе. Установка редактора кода
  3. Основы HTML и CSS. Базовая разметка, html-теги, css-стили
  4. Создание сайта на практике. Главная страница - Верхняя часть (Header) и меню
  5. Создание сайта. Главная страница - Правый блок
  6. Создание сайта. Главная страница - Нижняя часть (Footer)
  7. Создание сайта. Главная страница - Фильмы, Сериалы, Блог
  8. Создание сайта. Страница просмотра фильмов
  9. Создание сайта. Страницы Фильмы и Рейтинг фильмов
  10. Создание сайта. Адаптивная верстка
  11. Адаптивная верстка. Инструменты разработчика

Ваши навыки после обучения:

  • Полезные инструменты для frontend-разработчика
  • Полноценная верстка страниц сайтов, на примере сайта о кино
  • Адаптивная верстка под мобильные устройства
  • Практическое применение основных тегов HTML
  • Работа с изображениями
  • Позиционирование блоков на сайте
  • CSS-верстка текста: цвет и размер шрифта
  • Правильная HTML-разметка для SEO
  • Работа в редакторе кода SublimeText
  • Специальные классы для адаптивности
  • Основы HTML и CSS

Особенности обучения:

  • Сертификат

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

Сайт: https://videoforme.ru

Наставники: Практикующие специалисты

Длительность: 3 недели

Интенсивность: 2 занятия в неделю

Формат обучения: Обучение не выходя из дома, чат с преподавателем, живая трансляция, комфортное пространство для обучения, живое общение, повышенная мотивация учиться

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

Программа:

5 практических занятий

  1. Язык разметки HTML
  2. Язык оформления стилей CSS
  3. Работа с макетом
  4. Адаптивная верстка
  5. Анимация на странице

Вы научитесь:

  • Познакомитесь с языком разметки HTML и стилями CSS
  • Научитесь работать с дизайн-макетом
  • Научитесь применять стили CSS к элементам веб-страницы
  • Создавать макет веб-страницы с помощью блочной верстки

Особенности обучения:

  • После окончания курса вы получаете Персональный сертификат

Курс «Основы HTML/CSS» подходит для начинающих веб-разработчиков, которым необходимо освежить или улучшить свои знания. Также рекомендуется пройти этот курс тем, кто уже создает сайты, часто допускает ошибки при написании кода и не может самостоятельно найти место сбоя.

Школа: beONmax - онлайн курсы программирования

Сайт: https://beonmax.com/

Преподаватель: Михаил Непомнящий

Дата начала: В любое время

Длительность: 3 часа

Интенсивность: Обучение в свободном режиме

Формат обучения: Видеоуроки

Кому подойдет: Курс подходит для тех, кто интересуется html и css или хочет освежить свои знания.

Программа:

8 уроков

Введение в HTML и CSS
  1. Основы HTML 5. Синтаксис и базовая структура HTML. Теги и атрибуты
  2. Основы CSS 3. Синтаксис и базовая структура CSS. Селекторы и их свойства
Использование тегов и свойств
  1. Вставка изображений и списков
  2. Гиперссылки, кнопки и меню
  3. Таблицы и табличный макет сайта
Создание лендинга. Использование готовых шаблонов
  1. Макет сайта на основе блочных элементов HTML
  2. Пример создания лендинга. Иконки сайта
  3. Пример использования готового шаблона для создания сайта

Навыки после обучения:

  • Создание лендинговой страницы
  • Подключение CSS
  • Создание меню
  • Подключение навигации на сайте
  • Работа с текстом, изображениями, гиперссылками и кнопками
  • Особенности синтаксиса html/css

Особенности обучения:

  • Сертификат

С появлением мобильных устройств стало понятно, то текущих возможностей в css недостаточно и у разработчиков возникла потребность в новом механизме, который позволит управлять элементами на экране. Этим механизмом стал CSS Flexible Box Layout. На курсе предлагается изучить возможности механизма Flex и научиться применять его в проектировании.

Школа: Хекслет - школа программирования

Сайт: https://ru.hexlet.io/

Дата начала: В любое время

Длительность: 10 часов

Формат обучения: Короткие лекции в виде текста или видео, тесты, упражнения. Практические задания после завершения курса

Для кого этот курс: Для новичков в веб-разработке

Программа:

9 уроков (видео и/или текст), 11 упражнений в тренажере, 35 проверочных тестов

  1. Введение
  2. Что такое Flex?
  3. Флекс-контейнер
  4. Перенос элементов в контейнере
  5. Выравнивание элементов по главной оси
  6. Выравнивание элементов по перпендикулярной оси
  7. Свойства Flex-элементов. Гибкость. Flex-grow
  8. Свойства Flex-элементов. Гибкость
  9. Свойства Flex-элементов. Расположение
  10. Дополнительные материалы

Чему научитесь:

  • Управлять HTML-элементами по вертикали и горизонтали с помощью Flex
  • Создавать гибкие элементы, которые будут менять ширину и высоту
  • Применять базовые свойства CSS Flexible Box Layout
  • Создавать адаптированные для мобильных устройств макеты

Особенности обучения:

  • Дополнительные материалы
  • Помощь в обсуждениях
  • Доступ к остальным курсам платформы при оплате
  • Тренажер с практикой
  • Сообщество в Slack
  • Выпускники школы работают во множестве крупных IT-компаниях
  • Возможность переключиться на любую другую программу
  • Возврат денег в течение первых двух недель
  • Бессрочный доступ к теории
  • Асинхронный формат обучения

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

Школа: OTUS - авторские курсы для IT-специалистов

Сайт: https://otus.ru/

Длительность: 3 месяца

Интенсивность: дважды в неделю

Формат обучения: Онлайн-вебинары, домашние задания раз в 2 недели

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

Программа:

Курс состоит из 6 модулей

  1. Введение в Web
  2. Layouts (макеты)
  3. Адаптивный веб-дизайн
  4. Coding style
  5. JavaScript Basic
  6. Проектная работа

Чему научитесь:

  • Научитесь интерпретировать макеты дизайнеров
  • Пройдете основы оптимизации, BEM номенклатуру
  • Научитесь работать с фреймворками bootstrap и tailwind
  • Создавать семантическую разметку вебсайтов
  • Создавать макеты любой сложности без гор библиотек и плагинов
  • Освоите основной стек технологий и приемы в верстке

Особенности обучения:

  • Домашние задания
  • Чат студентов
  • Обратная связь от преподавателя
  • Выполнение проектной работы, которую можно будет показывать при трудоустройстве
  • Сертификат о прохождении обучения
  • Приглашение пройти собеседование в компаниях-партнерах

В этом курсе предлагается познакомиться с CSS Grids. Данная технология представляет набор CSS-свойств, которые помогают гибко и удобно управлять лейаутом страницы.

Школа: LOFT - школа онлайн обучения IT профессиям

Сайт: https://loftschool.com/

Преподаватель: Владимир Сабанцев

Дата начала: В любое время

Длительность: 1 час 17 мин.

Формат обучения: Видеокурс

Кому подойдет: Необходимы начальные знания html/css

Программа:

11 уроков

  1. Теория (08:31) (бесплатный урок)
  2. Строки и колонки (03:48) (бесплатный урок)
  3. Управление ячейками (06:43)
  4. Фракции (02:07)
  5. Вспомогательные функции (04:23)
  6. Именованные линии (08:54)
  7. Функция repeat (01:42)
  8. Области (04:55)
  9. Применение с медиа запросами (04:07)
  10. Свойства выравнивания ячеек (05:23)
  11. Применение на практике (26:03)

Интерактивный курс предназначен для студентов со знанием основ HTML, CSS, JavaScript.

Школа: HTML Academy - интерактивные онлайн-курсы

Сайт: https://htmlacademy.ru/

Дата начала: В любое время

Формат обучения: Видеолекции, домашнее задание, обратная связь от наставника

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

Программа:

3 части, 53 задания, 6 испытаний

Сетки

Научимся верстать сетки

Микросетки. Начало

Узнаем, что такое микросетки и как тестировать вёрстку.

Микросетки. Продолжение

Познакомимся с поперечной осью флексбокса и грид-областями.

Вы научитесь:

  • Строить сетки на веб-страницах
  • Управлять расположением грид-элементов
  • Управлять размерами и отступами флекс-элементов
  • Отработать основные приёмы построения сеток
  • Понимать, как работают коэффициенты растяжения и сжатия
  • Создавать грид-раскладки
  • Управлять размерами и расположением элементов,

Автор: WebForMySelf

В этом видеокурсе мы рассмотрим css-модуль Flexbox. Изучив его можно создавать гибкие макеты разной сложности, не используя float и inline-block. Также вы разберете различные тонкости, которые облегчат понимание того, как работает этот модуль.

Сайт: https://webformyself.com

Автор курса: Денис Булыга

Дата начала: В любое время

Длительность: 2 часа

Формат обучения: Видеолекции

Требования: Требуются начальные знания html/css

Все уроки курса:

7 уроков

  1. Понятия Flex контейнера, элемента и расположения осей
  2. Изменение направления осей, перенос элементов, выравнивание
  3. Выравнивание элементов по поперечной оси
  4. Управление размерами flex элемента
  5. Расчет размеров flex элемента
  6. Верстка макет на Flex. Создание структуры html
  7. Верстка макет на Flex. Стилизация макета

Этот курс предназначен для веб-разработчиков и всех, кто хочет освоить современный инструмент верстки веб-сайтов. Если вы связываете свою карьеру с веб-разработкой, то Pug вам точно пригодится! В программу обучения включены видеоуроки по изучению верстки HTML с помощью шаблонизатора Pug (jade)

Школа: beONmax - онлайн курсы программирования

Сайт: https://beonmax.com/

Преподаватель: Михаил Непомнящий

Дата начала: В любое время

Длительность: 2 часа

Интенсивность: Обучение в свободном режиме

Формат обучения: Видеоуроки

Требования: Базовые знания HTML и JavaScript.

Программа обучения:

18 уроков

  1. Введение. Подготовка окружения
  2. Основы синтаксиса Pug(jade)
  3. Работа с шаблонами
  4. Работа с другими языками внутри Pug
  5. Продвинутые техники шаблонизатора Pug
  6. Заключение

Вы научитесь:

  • Применять шаблонизатор Pug на проектах
  • Писать вёрстку на шаблонизаторах
  • Создавать шапки, подвалы страниц и другие элементы
  • Использовать шаблоны и расширять их
  • Использовать препроцессоры CSS
  • Узнаете о возможностях применения JavaScript
  • Создавать макеты сайтов

Особенности обучения:

  • Сертификат

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

Сайт: https://htmllessons.ru

Дата начала: В любое время

Формат обучения: Видеолекции, домашнее задание, обратная связь от преподавателя

Требования: Требуются начальные знания html/css

Чему научитесь: создавать свои первые проекты с использованием Flexbox

Особенности обучения:

  • Сертификат
  • Редактор кода

Курс посвящен адаптивности. Адаптивный макет позволяет удобно просматривать макет на устройствах с разным разрешением экрана. Этот курс будет охватывать механику создания пользовательской HTML-разметки с использованием популярных движков CSS.

Школа: Хекслет - школа программирования

Сайт: https://ru.hexlet.io/

Длительность: 7 часов

Формат обучения: Короткие лекции в виде текста или видео, тесты, упражнения

Для кого этот курс: Для учеников владеющих базовыми знаниями HTML/CSS

Программа:

7 уроков (видео и/или текст), 7 упражнений в тренажере, 18 проверочных тестов

  1. Введение
  2. Проверка адаптивности сайта
  3. Viewport
  4. Гибкие элементы
  5. Flex
  6. Медиазапросы
  7. Медиазапросы и другие устройства
  8. Дополнительные материалы

Чему научитесь:

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

Особенности обучения:

  • Дополнительные материалы
  • Помощь в «Обсуждениях»
  • Доступ к остальным курсам платформы при оплате
  • Тренажер с практикой
  • Бессрочный доступ к теории
  • Сообщество в Slack
  • Выпускники школы работают во множестве крупных IT-компаниях
  • Возможность переключиться на любую другую программу
  • Возврат денег в течение первых двух недель
  • Асинхронный формат обучения

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

Школа: HTML Academy - интерактивные онлайн-курсы

Сайт: https://htmlacademy.ru/

Наставники: Опытные профессионалы, работающие в индустрии

Длительность: 2 месяца

Интенсивность: 20 часов в неделю

Формат обучения: Онлайн-вебинары, практика

Для кого этот курс: Данный курс нацелен на новичков с базовым знанием HTML/CSS

Программа:

  1. Старт
  2. Разметка
  3. Графика
  4. Базовая стилизация
  5. Сетки страниц на флексах
  6. Сетки компонентов на флексах
  7. Сетки компонентов на гридах
  8. Декоративные элементы
  9. Попапы, слайдеры, формы
  10. Подготовка к защите
  11. Защита проекта
  12. Финал

Что получите после обучения:

  • Актуальные стандарты качеств
  • Понимание полного цикла работы верстальщика
  • Опыт работы с дедлайнами и планирования работы

Особенности обучения:

  • Высокая интенсивность
  • Домашние задания с проверкой
  • Обратная связь
  • Голосовые консультации
  • Рассрочка
  • Сертификат

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

Школа: Хекслет - школа программирования

Сайт: https://ru.hexlet.io/

Длительность: 9 часов

Интенсивность: Обучение в свободном режиме

Формат обучения: Короткие лекции в виде текста или видео, тесты, упражнения

Для кого этот курс: Для учеников владеющих базовыми знаниями HTML/CSS

Программа:

8 уроков (видео и/или текст), 10 упражнений в тренажере, 30 проверочных тестов

  1. Введение
  2. Поток документа
  3. Относительное позиционирование
  4. Абсолютное позиционирование
  5. Относительное и абсолютное позиционирование
  6. Фиксированное позиционирование
  7. Плавающие элементы
  8. Наложение элементов
  9. Дополнительные материалы

Вы научитесь:

  • Управлять потоком документа, понимая, как работает браузер
  • Создавать интерактивные страницы, понимая саму суть вёрстки
  • Применять на практике все виды позиционирования HTML-элементов

Особенности обучения:

  • Дополнительные материалы
  • Помощь в «Обсуждениях»
  • Доступ к остальным курсам платформы
  • Тренажер с практикой
  • Бессрочный доступ к теории
  • Асинхронный формат обучения
  • Сообщество в Slack
  • Выпускники школы работают во множестве крупных IT-компаниях
  • Возможность переключиться на любую другую программу
  • Возврат денег в течение первых двух недель

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

Школа: HTML Academy - интерактивные онлайн-курсы

Сайт: https://htmlacademy.ru/

Длительность: 2 месяца

Интенсивность: 20 часов в неделю

Формат обучения: Видеолекции, практика, фидбек от ментора

Кому подойдет: Данный курс нацелен на новичков с базовым знанием верстки страниц на HTML/CSS

Программа:

  1. Введение
  2. Методологии вёрстки
  3. Препроцессоры и автоматизация
  4. Адаптивные сетки
  5. Адаптивные декоративные элементы
  6. Адаптивная графика
  7. Векторная графика и оптимизация
  8. Погружение в автоматизацию
  9. Производительность вёрстки
  10. Защита проекта

Особенности обучения:

  • Высокая интенсивность
  • Детальная обратная связь
  • Домашние задания с проверкой
  • Рассрочка
  • Сертификат

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

1 часть, 19 заданий, 1 испытание

Школа: HTML Academy - интерактивные онлайн-курсы

Сайт: https://htmlacademy.ru/

Дата начала: В любое время

Интенсивность: Обучение в свободном режиме

Формат обучения: Интерактивный курс: теория, задания и испытания

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

Чему научитесь:

  • Использовать псевдоэлементы, такие как before и after
  • Вставлять на страницу аудио и видео
  • Использовать наследование, каскадирование, специфичность
  • Оформлять таблицы
  • Создавать продвинутые формы
  • Создавать простейшие формы
  • Пользоваться простыми и продвинутыми селекторами, псевдоклассами
  • Подключать и использовать нестандартные шрифты и векторные изображения
  • Использовать фоновые изображения и задавать цвета фона
  • Использовать прдвинутые инструменты HTML и CSS в работе

Курс включает в себя теорию и задания и практические тесты. Бесплатно и всего за 3 дня начинающие веб-разработчики изучат основы HTML и CSS в интерактивном формате.

Школа: HTML Academy - интерактивные онлайн-курсы

Сайт: https://htmlacademy.ru/

Дата начала: В любое время

Длительность: 3 часа теории, 3 часа практики

Интенсивность: по 2 часа в день

Формат обучения: Интерактивный курс: теория, задания и испытания

Кому подойдет: Курс подойдет новичкам без знаний веб-разработки, которые хотят освоить создание сайтов с помощью html, css.

Программа:

5 частей, 83 задания, 5 испытаний

  1. Структура HTML-документа
  2. Разметка текста
  3. Ссылки и изображения
  4. Основы CSS
  5. Оформление текста

Чему научитесь:

  • Владеть основными инструментами HTML и CSS
  • Подключать к сайту разные темы оформления
  • Размечать текстовое содержание
  • Публиковать сайт в интернете
  • Добавлять на сайт-портфолио ссылки и изображения
  • Понимать принцип семантической разметки

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

Школа: itProger - онлайн-школа IT профессий

Сайт: https://itproger.com/

Дата начала: В любое время

Интенсивность: Обучение в свободном режиме

Формат обучения: Видеокурс

Кому подойдет: для начинающих

Программа:

10 уроков, 108 заданий

  1. Введение в CSS. Что это и как с ним работать?
  2. Форматы подключения стилей
  3. Селекторы для выборки элементов
  4. Псевдоклассы и псевдоэлементы
  5. Работа с фоновыми картинками
  6. Стили для текста
  7. Стили для блоков
  8. Позиционирование блоков
  9. Работа со списками
  10. Заключительная часть

Навыки после обучения:

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

Особенности обучения:

  • Справочник
  • Редактор кода

Канал: Евгений Попов

В этом видео вы узнаете, для чего служит язык html, и что с его помощью можно сделать.

Дата начала: В любое время

Интенсивность: Обучение в свободном режиме

Формат обучения: Видеокурс

Для кого этот курс: Для новичков в веб-разработке

Другие уроки:

33 урока продолжительностью до 15 минут

Показать
  1. Введение в HTML
  2. Понятие тега
  3. Параграфы и заголовки
  4. Списки
  5. Атрибуты
  6. Изображения
  7. Ссылки. Часть 1
  8. Ссылки. Часть 2
  9. Таблицы. Часть 1
  10. Таблицы. Часть 2
  11. Жирный и курсивный текст
  12. Введение в формы
  13. Текстовые поля форм
  14. Радиокнопки
  15. Чекбоксы
  16. Элемент выбора в форме (селект)
  17. Текстовая область
  18. Создание кнопок
  19. Декоративная объединение
  20. Блокировка и только чтение
  21. Обработчик
  22. Локальный сервер
  23. Отправка данных get и post
  24. Функция отправки письма
  25. Теги внешних объектов
  26. Предварительное форматирование
  27. Карта изображения
  28. Метатеги
  29. Комментарии
  30. XHTML
  31. Валидация документа
  32. Теги div и span
  33. Заключительный

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

Сайт: https://php.zone

Автор: Артём Ивашкевич

Дата начала: В любое время

Интенсивность: Свободный график обучения

Формат обучения: Текстовые материалы, домашние задания

Кому подойдет: Для начинающих

Программа курса:

Введение и основы HTML

  1. Создаём свою первую HTML-страницу
  2. Теги как основа HTML-страницы

Служебные теги

  1. Теги для поисковиков
  2. Время поделиться первым результатом

Оформление контента

  1. Основы оформления контента в HTML
  2. Учимся делать ссылки в HTML
  3. Основы CSS
  4. Таблицы в HTML
  5. Формы в HTML

Создание сайта и его выкладка в Интернет

  1. Табличная вёрстка HTML-страничек. Прототип сайта
  2. Как выложить сайт в Интернет: простая инструкция

Подведение итога

  1. Что делать после прохождения курса HTML

Особенности обучения:

  • Проверка домашних заданий
  • Доступ к общему Telegram-чату
  • Коммьюнити

Уроки HTML предназначены для новичков в области веб-разработки. К концу курса у вас будут необходимые знания для создания разметки веб-сайтов. Курс «HTML для начинающих» состоит из нескольких уроков, при этом все обучение HTML будет бесплатным с нуля. 

Школа: itProger - онлайн-школа IT профессий

Сайт: https://itproger.com/

Дата начала: В любое время

Интенсивность: Обучение в свободном режиме

Для кого этот курс: Для новичков в веб-разработке

Программа:

18 уроков, 102 задания

  1. Введение в HTML
  2. Файл «index.html». Отображение сайта
  3. Как создаются сайты? Смотрим код чужого проекта
  4. Комментарии в HTML. Метаданные «meta»
  5. Теги для работы с текстом
  6. Работа со списками
  7. Что такое атрибуты в HTML?
  8. Создание ссылок. Разные типы ссылок в HTML
  9. Работа с изображениями
  10. Создание HTML таблиц: ряды, столбцы, ячейки
  11. Теги для подключения файлов
  12. Теги «Div» и «Span»
  13. Создание HTML форм и полей для ввода
  14. Поле для ввода текста. Тег для создания кнопки
  15. Селекторы выбора информации
  16. Специальные HTML5 теги
  17. Оптимизация под браузеры
  18. Заключительная часть

Чему научитесь: изучите множество HTML тегов и научитесь применять их на практике

Особенности обучения:

  • Справочник
  • Онлайн редактор кода

Канал: ITDoctor

Узнайте, как быстро начать работу с HTML за 5 шагов, узнайте все о самых важных тегах в html5. Вы также узнаете, как сделать html-сайт за 30 минут.

Дата начала: В любое время

Интенсивность: Свободный график

Формат обучения: Видеокурс

Данный курс подойдет: Для новичков в веб-разработке

Другие уроки автора:

55 уроков продолжительностью до 30 минут

Открыть
  1. Урок по HTML для начинающих
  2. Основы HTML, введение
  3. Учим первые теги, тег HEAD, тег BODY
  4. Заголовок сайта title
  5. Мета тег Meta, служебные мета теги в документе html
  6. Тег Link, как подключить внешние стили из CSS файла
  7. Как писать стили CSS в HTML файле, тег STYLE
  8. Структура сайта, элементы Header, Body и Footer
  9. Новые SEO теги, тег Header, тег Section, тег Footer
  10. Как сделать меню на сайте используя тег NAV
  11. Как добавить аудио плеер на сайте тег Audio
  12. Тег Video, как вставить видео плеер на сайт
  13. Как добавить аудио и видео на сайт, тег SOURCE
  14. Как вставить изображение на сайт тег IMG
  15. Работа с CANVAS (канва) тег CANVAS
  16. Карта изображения, тег MAP и AREA на HTML
  17. Апплеты Java в файлах тег Applet
  18. Как создать нумерованный список тег OL и LI
  19. Как создать маркированный список тег UL и LI
  20. Как создать список определений тег DL DD и DT
  21. Как сделать красивое меню, тег menu
  22. Гипертекстовые ссылки на другие страницы тег a
  23. Работа с таблицами, тег TABLE TR TD
  24. Работа с таблицами, тег TR TD TH
  25. Работа с таблицами, тег Tbody Tfoot и Thead
  26. Название таблицы в HTML тег заголовок таблицы Caption
  27. Добавление аббревиатуры, тег abbr
  28. Контактная информация на сайте тег address
  29. Форматирование текста, тег b em i tt u del
  30. Lorem Ipsum, философский трактат в веб-разработке
  31. Как добавить цитату и сноску
  32. Как добавить код на сайт, тег code
  33. Тег FONT, как поменять шрифт цвет и размер текста в html
  34. Горячие клавиши с помощью тега kbd
  35. Форматирование текста, тег small и strong
  36. Тег SUB и SUP, регистр символа
  37. Перенос строки тег br, символ абзаца
  38. Выравнивание текста по центру, тег center
  39. Слои или блоки тег DIV
  40. Заголовок на языке, тег h1-h6
  41. Абзац, как сделать абзац на сайте тег p и pre
  42. Строчный тег span
  43. Верстка сайта DIV блоками
  44. Как создать форму, все о формах на HTML
  45. Формы, Textarea текстовое поле и button кнопка
  46. Тег SELECT и OPTION, выпадающий список
  47. Формы в html тег fieldset и тег legend, как создать форму
  48. Как сделать красивую форму
  49. Универсальные атрибуты тегов в, атрибуты class id style
  50. Как сделать якорь на сайте

Канал: Евгений Попов

Первый вступительный урок курса — подготовка к продуктивной работе.

Дата начала: В любое время

Интенсивность: Обучение в своем темпе

Формат обучения: Видеокурс

Кому подойдет: Для новичков в веб-разработке

Другие уроки автора:

45 уроков продолжительностью до 30 минут

Открыть список
  1. Установка софта для изучения CSS
  2. Базовые принципы CSS
  3. Подключение CSS и основные селекторы
  4. Групповые селекторы
  5. Селекторы потомков
  6. Псевдоселекторы ссылок
  7. Семейство шрифтов
  8. Размер шрифта
  9. Жирный, курсивный шрифт
  10. Декор
  11. Выравнивание и красная строка
  12. Высота строки, расстояния
  13. Сокращенная запись
  14. Рамки
  15. Работа со списками
  16. Наследование
  17. Каскадность и приоритетность
  18. Блочная модель. Margin и padding
  19. Ширина и высота блока
  20. Конфликты полей
  21. Блочные и встроенные элементы
  22. Фоновый цвет и изображение
  23. Повтор фонового изображения
  24. Позиционирование фона
  25. Фиксация фона
  26. Краткая запись фоновых свойств
  27. Сss и таблицы
  28. CSS и формы. Часть 1
  29. CSS и формы. Часть 2
  30. Свойство FLOAT. Введение
  31. Создание каркаса на основе Float
  32. Очистка обтекания
  33. Колонки одной высоты
  34. Позиционирование. Введение
  35. Absolute-позиционирование
  36. Relative-позиционирование
  37. Fixed-позиционирование
  38. Z-индексы
  39. Видимость элементов
  40. Max и Min ширина сайта
  41. Браузеры
  42. Решение проблем IE6
  43. Два способа подключения стилей
  44. Ненаследуемые свойства
  45. Заключительный

Канал: WebUpBlog - Уроки веб разработки

Бесплатный видео курс html и css для начинающих. Уроки представлены короткими видео, в которых на примере создания html сайта вы с легкостью изучите основы html, css и верстки.

Дата начала: В любое время

Интенсивность: Обучение в своем темпе

Формат обучения: Видеокурс

Кому подойдет: Для новичков в веб-разработке

Плейлист:

22 урока продолжительностью до 30 минут

Открыть
  1. Создаем ваш первый сайт [Введение]
  2. Создаем html файл, структура html документа
  3. Создаем ваш первый сайт
  4. Зачем использовать внешний CSS файл?
  5. Как создать сайт? Семантическая структура html страницы
  6. Разница между inline и block элемнтами
  7. Что такое идентификаторы (id) в html
  8. Атрибут class в html
  9. Стилизация header блока
  10. Ссылки в html
  11. Верстка навигации
  12. CSS свойство float
  13. Тег section
  14. Тег (tag) aside
  15. CSS разметка страницы в две колонки
  16. Выравнивание блока div по центру на css
  17. Стилизация footer сайта с помощью css
  18. Форма в html. Элементы формы
  19. Форма поиска в сайдбаре
  20. Категории в сайдбаре
  21. Верстка preview поста
  22. HTML c нуля за 30 минут на практике | урок для начинающих

Канал: Андрей Андриевский

Курс HTML5 и CSS3 с нуля и до полноценной верстки страниц. Применение CSS фреймворка, и всех инноваций доступных на сегодняшний день!

Дата начала: В любое время

Интенсивность: Вы сами устанавливаете темп обучения

Формат обучения: Видеокурс

Кому подойдет: Для новичков в веб-разработке

Плейлист:

24 урока продолжительностью до часа

Открыть
  1. Знакомство с основным каркасом страницы
  2. Программа курса HTML & CSS | О домашних заданиях и исходном коде
  3. Знакомство с header, article, section и другими тегами
  4. Ссылки и изображения
  5. Верстаем таблицы
  6. Создание web формы
  7. Знакомство с CSS
  8. Псевдоклассы и псевдоэлементы, часть 1
  9. Псевдоклассы и псевдоэлементы, часть 2
  10. Практикуем селекторы в CSS3
  11. Наследование в CSS3
  12. Reset CSS или сброс стилей браузера
  13. Стили текста, шрифты и font в CSS3
  14. Работа с текстом часть II, практикуем CSS3
  15. Поля, границы, отступы, практикуем CSS3
  16. Высота, ширина элементов верстки, скругление углов
  17. Обтекание элементов, float, практикуем CSS3
  18. Добавление графики на веб-страницы
  19. Линейный и Радиальный градиент на чистом CSS3
  20. Построение горизонтального и вертикального меню
  21. Преобразования, переходы и анимация с помощью CSS
  22. Работа с веб-формами и применение CSS3
  23. Верстка блоков/элементов при помощи флоатов
  24. Полное руководство по Flexbox

Канал: Учись - программированию - бесплатно

В этом курсе множество различных видеоуроков от объяснения самого языка HTML и CSS до верстки сайта. 67 уроков продолжительностью до 1 часа.

Дата начала: В любое время

Интенсивность: Обучение в свободном режиме

Формат обучения: Видеокурс

Кому подойдет: Для новичков в веб-разработке

Канал: Brainoteka Light

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

Дата начала: В любое время

Интенсивность: Вы сами устанавливаете темп обучения

Формат обучения: Видеокурс

Данный курс подойдет: Для новичков в веб-разработке

Плейлист:

12 уроков продолжительностью до 10 минут

  1. Введение
  2. Раскройка шаблона
  3. Структура страницы
  4. Первая web страница
  5. Создание списков
  6. Создание ссылок
  7. Добавление изображений на сайт
  8. Создание таблицы
  9. Форматирование текста с помощью HTML тегов
  10. Формы
  11. Валидация HTML разметки
  12. Заключительный урок по верстке

Канал: Sorax

Дата начала: В любое время

Интенсивность: Обучение в свободном режиме

Формат обучения: Видеокурс

Кому подойдет: Для новичков в веб-разработке

Другие уроки автора:

23 урока продолжительностью до 16 минут

Открыть
  1. Введение
  2. Основные понятия
  3. Селекторы
  4. Позиционирование элементов
  5. Текст
  6. Цвет
  7. Рамки
  8. Закругленные углы (border-radius)
  9. Треугольники
  10. Фон и множественные фоны
  11. Спрайты
  12. Плавающие элементы (float) и clearfix
  13. Списки
  14. Тени (box-shadow)
  15. Плавные переходы (transition)
  16. Градиенты
  17. Трансформации (transform)
  18. Трехмерный куб на CSS3
  19. Анимации (animation)
  20. @font-face
  21. Медиазапросы (media queries)
  22. Верстка сайта
  23. Многоколоночный текст

Канал: EDUCAT.courses

Медиазапросы — необходимый инструмент для создания веб сайтов, оптимизированных для отображения на мобильных устройствах.

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

Дата начала: В любое время

Интенсивность: Свободный график

Формат обучения: Видеокурс

Кому подойдет: Для новичков

Рассатриваеые темы в уроках:

  • Подключение медиазапросов
  • CSS анимация
  • CSS переходы
  • CSS трансформация
  • Grid CSS. Управление областями [Урок 32]
  • Grid. Колонки и строки
  • Концепция сетки и основные понятия Grid CSS
  • Основные свойства flex элемента
  • Позиционирование элементов
  • Цвета
  • Фон
  • Тень элемента в CSS
  • Работа с таблицами
  • Рамка
  • HTML CSS. Работа со списками
  • CSS ссылки и свойство cursor
  • Шрифты
  • Работа с текстом
  • Свойства ширины и высоты CSS
  • Блочные и строчные элементы CSS
  • Псевдоэлементы CSS
  • Селекторы и их виды
  • Работа с аудио и видео
  • Работа с изображением

Автор: Андрей Андриевский

Дата начала: В любое время

Интенсивность: Свободный график

Формат обучения: Видеокурс

Кому подойдет: Для новичков

Структура видео:

  1. 00:40 -- Для чего создан HTML
  2. 06:00 -- Редакторы кода
  3. 08:00 -- Каркас HTML страницы
  4. 11:30 -- Что такое тег, какие теги есть
  5. 18:00 -- Комментарии внутри HTML
  6. 22:00 -- Элементы страницы (блоки)
  7. 31:30 -- Заголовки в HTML
  8. 34:40 -- Что такое атрибут в HTML
  9. 40:30 -- Специальные символы в HTML
  10. 42:40 -- Что такое HTML валидатор
  11. 48:40 -- HTMLBOOK

Автор: Гоша Дударь

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

Дата начала: В любое время

Интенсивность: Свободный график

Формат обучения: Видеокурс

Кому подойдет: Для новичков

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

Школа: GeekBrains - образовательный портал от Mail.ru Group

Сайт: https://gb.ru/

Дата начала: В любое время

Длительность: 2 урока

Интенсивность: Обучение в свободном режиме

Формат обучения: Видеокурс

Кому подойдет: Для учеников владеющих базовыми знаниями HTML/CSS

Программа:

Занимательные элементы интерфейса в HTML/CSS. Часть 1
  1. Гуляющая и забитая Шапка;
  2. Прибитый Подвал;
  3. Навигационное меню: канонически стандартное; наведённое, с подпунктами; с выезжающей колонкой из Вечности;
  4. Адаптивное бургер-меню из ресторана быстрого питания;
  5. Боковая, но никак не крайняя колонка.
Занимательные элементы интерфейса в HTML/CSS. Часть 2
  1. Создание выезжающих боковых меню;
  2. Всплывающие окна;
  3. Контекстные подсказки;
  4. Стилизация радиокнопок/галочек;
  5. Загрузчик сайта;
  6. Карусель элементов;
  7. Аккордеон.

Чему научитесь:

  • Разрабатывать контекстные подсказки, загрузчик сайта и карусель элементов
  • Создавать выезжающие боковые меню
  • Добавлять всплывающие окна
  • Применять разные подходы в разметке и стилях к элементам интерфейса в HTML/CSS

Студенты изучат синтаксис и переменные, вложенные стили, использование миксинов и импорт данных. Базовый курс способствует развитию в профессиях программистов и разработчиков по освоению SASS. Вы научитесь добавлять переменные, функции, наследование в обычный CSS-документ.

Школа: itProger - онлайн-школа IT профессий

Сайт: https://itproger.com/

Дата начала: В любое время

Интенсивность: Обучение в свободном режиме

Формат обучения: Видеолекции с практическими заданиями и тестированием

Для кого этот курс: Для учеников владеющих базовыми знаниями HTML/CSS

Программа:

7 уроков, 108 заданий

  1. Что такое SASS, SCSS. Установка
  2. Синтаксис и переменные
  3. Вложенные стили
  4. Использование миксинов
  5. Псевдоклассы и импортирование данных
  6. Математические операторы и функции
  7. Условия, циклы и оператор @content

Чему научитесь:

  • Разбираться с синтаксисе и переменных
  • Устанавливать препроцессор
  • Добавлять переменные, функции, наследование к обычному документу CSS
  • Работать с препроцессором SASS или SCSS

Особенности обучения:

  • Онлайн редактор кода

Канал: Олег Щербак

Уроки HTML/CSS. Основные компоненты Bootstrap 4. Вставка видео в веб страницу.

Дата начала: В любое время

Интенсивность: Обучение в своем темпе

Формат обучения: Видеокурс

Кому подойдет: Для учеников владеющих базовыми знаниями HTML/CSS

Другие уроки автора:

25 уроков продолжительностью до 30 минут

Открыть список
  1. Основные компоненты Bootstrap 4
  2. Создание меню для web страницы
  3. Bootstrap 4. Верстаем секции сайта
  4. Bootstrap 4. Создание шапки веб страницы
  5. Создание блоков DIV
  6. Подключение Bootstrap 4. Создание Веб-страницы
  7. Верстака на Bootstrap 4
  8. Теги HTML. Установка Emmet. Урок # 1
  9. HTML & CSS. Тег DIV. Подключаем стили CSS
  10. Блоки DIV стили CSS
  11. Подключение bootstrap 4 Сетка bootstrap Верстка сайта
  12. HTML CSS PHP. Повтор изученного. Часть 1
  13. HTML CSS PHP. Повтор изученного. Часть 2
  14. Уроки HTML. Создание Таблицы и меню. Урок # 2
  15. HTML&CSS. Верстка страницы. Галерея изображений
  16. Уроки HTML&CSS. Веб страничка на DIVах
  17. С чего начинается Web. Стандартные блоки для web странички
  18. HTML&CSS. Адаптивная шапка сайта. Bootstrap 4
  19. Установка Emmet
  20. HTML CSS Bootstrap шапка сайта
  21. HTML CSS Bootstrap. Секции Сайта
  22. HTML страница Архитектура компьютера
  23. 3D Слайдер css vol 1
  24. HTML CSS Figma Верстаем сайт по макету
  25. 3D Слайдер css vol 2

Канал: Denis Gorelov

В этом видео на примере кнопки будет показано как реализовать плавное разделение ее на две части по наведению. Увидите как вставлять SVG иконку и ее оформление под нужный вам стиль. Также будет показан пример создания фигуры треугольника который будет в роли указателя на поле input.

Дата начала: В любое время

Интенсивность: Обучение в своем темпе

Формат обучения: Видеокурс

Кому подойдет: Для учеников владеющих базовыми знаниями HTML/CSS

Другие уроки автора:

32 урока продолжительностью до 30 минут

Открыть список
  1. Animation кнопки по наведению | Практика CSS / HTML5
  2. CSS3 Анимация по наведению, hover effect | Практика CSS / HTML5
  3. CSS3 Animation background-image | Практика CSS / HTML5
  4. АНОНС: CSS background анимируем изображения по наведению - CSS / HTML
  5. #7 FORM / Анимация ::before и ::after на transform
  6. #6 FORM / Чекбокс (АНИМАЦИЯ)
  7. #5 FORM / ::before ::after (Практика)
  8. #4 FORM / Эффект плавающего текста на CSS
  9. #3 FORM / Переключение tabs на CSS и JS
  10. #2 FORM / Вкладки на CSS и JS
  11. #1 FORM in CSS / Предварительная разметка
  12. Что лучше CSS Grid или Bootstrap? | Практика CSS3 / HTML5
  13. CSS3 Animation hover effect | Практика CSS / HTML5
  14. CSS3 flexbox практика | Эффект при наведении в CSS
  15. Эффект плавающего текста в фокусе | Contact Form на CSS и jquery
  16. ПУЛЬСИРУЮЩИЙ клик / Анимация кнопки на JavaScript
  17. Адаптивный СЛАЙДЕР с помощью Twitter Bootstrap | Уроки по Bootstrap 3
  18. Эффекты наведения с надписью на CSS / Image Hover Effects CSS3
  19. Animation css / Импульсный эффект при помощи Transform Scale
  20. Кнопка на CSS / Button animation CSS3
  21. Media queries (Адаптация страниц) / Responsive Web Design Tutorial
  22. #2 ЧАСТЬ - Выпадающее МЕНЮ на чистом CSS / HTML (АДАПТАЦИЯ под Мобильные устройства)
  23. CSS Анимация картинки при наведении / работаем с :before и :after
  24. Анимированная КНОПКА на CSS / Button animation CSS3
  25. Выпадающее МЕНЮ на чистом CSS / HTML
  26. Аккордеон СЛАЙДЕР на CSS / HTML за 8 минут | display flex, transition, overflow
  27. CSS Анимация за 6 минут. Animation при наведении в CSS3/HTML
  28. Красивое меню за 7 минут / CSS + HTML
  29. Как сделать социальную панель (фиксированный блок) с HTML и CSS3
  30. Формы CSS / Как создать форму в CSS3
  31. Media queries CSS. АДАПТАЦИЯ под мобильные устройства
  32. CSS Анимация - ПРЫГАЮЩИЙ МЯЧ | урок по CSS и CSS3, анимация

Особенности обучения:

  • Можно задать возникшие вопросы автору курса в VK

Канал: Изучаем мир ИТ / Олег Шпагин / Программирование

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

Дата начала: В любое время

Интенсивность: Вы сами устанавливаете темп обучения

Формат обучения: Видеокурс

Кому подойдет: Для учеников владеющих базовыми знаниями HTML/CSS

НайтиКурс.Ру