Для кого этот курс
Для тех, кто хочет стать веб-разработчиком
Основная задача курса - подготовить вас к профессии. После обучения вы сможете найти работу и уже в рамках компании быстро развивать свои навыки
Для тех, кто хочет попробовать новую сферу
Веб-программирование остаётся одной из самых востребованных профессий и не собирается сдавать позиции. Это перспективная сфера, в которую ещё есть время попасть, чтобы успешно конкурировать на рынке труда
Актуальные знания в курсе
Вы научитесь
- HTML/HTML5, CSS/CSS3
- Сетевые технологии и протоколы TCP/IP, HTTP, HTTPS, FTP
- Многоколоночные макеты с flexbox
- Вёрстка адаптивных версий сайтов
- Анимация с помощью HTML5 и CSS3
- Основы JavaScript
- Фреймворк jQuery
- Основы PHP программирования
- Знание основ Adobe Photoshop/Figma для верстальщика
Программа курса
Спойлер: 1 БЛОК: Основы веб-технологий
- Постановка личных целей на курс
- Типы сайтов, функциональность
- Этапы создания сайта, основные профессии индустрии
- Сетевые технологии и протоколы Интернета: TCP/IP, HTTP, HTTPS, FTP
- Хостинг и домен, система DNS
- Модель «Клиент и сервер»
- Роль браузера и редакторов кода
- Настройка рабочей области
- Знакомство с HTML: Понятие тега и атрибута
- Кодировка текста HTML
- Теги для формирования текста
- Гиперссылки и адреса файлов
- Якорные ссылки
- Ссылка на вызов и отправку email
- Таблицы в HTML
- Тег img и его атрибуты. Правила размещения картинок. Форматы изображений: какие выбрать
- Основы синтаксиса CSS
- Основные виды селекторов: идентификаторы, классы, псевдоклассы
- Баллы специфичности и приоритеты правил
- Каскад и наследование свойств
- Контекстный и универсальный селектор
- Свойства текста и шрифта в CSS
- Подключение внешних шрифтов
- Цвета HEX и RGB. Добавление однородного фона к элементам. Фоновая картинка для страницы, настройка фона
- Понятие блочных и строчных элементов
- Ключевые свойства блоков
- Как рассчитывается размер блока и box-sizing: border-box
- Что такое блочная модель
- Применение блоков для построения макета
- Строчно-блочные элементы
- Свойство display
- Устаревшие способы построение макета: знать, нельзя использовать
- Семантические теги для вёрстки макета
- Основы Flexbox: контейнеры и элементы
- Выравнивание элементов по основной и поперечной оси
- Смена осей и вертикальное выравнивание элементов
- Проблемы применения flexbox
- Работа с картинками: кадрирование, тримминг
- Сохранение: формат, качество, вес
- Как узнать код цвета
- Инструменты для работы со шрифтом
- Копирование готового CSS
- Измерение расстояний: инструменты, настройки
- Эффекты и их копирование
- Встраивание карт и видео
- Виды позиционирования: статическое, абсолютное, относительное, фиксированное
- Особенности разных видов позиционирования
- z-index и контекст наложения
- Когда и как использовать позиционирование
- Пример выпадающего многоуровневого меню
- Решение типовых задач с позиционированием
- Основные элементы формы: input, select, textarea, button
- Состояние полей и псевдоклассы
- Элементы выбора checkbox, radio, select
- Группировка элементов: fieldset и legend
- Стили для псевдоэлемента placeholder
- Правила написания стилей для форм
- Стилизация кнопок
- Понятие адаптивного и отзывчивого веб-дизайна
- Медиа-запросы
- Параметры области просмотра и тег Meta viewport
- Проблемы кроссбраузерной верстки
- Валидность кода, валидаторы
- Особенности многостраничных сайтов
- Правила вёрстки для seo-продвижения
- Плавные переходы для создания анимационных эффектов
- Анимация с помощью keyframes
- Трансформация элементов
- Добавление базовых элементов анимации на сайт
- Какие задачи решает JavaScript
- Основы программирования: переменные, условия, функции
- Внедрение скриптов на сайт для создания интерактивных элементов
- Знакомство с jQuery: когда он нужен, а когда нет
- Подключение плагинов: слайдер, галерея, всплывающие окна, аккордеон
- Работа с более сложными front-end технологий
- Назначение серверных технологий
- Локальный веб-сервер и домен
- Создание динамических веб-страниц
- Понятие CMS-систем
- Размещение сайта на хостинге
- Протокол FTP для загрузки файлов
- Подведение итогов и завершение проекта
О Бруноям
Бруноям — это практический подход к образованию. Мы делаем курсы для тех, кто хочет получить новую профессию, сменить сферу деятельности или решить свою бизнес-задачу. На собеседовании стали спрашивать не наличие диплома, а навыки, которыми человек обладает. Мы в Бруноям как раз и даём те самые навыки и умения, которые позволяют попробовать себя в новой профессии или совершенствоваться. Мы делаем образование для тех, кто хочет и готов пробовать новое, меняться, искать себя и свою работу мечты