Хитрости в работе с HTML и CSS

Name: Хитрости в работе с HTML и CSS
Rating: 4.7 (3 reviews)

Набор лайфхаков для повседневной работы

Created byГруппа преподавателей Центра "Специалист" при МГТУ им. Баумана

Last updated 11/2019

Russian

What you'll learn

Быстро набирать HTML и CSS код, используя плагин Emmet
Вставлять изображения-заглушки
Определять приоритет селектора
Создавать заготовку для lightbox-эффекта
Создавать чередование цветов при разметке (“зебра”)
Создавать многострочную всплывающую подсказку и простейшую анимацию

Course content

1 section • 13 lectures • 1h 33m total length

Верстальщики на HTML и CSS1:52
Это практический курс для всех, что хочет научиться создавать страницы в HTML и CSS. В нем отражены все основные проблемы, с которыми сталкивается в своей работе верстальщик.
Как быстро писать на HTML7:49
Мы сделаем первые шаги на пути к быстрой вёрстке - научимся использовать плагин Emmet для записи HTML-элементов и свойств. При использовании Emmet многократно возрастает скорость вёрстки страницы.
.
Как заменить отсутствующие в HTML изображения заглушками?6:35
Верстальщику иногда бывает нужно быстро вставить на HTML-страницу черновое изображение с нужным размером, не дожидаясь работы веб-дизайнера. На этом занятии мы узнаем, как быстро вставлять «заглушки» на страницу.
Как проверить HTML-код на правильность2:37
Вспомним/повторим/узнаем, где и как выполняется проверка кода на валидность.
Как создать выпадающее меню?12:08
Существует много различных способов создания выпадающего меню на странице. На этом занятии вы узнаете один способ, не требующий использования JavaScript.
Как узнать какой CSS-селектор имеет больший приоритет?2:47
Приоритет селекторов на странице определяется простым правилом. На этом занятии вы узнаете, какой селектор важнее и почему CSS-правила, размещенные выше в файле, могут перекрывать нижележащие правила и свойства.
Как создать заготовку для lightbox с псевдоклассом :target?14:23
На моих курсах JavaScript слушатели выполняют лабораторную работу по созданию эффекта лайтбокса. Часто HTML-составляющая многими воспринимается как открытие. На этом занятии мы поговорим о принципах построения подобного эффекта без JS.
Как работать со спрайтом в CSS?5:33
Спрайт - файл-изображение со множеством маленьких картинок. Помогает уменьшить количество запросов на сервер. На этом занятии мы узнаем один из вариантов размещения фрагментов спрайта рядом с элементами неупорядоченного списка.
Как в HTML и CSS создать "зебру"?13:07
Чередование цветов в HTML-списках и таблицах многие называют раскраской “зебры”. На этом занятии мы узнаем, как, используя псевдоклассы, оформить подобную раскраску.
Как в HTML и CSS создать многострочную всплывающую подсказку?8:21
На этом занятии мы рассмотрим вариант с оформлением многострочной подсказки. В дальнейшем вы сможете использовать этот подход для снабжения дополнительной информацией отдельных фрагментов страницы (товаров, ключевых слов и т.д.).
Как создать прижатый подвал на HTML-странице?9:07
Рассмотрим, как создать «прижатый» footer на странице, когда в главной колонке немного содержимого, и заставить footer уезжать при увеличении содержимого.
Как создать простейшую анимацию в CSS?6:48
Если вы ещё не сталкивались с базовыми анимационными возможностями CSS, изучите этот микроурок. Вы сможете создать простейшую анимацию при наведении (CSS-свойство transition) и сделать свой первый @keyframes (CSS-свойство animation).
Как стать сертифицированным разработчиком2:42
Эта лекция посвящена тока как стать сертифицированным разработчиком на
HTML5, JavaScript и CSS.

Requirements

Вы должны знать на базовом уровне HTML5 и CSS3
Уметь пользоваться онлайн редактором HTML (необязательно)

Description

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

Who this course is for:

Начинающие веб-разработчики
Верстальщики с начальным и средним опытом работы