[Devman] Вёрстка для питониста

[Moderator]

В наше время даже самый махровый бэкенд-разработчик обязан разбираться в вёрстке. Добавление странички в админку, парсинг и тестирование работы сайта, и даже простой вывод данных — все эти задачи требуют работы с HTML и CSS. От вёрстки никуда не деться. Это вводный курс по вёрстке. После него профессиональным верстальщиком вы не станете, но возможности ваши резко возрастут. Вы научитесь самостоятельно верстать небольшие веб-сервисы, познакомитесь с mobile-first подходом и освоите Twitter Bootstrap — самый популярный фреймворк для быстрой вёрстки. В модуле много программирования на Python: шаблоны, парсеры, обработка HTML форм на сервере — всё то, для чего вёрстка бывает нужна программисту. Урок 1: Продаём элитное вино Вы сделаете сайт для винодельни с вековыми традициями. На их сайте регулярно обновляется ассортимент. Чтобы не возвращаться к вёрстке каждый раз, вы построите свою CMS на Python. С места в карьер Знакомство с вёрсткой вы начнёте не с нудной теории, а сразу сделаете полезную фичу. Сначала практика, потом теория. Главный инструмент верстальщика В этом уроке будет много работы с Chrome Dev Tools. Это инструмент для работы с вёрсткой прямо в браузере. Любому мастеру нужны инструменты. Продолжение описания Урок 2: Оживляем блог на Django У блога есть 2 составляющих: код на Python и вёрстка. По отдельности они не работают. Вы получите две неработающих половинки и соберёте из них работающий блог. Третий столп Django Django пользуется моделью MTV: model, template, view. Первый и третий рассмотрены в модуле Django ORM. Остался последний компонент: template. В этом уроке вы научитесь им пользоваться. Сделайте "красиво" Будет крутой галочкой в резюме, если вы будете готовы поправить мелкие косяки верстальщика: поменять цвет на зелёный или закруглить края кнопки. В этом уроке вы узнаете как делать мелки правки в вёрстке. Урок 3: Парсим онлайн-библиотеку В этом уроке вы распарсите онлайн-библиотеку книг: скачаете тысячи изданий с помощью Python. Интерфейс этой библиотеки устарел: выглядит она довольно безобразно. Научитесь писать парсеры Парсеры — это программы, которые скачивают из интернета странички и разбирают их на составляющие: заголовок, картинка, текст... С помощью парсинга можно выкачивать с сайтов гигабайты полезной информации. Пишите самые стабильные парсеры! Сайты всё время меняются: то новая кнопка, то текст уменьшится, то ещё что-нибудь произойдёт. С каждым изменением есть риск, что парсер сломается: он будет искать данные там, где их уже нет. Мы покажем как сделать парсер супер-стабильным: даже если сайт весь целиком преобразится и передвинет всё что можно и нельзя, будет шанс, что парсер останется работоспособным. Урок 4: Верстаем онлайн-библиотеку А в этом уроке вы подарите новый дом книгам из прошлого урока: сверстаете сайт-библиотеку. Верстать будете из готовых блоков, но сильно это задачу не упростит: всё равно будет над чем попотеть. Верстайте быстро, дёшево, красиво Половина того, что вы видите в интернете, сделано с помощью Bootstrap. Это огромная библиотека стилей и компонентов для ваших страничек. Bootstrap поможет, если нужно быстро что-нибудь сверстать: получится не только быстро, но и симпатично. Дайте ссылку на свой сайт Github позволяет бесплатно хостить свёрстанные сайты у себя. Этот и все последующие уроки вы будете публиковать в интернете, чтобы любой мог почитать книги с вашего сайта или посмотреть видео из вашего видеоплеера. Урок 5: Верстаем видеоплеер В предыдущих уроках вы верстали из готовых блоков, которые сверстал за вас кто-то другой. В этом уроке вы узнаете, как такие блоки делать. Вам предстоит сверстать видеоплеер с нуля. Подключите иконки Иконки сейчас используются на любом сайте: даже на этой странице вы можете сходу разглядеть парочку. В видеоплеере они тоже будут: кнопки "Play", "Pause" или "Mute" — это всё иконки. Верстайте на Flexbox Flexbox — это современная технология в CSS, с помощью которой можно двигать блоки по странице, выравнивать их и делать "резиновыми": заставлять их растягиваться по ширине. Без понимания Flexbox современную вёрстку тоже не понять. Урок 6: Добавляем плееру анимации В этом уроке вы оживите плеер: добавите ему анимаций и сделаете его удобным для просмотра фильмов. Полосочка снизу теперь будет пропадать и появляться при наведении, например. Верстайте пиксель в пиксель PixelPerfect — это когда ваша страничка свёрстана пиксель в пиксель с макетом дизайнера. Вот как вам сайт нарисовали — вы один в один его и воспроизвели. Это довольно ценный навык, и многие заказчики будут требовать его на работе. Заставьте блоки светиться, пропадать и появляться Заставьте вёрстку реагировать на движения мышью: какие-то блоки будут пропадать, какие-то — появляться. Такие простые эффекты сразу дают +15 очков к крутости сайта. Урок 7: Верстаем форму оплаты В этом уроке вы сверстаете сервис по переводу денег с карты на карту. Затем напишете бекенд на Python, который получит данные от браузера, проверит, и попросит исправить ошибки, если они есть. Как отправить данные на сервер Что происходит, когда пользователь заполняет форму на странице сайта и нажимает Submit ? Вы узнаете как настраивать такие формы и обрабатывать ошибки ввода. Урок 8: Верстаем сайт по макету В этом уроке вы используете всё, чему научились в предыдущих. Вы получите картинку, а вы сами сверстаете по ней целый сайт. На нём будут формы, нестандартные компоненты и адаптация под смартфоны.