msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'c6eb20fcc1'
${ noResults }
Web-Dev-For-Beginners/translations/uk/3-terrarium/1-intro-to-html/assignment.md

6.3 KiB
Raw Blame History Escape

Завдання з практики HTML: Створення макету блогу

Мета

Розробити та вручну написати HTML-структуру для головної сторінки персонального блогу. Ця вправа допоможе вам попрактикуватися у використанні семантичного HTML, плануванні макету та організації коду.

Інструкції

  1. Розробіть макет вашого блогу

    • Намалюйте візуальний макет головної сторінки вашого блогу. Включіть ключові секції, такі як заголовок, навігація, основний контент, бічна панель і футер.
    • Ви можете використовувати папір і сканувати ваш ескіз або скористатися цифровими інструментами (наприклад, Figma, Adobe XD, Canva або навіть PowerPoint).

  2. Визначте HTML-елементи

    • Складіть список HTML-елементів, які ви плануєте використовувати для кожної секції (наприклад, <header>, <nav>, <main>, <article>, <aside>, <footer>, <section>, <h1>–<h6>, <p>, <img>, <ul>, <li>, <a> тощо).

  3. Напишіть HTML-розмітку

    • Вручну напишіть HTML для вашого макету. Зосередьтеся на семантичній структурі та найкращих практиках.
    • Використайте щонайменше 10 різних HTML-елементів.
    • Додайте коментарі, щоб пояснити ваші вибори та структуру.

  4. Надішліть вашу роботу

    • Завантажте ваш ескіз/макет і HTML-файл.
    • За бажанням, напишіть коротке відображення (2–3 речення) про ваші дизайнерські рішення.

Критерії оцінювання

Критерій Відмінно Задовільно Потребує покращення
Візуальний макет Чіткий, детальний макет із позначеними секціями та продуманим розташуванням Базовий макет із деякими позначеними секціями Мінімальний або нечіткий макет; відсутні позначення секцій
HTML-елементи Використано 10+ семантичних HTML-елементів; демонструє розуміння структури та найкращих практик Використано 5–9 HTML-елементів; часткова семантична структура Використано менше 5 елементів; відсутня семантична структура
Якість коду Добре організований, читабельний код із коментарями; відповідає стандартам HTML Переважно організований код; мало коментарів Неорганізований код; відсутні коментарі
Відображення Глибоке відображення дизайнерських рішень і викликів Базове відображення Відсутнє відображення або не має відношення до теми

Поради

  • Використовуйте семантичні HTML-теги для кращої доступності та SEO.
  • Організовуйте ваш код за допомогою відступів і коментарів.
  • Звертайтеся до MDN HTML Elements Reference для отримання довідкової інформації.
  • Подумайте про те, як ваш макет може бути розширений або стилізований у майбутніх завданнях.

Відмова від відповідальності:
Цей документ було перекладено за допомогою сервісу автоматичного перекладу Co-op Translator. Хоча ми прагнемо до точності, звертаємо вашу увагу, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критично важливої інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникли внаслідок використання цього перекладу.