html5 и css3

html5 и css3

Создание адаптивной страницы в html5 и css3 для начинающих за шесть шагов!

Здравствуйте, уважаемые друзья и гости блога!

Сегодня я вам расскажу, покажу и предоставлю для бесплатного скачивания исходники по созданию адаптивной страницы  в html5 и css3, которые будут полезны как начинающим, так и уже сформировавшимся вебмастерам. По крайней мере я надеюсь на это!

За шесть шагов мы с вами пройдем курс обучения по созданию адаптивной страницы в html5 и css3 для начинающих. Это будет подписная адаптивная страница.

Вот ее пример. Подписавшись Вы можете скачать видеоуроки+исходники не дожидаясь выхода всех шести уроков!!!

Вы узнаете как это делается, создадите свою собственную адаптивную страницу в html5 и css3, а так же получите все необходимые исходные материалы для этого.

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

Поэтому буду рассказывать поэтапно, выкладывая ежедневно по одному шагу в день. Так я думаю будет намного проще разобраться неискушенному вебмастеру во всех тонкостях создания адаптивной страницы в html5 и css3.

Также Вы получите возможность, для более подробного изучения, посмотреть видеоурок по данному курсу в конце каждого поста, что будет хорошим подспорьем для новичка.

И так, давайте начнем с первого шага ...

Шаг первый: Создание разметки страницы в html5 и css3

В этом уроке мы с вами разберем подробно, как создать и создадим макет страницы, которую будем постепенно верстать на протяжении всех шести шагов.

Что такое адаптивная страница? Это та страница, которая отображается на всех устройствах, включая компьютеры, мобильные устройства и т.д., одинаково адаптивно и оптимизирована для всех них полностью!

Для начала нужно создать необходимые файлы для нашей адаптивной страницы верстаемой в html5 и css3. Вот они эти файлы:

файлы

файлы

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

Для редактирования файлов Вы можете использовать любой текстовый редактор, как простой блокнот, входящий в состав вашего набора Windows, так и более удобный Notepad++. Но конечно лучше для этого использовать Adobe Dreamweaver. Смотрите это на ваше усмотрение.

Вот содержимое файла index:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<link rel="stylesheet" type="text/css" href="style.css" />

<title>Создание адаптивной страницы в html5 и css3 для начинающих</title>
</head>

<body>
<header>

<h1>Создание адаптивной страницы в html5 и css3 для начинающих!</h1>

<h3>Получить Видеоурок "Создание адаптивной страницы в html5 и css3 для начинающих за шесть шагов!"</h3>

<!-- SmartResponder.ru subscribe form code (begin) -->
<div class="subscribe">
<form style="margin: 0; padding: 0;" name="SR_form" target="_blank" action="https://smartresponder.ru/subscribe.html" method="post" onsubmit="return SR_submit(this)"><input type=hidden name=version value="1"><input type=hidden name=tid value="0"><input type=hidden name="uid" value="727993"><input type=hidden name=lang value="ru">
<input type="hidden" name="did[]" value="923026"/>
<input type="text" name="name" placeholder="Введите Имя">
<input type="email" name="email" placeholder="Введите E-mail">
<input type="submit" value="Подписаться!">
</form><!-- SmartResponder.ru subscribe form code (end) -->
</div>

<p>* Ваши данные не будут разглашаться и передаваться третьим лицам для коммерческих или иных целей!</p>

<p>* Никакого спама, я вам гарантирую!</p>

</header>

<section>
<article>
<h1>"Создание адаптивной страницы в html5 и css3 для начинающих за шесть шагов!"</h1>

<img class="imgleft" src="images/html5 и css3.png" alt"html5 и css3">

<p><strong>Все шаги создания адаптивной страницы в html5 и css3:</strong></p>

<p><strong>Шаг первый:</strong> <em>Создание разметки страницы в html5 и css3</em></p>

<p><strong>Шаг второй:</strong> <em>Назначение общих CSS стилей для создания адаптивной страницы в html5 и css3</em></p>

<p><strong>Шаг третий:</strong> <em>Назначение стилей для header в создании адаптивной страницы на html5 и css3</em></p>

<p><strong>Шаг четвертый:</strong> <em>Описание стилей CSS для формы подписки в создании адаптивной страницы на html5 и css3</em></p>

<p><strong>Шаг пятый:</strong> <em>Описание стилей основного контента в создании адаптивной страницы на html5 и css3</em></p>

<p><strong>Шаг шестой:</strong> <em>Делаем страницу адаптивной в html5 и css3</em></p>

<p>За шесть шагов мы с вами пройдем курс обучения по созданию адаптивной страницы в html5 и css3 для начинающих. Это будет подписная адаптивная страница.

Вы узнаете как это делается, создадите свою собственную адаптивную страницу в html5 и css3, а так же получите все необходимые исходные материалы для этого.</p>
<p>Чтобы получить этот видеурок вам нужно просто ввести свои имя и е-майл в поля которые расположены ниже или выше, как вам будет угодно!</p>

</article>
<!-- SmartResponder.ru subscribe form code (begin) -->
<div class="subscribe">
<form style="margin: 0; padding: 0;" name="SR_form" target="_blank" action="https://smartresponder.ru/subscribe.html" method="post" onsubmit="return SR_submit(this)"><input type=hidden name=version value="1"><input type=hidden name=tid value="0"><input type=hidden name="uid" value="727993"><input type=hidden name=lang value="ru">
<input type="hidden" name="did[]" value="923026"/>
<input type="text" name="name" placeholder="Введите Имя">
<input type="email" name="email" placeholder="Введите E-mail">
<input type="submit" value="Подписаться!">
</form><!-- SmartResponder.ru subscribe form code (end) -->
</section>
</body>
<center><div>
Copyright © 2016 <a href="https://pribylwm.ru"target="_blank">Валерий Бородин</a>. 
</div></center>
</html>

Скачать видеоурок и все исходные файлы готовой подписной страницы, не дожидаясь окончания обучения, Вы можете на моей подписной странице по созданию адаптивной подписной страницы в html5 и css3. Вот здесь!

С ними вам будет удобно работать далее применимо ко всем вашим последующим заготовкам по созданию уже вашей собственной адаптивной страницы.

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

Все шаги создания адаптивной страницы в html5 и css3:

Ежедневно мы с вами будем делать по одному шагу, который нас приблизит к выполнению нашего целевого задания. И Вы в конце всех шести уроков по верстке сможете создать собственную адаптивную страницу, которую будете использовать для своих личных нужд, а не заказывать кому-то за деньги!

Теперь обещанный видеоурок:

Создание разметки страницы в html5 и css3

Так, что друзья завтра я Вас жду на следующем нашем уроке.

Спасибо за внимание!

Подписаться на обновление блога

Введите свой e-mail адрес: