https://github.com/dalascript/nutrition-label

FCC Responsive Web Design Certification | Project 8/20 | Nutrition Label
https://github.com/dalascript/nutrition-label

css freecodecamp html nutrition-label responsive-web-design-certification

Last synced: 8 months ago
JSON representation

FCC Responsive Web Design Certification | Project 8/20 | Nutrition Label

• Host: GitHub
• URL: https://github.com/dalascript/nutrition-label
• Owner: DalaScript
• Created: 2025-05-20T19:02:52.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2025-05-28T07:10:59.000Z (9 months ago)
• Last Synced: 2025-06-22T14:14:44.847Z (8 months ago)
• Topics: css, freecodecamp, html, nutrition-label, responsive-web-design-certification
• Language: HTML
• Homepage: https://dalascript.github.io/nutrition-label/
• Size: 157 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Nutrition Label | FCC Responsive Web Design Certification

**Project 8/20**

This project recreates a realistic nutrition label using only HTML and CSS 🥣. It's a pixel-perfect layout mimicking the structure and spacing of labels found on food packaging. The challenge was all about precision, spacing, and mastering layout techniques using plain CSS 💪.

---

## 📚 Table of Contents

- [🔎 Overview](#-overview)

  - [📸 Screenshot](#-screenshot)

  - [🔗 Links](#-links)

  - [📌 Features](#-features)

- [🧠 My process](#-my-process)

  - [🛠️ Built with](#️-built-with)

  - [🎓 What I learned](#-what-i-learned)

  - [🔙 Previous Project](#-previous-project)

  - [🔜 Next Project](#-next-project)

- [👤 Author](#-author)

  - [🌐 Connect with Me](#-connect-with-me)

  - [💻 Coding Profiles](#-coding-profiles)

---

## 🔎 Overview

### 📸 Screenshot

![screenshot of the project's webpage](./assets/screenshot.jpg)

### 🔗 Links

 - [🔴 Live Demo](https://dalascript.github.io/nutrition-label/)

 - [🗂️ GitHub Repository](https://github.com/DalaScript/nutrition-label)

### 📌 Features

 - ✅ Pixel-accurate nutrition label layout

 - ✅ Responsive, centered label container

 - ✅ Semantic HTML structure with headings and sections

 - ✅ Custom dividers for visual separation

 - ✅ Bold text, indentation, and flexible spacing

## 🧠 My Process

### 🛠️ Built with

 - HTML5

 - CSS3

### 🎓 What I Learned

 - How to structure complex layouts with plain HTML and CSS

 - Using margins, indentation, and borders for visual hierarchy

 - Flexbox for alignment of text and nutritional values

 - Applying utility classes (bold, indent, divider) to keep styles reusable and clean

  > 🚀 For me, this project was more about **practice** and gaining additional **experience**,  

  > rather than learning something entirely new.  

  >  

  > 👨‍💻 Since I’m not a beginner and already familiar with these technologies,  

  > I approached it with confidence — and still, I truly **enjoyed working on it**.  

  >  

  > 🎯 Overall, I consider this a very **valuable and enjoyable experience**.

### 🔙 Previous Project

 - Photo Gallery | *[Project 7/20]* → [View Repository](https://github.com/DalaScript/photo-gallery)

### 🔜 Next Project

 - Quiz | *[Project 9/20]* → [View Repository](https://github.com/DalaScript/quiz)

---

## 👤 Author

### 🌐 Connect with Me

 - [Instagram](https://www.instagram.com/DalaScript)

 - [YouTube](https://www.youtube.com/@DalaScript)

### 💻 Coding Profiles

 - [freeCodeCamp](https://www.freecodecamp.org/DalaScript)

 - [FrontendMentor](https://www.frontendmentor.io/profile/DalaScript)

 - [GitHub](https://github.com/DalaScript)

*🙌 Thanks for checking out my project! More coming soon. Stay tuned 🚀*