Вёрстка и фронтендСтартСкоро
Курс HTML и CSS
Чистые HTML и CSS без фреймворков: структура документа, селекторы, флексбокс, грид, адаптивность и первый собственный сайт.
Курс готовится к публикации
Материалы курса написаны и проверены, идёт подготовка к выходу на сайте: программа ниже — настоящая. Открытые курсы можно читать уже сейчас, а о запуске этого напишите — ответим, когда он появится.
- Модулей
- 12
- Ак. часов
- 72
- Разделов
- 109
Что нужно знать заранее. специальных требований нет — курс стартовый.
Программа курса
12 модулей; каждый — полноценное занятие с теорией, листингами, практикой и домашним заданием.
- 1
Введение в HTML
Это базовый курс веб-вёрстки: мы учимся писать HTML и CSS вручную, без фреймворков…
Что такое HTMLСтруктура документаТегиАтрибутыDOCTYPEКодировкаПервая страница
- 2
Текстовые элементы HTML
HTML предоставляет 6 уровней заголовков. h1 — самый важный, h6 — наименее важный.
Заголовки h1–h6АбзацыФорматирование текстаСпискиСсылкиСпецсимволы
- 3
Изображения, таблицы, мультимедиа
Изображения — ключевой элемент веб-страниц. Тег <img> — одиночный (самозакрывающийся): закрывающего тега у него нет…
imgfigureФорматыТаблицыthead/tbodycolspan/rowspanaudiovideo
- 4
Семантический HTML5
До HTML5 веб-страницы состояли из множества <div> с классами: <div class="header">, <div class="nav">, <div class="footer">…
headernavmainarticlesectionasidefooterdetails
- 5
HTML-формы
Формы — основной способ взаимодействия пользователя с веб-сайтом: регистрация, авторизация, поиск, оформление заказа, обратная связь…
forminput typeslabelselecttextareafieldsetВалидацияДоступность
- 6
Введение в CSS
CSS (Cascading Style Sheets) — каскадные таблицы стилей. CSS отвечает за внешний вид HTML-элементов: цвета, шрифты, отступы, расположение, анимации…
Что такое CSSПодключениеСелекторыКаскадСпецифичностьНаследованиеЕдиницы
- 7
CSS Box Model
Каждый HTML-элемент в CSS представлен в виде прямоугольного блока (box). Box Model — блочная модель: она описывает, из чего состоит этот блок…
contentpaddingbordermarginbox-sizingoutlinedisplayoverflow
- 8
Цвета, фоны, тени
CSS поддерживает несколько способов задания цвета. У каждого способа свои преимущества. Именованные цвета (red, blue) удобны для прототипов…
Цветовые моделиГрадиентыbackgroundbox-shadowtext-shadowopacityfilter
- 9
Типографика и текст
Типографика — один из важнейших аспектов веб-дизайна. Правильно подобранный шрифт улучшает читаемость и создаёт настроение…
font-familyGoogle Fontsfont-sizeline-heighttext-aligntext-decoration@font-face
- 10
Flexbox
Flexbox (Flexible Box Layout) — модель раскладки, разработанная для одномерного размещения элементов: в строку или в столбец…
display: flexОсиjustify-contentalign-itemsflex-wrapflex-grow/shrinkgaporder
- 11
CSS Grid
CSS Grid — двумерная система раскладки. В отличие от Flexbox (одномерный — строка или столбец), Grid работает одновременно со строками и столбцами…
display: gridgrid-templatefrgapgrid-areaauto-fitminmaxИменованные области
- 12
Адаптивный дизайн и финальный проект
Viewport — видимая область страницы в браузере. На мобильных устройствах без мета-тега viewport браузер отображает страницу как десктопную (обычно шириной 980px) и…
ViewportMedia queriesMobile FirstАдаптивные паттерныЛендинг