📌 Challenge Project: Build a Website Design System

📖 1. Project Overview

This project is a Website Design System, built as part of the Codecademy Front-End Career Path. The aim of this project is to collect and present all the colors, fonts, and some of the text styles of an imaginary website.

The Website Design System Challenge Project was created to hone and become more familiar with the following concepts:

• Basic web design and color theory principles: visual visibility, color designs (complementary, triadic and monochromatic designs);
• intermediate CSS layouts: flexbox display property and corresponding flexbox properties and values; grid display and grid layout;
• relative units in CSS layouts: especially margins and padding in em and rem;
• intermediate CSS concepts: using more extensive padding over margins properties, keep smaller margin proportions, using Flexbox and Grid layouts over block and inline-block layouts, especially for sections such as the header, the nav, the footer and extensive parts of the main;
• finally, I decided to write my first two JavaScript functions to allow users to copy the colors and fonts collected in my project.

The focus of this project was learning by doing, applying various design and color theory principles, as well as introducing Flexbox and Grid in my CSS styling.

---

🔗 2. Live Demo & Repository

🌐 Live Demo (GitHub Pages):

GitHub Page: You can view the live version of this project on its dedicated 👉GitHub Page.

📁 Repository

Source Code: You can consult the source code of this project on its dedicated 👉GitHub repository.

---

🧠 3. What I Practiced

• Writing semantic HTML for better structure and readability
• Practicing and honing intermediate CSS concepts: Web design and color theory principles, more advanced layouts (Flexbox and Grid), relative units
• Preferring padding and flexbox properties over extensive margins, thus allowing for more flexible layouts on the box model
• Building and organizing Flexbox layouts throughout much of my project
• Building a simple Grid layout
• Building two JavaScript string functions and linking them to my project's HTML file
• Validating HTML and CSS using W3C validators

---

📚 4. What I Learned

• How to use more flexible and powerful CSS layouts: Flexbox and Grid displays and properties
• How to apply more advanced styling to my CSS stylesheet
• How to build and link two JavaScript functions
• How small visual details (spacing, color contrast, color and web design, hover effects) improve usability

---

🧱 5. HTML Structure

• Built with semantic HTML5 elements:

  , , ,
  , and to improve structure, readability, and accessibility.

• Used ARIA attributes such as aria-label to improve navigation clarity for screen readers.

• Organized the layout into three clearly defined sections: Colors, Fonts, and Text Styles, each identified with unique id values for internal anchor navigation.

• Implemented reusable class naming conventions (.palette-colors, .block-color, .copy-btn, etc.) for consistency and maintainability.

• Leveraged data attributes (data-target, data-font) to connect HTML elements with JavaScript functionality in a clean and scalable way.

---

🎨 6. CSS Styling

• Built the overall layout using Flexbox for navigation, headers, font previews, and footer alignment.

• Implemented a CSS Grid layout for the Text Styles cards section to create a structured and visually balanced design.

• Applied relative units (rem, em) for margins, padding, and spacing to improve scalability and responsiveness.

• Designed interactive states using pseudo-classes (:hover, :active, :visited) and smooth transitions for better user experience.

• Structured the stylesheet logically by sections (Header, Colors, Fonts, Text Styles, Footer) for readability and maintainability.

• Applied consistent border-radius, spacing strategy, and contrast principles to reinforce visual coherence across the design system.

---

🟨 7. JavaScript

• Wrote two interactive clipboard utility functions using navigator.clipboard.writeText() to allow users to copy color codes and font styles.

• Used event listeners (addEventListener) to dynamically attach click behavior to multiple buttons.

• Implemented document.querySelectorAll() to efficiently target groups of elements.

• Used custom data attributes (data-target, data-font) to dynamically retrieve the content to copy.

• Added user feedback by temporarily changing button text to "COPIED!" using setTimeout() for improved UX.

• Included basic error handling with .catch() to log clipboard failures.

---

🛠️ 8. Workflow & Tools

• Editor: Visual Studio Code
• Browser: Chrome DevTools
• Terminal: Windows Shell / Git Bash
• Version Control: Git & GitHub
• Validation Tools:
  • W3C HTML Validator
  • W3C CSS Validator

---

👩‍💻 9. Author

NF Web Development Studio
© 2026