Продвинутая вёрстка в Django
Модуль из 4 уроков

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

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

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

Урок 1 из 4
Верстаем видеоплеер
Верстаем видеоплеер
В предыдущих уроках вы верстали из готовых блоков, которые сверстал за вас кто-то другой. В этом уроке вы узнаете, как такие блоки делать. Вам предстоит сверстать видеоплеер с нуля.
Подключите иконки
Иконки сейчас используются на любом сайте: даже на этой странице вы можете сходу разглядеть парочку. В видеоплеере они тоже будут: кнопки "Play", "Pause" или "Mute" — это всё иконки.
Верстайте на Flexbox
Flexbox — это современная технология в CSS, с помощью которой можно двигать блоки по странице, выравнивать их и делать "резиновыми": заставлять их растягиваться по ширине. Без понимания Flexbox современную вёрстку тоже не понять.
21 задание
12 учебных часов
ревью кода
Урок 2 из 4
Добавляем плееру анимации
Добавляем плееру анимации
В этом уроке вы оживите плеер: добавите ему анимаций и сделаете его удобным для просмотра фильмов. Полосочка снизу теперь будет пропадать и появляться при наведении, например.
Верстайте пиксель в пиксель
PixelPerfect — это когда ваша страничка свёрстана пиксель в пиксель с макетом дизайнера. Вот как вам сайт нарисовали — вы один в один его и воспроизвели. Это довольно ценный навык, и многие заказчики будут требовать его на работе.
Заставьте блоки светиться, пропадать и появляться
Заставьте вёрстку реагировать на движения мышью: какие-то блоки будут пропадать, какие-то — появляться. Такие простые эффекты сразу дают +15 очков к крутости сайта.
16 заданий
12 учебных часов
ревью кода
Урок 3 из 4
Верстаем форму оплаты
Верстаем форму оплаты
В этом уроке вы сверстаете сервис по переводу денег с карты на карту. Затем напишете бекенд на Python, который получит данные от браузера, проверит, и попросит исправить ошибки, если они есть.
Как отправить данные на сервер
Что происходит, когда пользователь заполняет форму на странице сайта и нажимает Submit ? Вы узнаете как настраивать такие формы и обрабатывать ошибки ввода.
16 заданий
8 учебных часов
ревью кода
Урок 4 из 4
Верстаем сайт по макету
Верстаем сайт по макету
В этом уроке вы используете всё, чему научились в предыдущих. Вы получите картинку, а вы сами сверстаете по ней целый сайт. На нём будут формы, нестандартные компоненты и адаптация под смартфоны.
22 задания
12 учебных часов
ревью кода
Навыки и технологии

Мы продаём навыки, а не знания. В задачах модуля вы отработаете:

‣ HTML-формы

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

‣ Flex

‣ Grid

‣ Анимации

‣ Pixel-perfect

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

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

Учебные материалы встроены в модуль.

Минимальные требования

‣ Владение Python на начальном уровне: циклы, функции, словари и списки.

‣ Писать программы на 400+ строк кода

‣ Читать английскую документацию

‣ Работать с базой данных через ORM

‣ Верстать HTML-страницы

‣ Размещать код на GitHub

Как подготовиться
Рекомендуем начать подготовку с более простых модулей
API веб-сервисов
6 уроков, 78 заданий
  • HTTP
  • ВКонтакте API
  • Instagram API
  • схема url
  • библиотека requests
  • REST API
Купить
5 000 Р
Первый урок бесплатный
Знакомство с Django: ORM
6 уроков, 108 заданий
  • запросы
  • поля
  • модели
  • поиск по полям
  • миграции
Купить
5 000 Р
Первый урок бесплатный
Вёрстка для питониста
4 урока, 77 заданий
  • HTML и CSS
  • Bootstrap
  • отладка в браузере
  • парсинг
  • шаблонизация
Купить
6 000 Р
Первый урок бесплатный
Что вы получите
4 урока
Теория и практические советы. Кратко и по делу.
Пошаговые инструкции
Покажем, как подступиться к решению задач из реального мира.
Кодревью
Преподаватель подскажет, как повысить качество кода.
Неограниченный доступ к учебным материалам
Занимайтесь в удобное время, в своем темпе.
Посмотрите другие модули
API веб-сервисов
6 уроков, 78 заданий
  • HTTP
  • ВКонтакте API
  • Instagram API
  • схема url
  • библиотека requests
  • REST API
Купить
5 000 Р
Первый урок бесплатный
Django
5 уроков, 96 заданий
  • сайт с нуля
  • тестирование
  • деплой
  • JSON API
  • основы DRF
Купить
8 000 Р
Первый урок бесплатный
Django REST Framework
выйдет в 2020 году
  • CRUD
  • serializers
  • JWT
  • наследование
  • версионирование
  • тестирование
Docker
выйдет в 2020 году
  • Dockerfile
  • volumes
  • networks
  • docker-compose
  • docker-machine
  • Docker Hub
Git и GitHub
5 уроков, 49 заданий
  • коммиты
  • клонирование
  • форк
  • история
  • ветки
Асинхронный Python
9 уроков, 146 заданий
  • asyncio
  • aiohttp
  • сокеты
  • стриминг
  • чаты
Купить
7 000 Р
Первый урок бесплатный
Вёрстка для питониста
4 урока, 77 заданий
  • HTML и CSS
  • Bootstrap
  • отладка в браузере
  • парсинг
  • шаблонизация
Купить
6 000 Р
Первый урок бесплатный
Знакомство с Django: ORM
6 уроков, 108 заданий
  • запросы
  • поля
  • модели
  • поиск по полям
  • миграции
Купить
5 000 Р
Первый урок бесплатный
Знакомство с Python
8 уроков, 93 задания
  • переменные
  • функции
  • циклы
  • условия
  • строки
  • списки
  • словари
  • библиотеки
  • файлы
Купить
5 000 Р
Первый урок бесплатный
Командная строка
5 уроков, 41 задание
  • bash
  • cd, ls, pwd
  • nano, vim
  • запуск программ
  • permissions
  • env variables
Устраиваемся на работу
в разработке
  • HeadHunter
  • исследование рынка
  • воронка продаж
  • конверсии
  • собеседование
15 000 Р
Чат-боты на Python
7 уроков, 107 заданий
  • Telegram
  • ВКонтакте
  • Redis
  • deploy
  • long polling
  • state machine
Купить
8 000 Р
Первый урок бесплатный