Вивчайте Створення Повноцінного Вебсайту за Допомогою HTML

Ми вже розглянули основні концепції HTML і готові створити повноцінний односторінковий сайт-портфоліо з нуля.

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

Покроковий посібник

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

Наша сторінка-портфоліо міститиме:

Шапка: назва сайту та навігаційні посилання;
Про себе: коротке представлення власника;
Портфоліо: проєкти з зображеннями, назвами та короткими описами;
Контакти: форма для зв'язку з відвідувачами;
Підвал: авторські права та контактні/соціальні посилання.

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

Створіть новий файл index.html та додайте базову структуру HTML з <!DOCTYPE html>, <html>, <head> і <body>.

index.html

3. Розділ заголовка

Додайте <header> з іменем власника та <nav>, що містить посилання для переходу до розділів About, Portfolio та Contact.

index.html

4. Розділ "Про себе"

Створіть <section id="about"> із заголовком і коротким абзацом, що описує власника.

index.html

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

Додати <section id="portfolio">, який містить перелік проєктів із зображеннями, назвами та короткими описами.

index.html

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

Створити <section id="contact"> із простою контактною формою для збору імені, електронної пошти та повідомлення.

index.html

7. Розділ підвалу

Завершення сторінки за допомогою <footer>, що містить текст про авторські права та посилання на соціальні мережі, телефон і електронну пошту.

index.html

Бонус

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

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

index.html

index.css

Ось посилання на повний вебсайт, створений у цьому розділі: Вебсайт Юлії

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 5. Розділ 4

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you show me the full HTML code for the portfolio website?

What are some tips for customizing the sections for my own portfolio?

How can I add more projects or sections to the website?

Свайпніть щоб показати меню

Ми вже розглянули основні концепції HTML і готові створити повноцінний односторінковий сайт-портфоліо з нуля.

Покроковий посібник

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

Наша сторінка-портфоліо міститиме:

Шапка: назва сайту та навігаційні посилання;
Про себе: коротке представлення власника;
Портфоліо: проєкти з зображеннями, назвами та короткими описами;
Контакти: форма для зв'язку з відвідувачами;
Підвал: авторські права та контактні/соціальні посилання.

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

Створіть новий файл index.html та додайте базову структуру HTML з <!DOCTYPE html>, <html>, <head> і <body>.

index.html

3. Розділ заголовка

Додайте <header> з іменем власника та <nav>, що містить посилання для переходу до розділів About, Portfolio та Contact.

index.html

4. Розділ "Про себе"

Створіть <section id="about"> із заголовком і коротким абзацом, що описує власника.

index.html

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

Додати <section id="portfolio">, який містить перелік проєктів із зображеннями, назвами та короткими описами.

index.html

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

Створити <section id="contact"> із простою контактною формою для збору імені, електронної пошти та повідомлення.

index.html

7. Розділ підвалу

index.html

Бонус

index.html

index.css

Ось посилання на повний вебсайт, створений у цьому розділі: Вебсайт Юлії

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 5. Розділ 4