📌 Stylized To-Do List Project

---

📖 Project Overview

This project was completed as part of the FreeCodeCamp Responsive Web Design Certification.

The goal of the exercise was to build a simple to-do list using basic HTML structure and CSS styling, while respecting the constraints defined by the FreeCodeCamp platform. One of the key requirements was to apply different styles to links using the various CSS link states: :link, :visited, :hover, :active, :focus.

While FreeCodeCamp provided clear HTML requirements, it left most of the CSS decisions open. I chose to fully embrace this freedom and use the project as an opportunity to experiment with foundational CSS concepts and visual design.

---

🔗 Live Demo & Repository

🌐 Live Demo

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

📁 Repository

Source Code: Click here to consult 👉the GitHub repository for this project.

---

🧠 What I Practiced

During this project, I practiced and reinforced the following concepts:

• Structuring a web page using semantic HTML (main, section, ul, li, footer)

• Creating nested lists and associating form inputs with labels

• Applying CSS selectors, including class selectors and child selectors

• Styling links using all CSS link states (:link, :visited, :hover, :active, :focus)

• Working with background gradients and color palettes

• Using box-shadow to create depth and visual hierarchy

• Experimenting with less familiar CSS properties such as text-shadow

• Organizing CSS rules for clarity and maintainability

---

📚 What I Learned

• Through experimentation and iteration, I learned:

• How CSS cascade, specificity, and pseudo-class order affect link styling

• The importance of color contrast and readability in UI design

• How subtle design choices (spacing, shadows, gradients) impact user experience

• Why prioritizing semantic HTML improves structure and future scalability

• How to safely experiment with CSS using browser developer tools

This small project has been a very valuable opportunity to explore creativity, design intuition, and foundational UI principles.

---

🧱 HTML Structure & Semantics

Special attention was given to the HTML structure.

I intentionally avoided using generic <div> elements whenever possible and instead prioritized semantic HTML, including:

<main>

<section>

<ul> / <li>

<footer>

This decision was made to:

• Improve readability and maintainability

• Encourage good accessibility habits

• Practice structuring layouts semantically, even when used primarily for styling purposes.

---

🎨 Design & Styling Choices

Rather than keeping the project visually minimal, I decided to explore CSS styling in a more expressive way. This included:

• Selecting a coherent color palette inspired by warm sunset tones (purple, indigo, orange, and soft reds)

• Experimenting with CSS gradients for backgrounds

• Using the box-shadow property to add depth

• Discovering and applying CSS properties I was not yet fully familiar with, such as:

  • subtle transparency with rgba()
  • text-shadow
  • list-style-type
  • layered background-gradient: background: linear-gradient and background: radial-gradient

  Note: while the background: radial-gradient property was not used in the final version, it was explored during experimentation.

The goal was not only to meet the project requirements, but also to develop visual intuition and confidence with basic CSS styling, while keeping the interface readable and user-friendly.

---

🔗 Link Styling

All link states were explicitly styled to improve clarity and user experience:

Default 👉 (:link)

Visited 👉 (:visited)

Hover 👉 (:hover)

Active 👉 (:active)

Focus 👉 (:focus)

Special care was taken to ensure that links remain readable, accessible, and visually distinct from surrounding text.

---

🛠️ Workflow & Tools

This project was built using the following tools and workflow:

• Visual Studio Code for writing and organizing code

• Windows PowerShell Terminal and the Visual Studio Code integrated terminal to stage, commit and push changes on GitHub

• Git & GitHub for version control

  • Initializing repositories

  • Staging changes on GitHub

  • Committing progress incrementally

  • Publishing the project with GitHub Pages

• Chrome Developer Tools (DevTools) to safely experiment with CSS changes, test layout adjustments, and inspect styles in real time

---

🚀 Future Improvements

This project represents an early version of the to-do list.

Once I become more familiar with advanced CSS concepts, I plan to refactor and expand this project by:

• Implementing Flexbox and CSS Grid

• Making the layout fully responsive for mobile and tablet devices

• Adding media queries

• Improving spacing, alignment, and overall layout consistency

Future versions of this project may be published as separate iterations to reflect my progress.

---

🛠️ Technologies Used

• HTML5

• CSS3

---

Author

Designed and developed by NF Web Development Studio © 2026