Учебные курсы

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

Интернет

Введение в Интернет

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

HTML

Основы HTML

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

Разделы веб-страницы

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

Самоучитель HTML

HTML (HyperText Markup Language, язык разметки гипертекста) — это язык разметки, который определяет, какие элементы должны располагаться на веб-странице. Текст, ссылки, изображения, списки, таблицы, видео и др. — всё это является элементами, которые можно отобразить на веб-странице с помощью HTML.

Содержимое в HTML

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

Формы в HTML5

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

CSS

Основы CSS

CSS приносит на сайт жизнь путём нанесения слоя краски на статичное содержимое и повышает его назначение через цвет, пространство, акцент и движение.

Основы Sass

Если вы замечаете, что повторяете код в CSS, заменяете несколько сущностей одним и тем же значением или теряетесь в беспорядке селекторов, то препроцессоры CSS для вас.

Продвинутый CSS

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

Самоучитель CSS

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

Селекторы CSS

В данном видеокурсе вы узнаете, что такое стилевой селектор и познакомитесь с базовыми селекторами CSS:

  • селекторами элемента;
  • классами;
  • идентификаторами;
  • универсальным селектором.

Текст в CSS

Хотя CSS также позволяет менять макет веб-страницы, форматирование текста с помощью CSS — это первое, что люди обычно делают.

Стилизация элементов

Стилизация <meter>

Элемент <meter> применяется для наглядного представления числа, лежащего в заданном диапазоне. Его удобно использовать в инфографике для визуализации таких данных как дисковое пространство, заряд батареи, рейтинг и др.

С помощью CSS легко менять цвет такой шкалы, её размеры и даже выводить рядом текстовую информацию.

Стилизация кнопок

Кнопки — это элементы интерфейса, которые позволяют пользователям взаимодействовать с веб-страницей. Например, кнопка «Вход» используется для авторизации пользователей на сайте, а кнопка «Добавить в корзину» для добавления товара в корзину интернет-магазина. Кнопки также могут применяться для открытия окна, запуска видео, подписки на рассылки и др.

Стилизация ссылок

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

Вёрстка

float в теории и на практике

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

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

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

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

По умолчанию каждый элемент HTML отображается в браузере в виде прямоугольника. Размеры этого прямоугольника динамичны: они меняются в зависимости от содержимого данного элемента.

Блочные и строчные элементы

В HTML4 практически все элементы относятся к двум типам, различающихся своим поведением и свойствами — это блочные и строчные элементы. Блочные элементы (такие как <p>, <ol>, <div>) начинаются с новой строки и занимают всё доступное им пространство по ширине, независимо от содержимого, строчные (такие как <a>, <var>, <span>) являются частью строки и размеры элементов определяются их содержимым.

Позиционирование в CSS

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

Позиционирование элементов

Позиционированием называется положение элемента в системе координат. Различают несколько типов позиционирования: нормальное, относительное, абсолютное, фиксированное и приклеенное. В зависимости от типа, который устанавливается через свойство position, меняется и система координат.