Практика верстки под мобильные устройства
Содержание видеокурса «Практика верстки под мобильные устройства»:
Раздел 1. Верстка макета APPIX
Макет APPIX обладает нестандартной структурой расположения контента. Это дает нам возможность рассмотреть различные приемы и техники адаптивной верстки. В первом блоке курса вы с автором из исходника дизайна в формате PSD с нуля сверстаете данный макет. При верстке макета APPIX вы рассмотрите практически все существующие техники для работы с адаптивным контентом. Вы научитесь адаптировать под различные устройства контент, расположенный в две колонки, в три колонки, в четыре колонки. Научитесь также адаптировать двухколоночный контент, каждая из колонок которого делится еще на две колонки.
Как максимально эффективно исследовать PSD-макет сайта
Как определить подходящую разметку страницы
Как эффективно использовать медиа-запросы
Как адаптивно работать с изображениями
Как вместить широкое меню в узкий экран смартфона
Как эффективно использовать позиционирование для адаптивных сайтов
Узнаете тонкости поведения плавающих блоков и свойства float
Как использовать свойство float для адаптивных сайтов
Как определить и вырезать необходимые изображения
Как описать, казалось бы, табличную структуру блоками
Как выравнивать элементы для адаптивной верстки
Как эффективно задавать отступы для адаптивных сайтов
Как предусмотреть все возможные поведения сайта при его наполнении и избежать возможных проблем
Как предусмотреть и описать все возможные элементы, которые могут быть на сайте, но которых нет в макете
Как, используя firebug, найти нужные стили и изменить их
Как эффективно использовать псевдо-классы
Как скруглить углы для изображений, используя CSS 3
Как избежать схлопывания границ блока
Раздел 2. Верстка макета CREATIVE+
Во втором блоке курса вы будете работать с макетом CREATIVE+. В отличие от нестандартной структуры макета APPIX, данный макет состоит из шапки сайта, центрального блока и футера. Центральный блок делится на две колонки: колонка с основным контентом и колонка навигации. То есть макет CREATIVE+ имеет блоговую структуру. В рамках данного блока курса вы сделаете адаптивную верстку макета CREATIVE+. Верстку будете делать адаптивную и в тоже время резиновую. Это позволит вам красиво умещать сайт в самых различных разрешениях экранов — от самых маленьких до самых больших.
Как максимально эффективно исследовать PSD макет сайта
Как определить подходящую разметку страницы
Как эффективно использовать медиа запросы
Как адаптивно работать с изображениями
Как назначать широкие фоновые изображения для адаптивных сайтов
Как вместить широкое меню в узкий экран смартфона
Как эффективно использовать позиционирование для адаптивных сайтов
Узнаете тонкости поведения плавающих блоков и свойства float
Как использовать свойство float для адаптивных сайтов
Как определить и вырезать необходимые изображения
Как выравнивать элементы для адаптивной верстки
Как эффективно задавать отступы для адаптивных сайтов
Как предусмотреть все возможные поведения сайта при его наполнении и избежать возможных проблем
Как предусмотреть и описать все возможные элементы, которые могут быть на сайте, но которых нет в макете
Как, используя firebug, найти нужные стили и изменить их
Раздел 3. Блок полезных уроков
Изучив предыдущие два блока курса, вы уже сможете с легкостью адаптивно верстать макеты различной сложности. Но есть некоторые специфические техники и приемы, которые не рассматривались при верстке макетов APPIX и CREATIVE+. И поскольку они достаточно часто встречаются при верстке сайтов, вы их рассмотрите отдельно в данном блоке курса. В третьей части курса вы улучшите и дополните созданные вами верстки. Рассмотрите дополнительные техники и приемы адаптивной верстки, которые могут пригодиться в будущем.
Как заставить работать вашу верстку в старых версиях IE и стоит ли это делать
Как установить галерею изображений и сделать ее адаптивной
Как установить видео и сделать его адаптивным
Как адаптивно работать с формами и почему это важно
Как адаптировать громоздкое меню под маленькие экраны
Бонусы
Премиум-курс по CSS3
Уроки по работе в программе Dreamweaver
Сборник полезных инструментов веб-разработчика
Практика верстки под мобильные устройства
Автор: Андрей Бернацкий
![[IMG]](/upload/parser/2021/01/54888.0.jpeg)
Последнее редактирование модератором:
- Статус
- В этой теме нельзя размещать новые ответы.