Практическое задание. HTML-структура лендинга

Free Preview
Продолжительность: 30 мин

Пришло время для первого практического задания.

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

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

Этап 1. HTML-структура документа

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

На данном этапе вым нужно выполнить несколько основных шагов:

  1. Создать базовую структуру HTML-документа:
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>Санкт-Петербург</title>
  </head>
  <body></body>
</html>
html
  1. Добавить основные блоки страницы: например:
  • <header>
  • <main>
  • <section>
  • <footer>
  1. В хедере реализовать навигацию в хедере с помощью ссылок и id различных элементов.

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

Tips and Tricks

В качестве заполняещего текста можно использовать Lorem ipsum. Для его генерации можно использовать возможности сред разработки. В VS Code можно набрать слово lorem и нажать клавишу Tab. В результате вы получите около 30 слов текста-заполнителя. Также можно использовать команду lorem с количеством слов. Например lorem3 + Tab создаст 3 слова, а lorem48 + Tab - 48.

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

<header>
  <nav>
    <ul>
      <li><a href="#about">О городе</a></li>
      ...
    </ul>
  </nav>
</header>

<main>
  <section id="about">
    <h1>Санкт-Петербург</h1>
    <article>
      <p>Краткая история города...</p>
    </article>
  </section>

  <section id="features">...</section>
</main>

<footer>
  <p>© Санкт-Петербург</p>
</footer>
html
Предыдущий урокСледующий урок