Frontend #

Рабочие задачи бэкенд разработчика часто косвенно касаются фронтенда - внедрить в Spring Boot макеты веб-страниц, отобразить на веб-интерфейсе данные с бэкенда. Поэтому, проекты данного курса включают в себя базовый фронтенд.

Вёрстка #

Что нужно знать:

• Основные идеи HTML (теги, атибуты тегов, DOM)
• Основные идеи CSS - каскадность, селекторы
• HTML формы
• Блочная вёрстка, Flexbox

Избранные курсы и учебные ресурсы #

• Интерактивный курс по верстке от FreeCodeCamp
• Практика - в проекте #4 “Табло теннисного матча” необходимо сверстать простой веб-интерфейс с нуля

Bootstrap #

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

Что нужно знать:

• Как интегрировать Bootstrap в веб-приложение
• Сетка Bootstrap - https://getbootstrap.com/docs/5.0/layout/grid/
• Контейнеры - https://getbootstrap.com/docs/5.0/layout/containers/
• Доступные компоненты - кнопки, формы

Избранные курсы и учебные ресурсы #

• Раздел про Bootstrap на FreeCodeCamp - https://www.freecodecamp.org/learn/front-end-development-libraries/
• Практика - проекты c 5 по 7

Javascript, jQuery/Fetch #

Javascript - основной фронтенд язык, главная задача которого - управлять динамическим контентом на веб-странице. Примеры - интерактивные элементы интерфейса, браузерные игры, карты.

Javascript является опциональным для большинства бэкенд разработчиков, поэтому я включил его только в последний, седьмой проект.

Что нужно знать:

• Основы синтаксиса - переменные, ветвления, циклы, функции, коллекции
• Взимодействие с DOM деревом - изменять, создавать, удалять элементы
• AJAX - фоновое исполнение запросов к бэкенду без перезагрузки страницы. На выбор:
  • jQuery - старый и классический способ исполнять AJAX запросы, считается устаревшим
  • Fetch API, более новый способ, не требующий подключения библиотек - https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Избранные курсы и учебные ресурсы #

• https://learn.javascript.ru/
• Практика:
  • Решение задач на синтаксис, например, на https://app.codesignal.com/
  • Проект “Планировщик задач” включает в себя разработку одностраничного веб-приложения на Javascript

Что дальше #

Если хотите развиваться в сторону Full stack разработчика:

• Javascript 2015
• Системы сборки фронтенда - Webpack
• Javascript фреймворки - React, Vue
• CSS препроцессоры - SCSS/SASS