Начало

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

Создание проекта

Для начала создадим наш проект, для этого просто создаем папку с названием нашего сайта, а в ней создаем файл index.html.

Я буду создавать свой сайт на локальном сервере, используя OpenServer(ссылку прикрепил ниже), но в нашем случае это не так важно.

Создание меню

Теперь откроем наш HTML файл в любом текстовом редакторе, это даже может быть блокнот, но я посоветую вам выбрать один из тех, о которых я рассказывал в своей статье(ссылку прикрепил ниже). Я же буду использовать Sublime Text 3.

Наш сайт блог будет состоять из header'а, в котором будет меню, а также категории статей в нашем блоге. Ниже будет content нашего сайта, в котором будут хранится все наши статьи. В самом низу у нас будет футер ,в котором мы напишем, кто создал сайт и добавим дополнительные ссылки. Что же приступим. Для начала базовую разметку нашей страницы, если вы не понимаете о чем я говорю, советую все же посмотреть видео обучение, о котором я говорил ранее.

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

Вместо решеток (#) в полях href вы будете вставлять свои ссылки, просто сейчас у меня их нет.

С таким кодом наша страница выглядит так:

Согласитесь выглядит не очень, поэтому вдохнем в это жизнь с помощью CSS. Создаем в папке файл style.css и подключаем его с помощью тега link.

Теперь напишем достаточно простой код для нашего меню:

Согласитесь что теперь наш header выглядит очень даже не плохо:

Создание контента сайта

Теперь создадим контент нашего сайта, а именно место, где будут блоки с кратким описанием каждой статьи. Снова напишем HTML код и стилизуем его с помощью CSS. Если вы все также не понимаете что-либо, посмотрите уроки, о которых я говорил ранее.

Вот такой результат:

Создание подвала сайта(footer)

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

Вот такой результат:

Адаптивность

Сайт мы сверстали, но красиво он выглядит сейчас только на вашем экране, если вы попробуете сузить окно браузера, то увидите насколько страшным станет ваш сайт. Чтобы такого избежать, сделаем наш сайт адаптивным. Для этого будем использовать CSS Media, он позволит нам отслеживать размер нашего екрана и в зависимости от него менять стили нашего сайта. Напишем код!

Конец

Готов вас поздравить, вы закончили создание шаблона своего сайта! Если вы хотите увидеть готовый результат, можете посмотреть по ссылке ниже