Основы современной верстки
- Тренажер с практикой
-
Бессрочный доступ к теории
-
Асинхронный форматобучения
Включено в курс
Чему вы научитесь
- Основам веб-верстки: как разрабатывать статические веб-страницы и задавать стили элементам.
- Пошагово отлаживать код для быстрого обнаружения ошибок.
- Использовать редакторы кода с расширениями, помогающими в разработке. Например, Emmet.
- Публиковать свой сайт в интернете на хостинге GitHub Pages.
Описание
На этом курсе вы изучите основы верстки сайтов HTML. Знание этого языка пригодится, когда вы начнете работать над версткой своих первых веб-страниц. Вы узнаете больше об HTML-разметке и возможностях современного стандарта HTML5. Также вы получите базовые знания по стилизации с помощью CSS: научитесь подключать стили, использовать селекторы, работать с каскадностью. В дополнение к HTML и CSS, вы научитесь работать со встроенными в браузер средствами отладки верстки, в частности с Google Chrome DevTools. В итоге вы научитесь использовать язык разметки 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. Это мощный инструмент, который можно использовать не только для верстки, но и для программирования на любом языке. -
11
Публикация в интернете
Чтобы выложить проект в интернет, нужно воспользоваться хостингом — специальным сервером, который будет хранить файлы и предоставит доступ к ним через доменное имя. В этом уроке мы рассмотрим бесплатный хостинг GitHub. -
12
Графические редакторы
На рынке существует несколько основных редакторов. Некоторые из них специфичны только для одной операционной системы, другие имеют возможность установки на любую из них. В этом разделе посмотрим на основные действия при работе верстальщика с онлайн-редактором Figma. -
13
Самостоятельная работа
Дополнительные задания, которые позволяют закрепить полученную теорию -
14
Дополнительные материалы
Статьи и видео, подобранные командой Хекслета. Помогут глубже погрузиться в тему курса
Формат обучения
Испытания
Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки. Обычно мы рекомендуем выполнить 3-5 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже
Отзывы
Хотел бы выразить благодарность Никите - автору курса. Очень хорошая подача материала, соответствие теории и заданий. Спасибо, с радостью прошёл курс!