Данная статья - это попытка сориентировать начинающего веб-верстальщика (веб-разработчика и т. д.) на этапе начального обучения веб верстке. Ниже представленны ссылки на статьи в интернете, которые, на мой взгляд, достаточно хорошо освещают данные этапы разработки сайтов:

PSD макеты

Верстка простого сайта средствами GIMP

Верстка PSD макетов умерла

Подготовка PSD макета сайта

Делаем грамотный макет сайта

Из PSD в HTML, создание дизайна вебсайта шаг за шагом

Чтобы освоить верстку веб страниц на чистом HTML и CSS можно прочитать

Как сверстать веб-страницу. Часть 1

Когда проект начинает расти и получается достаточно большой объем повторяющегося кода CSS, то стоит освоить препроцессоры CSS. Два самых популярных препроцессора: LESS и SASS. Технология LESS используется CSS фреймворком Bootstrap.

Руководство по LESS для новичков - не то, чтобы руководство, но как вводная статья - пойдет.

Изучаем LESS: Применение на практике

Как быстро настроить LESS

LESS: программируемый язык стилей

Руководство по написанию разумного, поддерживаемого и масштабируемого Sass.

При верстке крупных или часто обновляемых проектов применяют различные методологии написания html\css кода: БЭМ; SMACSS; OOCSS

 Верстка для самых маленьких. Верстаем страницу по БЭМу

Следующая статья показывает как сверстать страницу с помощью HTML, CSS и CSS фреймворка Bootstrap

Как сверстать веб-страницу. Часть 2 — Bootstrap

Посмотреть возможности Bootstrap 3 можно на сайте с руссской документацией в разделах CSS, Компоненты и JavaScript.

Изучая виды дизайнов в интернете я понял, что существуют четыре вида версток: фиксированная, "резиновая", адаптивная и отзывчивая. Из этой статьи можно понять в чем их отличие. А статья Отзывчивый и адаптивный дизайн сайта более углубленно освещает эти вопросы.

Следующие материалы позволяют закрепить адаптивную верстку на практике:

Адаптивная вёрстка сайта, урок первый. Вёрстка главной страницы

Адаптивная вёрстка, урок второй. Адаптивное видео на сайте

Адаптивная вёрстка, урок третий. Сетка из блоков

 

Как сверстать тему для WordPress

 

Чтобы увидеть позиции модулей в шаблоне, нужно добавить к адресной строке /?tp=1. Например так: http://jinv.ru/?tp=1. Если позиция модулей не появилась, заходим в админку сайта, "Менеджер расширений"=>"Шаблоны", справа вверху нажимаем кнопку "Настройки". На странице настроек включаем опцию "Просмотр позиций модулей".

Как сверстать шаблон для Joomla

 

Форма входа

Яндекс.Метрика