Бесплатный курс

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

12892 студента 469 сообщений
Последнее обновление: 24 сентября 2021
Курс Основы современной вёрстки
Бесплатный курс
Зарегистрироваться
  • Тренажер с практикой
  • Пожизненный доступ к теории
  • Асинхронный формат обучения

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

12 уроков (видео и/или текст)
4 упражнения в тренажере
20 проверочных тестов
Помощь в «Обсуждениях»

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

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

Описание

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

Уроки курса

Продолжительность 8 часов
  • 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 августа 2021

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

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

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


Аватар пользователя Яна
Яна 15 апреля 2021

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


Аватар пользователя Maria Naumenko
Maria Naumenko 18 марта 2021

Рада была узнать о такой чудо штуке как Emmet. Да и вообще курс отличный!


Аватар пользователя Кирилл Семейкин
Кирилл Семейкин 25 ноября 2020

Привет всем. Для закрепления материала посмотрите видео от Хекслета про Chrome DevTools(https://youtu.be/JX85r-a-TxQ). Видео идентично с текстом урока, но для закрепления будет полезно. Предложение Хекслету: Может стоит добавить эту ссылку к уроку, как дополнительную информацию? Кстати, спасибо Никите Михайлову за видео.


Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
29 сентября 8 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
29 сентября 8 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
29 сентября 8 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
29 сентября 8 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев