GOIT Markup Homework #01 — Semantic HTML Layout (No CSS)

This repository contains the HTML-only layout for Homework #1. The task is to create a semantic and valid HTML structure based on a Figma design, without any CSS. The project must include optimized images, proper file naming, and pass HTML validation. A live version is published via GitHub Pages.

Live Demo: https://kutluhangil.github.io/goit-markup-hw-01/

---

📚 Table of Contents

1. About the Project
2. Acceptance Criteria (Mentor Checklist)
3. Markup Requirements
4. Project Structure
5. Images & Optimization
6. Validation & Formatting
7. How to Run

---

📖 About the Project

• Create an HTML layout in index.html without CSS.
• Use semantic tags to reflect the page structure: <header>, <main>, <footer>, etc.
• Export content (texts & images) from Figma; optimize bitmap images with Squoosh.
• Publish via GitHub Pages and add the link in the repository’s About section.

---

✅ Acceptance Criteria (Mentor Checklist)

A. Project

• A1 — The HTML file is named index.html.
• A2 — An images folder exists at the project root with all required assets.
• A3 — File names use only Latin letters, numbers, hyphens; no uppercase, Cyrillic, spaces, or transliteration.
• A4 — Source is formatted with Prettier.
• A5 — All text and images are taken from Figma.
• A6 — All bitmap images are optimized via Squoosh.
• A7 — Code follows provided guidelines.

B. Markup

• B1 — All markup is in index.html.
• B2 — All layout elements are represented by appropriate HTML tags.
• B3 — Tags are chosen according to their semantic meaning.
• B4 — Passes HTML validation without errors.
• B5 — Uses <header>, <main>, <footer> to highlight main structure.
• B6 — Header & footer logo is a text link, not an image.
• B7 — <nav> appears once (in the header only).
• B8 — Contacts (email & phone) are outside the <nav> element.
• B9 — Exactly one <h1> on the page.
• B10 — The “Order Service” element is a <button type="button">.
• B11 — Section headings use <h2>.
• B12 — Every <img> has a width attribute.
• B13 — Every <img> has an alt describing the image (same language as text).
• B14 — Images exported from Figma in JPG format.
• B15 — Similar items are grouped in <ul> lists.

---

📁 Project Structure

.
├─ index.html
├─ images/
│  ├─ hero.jpg
│  ├─ team.jpg
│  └─ ...
└─ README.md

---

🖼️ Images & Optimization

• Export raster images from Figma as JPG.
• Optimize each bitmap via Squoosh (reduce size while preserving quality).
• Name files in lowercase kebab-case (e.g., team-photo.jpg).
• Provide meaningful alt text and define width on every image tag.

---

🧪 Validation & Formatting

• HTML Validator: validator.w3.org
• Format with Prettier (consistent indentation & quotes).
• Ensure semantic structure and accessibility-friendly markup.

---

🚀 How to Run

1. Clone the repo and open index.html in a browser.
2. Publish via GitHub Pages (Settings → Pages → Deploy from branch).
3. Add the live link to the repository’s About → Website field.

---

Tip: Keep the markup clean, semantic, and minimal. No CSS is required in this homework.