У наш час навіть самий махровий бекенд-Розробник зобов'язаний розбиратися в верстці. Додавання сторінки в адмінку, парсинг і тестування роботи сайту, і навіть простий висновок даних — всі ці завдання вимагають роботи з 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: Верстаємо сайт по макету
У цьому уроці ви використовуєте все, чого навчилися в попередніх. Ви отримаєте картинку, а ви самі зверстаєте по ній цілий сайт. На ньому будуть форми, нестандартні компоненти і адаптація під Смартфони.
У блогу є 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: Верстаємо сайт по макету
У цьому уроці ви використовуєте все, чого навчилися в попередніх. Ви отримаєте картинку, а ви самі зверстаєте по ній цілий сайт. На ньому будуть форми, нестандартні компоненти і адаптація під Смартфони.
https://privatelink.de/?https://dvmn.org/modules/website-layout-for-pydev/