Створення Цілого Вебсайту

Ми охопили всі основні теми HTML і тепер готові створити повний вебсайт з нуля. Давайте створимо односторінковий портфоліо вебсайт, щоб продемонструвати ваші проекти та навички.

Ви можете працювати над цим самостійно або слідувати наведеному нижче керівництву, де ми надамо вам покрокові інструкції та код, пов'язаний з кожним кроком.

Покрокове керівництво

1. План структури вебсайту

Наш вебсайт складатиметься з кількох ключових розділів:

1. Заголовок: Цей розділ буде помітно відображати ім'я власника портфоліо та полегшувати навігацію по вебсайту;
2. Про себе: Тут відвідувачі знайдуть відповідну інформацію про власника вебсайту, що надасть уявлення про його досвід та експертизу;
3. Портфоліо: Цей розділ продемонструє різні проекти, кожен з яких міститиме зображення проекту, назви, описи та використані технології;
4. Контакт: Ми включимо форму для збору інформації від відвідувачів;
5. Футер: Футер буде завершальним розділом, що міститиме інформацію про авторські права та посилання на профілі в соціальних мережах, контактний телефон та електронну адресу.

2. Структурування контенту за допомогою семантичного HTML

Давайте створимо новий файл index.html і налаштуємо базову структуру HTML-документа.

3. Розділ Хедер

Давайте створимо header з ім'ям власника вебсайту та навігаційними посиланнями.

4. Розділ Про нас

Розділ, присвячений короткому вступу та інформації про власника.

5. Розділ Портфоліо

У розділі портфоліо ми зосереджуємося на проектах з описами та зображеннями.

6. Розділ Контакти

Давайте створимо контактну форму, щоб зв'язатися з власником.

7. Розділ Футер

Нарешті, додамо інформацію про авторські права та посилання на соціальні мережі.

Бонус

Давайте покращимо зовнішній вигляд нашого вебсайту не лише для пошукових систем, але й для користувачів. Ми можемо досягти цього за допомогою CSS, що означає каскадні таблиці стилів. Хоча ми не розглядали CSS у цьому курсі, це важливий аспект дизайну вебсайтів.

CSS - це мова таблиць стилів, яка дозволяє нам визначати презентацію та стиль документа, написаного на мові розмітки, такій як HTML. Це може бути наступним кроком після вивчення HTML — більше про це в наступному розділі. Поки що давайте подивимося, як CSS покращує HTML.

Відео-урок

Ось посилання на повний вебсайт, який був створений у цьому розділі: Julia's Website