Основы Front-end. Создай свой сайт с нуля
Курс подойдет ребятам с хорошим воображением и образным мышлением, которые интересуются программированием и дизайном. На занятиях ученики научатся создавать свои сайты и примерят на себя профессию Frontend-разработчика.
На курсе ребята:
- Освоят язык гипертекстовой разметки HTML5 , CSS3 для стилизации веб-страниц.
- Изучат основы JavaScript, одного из самых востребованных и популярных языков в мире IT.
- На практических примерах разберут, что такое “отзывчивый дизайн ” и “кроссбраузерность”.
- Познакомятся с редакторами кода Sublime Text, Visual Studio Code.
- Научатся обрабатывать растровые изображения в Adobe Photoshop, редактировать векторные изображения в формате SVG.
- Выложат свой первый сайт в интернет.
* Скидка при оплате более 3 месяцев занятий.
ПРОГРАММА
Figma ↓
- Основы работы в Figma: вытаскиваем цвета и картинки для сайта
HTML: основы ↓
- Структура HTML-документа: заголовки, абзацы, списки
- Блочная модель
CSS: основы ↓
- Стилизация цвета текста и фона
- Блочная модель: padding, margin, border
- Селекторы: по тегу, классу, ID
- Каскадность и наследование
- Подключение шрифтов (Google Fonts)
Работа с изображениями ↓
- Теги img, figure, picture
- Форматы изображений: PNG, JPG, SVG, WebP
- Вёрстка hero-блока: заголовок, подзаголовок, кнопка, картинка
Flexbox ↓
- Оси main/cross, justify-content, align-items
- Вёрстка навигации: меню, логотип, кнопка входа
- Карточки товаров: колонки одинаковой высоты, центрирование
CSS Grid ↓
- Явные и неявные сетки, fr-единицы, gap
- grid-template-areas: макет «шапка — сайдбар — контент — футер»
- Галерея изображений (как в Pinterest / Instagram)
Адаптивная вёрстка ↓
- Медиазапросы: Mobile First и Desktop First, breakpoints
- Резиновые картинки (max-width: 100%)
- Гибкие секции: clamp, vw, %
Формы ↓
- Типы полей: input (text, email, tel, number, password), textarea, select, label
- Кнопки: button, input:submit
- Группировка полей: fieldset, legend
- Валидация HTML5: required, pattern, minlength, type=email
- Стилизация :valid / :invalid, :focus, плейсхолдеров
Псевдоклассы и псевдоэлементы ↓
- Псевдоклассы: :hover, :active, :visited, :first-child, :last-child, :nth-child
- Псевдоэлементы: ::before, ::after — декоративные элементы, иконки
CSS-анимации ↓
- transition: плавные переходы
- transform: rotate, scale, translate
- keyframes: бегущие строки, пульсация, летающие объекты
Позиционирование ↓
- static, relative, absolute, fixed, sticky
- z-index: слои и попапы
Проект и работа с AI ↓
- Вёрстка лендинга с AI-контентом (картинки, тексты)
- Генерация логотипа, слогана и иконок с помощью AI
- Написание readme с помощью ChatGPT
Jav * aScript: знакомство ↓
- Подключение скрипта, консоль, alert / prompt
- Переменные let / const
- Типы данных: числа, строки, булевы значения, null, undefined
Jav * aScript: операторы и типы данных ↓
- Арифметические операторы: + − * / %
- Операторы сравнения: == === != !== > < >= <=
- Логические операторы
- Преобразование типов: явное и неявное
- Конкатенация и шаблонные строки
Jav * aScript: условные конструкции ↓
- if / else, else if, тернарный оператор
- switch
Jav * aScript: циклы ↓
- for, while, do...while
- Операторы break и continue
Jav * aScript: числа и строки ↓
- Math, toFixed, parseInt, parseFloat, isNaN
- Методы строк: length, toUpperCase / toLowerCase, trim, split, join, includes, slice, replace
Jav * aScript: массивы ↓
- Создание массивов, длина, индексы
- Методы push / pop / shift / unshift
работы учеников