Проект 1. Сайт-визитка
Вы создадите свой первый полноценный сайт, используя инструменты вёрстки — HTML и CSS. Сайт будет рассказывать о вас, вашем опыте и хобби, в ходе прохождения специализации можно будет возвращаться к нему и дополнять информацию о себе. С помощью HTMLтегов вы подготовите разметку содержания сайта, а с помощью стилизации CSS разработаете индивидуальное оформление вашего сайтавизитки и добавите ему простейшей интерактивности.
Несмотря на простоту инструментов HTML и CSS, этот раздел является основополагающим для любого разработчика. HTML зачастую используется в связке с языками программирования, например, с JavaScript, а CSS предлагает ряд элегантных решений по оформлению интерфейсов.
- Темы учебных модулей, посвящённых HTML и CSS:
- Основы HTML
- Стилизация CSS. Селекторы
- Flexbox
- Технология Git. Github
Проект 2. Верстка лендинга по макету
Чтобы основательно закрепить навыки в HTML и CSS, вам будет предложен макет веб-сайта, сделанный в Figma. По этому макету вам предстоит сверстать одностраничный лендинг дизайнерского агентства для десктопной и мобильной версий. Итоговую вёрстку нужно будет загрузить на github, с этого момента все свои проекты вы будете выкладывать в репозиториях.
Этот проект — квинтэссенция работы фронтенд-разработчика в любой компании. Ваши рабочие проекты могут стать гораздо более продвинутыми по функционалу и визуально, но суть останется именно такой.
Проект 3. Слайдер на JavaScript
Следующий проект, который войдёт в Ваше портфолио, — это реализация на веб-сайте слайдера с использованием чистого JavaScript, или так называемого VanillaJS. Слайдер — интерактивная функция перехода между изображениями с описаниями (также это могут быть ссылки или текстовые блоки), которую можно внедрить в дальнейшем в любой сайт или приложение. JavaScript даст больше возможностей для создания интерактивных веб-интерфейсов с нетривиальной логикой.
Выполняя этот проект, вы закрепите навыки разработки на чистом JavaScript, что является одним из трендов последних лет — всё больше разработчиков по возможности пытаются реализовать фронтенд, не прибегая к фреймворкам. Каким бы ни был технологический стек в компании, где вы будете работать в дальнейшем, уверенное знание и применение JavaScript — это необходимый минимум для карьеры фронтенд-разработчика.
Темы учебных модулей, посвящённые JavaScript:
- Введение в JavaScript
- Функции, объекты
- События и DOM. Сборщики.
- Программирование на JavaScript
- Модульность
- Типизация
- AJAX
- API браузера
Проект 4. Канбан-доска на React
Чтобы повысить свою компетенцию во фронтенд-разработке, вам предстоит освоить один из JavaScript-фреймворков. В данной специализации мы предлагаем сфокусироваться на изучении самого популярной библиотеки — React. В четвёртом проекте, основываясь на макете из Figma, вы реализуете веб-приложение, которое представляет собой задачник со статусами каждой задачи. Приложение будет развёрнуто с использованием Create React App.
В данном проекте вам придётся вспомнить вёрстку, а также использовать чистый JavaScript. Часть с React позволит закрепить навыки разработки на этой библиотеке, также в этом модуле будет обзорно рассказано о фреймворках Vue и Angular.
Темы учебных модулей, посвящённые фреймворкам и библиотекам:
- Создание приложения на React
- Компоненты React
- Обработка событий в React
- Паттерны React
- React Router
- Фреймворки и библиотеки
- Vue и Angular
- Redux
Известная компания, занимающаяся прокатом велосипедов в крупных городах России, испытывает проблемы с частой кражей их имущества (велосипедов). Как возможное решение проблемы, компания хочет вести учет этих случаев и отслеживать прогресс. Их собственные разработчики уже подготовили серверную часть приложения (API), требуется реализовать клиентскую часть.
Вам придётся вспомнить все пройденные стеки технологий: HTML, CSS, JavaScript, React. Помимо выполнения выпускного проекта, вам предстоит готовиться к выходу в открытое плавание: под нашим руководством вы подготовите честное и убедительное резюме, составите грамотное сопровождающее письмо, а также выполните несколько заданий из реальных тестовых.
В результате у вас на руках будет аккаунт в github с проектами, которые покажут ваш потенциал работодателю, а также резюме и все шансы быстро устроиться джуниор-разработчиком.
Темы учебных модулей:
- Анимация
- Тестирование и линтеры
- JavaScript на бэкенде. Работа с базами данных
- Node.js. Взаимодействие с бэкендом