Практика на макетах HTML та CSS

Практикуємо створення повноцінних макетів сайтів за допомогою HTML та CSS: wrapper, header, nav, aside, main, footer та flex-розмітка.

Практика на макетах HTML та CSS

У цьому уроці навчимося створювати реальні макети сайтів. Ми використаємо семантичні HTML-теги header, nav, aside, main і footer, а для розташування колонок застосуємо CSS Flexbox.

wrapper — головний контейнер сторінки.
header — верхня частина сайту.
nav — меню навігації.
aside — бокові панелі.
main — основний контент.
footer — нижня частина сайту.

Основна структура макета

Спочатку створюємо загальну структуру сторінки. Вона складається з хедера, трьох колонок та футера.

<div class="wrapper">

  <header>
    ...
  </header>

  <div class="container">

    <aside class="left">
      left
    </aside>

    <main>
      ...
    </main>

    <aside class="right">
      right
    </aside>

  </div>

  <footer>
    site.com
  </footer>

</div>

Створення хедера сайту

У верхній частині сайту розміщуємо назву сайту та меню. Щоб керувати ними разом, створимо спільний блок block.

<header>

  <div class="block">

    <div class="sitename">
      site.com
    </div>

    <nav>
      <a href="#">home</a>
      <a href="#" class="active">blog</a>
      <a href="#">photos</a>
      <a href="#">about us</a>
      <a href="#">contacts</a>
    </nav>

  </div>

</header>

Створення трьох колонок

Для розташування лівої панелі, контенту та правої панелі в один ряд використаємо Flexbox.

.container {
  display: flex;
}

main {
  width: 660px;
  padding: 20px;
}

.left {
  width: 200px;
  margin-right: 20px;
  padding: 20px;
}

.right {
  width: 200px;
  margin-left: 20px;
  padding: 20px;
}

Повний HTML макета

<div class="wrapper">

  <header>

    <div class="block">

      <div class="sitename">
        site.com
      </div>

      <nav>
        <a href="#">home</a>
        <a href="#" class="active">blog</a>
        <a href="#">photos</a>
        <a href="#">about us</a>
        <a href="#">contacts</a>
      </nav>

    </div>

  </header>


  <div class="container">

    <aside class="left">
      left
    </aside>


    <main>

      <h1>
        Our blog
      </h1>

      <p>
        Текст блогу.
      </p>

      <p>
        Текст блогу.
      </p>

      <p>
        Текст блогу.
      </p>

    </main>


    <aside class="right">
      right
    </aside>

  </div>


  <footer>
    site.com
  </footer>

</div>

CSS макета

* {
  box-sizing: border-box;
}


.wrapper {
  width: 1100px;
  margin: 30px auto;
  border: 1px solid black;
}


header {
  border: 1px solid black;
}


.container {
  display: flex;
}


main {
  width: 660px;
  padding: 20px;
  border: 1px solid black;
}


.left {
  width: 200px;
  margin-right: 20px;
  padding: 20px;
  border: 1px solid black;
}


.right {
  width: 200px;
  margin-left: 20px;
  padding: 20px;
  border: 1px solid black;
}


footer {
  padding: 30px 0;
  border: 1px solid black;
  text-align: center;
}


.block {
  margin: 20px 0 50px 220px;
}


.sitename {
  margin-bottom: 10px;
  font: 20px Arial;
}


nav {
  display: flex;
  width: 600px;
}


nav a {
  padding: 10px;
  color: blue;
  text-decoration: none;
  font: 15px Arial;
}


nav a:hover,
nav a.active {
  color: red;
  text-decoration: underline;
}


main h1 {
  font: 20px "Times New Roman";
}


main p {
  margin: 10px 0;
  text-align: justify;
  font: 15px Arial;
}

❗ Важливо:

Не задавайте фиксированную высоту блокам с текстом. Пусть высота формируется содержимым — так макет будет гибче.

Практичні завдання

📌 Завдання:

№1. Завантажте готовий макет та повторіть його за зразком.
№2. Створіть wrapper для всієї сторінки.
№3. Додайте header, nav, aside, main та footer.
№4. Для колонок використайте display: flex.

💡 Показати підказку

Спочатку зробіть HTML-структуру, а потім поступово додавайте CSS. Не намагайтеся одразу стилізувати весь сайт.

✅ Показати відповідь

Готовий макет повинен містити: wrapper → header → container (left sidebar, main, right sidebar) → footer. Колонки повинні бути створені через Flexbox.