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.
- 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.
- 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.
- 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.
- 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
aroan-v
All credit goes to The Odin Project for helping me on this journey.
Photo Credits
- Zuko
- Daft Punk
- Lana Del Rey
- Avicii TURE LILLEGRAVEN
- Beyoncé Blair Caldwell/Parkwood
- A$ap Rocky DIMITRIOS KAMBOURIS/GETTY IMAGES FOR DIAMOND BALL
- Mark Ronson
- Coachella
- Music of the Spheres World Tour
.jpg){kind=link}