Что такое верстка
Верстка — это создание веб-страниц с помощью специальных языков. Верстка — это также интересная, постоянно меняющаяся область деятельности в создании сайтов.
Это процесс перевода макета сайта, созданного дизайнером в графической программе, в HTML-страницу. При этом используются специальные языки, которые для этого предназначены: HTML, CSS, JavaScript.
Соответственно, верстальщик — это человек, который занимается кодированием HTML-страницы.
Верстальщик — это профессия, в которой можно постоянно развиваться, и очень много смежных профессий в веб-разработке неразрывно связаны с версткой.
CSS Grid – высший пилотаж в верстке
CSS Grid — это мощная новая технология в верстке. Она позволяет быстро создавать динамические, отзывчивые, современные макеты на чистом CSS. При этом код чище и проще в поддержке, по сравнению с традиционными методами верстки.
Grid Layout — это новая модель макета, которая обладает мощными способностями контролировать размеры и расположение блоков, а также их содержимого.
Она представляет собой набор горизонтальных и вертикальных линий, которые образуют сетку, состоящую из рядов и колонок. Технология основана на разделении пространства для макета на столбцы и строки, а также на использовании предсказуемого поведения размеров.
Grid позволяет точно позиционировать и масштабировать блоки контента в областях сетки, получаемых при пересечении этих столбцов и строк. Таким образом, получаем очень гибкое поведение верстки при адаптации.
Содержание курса:
Блок 1. Верстка макета Landing Page
Урок 1. Обзор PSD-макета и готовой верстки Landing Page
Урок 2. Экспорт изображений для верстки из Adobe Photoshop CC 2018
Урок 3. Установка Node Js, Gulp CLI и инициализация проекта
Урок 4. Начало создания автоматизированной сборки при помощи Gulp 4
Урок 5. Создание дополнительных задач по автоматизации
Урок 6. Подготовка к верстке и детальный обзор проекта
Урок 7. Создание HTML-разметки для шапки сайта
Урок 8. Полная стилизация шапки сайта
Урок 9. Создание разметки для блока баннера
Урок 10. Стилизация баннера и написание собственного миксина
Урок 11. HTML-структура блока с преимуществами
Урок 12. Полная стилизация преимуществ
Урок 13. HTML-разметка блока с работами
Урок 14. Написание стилей для блока работ
Урок 15. Доступность интерактивных элементов и адаптация блока работ
Урок 16. Написание структуры для информационного блока
Урок 17. Полная стилизация информационного блока
Урок 18. Создание разметки для блока скиллов
Урок 19. Стилизация блока со скиллами
Урок 20. Анимация линий блока прогресса
Урок 21. HTML-структура блока новостей
Урок 22. Полная стилизация блока с новостями
Урок 23. HTML-разметка блока карусели
Урок 24. Стилизация карусели и подключение плагина OwlCarousel
Урок 25. HTML-разметка блока контактов
Урок 26. Полная стилизация блока контактов
Урок 27. Полная реализация подвала
Блок 2. Верстка главной страницы сайта студии
Урок 1. Обзор макета
Урок 2. Экспорт SVG из Adobe Illustrator
Урок 3. Подготовка к верстке
Урок 4. HTML-разметка шапки сайта
Урок 5. Стилизация шапки сайта
Урок 6. Адаптив шапки сайта
Урок 7. Улучшение типографики
Урок 8. Создание разметки для блока меню
Урок 9. Стилизация блока меню
Урок 10. Доработка меню
Урок 11. HTML-разметка блока проектов
Урок 12. Стилизация блока проектов. Часть 1
Урок 13. Стилизация блока проектов. Часть 2
Урок 14. Стилизация блока проектов. Часть 3
Урок 15. Адаптация блока проектов
Урок 16. HTML-разметка блока студио
Урок 17. Стилизация блока студио. Часть 1
Урок 18. Стилизация блока студио. Часть 2
Урок 19. Адаптация блока студио
Урок 20. HTML-разметка блока с новостями
Урок 21. Стилизация блока новостей
Урок 22. Адаптация блока новостей
Урок 23. Разметка подвала
Урок 24. Полная стилизация подвала сайта
Урок 25. Подключение Google maps
Бонусы к основному курсу:
Блок 1. Верстка макета Landing Page
Блок 2. Верстка главной страницы сайта студии
Бонус 1. Учебник по основам HTML для начинающих
Бонус 2. Учебник по основам CSS для начинающих
Бонус 3. Верстка сайта для начинающих
Бонус 4. Курс по HTML5. Основы
Бонус 5. Курс по CSS3
Бонус 6. Теория и практика адаптивной верстки
Бонус 7. CSS Grid Layout
Бонус 8. Flexbox
Бонус 9. Препроцессор Sass
Бонус 10. Построение сеток при помощи Masonry
Курс ТОП! Изучаем.
