This repository contains the “Our Portfolio” section implemented with semantic HTML and clean, validated CSS. The project introduces a proper folder structure, normalized styles, Google Fonts setup, optimized images, and interactive hover/focus states that follow the style guide.
Live Demo: https://kutluhangil.github.io/goit-markup-hw-02/
- About the Project
- Acceptance Criteria (Mentor Checklist)
- Markup Requirements
- Design & Styling Rules
- Project Structure
- Images & Optimization
- Validation & Formatting
- How to Run
- Implements the Our Portfolio section inside
index.html. - All styles live in
css/styles.css; a reset/normalizer (modern-normalize) is enabled. - Typography is provided via Google Fonts (Raleway 700; Roboto 400/500/700).
- Images are exported from the design and optimized using Squoosh.
- Code is formatted with Prettier and passes HTML validation.
- A1 — An
imagesfolder exists at the project root and contains all images. - A2 — A
cssfolder exists at the project root and contains a stylesheet. - A3 — All style rules are written in
css/styles.css. - A4 — File names use only lowercase Latin letters, numbers, and hyphens (no spaces, uppercase, or transliteration).
- A5 — Source code is formatted with Prettier.
- A6 — All images and text content are correctly taken from the layout.
- A7 — modern-normalize is enabled as the style normalizer.
- A8 — Bitmap images are optimized via Squoosh.
- A9 — Code follows the project guidelines.
- B1 — The Our Portfolio section is marked up in
index.html; all design elements are present. - B2 — HTML tags are used semantically.
- B3 — Passes the HTML validator without errors.
- B4 — Class names are descriptive and understandable to other developers.
- B5 — Class names are lowercase, kebab-case, and contain no spaces, capitalization, transliteration, or tag names.
- B6 — Every
<img>has awidthattribute. - B7 — Images are exported from the layout in JPG format.
- B8 — Groups of similar items are wrapped with
<ul>lists. - B9 — All required fonts and weights are connected from Google Fonts in a single link: Raleway 700; Roboto 400, 500, 700.
- C1 — Use class selectors for styling.
- C2 — No
!importantin styles. - C3 — Interactive elements (buttons/links) have proper hover and focus states per the style guide.
- C4 — Contact text in the header changes color on hover and focus.
- C5 —
<body>setsfont-familyto the primary Roboto font from the design. - C6 — The
font-familystack ends with fallbacks and a family type, e.g.,sans-serif. - C7 — Roboto is declared explicitly on
<body>only; other elements inherit it. - C8 —
<body>sets the dominant text color; the rest inherit or override as needed. - C9 — All text
font-sizevalues match the design exactly. - C10 — All
line-heightvalues match the design and are expressed as multipliers (not px). - C11 — All colors (
colorandbackground-color) match the design exactly. - C12 —
font-weightmatches the design and is only declared when different from the browser’s default for that element. - C13 — Buttons use
cursor: pointer. - C14 — Avoid re-declaring browser defaults (e.g., no
cursor: pointeron links; nofont-style: normalorfont-weight: 400on paragraphs).
.
├─ index.html
├─ css/
│ ├─ styles.css
│ └─ modern-normalize.min.css
├─ images/
│ ├─ portfolio-01.jpg
│ ├─ portfolio-02.jpg
│ └─ ...
└─ README.md
- Export raster assets from the layout as JPG.
- Optimize each bitmap using Squoosh.
- Give each image a
widthattribute and meaningfulalttext. - Use lowercase, hyphenated file names (e.g.,
project-card-1.jpg).
- Validate HTML: validator.w3.org
- Format code with Prettier.
- Enable modern-normalize to normalize default styles.
- Connect Google Fonts in a single link for:
Raleway:700andRoboto:400,500,700.
- Clone the repo and open
index.htmlin your browser. - Ensure
css/styles.css,modern-normalize, andimages/are correctly referenced. - Publish via GitHub Pages (Settings → Pages → Deploy from branch) and add the link to the repo’s About → Website.
Tip: Keep class names semantic and consistent; follow the design exactly for spacing, colors, sizes, and states.