Вёрстка сайта визитки

Веб-мастеру: 1 грамм практики дороже тонны теории

Практические уроки по созданию и вёрстке сайта визитки

HTML и CSS будут преследовать веб-мастера всегда и везде.
Поэтому лучше один раз изучить и понять, как это работает и потом не парить себе мозги.

HTML и CSS никогда не устареют.

HTML и CSS - это намного проще чем кажется с первого взгляда, просто нужно начать.

А для того чтобы НЕ тратить лишнего времени, НЕ изучать то что вам никогда не пригодиться и за короткое время получить хороший результат, мне пришлось потрудиться и выделить самое важное в HTML и CSS и рассказать это так, чтобы всем было понятно.

Так и появился видеокурс HTML и CSS за 3 дня. А эти практические уроки, объединённые вместе - его логическое продолжение.

Как сверстать двухколночный сайт визитку с формой обратной связи?

Это мы научимся делать в этом мини курсе.

От макета на бумаге до сайта на хостинге

Пошаговые уроки в хорошем качестве, вёрстка блок за блоком
От PSD макета сайта, до настройки на хостинге
PDF инструкции, доп.материалы и шпаргалки
Создание формы обратной связи (формы заказа) на PHP
Оперативная помощь и поддержка на форуме клиентов
+ PDF отчёт "Психология цвета в веб-дизайне"
Пример сайта, который будем верстать

Что ждёт вас в этих уроках?

1) Сначала мы познакомимся с PSD исходником (фотошоп) из которого будем верстать и продумаем макет будущего сайта. Как его лучше сверстать.
Сразу определимся с размерами, блоками и отступами.

2) Сверстаем шапку для будущего сайта. Научимся вырезать изображения из фотошопа и потом вставлять их на сайт. Также научимся работать с плагином FireBug, который существенно облегчает вёрстку любого проекта.

3) Создадим горизонтальное меню с пунктами, которые будут вести на другие страницы сайта. Также узнаем про некоторые особенности вёрстки.

4) Сверстаем блок с преимуществами, который будет отображаться только на главной странице.
Создадим кнопку "Заказать", и применим для неё линейный градиент из CSS3.
Вместо блока с преимуществами можно вставить любой слайдер или карусель.

5) Сверстаем основной блок с текстом и боковой колонкой, применим обтекание float на живом примере.
Также создадим блоки в сайдбаре, вставлим блок с контактами и социальными кнопками.
Ещё посмотрим, как применять относительное позиционирование - сделаем смещённую ленточку.

6) Верстаем подвал сайта (футер) и проверяем то что у нас получилось.
Дополнительно дублируем верхнее меню в футере - для удобства пользователей.

7) Создаём форму для заказа и разбираемся с типами полей, в т.ч. новые типы из CSS3 (выпадающие списки, радиокнопки, textarea и т.д.).

8) Переносим сайт на хостинг (по FTP) и настраиваем PHP обработчик для формы заказа.
Также будет пояснение как работает PHP и обработчик формы.

Что будет после того как вы пройдёте эти практические уроки?

Вы почувствуете уверенность в своих силах, потому что знание HTML и CSS - открывает много новых возможностей.
Вы не будете застревать на мелочах: как сменить фон, как создать кнопку, как изменить шрифт и т.д. Вы сможете самостоятельно создать целый сайт! И не нужно никого будет просить о помощи.
Вы сможете создавать сайты и не бояться брать их создание на заказ.
Вы узнаете много нюансов, о которых даже не догадывались
Кроме этого сразу во время просмотра видео уроков, вы можете создавать свой собственный сайт.
А при возникновении трудностей вы всегда можете обратиться на форум клиентов.

Желаю удачного изучения!