Основы современной верстки

Включено в курс

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

• Узнаете основы веб-верстки: как разрабатывать статические веб-страницы и задавать стили элементам.
• Разберетесь, как пошагово отлаживать код для быстрого обнаружения ошибок.
• Будете использовать редакторы кода с расширениями, помогающими в разработке. Например, Emmet.
• Сможете публиковать свой сайт в интернете на хостинге GitHub Pages.

Описание

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

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

• 1

  Введение

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

  теория
• 2

  Введение в HTML

  Урок посвящен HTML верстке с нуля. Говорим о роли атрибутов и изучаем общую схему описания HTML тегов.

  теория

  тесты
• 3

  Блочная модель

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

  теория

  тесты
• 4

  Семантический HTML

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

  теория

  тесты

  упражнение
• 5

  Базовая структура HTML документа

  Любой HTML-документ имеет базовую структуру, состоящую из тегов и служебных элементов. Они нужны браузеру для корректного отображения информации. В данном уроке разберемся с каждой строчкой этой структуры

  теория

  тесты

  упражнение
• 6

  Основы CSS

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

  теория

  тесты

  упражнение
• 7

  Каскадность в CSS

  Что такое каскадность, и как она работает в CSS? Урок посвящен различиям в приоритетах селекторов и умению использовать это в своих проектах.

  теория

  тесты

  упражнение
• 8

  Chrome DevTools

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

  теория

  тесты
• 9

  Редакторы кода

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

  теория
• 10

  Emmet

  Изучаем один из самых полезных плагинов для верстальщика — Emmet. Он позволит ускорить разметку HTML-кода и снимет бóльшую часть рутинных действий.

  теория

  тесты

  упражнение
• 11

  Публикация в интернете

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

  теория
• 12

  Графические редакторы

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

  теория
• 13

  Самостоятельная работа

  Дополнительные задания, которые позволяют закрепить полученную теорию
• 14

  Дополнительные материалы

  Статьи и видео, подобранные командой Хекслета. Помогут глубже погрузиться в тему курса

Формат обучения

Отзывы

Вячеслав Межуревский 01 июня 2022

Спасибо за задание, было интересно!

Andrey T 21 мая 2022

В восторге от Emmet!

Виктория Аблаева 12 апреля 2022

Блин-блинский! 6 задание с первого раза получилось! Хекслет, спасибо за полезные уроки, которые остаются в голове!

Дмитрий Коржов 01 августа 2021

Пишу здесь, потому что не нашёл, как написать отзыв ко всему курсу.

Курс отличный, как для вводного - затронуты все основные аспекты вёрстки без излишнего углубления в детали.

Из пожеланий - добавить больше практики - упражнений и, особенно, испытаний.

Яна 15 апреля 2021

Потрясающе удобный инструмент, особенно при составлении таблиц, которые я раньше ненавидела)) 15 символов против 139 это мощно! Спасибо за интересный курс :)