Skip to content

Latest commit

 

History

History
52 lines (37 loc) · 2.91 KB

README.md

File metadata and controls

52 lines (37 loc) · 2.91 KB
Raw

Music Dashboard with CSS Grid

Dive into my Music Dashboard project, where I've put my CSS Grid skills to the test! This webpage adjusts its layout smoothly as you resize your screen, thanks to what I've learned in my Intermediate HTML and CSS course. I've used CSS Grid for more complex layouts and Flexbox for simpler ones. No fancy JavaScript here – just pure HTML and CSS, including button feedback using pseudo-classes. I've also experimented with media queries, flexible units, and accessibility features like aria-labels.

Key Features

  • Develops a responsive web page that dynamically adjusts layout based on horizontal browser window scaling.
  • Implements collapsible sections, appearance changes, and sidebar icons replacement through media queries.
  • Utilizes auto-fit and minmax() properties for grid item behavior across various window sizes.
  • Balances usage of CSS Grid for complex layouts and Flexbox for simpler ones.

Constraints

  • This project lacks vertical screen resizing responsiveness, focusing mainly on horizontal responsiveness.
  • This project abstains from integrating JavaScript, emphasizing a comprehensive understanding of HTML and CSS acquired throughout the HTML and CSS Intermediate Course.

Additional Concepts Explored

  • Utilization of dynamic units such as em and fr.
  • Incorporates media queries for responsive design.
  • Implements aria-labels for icons without labels and utilizes the title attribute for tooltips.
  • Further studies on CSS selectors, pseudo-classes, and cascade mechanisms.
  • Revisits flexbox and form styling techniques and explores the concept of display: fixed.
  • Explored styling the ranged input and achieving consistent appearance across different browsers.

Applications Used

  • Visual Studio Code
  • Figma for design elements
  • Git and GitHub for version control
  • CodePen.io for testing and development
  • Third-party code integrated for additional functionalities

Author

aroan-v

Credits

All credit goes to The Odin Project for helping me on this journey.

Photo Credits