Домашнее задание :
Сверстать макет Fitness:
- Верстка должна выглядеть практически как на макете, но пиксельную точность пока не делаем.
- Так же в этом задании есть изюминка. Возможно, вам нужно будет применить свойство
floatдля создания двух колонок (сайдбар и контент). - Верхнее меню можно сделать через
display: inline-block;, в ссылках есть описание данного свойства.
Полезные ссылки:
- Photoshop для кодера, это цикл статей, нужно читать с первой (внизу страницы). Рекомендовано прочесть все на досуге
- 25 полезных шорткатов для Photoshop
- Горячие клавиши русского и английского Фотошопа CS6
- Обнуление отступов
- Сброс стилей с помощью CSS Reset
- Box model — блочная модель
- Блочные элементы на xiper.net
- Блочные элементы на htmlbook.ru
- Строчные элементы на htmlbook.ru
- inline-block: простое свойство для непростых задач
- Убираем отступы между строчными элементами, здесь есть пример реализации горизонтального меню
- Популярно о псевдоэлементах :before и :after
- О порядке разсположения css-свойств
- Центрирование в CSS: полное руководство
- Расстановка полей и отступов в CSS
Бонусное задание:
Сверстать макет Asia holidays. Это делать не обязательно, но опыт никогда не лишний 😉