Запись [Merion Academy] Фронтенд-разработчик с нуля (Дмитрий Федин)

​

Погрузитесь в мир веб-разработки, освоив основные инструменты работы: HTML, CSS, JavaScript. Научитесь работать с дизайн-макетами и адаптивной версткой, сверстаете свои первые страницы и поймете, как строить карьерный трек в ИТ.

Кому подойдет курс?

• Желающим попасть в IT
  Фронтенд — одна из немногих областей знаний в айти, которую можно достаточно быстро освоить. На курсе вы научитесь работать с основными инструментами разработчика и после сразу заняться наработкой портфолио.
  
  
• Дизайнерам
  Насмотренность и образное мышление помогут создавать красивые и функциональные сервисы, а заодно откроют новые возможности для развития.
  
  
• Бэкенд-разработчикам
  На курсе вы лучше поймете, как работает фронтенд. Мы подробно разбираем HTML, CSS, как верстаются макеты, как работать с JavaScript и Git. После сможете заявить о себе как о fullstack-разработчике.

Спойлер: Программа курса

11 Блоков, 50+ Технологий, 20+ Часов лекций, 12 Практических занятий

Блок 1: Введение

• Кратко о сфере веб-разработки и функциях фронтенд-разработчика
• Описание курса и как он устроен
• Настройка начального рабочего окружения

Блок 2: Основы HTML

• Принцип работы браузера и схемы клиент-сервер
• Первая HTML страница, синтаксис и обязательные элементы, семантика
• Основные элементы: заголовки, текст, списки, таблицы и семантика
• HTML формы. Валидация и автоматизация рутинных вещей, расширения
• Практическое задание. Верстка страницы
• Тест по основам HTML

Блок 3: Основы CSS

• Знакомство с CSS и первые свойства
• Продвинутые селекторы, инструменты разработчика, каскадность
• Блочные и строчные элементы, позиционирование
• Практическое задание. Оформление страницы
• Тест по основам HTML

Блок 4: Работа с макетами

• Популярные программы для просмотра макетов. Разбор макета и подготовка к верстке (структура макета, базовые стили)
• Flexbox-модель: основные понятия и свойства
• Завершение верстки первого макета и разбор частых ошибок
• Практическое задание. Верстка макета
• Тест по работе с макетами

Блок 5: Адаптивная верстка

• Адаптивная верстка и её виды
• Медиа-запросы
• Пример адаптивной верстки на макете
• Практическое задание. Адаптивная верстка
• Тест по адаптивной верстке

Блок 6: Основы Git

• Системы контроля версий и установка Git
• Создание репозитория и хостинг файлов
• Тест по основам Git

Блок 7: Основы JavaScript

• Языки программирования и принцип их работы
• Переменные и типы данных
• Операторы и приведение типов
• Условия и циклы
• Массивы и методы для работы с ними
• Функции
• Объекты
• Практическое задание. Функции и игры на JavaScript
• Тест по основам JavaScript

Блок 8: Основы JavaScript в браузере

• Браузер как окружение JavaScript
• Работа с DOM (Document Object Model)
• События и обработчики
• HTML формы и JS
• Работа с сервером, локальные хранилища
• Практическое задание. Барабанный синтезатор
• Тест по основам JavaScript в браузере

Блок 9: Продвинутый JavaScript

• Знакомство с Node.JS и npm
• Модули и Webpack
• Наследование в JS
• Итераторы и генераторы
• Async-await, таймеры
• Unit-тестирование
• Практическое задание. To-Do List
• Тест по продвинутому JavaScript

Блок 10: Основы React

• TypeScript
• Установка React и создание компонентов
• Props и состояние компонента
• React-Router
• Практическое задание. React проект
• Тест по основам React

Блок 11: Обзор дорожной карты Frontend-разработчика

• Обзор дорожной карты Frontend-разработчика

Финальное тестирование

• Финальное тестирование

Подарки и бонусы

• Английский для IT
  Для наших студентов дарим мини-курс по ключевым английским словам в IT, который сделали совместно с нашими друзьями из Advance.
  Учимся и работаем с зарубежными коллегами легко.
  
  
• Карьерный интенсив
  Всем студентам мы предоставляем бесплатный интенсив по карьерному росту, разработанный совместно с экспертами из центра развития карьеры «ЭЙЧ».