These free mini-courses will give you a strong foundation in web development. Track your progress and access advanced courses on HTML/CSS, Ruby and JavaScript for free inside our student portal.
Scroll down...
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:
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.
Alrighty! It's time to get cracking. Fire up your text editor and start laying down some architecturally-sound markup.