Курс Верстка сайтов на CSS и HTML

Программа курса

Ознакомьтесь с программой курса «Курс Верстка сайтов на CSS и HTML» от Бухгалтерские курсы Руно - cpb-runo.ru

1. Модуль №1. HTML и CSS. Верстка Сайтов. Базовый уровень. <details open=""><summary class="details-summary" tabindex="2">Тема №1. Основы HTML</summary> <div class="details-content"> <span class="lsn">Лекция</span> №1: Введение в веб-разработку и HTML + Редактор…
2. Тема №2. Гиперссылки и мультимедиа. <span class="lsn">Лекция</span> №5: Гиперссылки и навигация. Создание текстовых ссылок (a). Атрибуты href и target. Внутренние и внешние ссылки
3. <span class="lsn">Лекция</span> №6: Работа с изображениями. Вставка изображ…
4. Тема №3. Продвинутые техники HTML. <span class="lsn">Лекция</span> №9: Таблицы и их структура. Создание таблиц (table). Заголовки и ячейки (th, td). Объединение ячеек
5. <span class="lsn">Лекция</span> №10: Семантические элементы HTML 5. Значение семантическ…
6. Тема №4. Основы CSS. <span class="lsn">Лекция</span> №13: Введение в CSS. Основные понятия и синтаксис CSS. Внутренние и внешние стили
7. <span class="lsn">Лекция</span> №14: Селекторы и их типы. Типовые селекторы: элементы, классы, идентификаторы. Комбинато…
8. Тема №5. Позиционирование и блочная модель. <span class="lsn">Лекция</span> №17: Box Model. Margin, padding, border. Влияние на размер элемента и его расположение
9. <span class="lsn">Лекция</span> №18: Позиционирование элементов. Основные типы позиционирова…
10. Тема №6. Расширенные техники стилизации. <span class="lsn">Лекция</span> №21: Псевдоэлементы и псевдоклассы. Использование :hover, :active, :before, :after. Стилизация различных состояний элементов
11. <span class="lsn">Лекция</span> №22: Анимации и переходы.…
12. Тема №7. Верстка. Работа с макетом. <span class="lsn">Лекция</span> №25: Работа с figma для верстальщика и разбор макета
13. <span class="lsn">Лекция</span> №26: Подготовка графики и базовой конструкции макета к верстке
14. <span class="lsn">Лекция</span> №27…
15. Тема №8. Дипломный проект. <span class="ooo">Сам. задание + Решение задания:</span> №7: Создание (верстка) Landing page согласно макету Figma (Верстка landing page из figma)
16. .
17. Модуль №2. Frontend-разработчик на CSS. Фреймворки. <details><summary class="details-summary" tabindex="11">Тема №1. Встроенные стили</summary> <div class="details-content"> <span class="lsn">Лекция</span> №1: Вёрстка формы авторизации Интернет-магазина, доба…
18. Тема №2. CSS файлы для создания стилей. <span class="lsn">Лекция</span> №6: CSS файл для формы авторизации Интернет-магазина. Использование CSS стилей в отдельном файле с поддержкой responsive design
19. <span class="lsn">Лекция</span> №7: CSS файл для списка…
20. Тема №3. Фреймворк Tailwind CSS. <span class="lsn">Лекция</span> №10: Вёрстка формы авторизации с использованием tailwind. Введение в CSS фреймворки. Tailwind CSS
21. <span class="lsn">Лекция</span> №11: Реализация списка товаров из Интернет-магазина с исполь…
22. Тема №4. Фреймворк Twitter Bootstrap. <span class="lsn">Лекция</span> №15: Создание страницы логина в интернет магазине с помощью Bootstrap. Введение в Twitter Bootstrap
23. <span class="lsn">Лекция</span> №16: Вёрстка списка товаров из Интернет-магазина в Bo…
24. Тема №5. Фреймворк Materialize CSS. <span class="lsn">Лекция</span> №19: Создание экрана логина в интернет магазине с помощью Materialize. Основы работы во фреймворке Materialize CSS
25. <span class="lsn">Лекция</span> №20: Вёрстка списка товаров из Интернет-…
26. Тема №6. Дипломный проект. <span class="ooo">Сам. задание + Решение задания:</span> №6: Вёрстка страниц Интернет-магазина на основе шаблона
27. .

Чему вы научитесь

• Научитесь настраивать и организовывать: №7. верстка. работа с макетом. лекция №25 работа с figma для верстальщика и разбор макета лекция №26 подготовка графики и базовой конструкции макета к верстке лекция №27…
• Научитесь создавать и применять: №8. дипломный проект. сам. задание + решение задания №7 создание (верстка) landing page согласно макету figma (верстка landing page из figma).
• Научитесь создавать и применять: №2. гиперссылки и мультимедиа. лекция №5 гиперссылки и навигация. создание текстовых ссылок (a). атрибуты href и target. внутренние и внешние ссылки лекция №6 работа с изображениями. в…
• Научитесь создавать и применять: №3. продвинутые техники html. лекция №9 таблицы и их структура. создание таблиц (table). заголовки и ячейки (th, td). объединение ячеек лекция №10 семантические элементы html 5. значен…
• Научитесь уверенно работать с темой: №6. расширенные техники стилизации. лекция №21 псевдоэлементы и псевдоклассы. использование hover, active, before, after. стилизация различных состояний элементов лекция №22 анимац…