Основы Frontend

Блок по основам основ фронтенд разработки врывается в промежуток разработки нашего приложения коротких ссылок на FastAPI.

Здесь мы создадим простую веб-страницу и опубликуем её в интернете.

После этого блока мы вернёмся к работе над сокращатором ссылок. Нам нужны знания по фронтенду, чтобы мы могли создать веб-страницы в нашем FastAPI приложении.

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

HTML

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

CSS

Почему стили каскадные. Почему мы хотим добавлять стили на страницу. Как стили меняют отображение контента.

JavaScript

Как взаимодействовать с компонентами страницы и почему мы хотим менять элементы без дополнительных запросов к серверу. Зачем нужно знать JavaScript и когда без него не обойтись.

Bootstrap CSS

Так как писать свои стили это долго и сложно, мы воспользуемся готовыми решениями, которые упрощают нам жизнь. Добавим на страницу популярные компоненты, которые можно встретить на многих сайтах. Так мы подготовим простую страницу "о себе", на которую приятно смотреть.

Bootstrap JS

Чтобы сайт проявлял больше "реакции" на действия пользователя, нужны различные выпадашки, анимашки, и прочие изменения страницы по кликам и даже наведениям мышкой. Используем готовое решение из Bootstrap, чтобы быстро и просто добавить интерактивность на сайт.

Публикация сайта

В рамках предыдущих модулей мы напишем простую веб-страницу с использованием HTML, CSS, JS, подключим сторонние ресурсы - например, CSS и JS от Bootstrap. В этом модуле опубликуем сайт, чтобы можно было скидывать ссылку друзьям и знакомым, ведь мы очень хотим похвастаться тем, что сделали, чему научились.