Day 32 Progress: Working on the Spotify Sidebar using HTML and CSS.

Hey everyone! 👋 Today, I made significant progress on my Spotify web player clone project by finishing the entire sidebar section. The sidebar is a crucial part of Spotify's user interface, and I put in a lot of effort to replicate its sleek, modern design. Here’s what I achieved today:

🎯 What I Did Built the Sidebar Structure: I designed a sidebar layout that features sections for Home, Search, and Your Library.

Added Functionality for Creating Playlists and Browsing Podcasts: I implemented two sections that allow users to easily create new playlists or explore podcasts, mirroring Spotify’s user-friendly approach.

🛠️ The Code Breakdown Here’s a detailed breakdown of the HTML and CSS code I used to create this sidebar:

HTML Structure I began by establishing the basic structure in HTML. The sidebar is enclosed within a <div> with the class .sidebar. Inside this main container, I set up three primary sections:
1. Navigation Section (.nav): This includes links for "Home" and "Search," utilizing icons from FontAwesome. The fa-solid fa-house and fa-solid fa-magnifying-glass icons represent these links, giving the interface a clean and intuitive look.
2. Library Section (.library): This is where users can access their personal library. I also included options to create playlists or browse podcasts.
3. Library Options (.lib-box): This section consists of two boxes:
  1. Create Playlist: Encourages users to start their first playlist.
  2. Browse Podcasts: Provides a call-to action to discover new podcasts.

<div class="sidebar">
    <div class="nav">
        <div class="nav-option">
            <i class="fa-solid fa-house"></i>
            <a href="" style="opacity: 1;">Home</a>
        </div>
        <div class="nav-option">
            <i class="fa-solid fa-magnifying-glass"></i>
            <a href="">Search</a>
        </div>
    </div>
    <div class="library">
        <div class="options">
            <div class="lib-option nav-option">
                <img src="./assets/library_icon.png" alt="">
                <a href="#">Your Library</a>
            </div>
            <div class="icons">
                <i class="fa-solid fa-plus"></i>
                <i class="fa-solid fa-arrow-right"></i>
            </div>
        </div>
        <div class="lib-box">
            <div class="box">
                <p class="box-p1">Create your first playlist</p>
                <p class="box-p2">It's easy, we'll help you</p>
                <button class="badge">Create playlist</button>
            </div>
            <div class="box">
                <p class="box-p1">Let's find some podcasts to follow</p>
                <p class="box-p2">We'll keep you updated on new episodes</p>
                <button class="badge">Browse podcasts</button>
            </div>
        </div>
    </div>
</div>

Styling with CSS To make the sidebar visually appealing, I applied CSS to style each component with care. Here are some key points:
1. Sidebar Layout (.sidebar): The sidebar has a fixed width and a dark green background, ensuring it stands out against the main content. I used border-radius: 1rem to give it rounded corners for a sleek, modern appearance.
2. Navigation (.nav and .nav-option): I implemented a flexbox layout to align items vertically. I added hover effects to provide visual feedback when users hover over navigation options, and adjusted the opacity for inactive links to create a more dynamic experience.
3. Library Boxes (.lib-box and .box): Each box within the .lib-box is styled to look like a card, providing an engaging way to create playlists or explore podcasts.

.sidebar{
    width: 350px;
    border-radius: 1rem; /* 16px*/
    background-color: green ;
}

.nav{
    background-color: #121212;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100px;
    padding: 0.5rem 0.75rem;
}

.nav-option{
    line-height:2.5rem;
    opacity: 0.7;
    padding: 0.5rem 0.75rem;
}

.nav-option:hover{
    opacity: 1;
}

.library{
    background-color: #121212;
    border-radius: 1rem;
    height: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.lib-box .box{
    background-color: #1e1e1e;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-top: 1rem;
    text-align: left;
}

.box .badge{
    background-color: #1db954;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    margin-top: 0.5rem;
    cursor: pointer;
    border-radius: 1rem;
}

🚀 What's Next?

With the sidebar complete, I’ll move on to the main content section and the music player at the bottom. My goal is to make them fully responsive and as close to the original Spotify web player as possible!

Stay tuned for more updates, and feel free to drop any feedback or suggestions! 😊