В сети можно найти множество роликов, посвященных проблема веб-разработки. После нескольких лет ведения занятий по веб-разработке, мы подготовили для вас мини-курс с лайфхаками, решающими самый востребованные практические проблемы начинающих верстальщиков. Курс по веб-разработке будет интересен как новичкам, так и разработчикам уже знакомым с HTML и CSS и желающим сделать свою работу более продуктивной.
Начало работы
Это практический курс для всех, что хочет научиться создавать страницы в HTML и CSS. В нем отражены все основные проблемы, с которыми сталкивается в своей работе верстальщик.
Мы сделаем первые шаги на пути к быстрой вёрстке - научимся использовать плагин Emmet для записи HTML-элементов и свойств. При использовании Emmet многократно возрастает скорость вёрстки страницы.
.
Верстальщику иногда бывает нужно быстро вставить на HTML-страницу черновое изображение с нужным размером, не дожидаясь работы веб-дизайнера. На этом занятии мы узнаем, как быстро вставлять «заглушки» на страницу.
Вспомним/повторим/узнаем, где и как выполняется проверка кода на валидность.
Существует много различных способов создания выпадающего меню на странице. На этом занятии вы узнаете один способ, не требующий использования JavaScript.
Приоритет селекторов на странице определяется простым правилом. На этом занятии вы узнаете, какой селектор важнее и почему CSS-правила, размещенные выше в файле, могут перекрывать нижележащие правила и свойства.
На моих курсах JavaScript слушатели выполняют лабораторную работу по созданию эффекта лайтбокса. Часто HTML-составляющая многими воспринимается как открытие. На этом занятии мы поговорим о принципах построения подобного эффекта без JS.
Спрайт - файл-изображение со множеством маленьких картинок. Помогает уменьшить количество запросов на сервер. На этом занятии мы узнаем один из вариантов размещения фрагментов спрайта рядом с элементами неупорядоченного списка.
Чередование цветов в HTML-списках и таблицах многие называют раскраской “зебры”. На этом занятии мы узнаем, как, используя псевдоклассы, оформить подобную раскраску.
На этом занятии мы рассмотрим вариант с оформлением многострочной подсказки. В дальнейшем вы сможете использовать этот подход для снабжения дополнительной информацией отдельных фрагментов страницы (товаров, ключевых слов и т.д.).
Рассмотрим, как создать «прижатый» footer на странице, когда в главной колонке немного содержимого, и заставить footer уезжать при увеличении содержимого.
Если вы ещё не сталкивались с базовыми анимационными возможностями CSS, изучите этот микроурок. Вы сможете создать простейшую анимацию при наведении (CSS-свойство transition) и сделать свой первый @keyframes (CSS-свойство animation).
Эта лекция посвящена тока как стать сертифицированным разработчиком на
HTML5, JavaScript и CSS.
