First things first. Let’s see what we’re shooting for.

When no song is playing

When a song is playing

As you can see, it’s nothing too complicated. It’s just a header, a footer, and a few rows of top notch RFM (Royalty Free Music). Remember, this is just a mockup, so don’t worry about making anything it pixel-perfect. Also, feel free to change just about anything as long as the basic features remain intact. Whether or not you stray from the mockup, here are the core features:

• A list of songs listed with their artists
• Each song should either be clickable or have a play button
• Each song should display differently when it’s being played
• A status bar with a play/pause button and the information for the current track
• The status bar should also have next and previous track buttons

Tips

You aren't writing JavaScript here, but that doesn't mean you should write your HTML and CSS in a vacuum. Your JavaScript is going to have to add/remove elements, toggle classes on elements, and change the text within elements. Try to organize your markup such that your JS can change the page in as few steps as possible.

For example, if you want to make a song div indicate that its song is playing, you should really only have to toggle a playing class on that element. You shouldn't be adding and removing a bunch of inline styles via JavaScript each time there is a change. CSS is great at dealing with styling and states, so deferring to it will make your code easier to write and more reliable. This also means that you'll be able to fully flesh out your CSS before you ever touch the JavaScript.

Getting Started

1. Fork and clone the Project Repo on GitHub.
2. Add your name to the README file, commit the change, and push to your fork.
3. Set up the basic files you'll need—an HTML and Sass file for now.
4. Get your page to look like the mockup above and/or fulfill the listed requirements.

Alrighty! It's time to get cracking. Fire up your text editor and start laying down some architecturally-sound markup.

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!