Получи профессию Front-end разработчика за 2 месяца

Автор и преподаватель курса: Алексеев Вадим

КУРС СОСТОИТ ИЗ 6 МОДУЛЕЙ
Каждый модуль – это выжимка нужных знаний по конкретной технологии. Модуль включает предпроектную работу, тест и практическое задание.

База. Введение в основы разработки, классификация технологий.

День 1

• Урок 1 – Что такое Браузер?
• Урок 2 – История Браузеров
• Урок 3 – Обзор браузеров
• Урок 4 – IP и анонимность в Интернете
• Урок 5 – Инструменты разработчика
• Урок 6 – подключение расширений для Chrome
• Урок 7 – программы для screenshot-ов

День 2

• Урок 1 – редакторы кода
• Урок 2 – установка Sublime
• Урок 3 – модули для Sublime
• Урок 4 – настройка Sublime

День 3

• Урок 1 – хостинг, домены, DNS
• Урок 2 – устанавливаем локальный сервер
• Урок 3 – работа с панелью управления хостингом
• Урок 4 – работа с FileZilla

День 4

• Урок 1 – Как искать решения в гугле
• Урок 2 – 13 способов как гуглить
• Урок 3 – Гугл тренды
• Урок 4 – Хром эксперементы
• Урок 5 – Сайты для вдохновения

День 5

• Урок 1 – этапы разработки Web-проекта
• Урок 2 – отличия Front-End от Back-End
• Урок 3 – классификация технологий
• Урок 4 – сайты для обучения
• Урок 5 – сайты для фриланса

 
HTML. Понимание архитектуры документа, виды и предназначение тегов.

День 1

• Урок 1 – Начало
• Урок 2 – Понимание HTML
• Урок 3 – Логика HTML-разметки
• Урок 4 – Первый HTML-документ
• Урок 5 – Из чего состоит HTML
• Урок 5, часть 1.1 – ТЕГ (теория)
• Урок 5, часть 1.2 – ТЕГ (практика)
• Урок 5, часть 1.3 – ТЕГ (частая ошибка новичков)
• Урок 5, часть 2.1 – АТРИБУТ (теория)
• Урок 5, часть 2.2 – АТРИБУТ (практика)
• Урок 5, часть 3 – Технически верный HTML-документ

День 2

• Урок 1 – Вступление в Типографику
• Урок 2 – Заголовки (h1-h6)
• Урок 3 – Параграф (p)
• Урок 4 – Теги выделения (strong, em, mark)
• Урок 5 – Список (ul)
• Урок 6 – Цитата (blockquote)
• Урок 7 – Разделители (br, hr)
• Урок 8 – Еаблица (table)
• Урок 9 – Вставка картинок (img)
• Урок 10 – Ссылки (a)
• Урок 11 – Резюме

День 3

• Урок 1 – Вступление в формы
• Урок 2 – Основа формы (form)
• Урок 3 – Логика работы форм
• Урок 4 – Элементы форм input (text, password)
• Урок 5 – Элементы форм input (checkbox)
• Урок 6 – Элементы форм input (radio)
• Урок 7 – Элемент формы select
• Урок 8 – Элемент формы textarea
• Урок 9 – Элементы форм input (sebmit, reset)
• Урок 10 – Атрибуты элементов форм (name, value)
• Урок 11 – Элемент формы label
• Урок 12 – Кнопка button
• Урок 13 – Резюме

День 4

• Урок 1 – Повторение + понятие дети/родители
• Урок 2 – 13 блочные и строчные теги (теория)
• Урок 3 – Блочные и строчные теги (практика с DIV и SPAN)
• Урок 4 – HTML5 архитектура страницы
• Урок 5 – Понятие адаптивной верстки
• Урок 6 – Комментарии в коде и доработка базиса

День 5

• Урок 1 – Учим Emmet
• Урок 2 – Верстка меню и навигаций от Back-End
• Урок 3 – HTML5 form types
• Урок 4 – Типы верстки

CSS. Создание стилей, разбор ТОП самых часто используемых техник.

День 1

• Урок 1 – Понимание CSS
• Урок 2 – Подключение CSS
• Урок 3 – Наследования в CSS
• Урок 4 – Классы в CSS
• Урок 5 – Теория оформления стилями
• Урок 6 – Размеры в CSS

День 2

• Урок 1 – Font-size
• Урок 2 – Font-family
• Урок 3 – Подключение GoogleFonts
• Урок 4 – Color & font-weight
• Урок 5 – Line-height + letter-spacing
• Урок 6 – Тени у текста
• Урок 7 – Оформление списков
• Урок 8 – Эффекты наведения

День 3

• Урок 1 – Размеры
• Урок 2 – Блочная модель
• Урок 3 – Свойство display
• Урок 4 – Отбтекания
• Урок 5 – Свойство position
• Урок 6 – Заключение

День 4

• Урок 1 – Префиксы
• Урок 2 – Background
• Урок 3 – Border-radius
• Урок 4 – Тени
• Урок 5 – Input style
• Урок 6 – Sprites
• Урок 7 – Стильные чекбоксы и радиобутоны

День 5

• Урок 1 – Навигация и пагинация
• Урок 2 – Верстка превью новости
• Урок 3 – Before + after
• Урок 4 – Выравнивание строчных элементов
• Урок 5 – Выравнивание блочных элементов
• Урок 6 – Подбробнее про обтекания
• Урок 7 – Выравнивание 3х блоков (классика)
• Урок 8 – Прижать хедер к верху
• Урок 9 – Сделать полноэкранный блок
• Урок 10 – Прижать футтер к низу

Bootstrap. Использование модульной сетки и адаптация сайтов без усилий.

День 1

• Урок 1 – Подключение Bootstrap
• Урок 2 – Понимание Bootstrap сетки
• Урок 3 – Bootstrap сетка на примере
• Урок 4 – Обзор Bootstrapкомпонентов
• Урок 5 – Детально про сетку

День 2

• Урок 1 – Bootstrap типографика
• Урок 2 – Bootstrap таблицы
• Урок 3 – Bootstrap картинки и служебные классы
• Урок 4 – Bootstrap формы

День 3

• Урок 1 – подключение jQuery
• Урок 2 – Bootstrap навигация
• Урок 3 – глификонки
• Урок 4 – выпадающий список
• Урок 5 – группировка кнопок
• Урок 6 – цветные кнопки с выпадающим списком
• Урок 7 – дополнительные элементы к инпутам
• Урок 8 – навигации

День 4

• Урок 1 – хлебные кношки и пагинация
• Урок 2 – лэйблы и бэджи
• Урок 3 – декоративные элементы
• Урок 4 – оповещания и прогресс-бары
• Урок 5 – комментарии
• Урок 6 – лист-груп
• Урок 7 – панели
• Урок 8 – адаптивное видео

День 5

• Урок 1 – всплывающее окно
• Урок 2 – скроллинг
• Урок 3 – табы
• Урок 4 – аккордион
• Урок 5 – карусель
• Урок 6 – оформление темы

Методология. Пошаговая инструкция адаптивной верстки сайтов. Как писать чистый код + как делать это быстро.

День 1

• Урок 1 – Понимание архитектуры сайта
• Урок 2 – Первый профессиональный шаблон
• Урок 3 – Установка Bootstrap и типы лэйаутов
• Урок 4 – Архитектура сайта наглядно

День 2

• Урок 1 – Photoshop для верстальщика
• Урок 2 – Воспоминания о модульной сетке
• Урок 3 – Этап 1 верстки макета
• Урок 4 – Этап 2 верстки макета

День 3

• Урок 1, часть 1 – Создание HTML-структуры
• Урок 1, часть 2 – Создание HTML-структуры

День 4

• Урок 1 – Скелет CSS
• Урок 2 – Работа с типографикой
• Урок 3 – Выравнивание модулей
• Урок 4 – Выравнивание макета

День 5

• Урок 1 – Pixelperfect модулей
• Урок 2 – Pixelperfect макета

День 6

• Урок 1 – CSS сброс
• Урок 2 – Мелкие детали
• Урок 3 – Эффекты наведения
• Урок 4 – Работа с адаптацией

День 7

• Урок 1 – Подключение скриптов
• Урок 2 – Подключение owl-carousel.js
• Урок 3 – Подключение bpopup.js
• Урок 4 – Подключение feelform.js
• Урок 5 – Подключение fancybox.js
• Урок 6 – Подключение WOW.js

Испытание

• Создание своего сайта-визитки
• Верстка дизайн-макета "под ключ"
• Переделка шаблона в лендинг

____________________________________________________________

Пройдя курс, Вы сможете самостоятельно верстать адаптивные сайты практически любой сложности и создавать свои собственные сайты, получите все необходимые навыки для прохождения собеседования и устроитва на работу в IT-компанию. В бонус +1 навык – Вы освоите технику создания сайтов на шаблонах и как на этом зарабатывать!