Начните с имитации простой страницы. Это называется «чистая комната» и отлично подходит для улучшения ваших навыков работы с HTML и CSS и, на самом деле, позволяет переносить идеи дизайна и верстки из вашего ума в код.
Вот как вы это делаете:
- Выберите страницу, дизайн которой вам нравится и выглядит достаточно просто. Например, страница выхода из системы на flickr.com.
- Сделайте скриншот этого; не смотрите на HTML / CSS код
- Создайте его копию, используя собственный HTML и CSS с нуля
- Вы можете использовать палитру цветов, чтобы узнать, какие цвета они используют
- Попробуйте имитировать шрифты и расстояния вручную, не глядя на их правила; это поможет вам лучше понять правила верстки и типографики.
- Убедитесь, что ваш окончательный HTML-код проверяется, предпочтительно как XHTML 1.0 Strict (это строже, чем HTML5 и совместимо с HTML5)
- Также проверьте ваш CSS
- Используя выбранный вами браузер (например, Firefox 4, который хорош для рендеринга в соответствии со стандартами), проверьте, совпадает ли ваш результат попиксельно.
- Измените размер вашего сайта и посмотрите, будет ли он вести себя так же, как оригинал.
- Спросите более опытного разработчика, верен ли ваш HTML-код семантически . Это поможет вам определить, использовали ли вы правильные теги для правильного значения.
Это задание займёт у вас много времени в первый раз, но если вы опытный разработчик, обычно это займет не более пары минут или до часа на страницу. Иногда это может расстраивать, но это отличный способ улучшить свои навыки. При этом обязательно обращайтесь к ссылкам, таким как http://www.htmldog.com/, для синтаксиса языка HTML / CSS.