WEB разработка (HTML / CSS)

Курс из 12 уроков

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

По данным We Are Social, в январе 2020 года в мире насчитывалось 4,54 млрд пользователей интернета. Это 59 % от общего населения планеты. То есть потенциал роста интернет-пользователей исчисляется миллиардами человек.

Эти данные позволяют предположить, что интернет в обозримом будущем будет расти. То есть будут появляться новые сайты, а для создания этих сайтов понадобится HTML и CSS. Очевидно, эти языки будут развиваться, а их возможности будут расти.

Данный курс поможет изучить:

  • основные теги страницы,
  • основные стили для объектов,
  • псевдоэлементы и псевдоклассы,
  • изучение структуры страницы,
  • правила позиционирования объектов на странице,
  • свойство flex и свойства flex-контейнеров,
  • grid-контейнеры,
  • основы построения списков и таблиц,
  • медиа-запросы и основы адаптации страницы под разные разрешения экрана.

Мы тоже не собираемся стоять на месте и ждать, пока цивилизация спешит вперед. Именно поэтому мы собрали самые необходимые навыки в данном модуле.

Бесплатный доступ

Курс доступен совершенно бесплатно. Вы можете приступить к занятиям прямо сейчас.

Уроки

Урок 1 из 12
Создай страницу своего домашнего питомца
Создай страницу своего домашнего питомца

Создание сайта-портфолио для своего домашнего животного

Вы узнаете что такое HTML

Поговорим о синтаксисе и первых строках в HTML.

Изучим работу с изображениями

Научимся отображать изображения на странице.

13 заданий
3 учебных часа
ревью кода
Урок 2 из 12
Карточка квартиры
Карточка квартиры

В этом уроке ты научишься работать с чужим кодом, изучишь много нового и интересного!

Псевдо-что?

Псевдоклассы! Именно о них мы поговорим в этом уроке.

Изучаем блочные элементы

Изучим что такое div-блоки.

10 заданий
5 учебных часов
ревью кода
Урок 3 из 12
День и ночь
День и ночь

Изучение возможностей управления внешним видом сайта с помощью псевдоклассов.

Закрепление работы с div-элементами

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

Углубленная работа с псевдоклассами

Благодаря различным псевдоклассам, которые встречались ранее (а некоторые и не встречались) ты сможешь изменить внешний вид тех или иных элементов на сайте, буквально в несколько строчек несложного кода и увидишь на примерах как можно достичь изменений от действий пользователя.

24 задания
ревью кода
Урок 4 из 12
Создание ежедневника
Создание ежедневника

Создание ежедневника для записи личных дел.

Научимся составлять списки дел

Как давно вы оценивали то, сколько дел вы выполняете за день? Настало время оценить!

Разложим все по пунктам

Напишем сайт, в котором разложим по пунктам все дела на день!

18 заданий
5 учебных часов
ревью кода
Урок 5 из 12
Создай экран загрузки сайта
Создай экран загрузки сайта

Про анимацию в CSS

Научись работать с анимациями

Освой навыки современного веб-разработчика, разобравшись со свойствами анимаций.

Оптимизируй свою работу и код

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

24 задания
4 учебных часа
ревью кода
Урок 6 из 12
Престижные профессии. Создание сайта
Престижные профессии. Создание сайта

Создание сайта-заготовки.

Научимся делать несколько страниц и переход между ними

На сайте бывает множество страниц, самое время научиться делать переходы между ними и настраивать стили.

Может повторим?

Повторим пройденный материал и найдем ему новое применение.

19 заданий
5 учебных часов
ревью кода
Урок 7 из 12
Престижные профессии. Добавление таблиц
Престижные профессии. Добавление таблиц

Продолжение урока и достижение конечной цели разработки.

Таблицы в современной мире

Как часто вы создаете таблицы? А пробовали ли вы создавать их на странице сайта? Давайте скорее опробуем.

Продолжение и преображение

Продолжим предыдущий проект и преобразим его.

19 заданий
4 учебных часа
ревью кода
Урок 8 из 12
Помощь местной библиотеке
Помощь местной библиотеке

Делаем полезное дело и развиваем свои навыки! В этом уроке мы совместим полученные ранее умения работать с display: flex и помощь небольшой библиотеке, которой не к кому обратиться кроме тебя.

Закрепляем знания по Flexbox

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

Медиа-запросы

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

9 заданий
5 учебных часов
ревью кода
Урок 9 из 12
Делаем сайт для кондитерской
Делаем сайт для кондитерской

Продолжаем творить полезные дела, совмещая их с практикой разработки сайтов! На этот раз, мы будем учиться работать с загадочным зверем, под названием grid. Сетки помогут нам лучше располагать элементы на сайтах, делать это проще и с большими возможностями по контролю.

Развиваем навыки работы с grid

Сетки станут еще одним оружием в твоем арсенале веб-разработчика, благодаря которому больше не будет возникать проблем с тем, как грамотно и красиво расположить множество элементов на сайте в зависимости от размера экрана

Продолжаем разбираться с более сложными селекторами

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

24 задания
7 учебных часов
ревью кода
Урок 10 из 12
Видео урок
Видео урок

Этот проект представляет собой веб-страницу, на которой отображаются видеоролики из различных источников. Проект демонстрирует как встраивать видео и другие медиа-элементы, структурировать контент на странице, создавать интерактивные элементы (чекбоксы) и применять базовые стили для визуального оформления.

Встраивание медиа

В этом проекте вы узнаете, как встраивать медиа-элементы, такие как видео и iframe, на веб-страницу. Как создавать интерактивные элементы и измененять их визуальное состояние при взаимодействии с пользователем.

Работа с формами

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

12 заданий
5 учебных часов
ревью кода
Урок 11 из 12
Форма авторизации
Форма авторизации

Форма авторизации - важная составляющая сайта. Опробуем создавать такую форму!

Опробуем формы

Создание форм - это очень просто!

Поля для ввода

Чтобы авторизоваться необходимо ввести логин и пароль. Но куда? Надо разобраться!

18 заданий
4 учебных часа
ревью кода
Урок 12 из 12
Продаем квартиры
Продаем квартиры

Изучение структуры построения формы регистрации

Создаем уникальный дизайн

Пора узнать о современном представление форм регистрации.

Изучим новые настройки CSS

Пора становится моднее и использовать различные цветовые палитры и механизмы представления информации.

31 задание
ревью кода

Что входит в курс

  • 12 проектов в портфолио

    Каждый урок — это новый учебный проект с пошаговыми инструкциями и практическими советами.

  • Кодревью

    Преподаватель прочитает ваш код и расскажет, как сделать лучше.

  • Свободный график занятий

    Занимайтесь в любое удобное время, в своем темпе.

  • Доступ к учебным материалам навсегда

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

Курс доступен совершенно бесплатно. Вы можете приступить к занятиям прямо сейчас.

Как подготовиться к занятиям

Можно начать без особых навыков.