This project is a responsive availability table that visually represents time slot data using colored cells. The gradient legend provides a key to quickly interpret the availability levels from 0 (least available) to 5 (most available). It was built entirely with HTML and CSS as part of the freeCodeCamp.org CSS course.
This project features a structured HTML table layout enhanced with visual indicators of availability throughout the week. Each time slot is color-coded based on availability values, and rows alternate between solid and dashed borders for clarity.
A fully custom CSS legend using Flexbox and a gradient bar enhances the user experience and accessibility by offering an intuitive interpretation of the data. The project emphasizes semantic HTML, table styling, and the use of CSS variables for scalable design.
- Responsive table layout with clear weekday and hourly time slots
- Availability values styled using custom CSS classes and semantic colors
- Gradient legend component built with Flexbox and CSS linear gradients
- Alternating row styles using solid and dashed borders
- Time data formatted with the
<time>element for semantic clarity - Fully accessible and screen-reader-friendly structure
- Uses CSS variables for consistent theming and easy customization
- How to structure complex table-based layouts using semantic HTML
- Styling tables with both solid and dashed borders
- Using CSS variables to streamline and simplify styling
- Creating visually meaningful color systems using background colors
- Building a gradient legend with
linear-gradientand Flexbox - Proper use of
<time>elements for date/time semantics - Applying BEM-like class naming for state-based styling (
available-0toavailable-5)
- HTML5
- CSS3
- Git
- GitHub
- Netlify
- Clone the repository
- Open
index.htmlin your browser
Or you can check out the live website here
Created by Elmar Chavez
Month/Year: May 2025
Journey: 2nd month of learning frontend web development.