Задания по верстке psd макета и CSS-фреймворкам

Ягоды: клюква

Ягоды: клюква

Верстка сайта на основе psd макета — важнейшая часть работы веб-верстальщика. На уроках HTML мы рассматриваем основные шаги верстки из psd в HTML. Нарезка psd, сохранение изображений из psd, создание HTML-шаблона, верстка макета по psd. Одна из интересных тем, это введение в создание темы WordPress или другой CMS. Использование CSS фреймворков для верстки HTML-страницы.

Задания по верстке psd макета и CSS-фреймворкам

  1. При помощи Emmet создайте каркас разметки для любой страницы в сети. Примечание: например http://hmllab.ru 🙂
  2. Найдите макет HTML-страницы в формате .psd, убедитесь что макет нарезан, сохраните нужные изображения и сверстайте эту страницу. Примечание: оцените время затраченное на верстку и валидность страницы.
  3. Разместите сайт в сети, зарегистрировав доменное имя.  Примечание: файлы разместить при помощи FTP-клиента.
  4. Сверстайте html страницы из макета в Photoshop. Примечание: как вариант, можно найти готовый шаблон с файлом .psd и реализовать свою верстку.
  5. Проверьте html и css на ввалидность
  6. Загрузите сверстанные страницы на сервер, проверьте скорость загрузки страниц.
  7. При необходимости внесите микроразметку.
  8. Проверьте (при необходимости) работу страниц в старых браузерах
  9. Укажите страницу в разделе портфолио своего резюме
  10. Сверстайте ещё один сайт, повторив все предыдущие пункты. Примечание: оцените время вёрстки — оно понадобиться для отслеживания динамики роста.
  11. Выполните работу на заказ.
  12. Используя классы Bootstrap-сетки, создайте трёхколоночную страницу с шапкой и подвалом.
  13. Создайте разметку сайт с использованием CSS-препроцесора (LESS или SSASS)
  14. * Изучите шаблон CMS WordPress. Поменяйтн разметку одной из тем. Примечание: будьте аккуратны, при работе может понадобиться знание PHP. Не трогайте неизвестные фрагменты шаблона или изучите основы PHP.
  15. Используя класс Foundation, создайте трёхколоночный макет сайта.
  16. * Найдите ещё четыре CSS-фреймворка и выполните на них предыдущее задание по верстке HTML-страниц

Все задания по HTML

Добавить комментарий