Видеокурс "HTML5 и CSS3 с Нуля до Профи"

Часть 1. Верстка макета сайта-визитки

Макет сайта-визитки, который мы будем верстать в первом блоке курса имеет достаточно простую структуру. Более того, этот макет входит в бонус к данному курсу «Верстка сайта для начинающих». И я специально решил показать верстку макета сайта-визитки в первой части курса, но верстается он уже используя HTML5. Те из вас, кто сначала изучит бонусы, то есть освоит базовые знания к курсу, увидят, как можно один и тот же сайт верстать с использованием новых тегов и возможностей HTML5 и без него. Для тех из вас, кто сразу начнет изучение с практической части курса, этот макет будет введением в верстку на HTML5 и разогревом перед основными макетами курса. Версткой данного макета я хотел показать вам, как одна и та же страница может быть сверстана с и без использования HTML5, какие при этом мы получаем сходства и различия. Чтобы вы еще больше поняли различия верстки на HTML5.

ИЗ КАКИХ УРОКОВ СОСТОИТ ПЕРВАЯ ЧАСТЬ КУРСА:

• Урок 1. Введение. Настройка страницы
• Урок 2. Определение разметки для страницы
• Урок 3. Описание стилей шапки сайта
• Урок 4. Описание стилей основного блока сайта. Часть1
• Урок 5. Описание стилей основного блока сайта. Часть2. Заключение

Часть 2. Верстка макета блога

Во второй части курса мы будем работать с макетом блога. Данный макет состоит из шапки сайта, центрального блока и футера. Центральный блок делится на две колонки: колонка с основным контентом и колонка навигации. То есть макет имеет очень распространенную блоговую структуру. Страница, которую мы сверстаем в данном блоке курса, будет адаптивной и в то же время резиновой. Это позволит работать нашему сайту на самых различных устройствах и разрешениях экранов. Наша верстка не будет зависеть от каких-то конкретных значений разрешений экранов. В заключительных уроках по верстке данного макета мы с вами добавим несколько интересных эффектов, используя возможности CSS3. Если раньше для подобных эффектов было необходимо использование JavaScript, то сегодня мы их можем создавать очень просто, воспользовавшись CSS3.

ИЗ КАКИХ УРОКОВ СОСТОИТ ВТОРАЯ ЧАСТЬ КУРСА:

• Урок 1. Введение. Настройка страницы
• Урок 2. Определение разметки шапки сайта
• Урок 3. Подключение нестандартных шрифтов
• Урок 4. Описание стилей шапки сайта
• Урок 5. Описание разметки основного блока сайта
• Урок 6. Описание разметки блока постов
• Урок 7. Назначение стилей для блока постов
• Урок 8. Описание разметки боковой колонки
• Урок 9. Назначение стилей для боковой колонки
• Урок 10. Описание разметки постраничной навигации
• Урок 11. Назначение стилей для постраничной навигации
• Урок 12. Верстка footer’а сайта
• Урок 13. Доработка верстки макета
• Урок 14. Адаптация верстки под мобильные устройства. Часть 1
• Урок 15. Адаптация верстки под мобильные устройства. Часть 2
• Урок 16. Добавление эффектов CSS3 на страницу. Часть 1
• Урок 17. Добавление эффектов CSS3 на страницу. Часть 2

Часть 3. Верстка макета интернет-магазина

В данной части курса мы с вами будем верстать главную страницу интернет-магазина. Макет главной страницы имеет нестандартную для интернет-магазина структуру. В нем присутствует галерея изображений, блоки располагаются в одну, две, три и четыре колонки по ширине. Это дает нам возможность рассмотреть различные приемы и техники адаптивной верстки. Верстку интернет-магазина мы также будем делать адаптивной. Нестандартная структура макета позволит нам рассмотреть практически все случаи создания адаптивных блоков. При верстке мы рассмотрим создание и установку адаптивной галереи изображений. Также в одном из блоков в макете присутствует карта, которую мы тоже сделаем на 100% адаптивной. При создании адаптивной карты мы рассмотрим универсальный способ, который вам позволит делать адаптивным любой встроенный контент сайта: видео или календарь Google, таблицы Google и т.д. Стоит отметить, что главная страница интернет-магазина, которую мы с вами будем верстать в данной части курса, очень похожа на лэндинг (landing page), имеет схожую структуру. Поэтому, освоив верстку данной страницы, вы без труда сможете верстать и лэндинги.

ИЗ КАКИХ УРОКОВ СОСТОИТ ТРЕТЬЯ ЧАСТЬ КУРСА:

• Урок 1. Введение
• Урок 2. Подключение нестандартного шрифта к странице
• Урок 3. Определение разметки шапки сайта
• Урок 4. Описание стилей шапки сайта. Часть 1
• Урок 5. Описание стилей шапки сайта. Часть 2
• Урок 6. Подключение слайдера к странице
• Урок 7. Назначение стилей и настройка слайдера
• Урок 8. Описание разметки блока новостей
• Урок 9. Назначение стилей для блока новостей
• Урок 10. Описание разметки блока «Популярные продукты»
• Урок 11. Назначение стилей для блока «Популярные продукты». Часть 1
• Урок 12. Назначение стилей для блока «Популярные продукты». Часть 2
• Урок 13. Улучшение блока «Популярные продукты»
• Урок 14. Описание разметки блока «О магазине»
• Урок 15. Назначение стилей для блока «О магазине»
• Урок 16. Описание разметки блока «Подписка»
• Урок 17. Назначение стилей для блока «Подписка»
• Урок 18. Описание разметки для footer’a
• Урок 19. Назначение стилей для блока «footer»
• Урок 20. Делаем макет адаптивным. Часть 1
• Урок 21. Делаем макет адаптивным. Часть 2
• Урок 22. Делаем макет адаптивным. Часть 3
• Урок 23. Делаем макет адаптивным. Часть 4
• Урок 24. Делаем макет адаптивным. Часть 5
• Урок 25. Заключение