Основы HTML и CSS | BrainsCloud.ru
Материалы урока
- Введение
- Установка редактора Brackets
- HTML теги (теория)
- Создание скелета HTML документа
- HTML теги форматирования текста
- CSS селекторы и свойства (теория)
- Свойства для стилизации текста
- Инструменты разработчика — DevTools
- Изображения и ссылки (img, a)
- Растровая и векторная графика, форматы изображений (png, jpg, svg) + домашнее задание
- HTML Таблицы (table, tr, td, th, tbody и др.) + домашнее задание
- Блочные и строчные элементы (div, span)
- Работа с фоном.
- Работа с фоном. Часть 2 + домашнее задание
- Справочники
- Наименование классов
- Создание простой HTML страницы (практика)
- HTML формы (form, input, textarea, button) + домашнее задание
- Псевдоклассы
- Границы (border, outline)
- Создание формы регистрации (практика)
- Позиционирование (relative, static, absolute, fixed)
- Позиционирование (практика) + домашнее задание
- Псевдоэлементы (before, after, first-letter, first-line)
- HTML5 теги (header, nav, footer, article и др.)
- CSS3 свойства
- Основы flexbox + домашнее задание
- Доработка страницы (HTML5, CSS3, flexbox)
- Селекторы, псевдоклассы + домашнее задание
- Приоритеты селекторов
- Единицы измерения (em, rem) + домашнее задание
- HTML теги (abbr, code, cite, blockquote и др. )
- Стилизация кода (HTML, CSS) + домашнее задание
- Обтекания (float, clearfix)
- Видимость элементов (display, opacity, visibility)
- Специальные символы
- Префиксы (-webkit-, -moz-, -ms-)
- Вставка видео и аудио (video, audio, source)
- Google fonts, локальные шрифты + домашнее задание
- Основы адаптивной верстки (media queries) + домашнее задание
- Цвета (HEX, rgb, rgba)
- Возможности Brackets и плагины
)- Введение
- Основы работы с Photoshop
- Основы работы с Abode XD
- Подготовительные работы
- Верстка шапки сайта
- Верстка текстового блока
- Верстка фотографии
- Верстка контактов
- Верстка страницы «Об авторе»
- Верстка страницы «Контакты»
- Адаптация сайта под разные устройства. Часть 1
- Адаптация сайта под разные устройства. Часть 2
- Favicon, мета-теги
- Кроссбраузерная и валидная верстка
- Домен и хостинг. Размещаем сайт в интернете
- Что делать дальше? План развития
Часть 1- Простая трансформация
- Точка трансформации
- Объединение трансформаций
- Создание перспективы
- 3D Трансформация
- Создание 3D карточки
- Создание наклонной навигации
- Работа с масштабом элемента
- Работа с translate
- Создание 3D куба
- Создание анимации
- Временные функции
- Еще свойства для работы с анимацией
- Создание нескольких анимаций
- Анимация 3D куба
- Создание анимированных пузырей
- Правильная анимация
Хочешь продолжить обучение?
4490 3490₽
Ваш промокод: learnhtml
Перейти к оплатеПодробнее о курсе
*Время предложения ограничено
Курс «Основы верстки контента»: обучение онлайн, 17 уроков
Включено в курс
17 уроков (видео и/или текст)
17 упражнений в тренажере
66 проверочных тестов
Самостоятельная работа
Дополнительные материалы
Помощь в «Обсуждениях»
Доступ к остальным курсам платформы
Чему вы научитесь
- Правильно размечать текст, списки, таблицы и медиаэлементы.
- Создавать таблицы.
- Обращаться к элементам используя широкие возможности селекторов.
- Адаптировать страницы для людей с ограниченными возможностями.
- Использовать возможности CSS Columns.
- Подключать шрифты и правильно их использовать.
Описание
На этом курсе вы изучите основы верстки сайтов.
Здесь мы изучим базовые возможности при работе с контентом и научимся создавать анимации. Вы узнаете больше о том, как стилизовать текст, создавать таблицы, добавлять медиаэлементы на сайты и создавать красивые фоны. В итоге вы научитесь стилизовать страницы сайтов с помощью CSS-стилей, размечать таблицы, видео, аудио и картинки.
Верстка контента пригодится, если вы решите создавать свои сайты. Знания из этого курса помогают программистам понимать как данные стилизуются на сайте и какие инструменты для этого используются.
Этот курс подойдет всем начинающим веб-разработчикам, которые интересуются версткой. Чтобы учиться было проще, стоит заранее изучить что такое HTML и CSS, а также выяснить, как использовать базовые типы селекторов.
CSS3 HTML5 селекторы Доступность CSS Columns CSS Units Верстка
Программа курса
Продолжительность 18 часов
Введение
Работа с контентом — базовая часть при создании проекта. За красивыми анимациями, блоками и картинками скрывается контент. За ним приходит пользователь на сайт или открывает приложение. В этом уроке кратко рассмотрим темы, которые будут изучаться на протяжении курса
теория
Блочная модель и CSS
Какие CSS свойства влияют на размеры элементов при отображении на странице? Вспомним понятие блочной модели и изучим работу свойств margin, padding и border для установки внешних/внутренних отступов и видимых границ элемента. Познакомимся со свойством box-sizing, с помощью которого изменяется стандартное поведение блочной модели
теория
Стили текста
Создание страницы это, в первую очередь, работа с текстом. Каким бы ни был красивым дизайн, но если информацию прочитать трудно или невозможно, то пользователь быстро уйдет со страницы.
теория
тесты
упражнение
Шрифты и работа с ними
Слышали фразу «Поиграйся со шрифтами»? Настало время этим заняться. Учимся подключать шрифты с помощью CSS, управлять размером текста, оформлением и устанавливать межстрочные интервалы. В конце урока изучим обобщенное свойство font, с помощью которого можно установить сразу 6 разных стилей текста
теория
тесты
упражнение
Списки
Списки — неотъемлемая часть текста.
Они позволяют группировать связанные между собой фрагменты, объединяя их по смыслу. В этом уроке изучим доступные виды списков в HTML, потренируемся во вложенности списков и затронем тему стилизации маркеров спискатеория
тесты
упражнение
Колонки
Создание журнальной верстки в несколько колонок было проблематичным с использованием CSS. С приходом стандарта CSS3 появился новый модуль — CSS Multi-column Layout, который дал возможность создавать колонки с автоматическим переносом контента. Изучим возможности модуля CSS Columns и ограничения, которые накладываются при таком способе стилизации текста
теория
тесты
упражнение
Единицы измерения
Как и в реальном мире, в мире верстки используются единицы измерения для обозначения размеров элементов, отступов, размера текста и так далее.
В этом уроке познакомимся с базовыми единицами измерения и их взаимосвязи с элементами на сайте. Изучим понятие относительных и абсолютных единиц и выявим разницу между единицами em и remтеория
тесты
упражнение
Медиаэлементы
Посетители сайтов любят не только читать текст, а воспринимать информацию через медиаэлементы: изображения, видео, аудио. Как правильно добавить их и учитывать различия в браузерах? Почему у изображения на сайте небольшой отступ снизу? Изучим это и немного больше в уроке
теория
тесты
упражнение
Таблицы
Таблицы — страшный сон верстальщика.
Для их создания используется много тегов, а небольшие ошибки могут испортить настроение. В этом уроке последовательно, шаг за шагом, изучим создание простых и сложных таблиц, разберемся, откуда могут возникать ошибки и как их не допускать. К концу урока вы сможете смело создавать таблицы и перестать их боятьсятеория
тесты
упражнение
Формы
Формы — важный интерактивный элемент веб-страницы. Как и ссылки, формы обеспечивают взаимодействие пользователя и страницы, позволяя отправлять данные. Изучим, как создаются формы, добавляются текстовые поля, поля для выбора, списки и кнопки. Затронем тему доступности форм для людей с ограниченными возможностями
теория
тесты
упражнение
Селекторы
К этому уроку были изучены и опробованы простые селекторы, которые позволяли выбирать элементы по классу, идентификатору или тегу.
А как еще можно выбрать элемент на странице? В этом уроке разберем родственные и соседние селекторы, научимся использовать селекторы по атрибутутеория
тесты
упражнение
Псевдоклассы
Продолжаем тему селекторов в CSS и познакомимся с понятием псевдокласса. Узнаем, как, с их помощью, выбирать четные или нечетные элементы, как добавить новые стили при наведении мышки на элемент и почему четные элементы будут такими при использовании только определенного псевдокласса. Разберемся с состояниями элемента и структурными псевдоклассами
теория
тесты
упражнение
Псевдоэлементы
Не хватило элементов на странице? На помощь приходят псевдоэлементы — элементы, созданные с помощью CSS.
В этом уроке разберемся с тем, как создаются псевдоэлементы, зачем они нужны и какие особенности имеют. Увидим, как стилизуют маркеры списка в CSSтеория
тесты
Переполнение
Переполнением считается ситуация, при которой контент внутри контейнера больше, чем размер самого контейнера. Эта ситуация способна подпортить макет даже матерому верстальщику. Что с этим делать и как управлять скрытием контента с помощью свойства overflow изучим в этом уроке. Разберем свойство text-overflow и научимся делать многоточие в текстах, если для него не хватает места
теория
тесты
упражнение
CSS Variables
Представьте, что на сайте десяток блоков имеют фон одного и того же цвета.
Вам нужно изменить все эти цвета. Как же это сделать без постоянной замены цвета в каждом селекторе и как могут помочь переменные узнаем в этом уроке. Разберем, как создаются и используются переменные, узнаем про область видимости и почему глобальные переменные лучше, чем переменные для каждого селекторатеория
тесты
Фон
Верстальщик довольно часто сталкивается с необходимостью стилизовать не только конкретные элементы, такие как таблицы, списки, текст, медиаэлементы, формы. Порой нужно также стилизовать и блоки, внутри которых они находятся. Для этого можно установить фон для блока с контентом, а как это сделать, с помощью свойства background, узнаем в этом уроке. Изучим свойства для установки цвета, изображения, научимся позиционировать фон и устанавливать его размеры
теория
тесты
Градиенты
Одноцветный фон или изображение — не единственный способ добавить стили для блока.
Художник и дизайнеры, для создания фона, нередко используют градиенты — плавные переходы одного цвета в другой. В этом уроке научимся создавать линейные и радиальные градиенты. С помощью градиентов и хитрости изучим создание резких переходов между цветами, а также узнаем о цветовом круге и как, с его помощью, находить сочетания цветов для градиентовтеория
упражнение
Самостоятельная работа
Дополнительные задания, которые позволяют закрепить полученную теорию
Они позволяют группировать связанные между собой фрагменты, объединяя их по смыслу. В этом уроке изучим доступные виды списков в HTML, потренируемся во вложенности списков и затронем тему стилизации маркеров списка
В этом уроке познакомимся с базовыми единицами измерения и их взаимосвязи с элементами на сайте. Изучим понятие относительных и абсолютных единиц и выявим разницу между единицами em и rem
Для их создания используется много тегов, а небольшие ошибки могут испортить настроение. В этом уроке последовательно, шаг за шагом, изучим создание простых и сложных таблиц, разберемся, откуда могут возникать ошибки и как их не допускать. К концу урока вы сможете смело создавать таблицы и перестать их бояться
А как еще можно выбрать элемент на странице? В этом уроке разберем родственные и соседние селекторы, научимся использовать селекторы по атрибуту
В этом уроке разберемся с тем, как создаются псевдоэлементы, зачем они нужны и какие особенности имеют. Увидим, как стилизуют маркеры списка в CSS
Вам нужно изменить все эти цвета. Как же это сделать без постоянной замены цвета в каждом селекторе и как могут помочь переменные узнаем в этом уроке. Разберем, как создаются и используются переменные, узнаем про область видимости и почему глобальные переменные лучше, чем переменные для каждого селектора
Художник и дизайнеры, для создания фона, нередко используют градиенты — плавные переходы одного цвета в другой. В этом уроке научимся создавать линейные и радиальные градиенты. С помощью градиентов и хитрости изучим создание резких переходов между цветами, а также узнаем о цветовом круге и как, с его помощью, находить сочетания цветов для градиентовФормат обучения
Испытания
Это практические задания, которые мы советуем выполнить после завершения курса. Задания помогут вам получить дополнительный опыт в программировании и закрепить полученные навыки. Обычно мы рекомендуем выполнить 3-5 испытаний. Но если не получается, не отчаивайтесь. Просто вернитесь к ним позже
Artem Reshilov06 июня 2022
Здравствуйте, на самом деле хитрое задание) студенту еще надо догадаться использовать два селектора(как для ячейки, так и для строки).
«Это же шахматная доска!» — спустя время понял я и дошло как написать код.
Анна Жарова18 марта 2022
Упражнение получилось, все прекрасно, спасибо за интересный урок=)
Но я завидую человеку с этим расписанием, почему он не работает?xD
Валентина10 марта 2022
Привет 🙂
Прикольно что курсы обновляются, чувствуется забота 🙂 А я первая тут написала 🙂 Обновила табулу рассу так сказать 🙂 Пойду поделаю свежачок 🙂
Avshukan11 февраля 2022
О! Классно, когда задания — это не просто сферические кони в вакууме, а что-то актуальное! Респект за Яна и Магнуса (-:
Рекомендуемые программы
профессия
•
от 6 300 ₽ в месяц
Фронтенд-разработчик
Разработка фронтенд-компонентов для веб-приложений
10 месяцев •
с нуля
Старт 4 мая
профессия
•
от 6 300 ₽ в месяц
Python-разработчик
Разработка веб-приложений на Django
10 месяцев •
с нуля
Старт 4 мая
профессия
•
от 6 300 ₽ в месяц
Java-разработчик
Разработка приложений на языке Java
10 месяцев •
с нуля
Старт 4 мая
профессия
•
от 6 300 ₽ в месяц
PHP-разработчик
Разработка веб-приложений на Laravel
10 месяцев •
с нуля
Старт 4 мая
профессия
•
от 6 300 ₽ в месяц
Node.
js-разработчик
Разработка бэкенд-компонентов для веб-приложений
10 месяцев •
с нуля
Старт 4 мая
профессия
•
от 10 080 ₽ в месяц
Fullstack-разработчик
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев •
с нуля
Старт 4 мая
профессия
Верстальщик
Верстка с использованием последних стандартов CSS
5 месяцев •
с нуля
Старт в любое время
профессия
•
от 6 300 ₽ в месяц
Инженер по автоматизированному тестированию на JavaScript
Автоматизированное тестирование веб-приложений на JavaScript
10 месяцев •
с нуля
в разработке
css — стилизация тега audio html
спросил
Изменено 1 год, 8 месяцев назад
Просмотрено 5к раз
Можно ли добавить стили css к тегу аудио? Я пытался, но не смог.
Спасибо.
Для элемента 
аудио/видео
CSS 