На прошлом уроке мы с вами сделали половину вёрстки сайта. В этом уроке мы закончим вёрстку основного раздела
<main> </main>
В следующих уроках мы закончим вёрстку сайта и начнем заниматься его дизайн-оформлением.
Напоминаю, что в этих уроках вам не нужно задумываться о том, почему мы используем тот или иной код. Сейчас вам не понятно, почему пишутся такие символы и как они работают. Всё это вы будете изучать в полном курсе по Frontend разработке. В этом мини-курсе вы просто смотрите "внутрянку" работы программиста и оцениваете свои ощущения от процесса работы.
Повторяйте код, который я вам показываю и тогда у вас будет получаться нужный результат.
Мы уже сделали хедер и два тематических блока сайта. В этом уроке мы доделаем два тематических блока.
- откройте VC Code
- откройте файл
index.html
- для удобства "сверните" уже написаный код с помощью стрелки справа от нумерации ряда
Сейчас будем верстать новый тематический блок сайта.
Ссылка на дизайн главной страницы сайта, который мы будем делать на этом мини-курсе
- напишите код под последним блоком
<article> </article>
<main>
<article>
...
</article>
<article>
...
</article>
<article>
</article>
</main>
Далее весь код я буду писать между <article> и </article>.
Внимательно следите за нумерацией строк.
- напишите код внутри
<article> </article>
<article>
<div>
</div>
</article>
- напишите код внутри
<div> </div>
<article>
<div>
<h2>Архив работ</h2>
<img src="img/heading_design.png">
</div>
</article>
- напишите код после
</div>
<article>
<div>
<h2>Архив работ</h2>
<img src="img/heading_design.png">
</div>
<ul>
</ul>
</article>
- скачайте изображение для первой статьи в папку "img" - Скачать
- напишите код внутри
<ul> </ul>
<article>
<div>
<h2>Архив работ</h2>
<img src="img/heading_design.png">
</div>
<ul>
<li>
</li>
</ul>
</article>
- напишите код внутри
<li> </li>
<article>
<div>
<h2>Архив работ</h2>
<img src="img/heading_design.png">
</div>
<ul>
<li>
<img src="img/archive_1.jpg">
</li>
</ul>
</article>
- напишите код после
<img>
<article>
<div>
<h2>Архив работ</h2>
<img src="img/heading_design.png">
</div>
<ul>
<li>
<img src="img/archive_1.jpg">
<div>
</div>
</li>
</ul>
</article>
- напишите код внутри
<div> </div>
<article>
<div>
<h2>Архив работ</h2>
<img src="img/heading_design.png">
</div>
<ul>
<li>
<img src="img/archive_1.jpg">
<div>
<h3>2021 Объект 32 ФАН</h3>
<p>Наше преимущество — утонченный стиль, простота в эксплуатации, долговечность. Практично и со вкусом строим экономичные в эксплуатации системы прудов на всю жизнь.</p>
</div>
</li>
</ul>
</article>
<li> </li>
в которых изменится только текст и номер изображения. Поэтому воспользуемся копированием.- выделите полностью блок
<li> ... </li>
с его содержимым
- скопируйте код (CTRL + C)
- и вставьте его ниже два раза (CTRL + V)
<article>
<div>
<h2>Архив работ</h2>
<img src="img/heading_design.png">
</div>
<ul>
<li>
<img src="img/archive_1.jpg">
<div>
<h3>2021 Объект 32 ФАН</h3>
<p>Наше преимущество — утонченный стиль, простота в эксплуатации, долговечность. Практично и со вкусом строим экономичные в эксплуатации системы прудов на всю жизнь.</p>
</div>
</li>
<li>
<img src="img/archive_1.jpg">
<div>
<h3>2021 Объект 32 ФАН</h3>
<p>Наше преимущество — утонченный стиль, простота в эксплуатации, долговечность. Практично и со вкусом строим экономичные в эксплуатации системы прудов на всю жизнь.</p>
</div>
</li>
<li>
<img src="img/archive_1.jpg">
<div>
<h3>2021 Объект 32 ФАН</h3>
<p>Наше преимущество — утонченный стиль, простота в эксплуатации, долговечность. Практично и со вкусом строим экономичные в эксплуатации системы прудов на всю жизнь.</p>
</div>
</li>
</ul>
</article>
Теперь нам нужно изменить контент внутри этих блоков
- скачайте изображение для второй статьи в папку "img" - Скачать
- скачайте изображение для третьей статьи в папку "img" - Скачать
- измените цифру "1" на цифру "2" во второй статье в
<img>
- измените цифру "1" на цифру "3" во третьей статье в
<img>
- измените текст во второй статье в
<h3> </h3>
<li>
<img src="img/archive_2.jpg">
<div>
<h3>Dikey & Shipa 2018. Мечтатели</h3>
<p>Наше преимущество — утонченный стиль, простота в эксплуатации, долговечность. Практично и со вкусом строим экономичные в эксплуатации системы прудов на всю жизнь.</p>
</div>
</li>
<li>
<img src="img/archive_3.jpg">
<div>
<h3>2021 Объект 32 ФАН</h3>
<p>Наше преимущество — утонченный стиль, простота в эксплуатации, долговечность. Практично и со вкусом строим экономичные в эксплуатации системы прудов на всю жизнь.</p>
</div>
</li>
- нажмите на галочку справа от строки с кодом
<ul>
В этом блоке осталось доделать только кнопку.
- напишите код после
</ul>
<main>
<article>
...
</article>
<article>
...
</article>
<article>
<ul>
...
</ul>
<button>Весь архив</button>
</article>
</main>
- сохраните изменения в файле
index.html
- обновите браузер и посмотрите, что получилось
Все статьи стоят друг под другом. Сейчас это нормально, оформлять статью по задумке дизайнера мы будем в следующих уроках.
Переходим к последнему тематическому блоку сайта, который так же будет расположен внутри
<main> </main>
У нас уже есть 3 блока
<article> </article>
. Мы знаем, что внутри них "живет" каждый тематический блок.
- напишите код после последнего
<article> </article>
<main>
<article>
...
</article>
<article>
...
</article>
<article>
...
</article>
<article>
</article>
</main>
Заголовки у последний двух тематических статей выглядят одинаково, поэтому мы можем скопировать код из предыдущего блока
<article> </article>
- выделите код в предыдущем тематическом блоке
<article> </article>
и скопируйте его
- вставьте код внутри последнего
<article> </article>
<article>
<div>
<h2>Архив работ</h2>
<img src="img/heading_design.png">
</div>
<ul>
...
</ul>
</article>
<article>
<div>
<h2>Маршруты</h2>
<img src="img/heading_design.png">
</div>
</article>
Для удобства "свернём" код с предпоследней тематической статьей, из которой мы копировали заголовок с изображением.
- сверните при помощи стрелки код внутри предпоследней
<article> </article>
Далее нас нужно сделать две статьи.
- напишите код ниже
</div>
<article>
<div>
<h2>Маршруты</h2>
<img src="img/heading_design.png">
</div>
<ul>
</ul>
</article>
- напишите код внутри
<ul> </ul>
<article>
<div>
<h2>Маршруты</h2>
<img src="img/heading_design.png">
</div>
<ul>
<li>
</li>
</ul>
</article>
- скачайте изображение для первой статьи в этом блоке в папку "img" - Скачать
- напишите код внутри
<li> </li>
<article>
<div>
<h2>Маршруты</h2>
<img src="img/heading_design.png">
</div>
<ul>
<li>
<h3>Улица Бадаева, Санкт-Петербург</h3>
</li>
</ul>
</article>
- напишите код после
<h3> </h3>
<article>
<div>
<h2>Маршруты</h2>
<img src="img/heading_design.png">
</div>
<ul>
<li>
<h3>Улица Бадаева, Санкт-Петербург</h3>
<button>Текст</button>
</li>
</ul>
</article>
- скачайте изображение для второй статьи в этом блоке в папку "img" - Скачать
- выделите код
<li> </li>
и скопируйте его
- вставьте код ниже
</li>
- это и будет нашей второй статьей в этом блоке
<article>
<div>
<h2>Маршруты</h2>
<img src="img/heading_design.png">
</div>
<ul>
<li>
<h3>Улица Бадаева, Санкт-Петербург</h3>
<button>Текст</button>
</li>
<li>
<h3>Улица Бадаева, Санкт-Петербург</h3>
<button>Текст</button>
</li>
</ul>
</article>
Осталось добавить кнопку после двух статей.
- для удобства "сверните" тег
<ul> </ul>
с помощью стрелочки справа от нумерации строк
- напишите код после
</ul>
<article>
<div>
<h2>Маршруты</h2>
<img src="img/heading_design.png">
</div>
<ul>
...
</ul>
<button>Все прогулки</button>
</article>
- сохраните изменения в файле с кодом
index.html
- обновите браузер и посмотрите что получилось
Сейчас мы не видим изображения у статей в последнем блоке, но не переживайте, мы добавим их в следующих уроках.
Готово! Все четыре основных тематических блока в разделе
<main> </main>
у нас готовы.
Если у вас что-то не получается, обязательно пишите свои вопросы в Telegram-чат курса. Так же обязательно пишите ваши ощущения от процесса написания кода. В следующем уроке мы закончим базовую HTML разметку нашего сайта, после чего можно будет приступать к его дизайнерскому оформлению.
Telegram чат