Веб-разработчик с нуля (2022) [Бруноям] [Кирилл Демидов]

Складчина: Веб-разработчик с нуля (2022) [Бруноям] [Кирилл Демидов]

​

Для кого этот курс

Для тех, кто хочет стать веб-разработчиком
Основная задача курса - подготовить вас к профессии. После обучения вы сможете найти работу и уже в рамках компании быстро развивать свои навыки

Для тех, кто хочет попробовать новую сферу
Веб-программирование остаётся одной из самых востребованных профессий и не собирается сдавать позиции. Это перспективная сфера, в которую ещё есть время попасть, чтобы успешно конкурировать на рынке труда



Актуальные знания в курсе

Вы научитесь

• 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
• Модель «Клиент и сервер»
• Роль браузера и редакторов кода
• Настройка рабочей области

Спойлер: 2 БЛОК: Знакомство с HTML

• Знакомство с HTML: Понятие тега и атрибута
• Кодировка текста HTML
• Теги для формирования текста
• Гиперссылки и адреса файлов
• Якорные ссылки
• Ссылка на вызов и отправку email
• Таблицы в HTML
• Тег img и его атрибуты. Правила размещения картинок. Форматы изображений: какие выбрать

Спойлер: 3 БЛОК: Модуль: погружение в CSS

• Основы синтаксиса CSS
• Основные виды селекторов: идентификаторы, классы, псевдоклассы
• Баллы специфичности и приоритеты правил
• Каскад и наследование свойств
• Контекстный и универсальный селектор
• Свойства текста и шрифта в CSS
• Подключение внешних шрифтов
• Цвета HEX и RGB. Добавление однородного фона к элементам. Фоновая картинка для страницы, настройка фона

Спойлер: 4 БЛОК: Блочная модель и макет веб-страницы

• Понятие блочных и строчных элементов
• Ключевые свойства блоков
• Как рассчитывается размер блока и box-sizing: border-box
• Что такое блочная модель
• Применение блоков для построения макета
• Строчно-блочные элементы
• Свойство display
• Устаревшие способы построение макета: знать, нельзя использовать

Спойлер: 5 БЛОК: Многоколоночные макеты с Flexbox

• Семантические теги для вёрстки макета
• Основы Flexbox: контейнеры и элементы
• Выравнивание элементов по основной и поперечной оси
• Смена осей и вертикальное выравнивание элементов
• Проблемы применения flexbox

Спойлер: 6 БЛОК: Основы Adobe Photoshop для верстальщика

• Работа с картинками: кадрирование, тримминг
• Сохранение: формат, качество, вес
• Как узнать код цвета
• Инструменты для работы со шрифтом
• Копирование готового CSS
• Измерение расстояний: инструменты, настройки
• Эффекты и их копирование
• Встраивание карт и видео

Спойлер: 7 БЛОК: Позиционирование

• Виды позиционирования: статическое, абсолютное, относительное, фиксированное
• Особенности разных видов позиционирования
• z-index и контекст наложения
• Когда и как использовать позиционирование
• Пример выпадающего многоуровневого меню
• Решение типовых задач с позиционированием

Спойлер: 8 БЛОК: Формы обратной связи

• Основные элементы формы: input, select, textarea, button
• Состояние полей и псевдоклассы
• Элементы выбора checkbox, radio, select
• Группировка элементов: fieldset и legend
• Стили для псевдоэлемента placeholder
• Правила написания стилей для форм
• Стилизация кнопок

Спойлер: 9 БЛОК: Отзывчивый и адаптивный веб-дизайн

• Понятие адаптивного и отзывчивого веб-дизайна
• Медиа-запросы
• Параметры области просмотра и тег Meta viewport
• Проблемы кроссбраузерной верстки
• Валидность кода, валидаторы
• Особенности многостраничных сайтов
• Правила вёрстки для seo-продвижения

Спойлер: 10 БЛОК: Анимация с помощью HTML5 и CSS3

• Плавные переходы для создания анимационных эффектов
• Анимация с помощью keyframes
• Трансформация элементов
• Добавление базовых элементов анимации на сайт

Спойлер: 11 БЛОК: Основы JavaScript и jQuery

• Какие задачи решает JavaScript
• Основы программирования: переменные, условия, функции
• Внедрение скриптов на сайт для создания интерактивных элементов
• Знакомство с jQuery: когда он нужен, а когда нет
• Подключение плагинов: слайдер, галерея, всплывающие окна, аккордеон
• Работа с более сложными front-end технологий

Спойлер: 12 БЛОК: Основы PHP-программирования

• 
  
  • Назначение серверных технологий
  • Локальный веб-сервер и домен
  • Создание динамических веб-страниц
  • Понятие CMS-систем
  • Размещение сайта на хостинге
  • Протокол FTP для загрузки файлов
  • Подведение итогов и завершение проекта

О Бруноям
Бруноям — это практический подход к образованию. Мы делаем курсы для тех, кто хочет получить новую профессию, сменить сферу деятельности или решить свою бизнес-задачу. На собеседовании стали спрашивать не наличие диплома, а навыки, которыми человек обладает. Мы в Бруноям как раз и даём те самые навыки и умения, которые позволяют попробовать себя в новой профессии или совершенствоваться. Мы делаем образование для тех, кто хочет и готов пробовать новое, меняться, искать себя и свою работу мечты