Фронтенд-разработчик [methed]

Складчина: Фронтенд-разработчик [methed]

​

Курс для новичков, которые хотят погрузиться в сферу IT и трудоустроиться в компанию на подходящую вакансию

• Сделаете 12 интересных проектов в порфолио во время обучения.
• За 6 месяцев станете Junior Фронтенд-разработчиком.
• Выполните и защитите дипломный проект.
• Составите резюме, пройдёте собеседование и будете готовы к трудоустройству в компанию.

Программа курса
В одном уроке может быть несколько тем или по одной теме может быть несколько уроков.
11 модулей
198 Видеоуроков
96 Практических заданий

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

1 Подготовительный модуль
В этом модуле вы подробно узнаете как будет проходить курс, где найти все необходимые материалы и как общаться с куратором и сокурсниками.

Настроите все необходимые для начала программы: чат, браузер и редактор кода

2 Знакомство с HTML

• — Введение в HTML
• — Списки и Таблицы
• — Ссылки
• — Работа с изображениями
• — Создание форм
• — Типы элементов
• — Семантическая вёрстка
• — Emmet

После этого модуля вы разберётесь где и какой тег использовать. Научитесь писать разметку правильно и профессионально.
15 Видеоуроков
6 Практических заданий
Курсовая работа
Тема: Создание HTML-структуры страницы с соблюдением современных требований.

3 Введение в CSS + Инструменты разработчика

• — Структура CSS
• — Псевдоэлементы / Псевдоклассы
• — Photoshop для верстальщика
• — Единицы измерений. Наследование
• — Форматирование текста
• — Шрифты и как их правильно подключать
• — Figma — современный инструмент для работы с макетом
• — Цвет, графика, фон
• — Normalize и глобальные стили
• — Методология БЭМ
• — Блочная модель
• — Отступы и граница border
• — Позиционирование
• — GIT — система контроля версий

После этого модуля стилизовать любой элемент не составит труда. Вы изучите структуру и все основные CSS-свойства. Каждый современный верстальщик должен уметь пользоваться инструментами для работы с макетами и GIT, а также знать методологию БЭМ и правильно её использовать.
26 Видеоуроков
14 Практических заданий
Курсовая работа
Тема: Создание и подключение стилей к проекту.

4 Современный CSS

• — Flexbox
• — Состояния — hover, focus, active
• — CSS3-анимации
• — CSS3-свойства
• — Адаптивная вёрстка
• — Pixel Perfect
• — Grid Layout

По окончанию этого модуля вы освоите базу для полноценной вёрстки макета любой сложности. Но впереди самое интересное.
17 Видеоуроков
7 Практических заданий
Курсовая работа
Тема: Использование продвинутых инструментов в современных проектах.


5 Знакомство с JavaScript

• — Основы программирования
• — Знакомство с JavaScript
• — Типы данных
• — Условия
• — Функции. Главный строительный блок
• — Циклы
• — Структурные типы данных - Массивы
• — Структурные типы данных - Объекты
• — Структурные типы данных - Коллекции
• — Отладка кода, ESLint
• — Функции. Стек вызовов, рекурсия, this
• — Функции. Область видимости, замыкание, IIFE

По итогу модуля вы познакомитесь с основами JavaScript, изучите типы данных и их методы, условия, циклы, функции. Напишите приложение для закрепления основных тем.
27 Видеоуроков
12 Практических заданий
Курсовая работа
Тема: Закрепление основ JavaScript.

6 DOM & BOM. Знакомство.

• — DOM-document
• — GIT. lvl 2
• — Элемент DOM
• — События
• — Делегирование событий
• — Формы
• — Хранилища
• — Паттерн Модуль

По итогу модуля вы познакомитесь с DOM & BOM и напишите CRM-приложение для управления базой данных.
18 Видеоуроков
10 Практических заданий
Курсовая работа
Тема: Работа с DOM. Манипуляции с элементами и вывод данных налету.

7 DOM & BOM — API браузера

• — BOM
• — Дата и таймеры
• — Интерактив
• — Модальное окно. Меню. Табы.
• — Анимации, RAF
• — Работа с сервером Fetch AJAX
• — Знакомство Promise
• — Формат Base64 и работа с файлами
• — Методы объекта Promise
• — Регулярные выражения
• — Экосистема Frontend / NPM
• — jQuery
• — Cookies
• — Используем готовые решения в работе (AXIOS, Swiper)
• — Webpack
• — Babel

Одна из частых задач для JavaScript — оживить статичную страничку. По итогу модуля вы без проблем научитесь правильно решать эти задачи.
23 Видеоуроков
14 Практических задания
Курсовая работа
Тема: Работа с DOM. Оживление статичной страницы.


8 Профессиональная вёрстка.

• — Доступность (accessibility)
• — Автоматизация GULP
• — Препроцессор SCSS
• — Оптимизация проекта
• — Кроссбраузерная и Кроссплатформенная вёрстка

В этом модуле вы изучите дополнительные инструменты улучшения и автоматизации вёрстки. Сможете реализовывать проекты на новом, профессиональном уровне. Станете более конкурентны на рынке труда или фрилансе.
10 Видеоуроков
5 Практических заданий
Курсовая работа
Тема: Закрепление профессиональной вёрстки.

9 Программирование на JavaScript.

• — Парадигмы программирования
• — Прототипы
• — ООП основы - Классы
• — Инкапусляция / Полиморфизм / Наследование
• — Асинхронных JavaScript
• — Паттерны ООП
• — Тестирование (Unit/E2E)
• — Функции высшего порядка
• — Паттерны Функционального программирования
• — Websocket

В этом модуле мы изучим темы которые из вас сделают востребованного специалиста — frontend-разработчика. Данный модуль для вас открывает двери дальнейшего, с пониманием дела, изучения фреймворков: React, Vue, Angular и node.js.
20 Видеоуроков
8 Практических заданий
Курсовая работа
Тема: ООП.

10 ReactJS & Redux

• — Основы React
• — JSX / Props
• — Hygen
• — Классовые компоненты, state - состояние
• — Жизненный цикл классового компонента
• — Функциональные компоненты, Хуки
• — VirtualDom, Prop drilling, Контекст
• — Порталы, Рефы
• — Основы Redux
• — Devtools React и Redux
• — Redux: CombineReducer, Middleware
• — Redux-Thunk
• — React Router v6
• — Redux Toolkit
• — Redux Saga
• — React Deploy

В этом модуле вы познакомитесь с разработкой на React и напишите SPA-приложение.
28 Видеоуроков
14 Практических заданий
Курсовая работа
Тема: Разработка SPA-приложения.


11 TypeScript

• — Типы
• — Интерфейсы
• — Функции
• — Классы
• — Generics
• — Enums
• — Область видимости (namespace)
• — Декоратор (decorators)

В этом модуле вы познакомитесь с TypeScript. Научимся типизировать JavaScript с помощью TypeScript.

8 Видеоуроков
5 Практических заданий

• 
  
  
  • Итоговый проект

Результатом итогового проекта станет полностью свёрстанный, адаптивный и кроссбраузерный живой проект на чистом JavaScript и с качественным дизайном, который будет не стыдно положить в портфолио. После защиты диплома вы будете готовы к устройству в студию.

Канал на youtube
Скрытая ссылка