Я создал своё первое веб-приложение на Python - MathTasks. С бэкендом всё понятно, я изучаю язык программирования, который хорошо подходит для этих задач. Сразу изучаю и практикую на деле. Но невозможно сделать свой сайт в одиночку на одном только Питоне, нужно подключать и фронтенд.
На деле выходит не совсем фронтенд. Ведь это понятие о программировании на стороне клиента. Мне же в основном нужны были дизайн, верстка и минимум скриптов. Как же тогда можно создать свой сайт, не изучая всего вышеперечисленного?
Первое: дизайн
Я в нем мало что понимаю. Все решения, которые я принимал при создании своего веб-проекта были интуитивны. Я опирался на свой опыт использования мобильных приложений (поэтому мне сложно называть это сайтом): большие кнопочки и максимально понятное меню. В итоге, с этим подходом, у меня осталось минимум визуальных элементов, которые нужно было бы делать красивыми и органичными.
Изначально я накидал общую структуру и вид проекта на бумаге. Хоть у меня не было готового дизайна при верстке, но появился общий скелет, на который я ориентировался.
Второе: верстка и скрипты
После придумывания хоть какого-то дизайна, нужно его сверстать. Если делать это на чистом HTML и CSS, то на изучение и гугление придётся потратить недели две. И это при условии того, что я уже был знаком с ними и что-то кривое-косое верстал 5-6 лет назад. Так же мне нравился JavaScript, но без частого использования я его совершенно забыл.
В итоге, для решения этих задач я выбрал bootstrap 4. Для моего проекта это был идеальный вариант. Например, для того, чтобы сделать из ссылки кнопку достаточно прописать там нужный класс.
Есть отличная официальная шпаргалка для поиска этих самых классов. Там можно найти и сразу посмотреть, как он будет выглядеть. Я верстал свой проект с помощью экспериментов - подбирал и комбинировал разные классы к элементам сайта.
Там же я нашел скрипт модального окна и придумал как его использовать: пользователь может сообщать об ошибках в работе сайта. Этой фичи не было в моих начальных планах.
Итог
Итог можно увидеть по ссылке в начале статьи. Мой проект кажется мне понятным и в меру симпатичным, хотя поле для визуальных улучшений есть. Главное, что на такой стиль не пришлось тратить огромную кучу времени, благодаря бутстрапу.