Курс HTML + CSS для дизайнеров

На курсе HTML+CSS для Дизайнеров вы получите знания, которые помогут вам уверенно разрабатывать дизайн макеты и воплощать смелые и нестандартные решения. На курсе вы сможете усвоить фундаментальные знания HTML+CSS, понять, как устроена структура веб-страниц и получить базу для самостоятельного развития после завершения курса. Результатом обучения станет набор компонентов, которые вы создадите самостоятельно.

• Лучше понимать, как подготовить макет к верстке
• Создавать страницы сайтов и стилизовать их согласно макету
• Разбираться в верстке под десктопные и мобильные устройства
• Создавать нестандартные сетки для современного дизайна
• Работать с адаптивными изображениями
• Понимать и работать с адаптивной типографией
• Выбирать и подключать кастомные веб-шрифты
• Понимать принципы воплощения дизайн-систем
• Понимать логику создания светлой / темной тем сайта (Light / Dark Mode)
• Разбираться в принципах анимации элементов страницы

Курс предназначен для дизайнеров и творческих профессионалов, которые хотят освоить основы веб-разработки и использовать HTML и CSS для создания и оживления своих дизайн-проектов в интернете. Минимальные требования: Редактор кода Visual Studio Code / Atom / Sublime Графический редактор Figma Браузер Chrome / Firefox

Доступна оплата частями

Помощь преподавателя или ментора курса Индивидуальная онлайн-поддержка от преподавателя или ментора, общение с другими студентами в чате группы

Сертификат после окончания обучения в соответствии с успеваемостью

Программа курса: 1. Введение в веб-технологии Стек разработки для сайта Редактор кода и IDE Взаимодействие HTML & CSS & JS 2. Что такое HTML? Основные понятия Знакомство с понятием тега и атрибута Обязательная структура любой веб-страницы Работа со ссылками и якорями Как вывести изображение, видео, аудио 3. Что такое CSS? Основные понятия Откуда берутся стили в браузере Правила написания стилей Селекторы, свойства, значения свойств Относительные и статические единицы измерения в CSS Блочная модель (CSS Box Model) Работа с отступами и размерами элементов 4. Подготовка к верстке Изучаем макет и планируем верстку Сброс стилей (Подходы и почему это важно) Как подключить шрифты (Google Fonts или свой шрифт) 5. Основные понятия веб-типографики Свойства для работы с текстом Взаимозависимость свойств при работе с текстом Работа со шрифтами (семейства, стили, размеры, насыщенность) 6. Основы веб-верстки Семантическая разметка Что такое поток (flow), блочные и строчные элементы Что такое позиционирование элементов и как оно работает? 7. Основы адаптивной веб-верстки Адаптивная типографика, отступы Единицы измерения: vh, vw, vmin, vmax, em, rem Что такое медиа-запросы, какими они бывают и как их использовать CSS Container Queries Адаптивные изображения, современные форматы (PNG, JPEG, AVIF, WebP) Полезные приемы и лайфхаки для адаптивной верстки 8. Современная веб-верстка Работа с различными цветовыми системами (RGB / RGBA, HEX, HSL / HSLA) Работа с фоном, масками, градиентами Работа с графикой SVG (фоны, иконки, иллюстрации) Спецэффекты: тени, скругление углов, эффекты при наведении Работа с анимацией элементов 9. Современная веб-верстка. FlexBox Layout Model Flex-контейнер, элементы Flex-контейнера Работа с горизонтальным и вертикальным выравниванием Построение горизонтального меню 10. Современная веб-верстка. Grid Layout Строительство сетки (Grid columns / Grid rows) Работа с горизонтальным и вертикальным выравниванием Объединение элементов Методы работы с элементами сетки Построение нестандартной галереи 11. Современная веб-верстка. Переменные в CSS (Custom Properties) Базовые принципы создания дизайн токенов для дизайн-систем с помощью переменных CSS Стилизация компонентов с помощью переменных CSS Светлая и темная темы (Light / Dark Mode) 12. Создание компонентов 13. Методология BEM Правила именования классов Верстка независимыми блоками 14. Проверка поддержки браузерами современных веб-технологий (Can I Use) 15. Библиотека Bootstrap

ITEA - международная образовательная компания комплексной подготовки и развития специалистов IT-индустрии.

• 16000+    Более 16000 студентов выбрали курсы ITEA, доверившись нам, и оправдали свои ожидания
• 95%   Именно такое количество студентов трудоустраивается, пройдя комплексную программу Roadmap
• 200+   С нами работают более двухсот лучших преподавателей-практиков уровня Senior/Team Lead из топ IT-компаний
• 6 мес.   Оказываем помощь в трудоустройстве и постоянно поддерживаем в начале карьерного пути 
• 400$   Cредняя зарплата выпускников ITEA через год после выпуска

Преимущества ITEA:

• Участие в мероприятиях от ITEA.
• Компактные группы до 12 человек.  
• Преподаватели-практики  из топ IT-компаний.  
• Сотрудничество с JUNGO платформой для трудоустройства начинающих специалистов.  
• Присоединение к сообществу IT-профессионалов.
• Консультация по вопросам трудоустройства и рекомендации от практикующих специалистов.