This is the project that you will be working for your individual work throughout the entire front end course. Don't worry, you'll be building lots of other applications, but when you learn a new technique, library or language, you'll be cutting your teeth with it on Music History.
I've started you off with a very basic HTML document, the index.html
file. This file name is the default file that most any web server looks for in the directory in which is was started. This is why you don't have to type in www.google.com/index.html
. If the file exists, the web server sends it back to you if you just request the root URL.
Terminology: Root URL simply means your domain name (or IP address) with no other documents, or folders specified.
www.google.com
is the root URL of Google's web site, butwww.google.com/finance
is not.
You're going to get a copy of this Github repository downloaded - a.k.a. cloned - to your machine using the git
command. Here's how to do it.
- Look all the way up and to the right of this screen and you'll see a button with the word Fork on it. Click that button,
- What you've just done is taken a copy of my repository and all the code inside it, and copied into your Github account. You can now do whatever you like to your fork of my repository and it won't affect mine at all.
- Now on the top of the page, you will see the text HTTPS with a text box next to it. Make sure that HTTPS is selected.
- Click the little clipboard icon to the right and it copies that URL to your computer's clipboard.
- Open your terminal window and navigate to your workspace folder.
- Type in
git clone
and then paste the URL after that text. You should seegit clone https://github.com/{your account name here}/musichistory-boilerplate.git musichistory
- Hit your enter key and git will do two things. First, it creates a
musichistory
sub-directory under/workspace
and then downloads all the code into that directory. - Now
ls musichistory
. - You will see the lonely
index.html
file sitting in there.
Congratulations, you've just cloned your first Github repository!
Now here's your assignment.
You will be building the basic structure of your Music History application in HTML and making it look good with the skills you learned in CSS.
Visit the Music History mockup that I created. You will be recreating that document in your own HTML file.
- Create five options for the artist select element of any artist that you enjoy.
- Create at least five options for the album select element. One, or more, album for each artist.
- The links in the navigation bar don't need to link to anything just yet, you can use
<a href="#">View music</a>
for now - Pick your four favorite songs from the artists you have chosen and use the information for each in the list that's on the right-hand side. You can use
h1
tags,div
tags,section
tags... whatever you like.
Once you are done, make sure you add your files to git, make a commit, and then push your new code up to Github with the following command git push origin master
.