Основы HTML, CSS и веб-дизайна

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

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

• Создавать базовую разметку HTML-документа.
• Подключать стили для страницы.
• Использовать возможности веб-инспектора Chrome DevTools.
• Публиковать свой сайт в интернете на хостинге GitHub Pages.
• Использовать базовые концепции веб-дизайна.

Описание

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

Уроки курса

• 1

  Верстальщик vs. веб-дизайнер

  Познакомиться с курсом и рассмотреть специальности «верстальщик» и «веб-дизайнер» в контексте развития технологий.

  теория
• 2

  Знакомство с HTML

  Познакомиться с HTML и попробовать его в деле.

  теория

  тесты
• 3

  Элементы, теги и атрибуты

  Изучить простую идею HTML и структуру элементов страницы.

  теория

  тесты
• 4

  Структура страницы

  Рассмотреть полную структуру целого HTML-документа, видимые и невидимые теги.

  теория

  тесты
• 5

  Основы CSS

  Научиться задавать оформление — стили — элементам HTML-страницы.

  теория

  тесты
• 6

  Chrome DevTools

  Познакомиться с Developer Tools и веб-инспектором, удобным инструментом для анализа и редактирования страницы прямо в браузере.

  теория
• 7

  Каскад

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

  теория

  тесты
• 8

  div, span и display

  Познакомиться с принципами, по которым элементы выводятся на страницу и получают определённый размер.

  теория
• 9

  Правило близости

  Рассмотреть один из базовых принципов дизайна: правило близости или grouping/proximity principle.

  теория

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

  Размещение на GitHub Pages

  Освежить память по теме хостинга и разместить статичную страницу бесплатно на GitHub Pages.

  теория
• 11

  Интеграция с соц. сетями и семантический веб

  Рассмотреть инструменты разметки для лучшей интеграции с социальными сетями.

  теория
• 12

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

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

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

Впечатления

jackplazma 05 декабря 2020

какой же кайф слушать Рахима, особенно после его подкаста :)

kvinvi 28 августа 2018

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

Вика Пыльнова 14 июня 2018

огромное спасибо за курс

Йоси Адлер 05 февраля 2018

Спасибо за вкусняшку! 😉

Максим Торбург 03 февраля 2018

 Очень забавные резюме местами попадаются :)