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

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

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

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

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

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

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

Описание

На этом курсе вы изучите основы верстки сайтов HTML. Знание этого языка пригодится, когда вы начнете работать над версткой своих первых веб-страниц. Вы узнаете больше об HTML-разметке и возможностях современного стандарта HTML5. Также вы получите базовые знания по стилизации с помощью CSS: научитесь подключать стили, использовать селекторы, работать с каскадностью. В дополнение к HTML и CSS, вы научитесь работать со встроенными в браузер средствами отладки верстки, в частности с Google Chrome DevTools. В итоге вы научитесь использовать язык разметки HTML для верстки текста на сайте, а также познакомитесь с базовыми правилами использования CSS и стилизации текста.

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

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

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

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

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

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

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

Испытания

Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки. Обычно мы рекомендуем выполнить 3-5 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже

#
Задание
% завершений

Отзывы

Аватар пользователя Михаил Блохин
Михаил Блохин 26 мая 2024

Хотел бы выразить благодарность Никите - автору курса. Очень хорошая подача материала, соответствие теории и заданий. Спасибо, с радостью прошёл курс!


Аватар пользователя Илья Карташов
Илья Карташов 05 февраля 2024

Задание - бомба!Если быть внимательным,то все решается!


Аватар пользователя Юлия
Юлия 16 мая 2023

Спасибо всей команде Хекслет!! Так классно, когда получается!


Аватар пользователя Вячеслав Межуревский
Вячеслав Межуревский 01 июня 2022

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


Аватар пользователя Andrey T
Andrey T 21 мая 2022

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

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

профессия
от 25 000 ₸ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 20 июня
профессия
от 25 000 ₸ в месяц
Разработка веб-приложений на Django
10 месяцев
с нуля
Старт 20 июня
профессия
от 25 000 ₸ в месяц
Разработка приложений на языке Java
10 месяцев
с нуля
Старт 20 июня
профессия
от 25 000 ₸ в месяц
Разработка веб-приложений на Laravel
10 месяцев
с нуля
Старт 20 июня
профессия
от 39 525 ₸ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 20 июня
профессия
от 25 000 ₸ в месяц
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 20 июня
профессия
новый
Автоматизированное тестирование веб-приложений на JavaScript
8 месяцев
c опытом
в разработке
Старт 20 июня
профессия
от 14 960 ₸ в месяц
Ручное тестирование веб-приложений
4 месяца
с нуля
Старт 20 июня
профессия
от 24 542 ₸ в месяц
новый
Сбор, анализ и интерпретация данных
9 месяцев
с нуля
Старт 20 июня
профессия
от 28 908 ₸ в месяц
Создание веб-приложений со скоростью света
5 месяцев
c опытом
Старт 20 июня