Буткемп Frontend Developer
Что даст вам этот курс
2
0
Преподаватель
Анна Русяева
Web-developer, фриланс
Работала на заводе, как разработчик на C++, потом перешла в веб разработку и в 2017-ом начала заниматься версткой, JavaScript и React. Работала разработчиком в банке, потом ушла на фриланс.
Занималась разработкой:
- внутренней CRM,
- мобильных приложений,
- онлайн магазинами и посадочными страницами.
С 2019 года занимается EdTech проектами.
Образование:
УрФУ, Математическое обеспечение и администрирование информационных систем
Otus Certificated Educator
Программа обучения
Модуль 1
HTML + CSS + препроцессоры
Модуль 2
Базовый JS
Модуль 3
Продвинутый JS Настройка + тс +react + остальные фремворки.
Модуль 4
ПРОЕКТНАЯ РАБОТА
Подробная программа
PDF 149584 kb
HTML + CSS + препроцессоры
Оценить модуль
0
0
Тема 1: Вводное занятие
познакомиться с командой курса;
обсудить программу.
Тема 2: Введение в WEB
рассказать историю веба и развитие технологий в вебе;
обсудить понятие тега.
Тема 3: Работа с консолью
Рассказать, что такое консоль и как с ней работать.
Тема 4: Практика с ментором
показать из чего состоят страницы, как менять свойства, на что это влияет
Тема 5: Практика с ментором
Работа с консолью
Тема 6: Version control. Часть 1
Рассмотреть что такое git + ssh + gitignore.
Тема 7: Version control. Часть 2
рассмотреть, как используется git в командной разработке.
Тема 8: Практика с ментором
научиться пользоваться гитом.
Тема 9: Практика с ментором
Научиться публиковать свои изменения.
Тема 10: Основы HTML
рассмотреть разметку, теги (в основном контентые), понятие атрибута
Тема 11: Семантика + формы
показать использование семантики для стурктуры + теги формы
Тема 12: Практика с ментором
сделать разметку
Тема 13: Практика с ментором
продолжить делать разметку
Тема 14: CSS - история стилей
разобраться, что такое css;
рассмотреть историю стилей;
проанализировать как появился сss,
рассмотреть первую разметку текста стилями;
создать base css.
Тема 15: Кодстайл html & css
рассказть про правила хорошего тона и оформление кода для html & css
Тема 16: Практика с ментором
подключение css
Тема 17: Практика с ментором
девтулз
Тема 18: Работа с редакторами
Какие есть редакторы кода, рассказать про отличия, также рассказать про работу в сандбоксах
Тема 19: Графика - различия
разобраться с работой с цветами и графикой
Тема 20: Практика с ментором
показать фишки в редакорах
Тема 21: Box model в деталях
обсудить как браузер рассчитывает высоту и ширину элемента:
- как работает HTML элемент
- display: block vs inline elements
- position
- border
- padding
рассмотреть особенности размещения элементов в на странице;
сделать упражнение на размещение.
Тема 22: Шрифты - подключение и параметры
разобраться с видами шрифтов и параметрами шрифтос, как подключать шрифты удаленно, как локально,как браузер читает
Тема 23: Практика с ментором
базовая стилизация страницы
Тема 24: Практика с ментором
подключение шрифтов
Тема 25: Позиционирование элементов в деталях
рассмотреть приемы и техники в layout;
объяснить зачем нужны CSS resets
Тема 26: Selector priority + сложные селекторы
Посмотреть веса селекторов и сложные селекторы (+,~,>)
Тема 27: Практика с ментором
Тема 28: Layout - введени основы или стейты
обсудить css reset;
объяснить как браузер рендерит страницу.
Тема 29: Layout techniques
обсудить как исторически менялся layout, tables, columns, float layout.
Тема 30: Flexbox layout
рассмотреть flexbox layout
Тема 31: Grid layout
рассмотреть grid layout.
Тема 32: Практика с ментором
Тема 33: Практика с ментором
Тема 34: Методологии верстки - бэм
рассмотреть методологию, частые ошибки и валидацию
Тема 35: Методология верстки - атомарный css
Рассмотреть другие методолгии создания css структруы
Тема 36: Практика с ментором
Тема 37: Практика с ментором
Тема 38: Введение в media queries
обсудить как работать с дизайнерами и как смотреть на макет, media queries.
Тема 39: Mobile first vs desktop first media queries
обсудить как правильно организовывать media quesries.
Тема 40: Практика с ментором
сделать мобильную верстку страницы.
Тема 41: Практика с ментором
сделать мобильную верстку страницы.
Тема 42: Особенности мобильной верстки
рассмотреть CSS для мобильных браузеров;
specifics of mobile CSS.
Тема 43: Оптимизация под ретину + мобильные устройства
ретина, scrset, picture
Тема 44: Практика с ментором
Тема 45: Практика с ментором
Тема 46: Bootstrap
обсудить как работать с Bootstrap
Тема 47: Tailwind
обсудить как работать с Tailwind.
Тема 48: Практика с ментором
Тема 49: Практика с ментором
попрактиковаться в верстке для email
Тема 50: Работа с свг + спрайты
познакомится с свг и понять, как их можно подключать и модифицировать
Тема 51: Доступность - состояния, стили, стайлгайд, фокус, пропуск ссылок, модалки
рассмотреть, что такое фокус, как делать навигацию по контенту, как скринридеры читают сайт, правила доступности
Тема 52: Практика с ментором
попрактиковаться в оформлении модалок
Тема 53: Практика с ментором
Тема 54: Верстка email рассылок
Тема 55: Анимации и переходы
Тема 56: Практика с ментором
Тема 57: Практика с ментором
Тема 58: Лучшие практики + аналитика сайта
узнать, что хорошо и плохо в верстке;
научиться тестировать свою верстку на ошибки и качество (валидатор и lighthouse)
Тема 59: Базовый JavaScript
писать базовые скрипты на javascript;
создавать программы, обрабатывающие ввод от пользователя;
делать вывод на странице.
Тема 60: Практика с ментором
решать простые задачки (из задачек к презентации к первому уроку basics).
Тема 61: Практика с ментором
решать простые задачки (из задачек к презентации к первому уроку basics).