Продвинутая вёрстка в Django

Модуль из 4 уроков

В наше время даже самый махровый бэкенд-разработчик обязан разбираться в вёрстке. Этот модуль — продолжение другого модуля о вёрстке: здесь будет больше Django и HTML/CSS.

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

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

Навыки и технологии

‣ HTML-формы

‣ Обработка данных форм на сервере

‣ Flex

‣ Grid

‣ Анимации

‣ Pixel-perfect

‣ Мобильная вёрстка

‣ Вёрстка по Figma-макету

Уроки

Урок 1 из 4

Верстаем видеоплеер

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

Подключите иконки

Иконки сейчас используются на любом сайте: даже на этой странице вы можете сходу разглядеть парочку. В видеоплеере они тоже будут: кнопки "Play", "Pause" или "Mute" — это всё иконки.

Верстайте на Flexbox

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

22 задания

12 учебных часов

ревью кода

Приступить к уроку

Урок 2 из 4

Добавляем плееру анимации

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

Верстайте пиксель в пиксель

PixelPerfect — это когда ваша страничка свёрстана пиксель в пиксель с макетом дизайнера. Вот как вам сайт нарисовали — вы один в один его и воспроизвели. Это довольно ценный навык, и многие заказчики будут требовать его на работе.

Заставьте блоки светиться, пропадать и появляться

Заставьте вёрстку реагировать на движения мышью: какие-то блоки будут пропадать, какие-то — появляться. Такие простые эффекты сразу дают +15 очков к крутости сайта.

17 заданий

12 учебных часов

ревью кода

Приступить к уроку

Урок 3 из 4

Верстаем форму оплаты

В этом уроке вы сверстаете сервис по переводу денег с карты на карту. Затем напишете бекенд на Python, который получит данные от браузера, проверит, и попросит исправить ошибки, если они есть.

Как отправить данные на сервер

Что происходит, когда пользователь заполняет форму на странице сайта и нажимает Submit ? Вы узнаете как настраивать такие формы и обрабатывать ошибки ввода.

16 заданий

8 учебных часов

ревью кода

Приступить к уроку

Урок 4 из 4

Верстаем сайт по макету

В этом уроке вы используете всё, чему научились в предыдущих. Вы получите картинку, а вы сами сверстаете по ней целый сайт. На нём будут формы, нестандартные компоненты и адаптация под смартфоны.

22 задания

12 учебных часов

ревью кода

Приступить к уроку

Что входит в модуль

4 проекта в портфолио

Каждый урок — это новый учебный проект с пошаговыми инструкциями и практическими советами.
Кодревью

Преподаватель прочитает ваш код и расскажет, как сделать лучше.
Свободный график занятий

Занимайтесь в любое удобное время, в своем темпе.
Доступ к учебным материалам навсегда

Можно купить модуль сейчас, а к занятиям приступить позже, когда будете готовы.