ХИТРОСТИ В РАБОТЕ С HTML И CSS

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

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

Материалы курса:

Урок №1 Верстальщики на HTML и CSS
Это практический курс для всех, что хочет научиться создавать страницы в HTML и CSS. В нем отражены все основные проблемы, с которыми сталкивается в своей работе верстальщик.

Урок №2 Как быстро писать на HTML
Мы сделаем первые шаги на пути к быстрой вёрстке – научимся использовать плагин Emmet для записи HTML-элементов и свойств. При использовании Emmet многократно возрастает скорость вёрстки страницы.

Урок №3 Как заменить отсутствующие в HTML изображения заглушками?
Верстальщику иногда бывает нужно быстро вставить на HTML-страницу черновое изображение с нужным размером, не дожидаясь работы веб-дизайнера. На этом занятии мы узнаем, как быстро вставлять «заглушки» на страницу.

Урок №4 Как проверить HTML-код на правильность
Вспомним/повторим/узнаем, где и как выполняется проверка кода на валидность.

Урок №5 Как создать выпадающее меню?
Существует много различных способов создания выпадающего меню на странице. На этом занятии вы узнаете один способ, не требующий использования JavaScript.

Урок №6 Как узнать какой CSS-селектор имеет больший приоритет?
Приоритет селекторов на странице определяется простым правилом. На этом занятии вы узнаете, какой селектор важнее и почему CSS-правила, размещенные выше в файле, могут перекрывать нижележащие правила и свойства.

Урок №7 Как создать заготовку для lightbox с псевдоклассом :target?
На моих курсах JavaScript слушатели выполняют лабораторную работу по созданию эффекта лайтбокса. Часто HTML-составляющая многими воспринимается как открытие. На этом занятии мы поговорим о принципах построения подобного эффекта без JS.

Урок №8 Как работать со спрайтом в CSS?
Спрайт – файл-изображение со множеством маленьких картинок. Помогает уменьшить количество запросов на сервер. На этом занятии мы узнаем один из вариантов размещения фрагментов спрайта рядом с элементами неупорядоченного списка.

Урок №9 Как в HTML и CSS создать “зебру”?
Чередование цветов в HTML-списках и таблицах многие называют раскраской “зебры”. На этом занятии мы узнаем, как, используя псевдоклассы, оформить подобную раскраску.

Урок №10 Как в HTML и CSS создать многострочную всплывающую подсказку?
На этом занятии мы рассмотрим вариант с оформлением многострочной подсказки. В дальнейшем вы сможете использовать этот подход для снабжения дополнительной информацией отдельных фрагментов страницы (товаров, ключевых слов и т.д.).

Урок №11 Как создать прижатый подвал на HTML-странице?
Рассмотрим, как создать «прижатый» footer на странице, когда в главной колонке немного содержимого, и заставить footer уезжать при увеличении содержимого.

Урок №12 Как создать простейшую анимацию в CSS?
Если вы ещё не сталкивались с базовыми анимационными возможностями CSS, изучите этот микроурок. Вы сможете создать простейшую анимацию при наведении (CSS-свойство transition) и сделать свой первый @keyframes (CSS-свойство animation).

Урок №13 Как стать сертифицированным разработчиком
Эта лекция посвящена тока как стать сертифицированным разработчиком на HTML5, JavaScript и CSS.