Курс "Основы Фронтенда" — Портфолио Валеры Хаслера

О курсе

В курс входит начало изучения фронтенда, то есть веб-верстка, основы языков HTML и CSS, работа с макетами в Фигме, начало JavaScript, использование Github Pages в качестве хостинга и многое другое.

Чему вы сможете научиться

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

Для кого

Курс подойдет всем, кто решил начать карьеру во фронтенде, стать верстальщиком, fullstack разработчиком или реализовать свой проект. Студентам и тем, кто хочет сменить профессию. А также специалистам смежных специальностей: веб-дизайнерам, бэкэнд программистам, маркетологам и менеджерам, которые хотят расширить свои навыки и лучше понимать веб-разработку.

Курс рассчитан на абсолютных новичков. Вам не нужно ничего знать про веб-разработку и устройство Интернета. Но нужно быть уверенным пользователем ПК.

Почему этот курс

Актуальные знания
Курс сфокусирован на нативных технологиях, которые будут актуальны всегда. Вы научитесь современным версиям языков и лучшим практикам. При этом я показываю и устаревшие практики, с которыми вы можете столкнуться в реальности.
Сбалансированное обучение
Материал начинается с самых основ и усложняется постепенно. Теория и практика даются вместе. Я показываю на занятиях, как пишется живой код, а не статичные слайды (как это часто бывает).
Не только hard skills
Помимо языков HTML, CSS, JS и других технических инструментов, вы также научитесь важным для любого студента вещам: как и где искать информацию, как эффективнее учиться, как развивалась веб-разработка.
Опыт
Я работал во множестве учебных заведений для разработчиков и использую этот ценный опыт для создания лучшего образования. То есть перенимаю лучшее и учусь на чужих ошибках:)
Мотивация автора
Я начал заниматься образованием, потому что сам сталкивался с проблемами и не самым качественным обучением. Мне хочется помогать новичкам и давать им наиболее качественное образование.
Продолжение обучения
В конце курса студентам дается ссылка на обновляемый список материалов для продолжения обучения. Часть этих ссылок дается в процессе.

Навыки, языки и инструменты

HTML
Язык разметки для создания содержимого, структуры и смысла
CSS
Язык стилей для верстки
JavaScript
Язык программирования для придания интерактивности
Figma
Графический редактор для создания макетов и верстки по ним
Редактор кода VS Code
Основной инструмент разработки
Инструменты разработки в браузерах
Именно в браузере работает ваш код, в них же тестируют результат работы
Устройство сети Интернет
Основы устройства Интернета и веба для новичков
Поиск информации
Один из ключевых навыков для любого разработчика
Лучшие и худшие практики
Что стоит и не стоит делать в веб-разработке

Практика

Практика состоит из веб-верстки по дизайнерским макетам. В короткой версии курса студенты верстают один макет. В расширенной - два: учебный и полноценный.

В данный момент я работаю с тремя макетами: учебным от меня, Agency попроще и E-comm посложнее. Возможно использование нового макета от меня или от учебного заведения по договоренности (это увеличит срок разработки учебной программы).

В зависимости от желаемой сложности студенты могут верстать такой же макет, как преподаватель или другой.

Для учебных заведений с код-ревьюерами/наставниками

Практика оценивается по критериям, подготовленным для каждого макета. Также у наставников будет доступ к готовой верстке.

Для учебных заведений без ревью/для групп студентов

Возможен вариант без ручной проверки кода. Вместо нее я буду проводить мастерклассы с постепенной версткой. На каждом мастерклассе верстается одна секция макета. Также я рассматриваю популярные ошибки, которые я встречаю у студентов и отвечаю на вопросы.

Программа курса

Программа постоянно дорабатывается и может отличаться от приведенной ниже. Также её можно подстроить под нужды вашего учебного заведения.

(кликните на пункт, чтобы узнать подробности)

Базовый курс

1. Как эффективнее учиться
2. Как устроен Интернет
3. Редакторы кода
4. Браузеры
5. Начало HTML (язык, синтаксис)
6. Первые элементы (p, h1-h6, a, img)
1. Вложенность
2. Перенос содержимого с макета
3. Использование списков
4. Семантические элементы
5. Форматирование данных
1. Свойства по умолчанию
2. Инструменты разработчика
3. Начало CSS (язык, синтаксис)
4. Первые свойства и значения
5. Селекторы
6. Каскадность, специфичность, наследование
7. Источники стилей, переопределение
1. Box Model
2. Поток
3. CSS Раскладки (display)
1. Лекция "Как эффективно искать информацию"
1. Лекция "Фигма для верстальщика"
2. Начало верстки макета (цвета, шрифты, внутренние отступы)
1. Flexbox раскладка
2. Продолжение верстки по макету (раскладка)
1. Лекция "Популярные ошибки и как их избегать"
1. Создание нескольких страниц
2. Ссылки между страницами
3. Навигация (nav)
4. Подключение и редактирование SVG
1. Лекция "Эволюция раскладок"
1. Зачем нужен адаптив
2. Резиновая и адаптивная верстка
3. Медиа-выражения
4. Тестирование на разных браузерах
1. Введение (история языка, задачи)
2. От кода до результата (Critical Rendering Path)
3. Подключение JavaScript
4. Оживление попап-меню
1. Работа бэкэнд кода на сервере
2. Тестирование с локальным сервером
3. Использование Github Pages как хостинга
1. Эволюция методов создания и сборки сайтов
2. Сборка статики на примере Jekyll
1. Вставка видео и интерактивных карт
2. Фавиконки, генераторы, форматы
1. Лекция "Система контроля версий Git"
1. Лекция "Введение в методологию БЭМ"
1. Среды выполнения, консоль
2. Манипуляции DOM (поиск, изменения)
3. Переменные
4. Обработчики событий
5. Функции
6. Условные операторы
7. Операторы сравнения
1. Типы данных
2. Циклы
3. Хранение состояния на клиенте
4. Работа с HTML-формами
1. Лекция "CSS Анимации"
1. Завершение верстки
2. Что нужно знать про SEO
3. Продолжение обучения
4. Поиск работы
5. Ответы на вопросы

Дополнительные вебинары

1. Работа с макетом в Фигме
2. Разметка с доступностью
3. Адаптивная верстка
4. Разбор сложных мест
5. Оживление попап меню / корзины и сбор данных на JS
1. Лекция "Инструменты разработчика в браузерах"
1. Обзор интерфейса VS Code
2. Расширения
3. Как настроить редакторы кода под себя
1. На этом вебинаре я рассказываю про псевдоклассы :nth-child() и :nth-of-type(), как они работают, в чем их отличия, где они используются. А также о том, как работают формулы для них.
1. На этом вебианре я рассказываю про все значения свойства position, как они работают, где применяются. Показываю примеры сначала на абстрактном коде, потом на макете и реальных сайтах. Кроме того я рассказываю, как работает z-index и контекст позиционирования.
1. Вебинар по разным способам применения псевдоэлементов ::before и ::after для оформления содержимого.
1. Введение в теорию цвета
2. Цветовые модели в CSS
1. Устройство графических файлов
2. Растровые
3. Векторные
4. Современные форматы для веба
1. Введение в типографику и веб-шрифты
2. Семейства
3. Подключение
4. Свойства
5. Вариативные шрифты
1. Разбор всех критериев
1. Вебинар о CSS Custom Properties, как они работают, где и как их можно использовать, особенности и примеры.
1. Вебинар о CSS фильтрах и режимах наложения с примерами использования.