Секреты верстки

Каждый, кто имеет дело с кодом, верстает или пока еще только учится верстать сайты, просто обязан знать о том, что в начале каждой HTML страницы перед тегом HTML должен стоять DOCTYPE.

Что такое DOCTYPE и зачем он нужен?

Строчка с DOCTYPE (Document Type Definition) в начале HTML страницы указывает на тип документа, который вы будете использовать при написании HTML кода для вашего сайта. Это непарный тег, то есть у него нет закрывающего тега.

Нужно понимать, что строчка, в которой прописывается DOCTYPE - это не просто очередной HTML тег. Это важная инструкция, с помощью которой мы говорим браузеру, какая версия HTML использовалась при написании страницы.

Далее...

Пару дней назад я писала статью о том, какие бывают карты сайта и насколько важно их использовать на своем сайте. В той статье я упомянула о том, что лучше всего, если у вас будет карта сайта XML. Так как ее большим преимуществом XML Sitemap является возможность использования мета-данных, которые позволяют вам снабдить поисковых роботов дополнительной информацией по каждой странице.

Однако, согласитесь, было бы здорово самому знать в подробностях , каким образом работает такая карта сайта и уметь, если понадобится, сделать ее самому. Поэтому давайте мы попробуем вместе с вами создать простую карту сайта sitemap.xml шаг за шагом.

Далее...

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

Но что скрывается за кулисами? Так ли красив и приятен для глаз код, который мы пишем, все ли в нем понятно и возможно ли в нем с легкостью разобраться человеку, который вдруг захочет внести в него какие-то изменения? К сожалению, многие даже не задаются подобными вопросами.

Далее...

Привет друзья.

Сегодня от нефиг делать решил записать для вас малюсенький урок

Границу мы эту будем тестировать на картинках, но в принципе - ее можно применить к любому блоку.

Да, и я рассмотрю два способа задания такой границы.

1 способ. Он заключается в том, что мы будем использовать свойства border и box-shadow.

2 способ. Мы будем использовать свойства padding и border.

Далее...

Всем ОГРОМНЫЙ привет. У меня для вас есть офигенная новость.

Ну чтож поехали…

20 июля я отмечал свой День рождения!!! Эх… уже 28 лет мне стукнуло, старею...

Я очень классно его отметил и сегодня, решил сделать для своих подписчиков и посетителей сайта сюрприз!

А именно – подарить свой новый...

Далее...

Только что записал новое видео. В котором рассказываю про три способа подключения стилей на своем сайте.

Даже не так, не рассказываю, а показываю, как применять эти способы на практике, и не просто на одном свойстве, а на целом вагоне стилей. Видео получилось довольно таки долгим – целых 17 минут. Но оно сугубо практическое. Т.е. необходимо будет повторять все за мной на практике.

В итоге вы узнаете ответы на следующие вопросы:

• Что такое связанные стили?
• Что такое глобальные стили?
• Что такое внутренние стили?
• Как их подключать к своей страничке?
• Как их использовать?
• Как они работают?

Далее...

Всем привет!

Сегодня я записал для вас видеоурок, в котором показываю, как из обычной ссылки (тег A) сделать полноценную "кнопищу" при помощи CSS3.

Урок получился интересный, сугубо практический – воды 0%. Поэтому, он только для тех, кто любит что-то делать своими руками. Готового кода кнопки я не дам, а все покажу, как надо делать, в видео.

В нем мы будем разбирать:

• Как обычную ссылку сделать кнопкой, реагирующей на нажатие.
• Как присобачить градиент через CSS.
• Скругление углов.
• Создание тени.
• И буду объяснять кучу других правил CSS по ходу урока.

Вот то, что у ВАС получится после урока:

Далее...

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

Тоже самое могу сказать и про форму поиска на моем сайте (находится в шапке) – по умолчанию там написано "Введите поисковую фразу…", и если ты сейчас попробуешь нажать на ней кнопкой мыши – надпись автоматически пропадет.

Все потому, что у меня настроено автозамена текста в input.

Далее...

Мы продолжаем линейку уроков: Шаблон своими руками!

Сегодня я расскажу всем вам кучу новой, интересной и полезной информации.

Получилось очень много стоящей инфы, так что вторая часть линейки была разделена на 2 занятия, потому как 40 минутный видеоролик, хоть и практический – не каждый смог бы осилить.

Первая часть находится здесь.

Сразу хочу заметить, что в видео уроках ниже нет воды – только ПРАКТИКА! Поэтому подготовьтесь к повторению действий на экране и получению отличного результата...Далее...

Добрый день мои друзья! На связи как обычно Серега, кто ж еще то? В этой статье мы разберем следующую тему:

Как создать меню для сайта?

Но для начала – давай немного предыстории.

Дело было вечером, делать было нечего – сидел я и маялся от скуки. Резко меня посетила одна светлая мысль:

– С хули ж ты сидишь без дела? Возьми и сделай, что-нибудь красивое, а заодно и людям добрым покажи, как сотворить оную фигню!

И тут меня проперло создать на своем сайте красивое меню. Кто еще не знает – эта хрень называется МУЗА!

В общем, под действием сие волшебного пендаля, я на скорую руку открыл фотошоп и начал там воплощать моё горячее желание – забацать красивое и простое меню для сайта.

Далее...