курс

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

9817 учащихся 395 сообщений

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

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

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

Уроки курса

  • 1

    Введение

    Узнать информацию о курсе и темах, которые будут изучены по ходу прохождения
  • 2

    Введение в HTML

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

    тесты

    упражнение

  • 3

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

    Узнать о блочной модели. Изучить различия между блочными и строчными элементами. Изучить влияние стилей на итоговую ширину блочных элементов.

    тесты

  • 4

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

    Рассмотреть возможности последнего стандарта HTML5 в области семантики. Узнать о доступности в WEB

    тесты

    упражнение

  • 5

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

    Изучить основные теги и элементы, которые присутствуют в любом HTML документе
  • 6

    Основы CSS

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

    тесты

    упражнение

  • 7

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

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

    тесты

    упражнение

  • 8

    Chrome DevTools

    Узнать об инструментах разработчика, встроенных в браузере. Разобрать основные возможности Chrome DevTools
  • 9

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

    Узнать о современных редактора кода. Установить Visual Studio Code
  • 10

    Emmet

    Изучить один из самых полезных плагинов для верстальщика — Emmet. Узнать о типовых комбинациях и возможностях.
  • 11

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

    Узнать о хостингах и возможностях публикаций ваших страниц в интернете. Выложить страницу с помощью GitHub Pages
  • 12

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

    Узнать о графических редакторах. Изучить основы работы с онлайн-редактором Figma

Автор

Никита Михайлов

Ключевые навыки: HTML, CSS, JS Frontend.

Много лет работал в аутсорсинговой компании. Развивал клиентские проекты, делал фичи для разных CMS. В основном верстал, готов передать весь опыт вам. Поработав с сотнями проектов, научился выкручиваться даже из самых безнадёжных ситуаций. Помогу освоить вёрстку, чтобы она перестала казаться чем-то страшным.

Впечатления

Урок: Emmet

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

Урок: Emmet

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

Урок: Chrome DevTools

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

Урок: Emmet
продолжительность
8 часов
награда
34 балла

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

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

Профессия

Фронтенд-программист

Разработка фронтенд-компонентов веб-приложений
25 мая 8 месяцев
Профессия

PHP-программист

Разработка веб-приложений на Laravel
26 мая 8 месяцев
Профессия

Node.js-программист

Разработка бэкенд-компонентов веб-приложений
в любое время 8 месяцев
Профессия

Верстальщик

Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев