Learn the fundamentals of HTML and CSS, while building a strong foundation for more advanced front-end development.
Inspired by Front-end Foundation on CodeSchool
HTML tags
Copy the following code in an prependers-band.html file and follow the exercises below.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Open Source Records
The Prependers
Bio
The Prependers are a quirky four-piece from Orlando, FL.
Critics have hailed them as the greatest post-garage-rock
band of the last decade.
They are currently writing a full length album that's a
follow-up to their breakout 2011 album, Top Right Bottom Left,
and their critically acclaimed EP, Opacity Zero.
Members
Jack Smith - Vocals
Sarah Quan - Guitar
Laverne Butlet - Bass
Simon St. Hollister - Drums
Albums
Top, Right, Bottom, Left
The Last
Downtown
Yellow Carpet
Rocket to Mars
Walk, not Run
Design
Shopping Cart
Our Gift to You
Opacity Zero
Visible/Invisible
Car Trip
AFK
Up and Up
Tour Dates
The Prependers are not currently on tour because they
are recording their new album. Check back later!
</body>
</html>1.1 Marking Up Headings
We've been hired to create a home page for Open Source Records. They've only got two bands on their roster, but they are growing fast, so let's get started!
Task
- On this page, the record label's name - Open Source Records - is the most important content, so mark it up with the appropriate tag.
- The name of the band - The Prependers - is the next most important content, so mark it up with the appropriate tag.
- The section titles - Bio, Members, Albums and Tour Dates - are of lesser importance than the name of the band, so mark those up with the appropriate tags.
- Mark the band's album names - Top, Right, Bottom, Left, and Opacity Zero - each with the
h4tag. - Mark up the two paragraphs of the band's biography with the appropriate tags.
- Mark up the band's tour message paragraph with the appropriate tag.
1.2 Marking Up Lists
We just added the band members and song titles to the page. Decide the best tags to mark up that content, and don't forget to nest and indent tags when necessary!
Task
- Mark up the list of band members using the appropriate tag(s).
- Mark up the song list for the album Opacity Zero using the appropriate tag(s).
Exercise
Do your best to format the following HTML. Save it in a file called regular-band.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Open Source Records
Regular Expressions
Bio
Regular Expressionists are a hip-hop trio from New York City.
Members
Rekt - Vocals
Face-like - Vocals
DJ Regex Capture - Decks
Albums
This group has no albums released, but they are recording one album right now.
Tour Dates
July 16th, 2014 @ 7:00pm
House of Blues - Orlando, FL
July 17th, 2014 @ 7:30pm
Jannus Landing - Tampa, FL
July 19th, 2014 @ 8:00pm
The Tabernacle - Atlanta, GA
July 20th, 2014 @ 7:30pm
40 Watt Club - Athens, GA
</body>
</html>HTML links
1.3 Site Menu
Task
- Create an unordered list with three list items:
About,Bands, andContactthat is in between the main site name and the band's name (in both files) - Make the text
Aboutinto a link to the pageabout.html. - Make the text
Bandsinto a link to the pagebands.html. - Make the text
Contactinto a link to the pagecontacts.html.
Exercises
- Create the
about.html,bands.htmlandcontacts.htmlpages by saving and formatting the snippets belowabout.html<!DOCTYPE html> <html> <head> </head> <body> Open Source Records About Open Source Records is a quickly growing record label that brings you the hottest up-and-coming groups. All of our bands are actively recording and touring, and receive our full support producing, recording, mixing, touring, and promoting their work. At Open Source Records, artists come first. </body> </html>bands.html<!DOCTYPE html> <html> <head> </head> <body> Open Source Records Bands The Prependers Regular Expressionists We're always looking for new talent, so Contact us now! </body> </html>contact.html<!DOCTYPE html> <html> <head> </head> <body> Open Source Records Contact </body> </html> - Make sure the site menu you did above is present in all the pages
band.htmlhas 3 addiional links. Can you spot them?- Check that you can navigate between all the pages.
CSS selectors
2.1 Writing Selectors
We've done a good job structuring the content of our page with the right HTML tags, but the way those tags look is pretty boring right now. Let's start fixing that!
Task
Inside prependers-band.html file:
- Write a CSS rule that selects every
atag and removes the underline from the text using thetext-decorationproperty. Also change theircolortodarkblue. - Write a CSS rule that selects every
ptag and changes the textcolortodimgray - Write a CSS rule that selects only
litags that are children of an ordered list and make theirfont-size20px. - Write a CSS rule that selects the
h2tag and sets thefont-sizeto28px. - Write a CSS rule that selects all of the
h3tags and sets theirfont-sizeto26pxand theircolortodarkblue.
Hexadecimal colors
2.2 Changing to Hex Colors
Convert the colors on our page to hex.
Task
- Set the color of the
h1andh2text to the hexadecimal version ofblack. - Set the
h3tags to a slightly lighter version of black, and theh4tags to an even lighter version than that. - Of the hex colors
#112E10,#11EE00,#444444, and#FF0000, set the color for all paragraph text to the one closest to a darkish gray color. - Set the color for all anchor tag text on the page to a dark red hexadecimal color.
The Box Model
2.3 Modifying Box Model Properties
We've gone ahead and reset all of the styles on regular-band.html, and your job is to get the layout back to a good place!
Copy the style block from the prependers-band.html and add the following at the top
html, body, h1, h2, h3, h4, ul, ol, li, p, a {
padding: 0;
border: 0;
margin: 0;
}Task
- Adjust the
h1tag so there's15pxofmargin-bottomspace between the Open Source Records header and the site navigation. - Adjust the
h2tag so there's15pxofmargin-topspace between the band's name and site navigation. - Adjust the
h3tag so there's15pxofmargin-topspace above the heading text. - Adjust the
h3tag again so there's aborder-bottomwith a value of1px solid #cccccc. - Adjust the
ultag so there's30pxofpadding-leftand the unordered list item bullets will be visible - Adjust the
litag so there's5pxofmargin-bottomand the text in the list items won't be so close together. - Finally, adjust the
bodytag so there's15pxofpaddingto create space between the edge of the window and all of the other content on the page.
1.4 Fixing Prependers Styles
Copy the styles you wrote for the Regular Expressionists page over to prependers-band.html, and see some issues popping up. Go through each of these tasks and fix up some of those issues.
Task
The Bio section the page contains two paragraphs, but they are appearing too close together.
Adjust the
ptag so there's10pxofmargin-bottomspace for the bottom of the any paragraphs.In the last challenge, we fixed the
ulstyles so we could read the bullet points, but that page didn't have anyoltags.Adjust the
oltag so there's20pxofpadding-leftspace and the album track numbers should line up with the album name headings.Our song list items look good now, but there's another problem - we didn't have album names on the page in the last challenge, so our album titles here don't have the correct spacing.
Adjust the
h4tag so there's10pxofmarginspace above and below the album name headings.
The class Attribute
3.1 Separating CSS
We've got some cool CSS and we'd like to make it available to every page on our site. It doesn't make sense to copy that CSS <style> block to every page, because that means we'll have to update all of them individually whenever we make a change.
Instead, let's move our CSS to a new file and link that to each page so our CSS is all in one spot.
Task
- Move all of the CSS in
prependers-band.htmlover to a new file namedmain.css. - Replace the
styletag inprependers-band.htmlwith a link tag that loadsmain.css. - Now copy that link tag to the header of all the other
htmlfiles
3.2 Fixing The Site Navigation
We can use class attributes applied to HTML tags so they can be specifically targeted in CSS.
Let's organize our HTML and CSS styles with some classes.
Task
- The site navigation is a perfect candidate for adding a class. Add a
classattribute to the unordered list, and set the name of it tonav. - Switch to the
main.cssfile, and set thepaddingfor the.navselector to0in order to remove the space that's appearing before the site navigation. - Set the
.nav liitems to display horizontally withinlineinstead of their default block-level appearance. - The
.nav liitems are appearing a little too close together. Add20pxofpadding-rightspace so they have some room to breathe. That right padding is being applied to every navigation list item - even the last one on the right, which doesn't need any padding.
Use the
:last-childpseudo-selector to set thepadding-rightvalue to0to remove the extra space on the last navigation list item.- Add that nav class to the site navigation in all the pages.
3.3 Styling Tour Dates
In regular-band.html, the tour dates on this page are another great spot to use classes.
We don't need to add a class to the <ul> that contains the tour dates, but we do need a way to access the date/time paragraph tag and the concert location paragraph tag separately.
Task
- Add a class of
day-timeto each paragraph tag that contains a date and time. - Add a class of
concert-locationto each paragraph tag that contains a location. - Use class selectors to change the
.day-timeclasscolorto#444444and change the.concert-locationclasscolorto#888888. Let's change the text so that it stands out a little better too.
For both the
.day-timeand the.concert-location, add atext-decorationofunderline.
divs and Layout
3.4 Page Divisions
t would be great to style the page header differently from the rest of the content, so let's add some divisions and classes to help us do that.
Task
- Wrap the Open Source Records header and the site navigation inside of a
divcontainer, and give that tag aclassofheader. - Now wrap all of remaining content in the page body inside another
divcontainer, and give that tag aclassofcontent-section. Now that we have the divisions in place, let's switch over to the
main.cssfile.Before we had separate divisions, we added
15pxofpaddingto the entirebody.Now, we want our divisions to have better control over the page, so set the
paddingfor thebodyselector to0.Alternatively, since the
paddingis already being set by the CSS declaration at the very top, you could remove thebodyselector from the CSS and that works too.- Now we can add
15pxofpaddingback to all sides, but this time add it to theheaderandcontent-sectiondivisions. - For this site, our designers have asked us to make sure the
content-sectiondoesn't get bigger than450px, so use that number to set the content section'swidth. - Make sure all the pages look the same
3.5 Album Styles
This div-with-a-class thing is pretty useful - and it looks like there's another place we can use it too.
Our designers want a dashed border around each of the albums and their track listings, so we need to group the h4 and ol tags that contain each album's song list.
Task
There's information about two albums, and each album consists of an
h4tag and an ordered list.Wrap each album name and track listing in their own divisions, and give those divisions a
classattribute with the valuealbum.Now we can switch to
main.cssand target tags that have analbumclass in order to style them the way we want.Use a class selector to add a
2px dashedborder to the albums. When you're writing theborderproperty, use the single-line version.That border is a little too close to our content, so add
10pxof space to the top and bottom along with5pxof space to the left and right between the content and border.Use the single-line version of the
paddingproperty to add these four values.- That's looking better now - but the borders of each album division are touching up together, so add
5pxofmarginspacing between the two album divisions.
3.6 Centering Content
Right now all of our content is aligned to the left of the screen, but it probably makes sense for some of this stuff to be centered on the page.
Task
- Center the
content-sectiondivision that contains all of the page's main content. - Align The Prependers
h2to thecenterinside the main content section. Align the Open Source Records
h1to thecenterat the top of the page.Then, align the site navigation
.navto thecenteras well.
3.7 Cleaning Up The Bands Page
The band pages are starting to look really good, but we've got a new problem. When we click back over to bands.html, the list of bands doesn't look very good even when we wrap that content in div containers with .header and .content-section classes.
This is because most of our layout styles on the band pages were specific to classes that aren't yet on bands.html.
Task
- Start by adding a class of
bands-listto the unordered list of bands. That border underneath the band names looks strange. This is because we have defined a very general rule for that heading tag.
In the
main.cssfile, define a more specific rule to remove the border forh3tags inside of the.bands-list.Also, set the
marginto0inside that same CSS selectorNext, select the
.bands-listand remove the default bullet points with thelist-style-typeproperty.Also, set the
padding-leftto0in order to remove the extra space before the band names.Select only
atags that are children of the.bands-listand remove their underlines with thetext-decorationproperty.Also, change their
colorto#ff2244.- Finally, add a
1px solid #555555for theborderaround each of theliitems in the.bands-list.
Content Images
4.1 Adding Content Images
Let's update The Prependers page to include images for their album covers.
Task
Create an image element in between the album name and song list for the Top, Right, Bottom, Left album.
Make sure the image has an
altattribute with this text:"Top, Right, Bottom, Left album cover".
Create an image element in between the album name and song list for the Opacity Zero album.
Make sure the image has an
altattribute with this text:"Opacity Zero album cover".
While we're adding content images, let's go ahead and add band images to the
bands.htmlpage. Insert the images before the heading tags inside of each list item for The Prependers and Regular Expressionists.Each band has their own image that is located in the
imagesfolder - and don't forget to add analtdescription for each image!
4.3 Updating The Site Logo
Our designers sent over a new Open Source Records logo, so instead of just writing the record label name with simple text, let's replace that text with an image.
Task
Replace the
h1tag with an image element that displaysosr-logo.png. And don't forget to add an alt attribute to specify some alternate text too.
Removing that
h1tag and replacing it with a single image is what we wanted to do, but we've created several problems that will require us to modify our HTML and CSS.First, our logo text was centered, but our logo image is not. That's because our
h1heading tag was block-level, but ourimgtag is inline-level.Update the
main.cssfile by adding a CSS selector for our.header imgand set thedisplayproperty toblock.- Now that our image is a block-level tag, we can center it by using auto margins on the left and right sides. Set the
marginproperty to0 auto 15px auto, which will also add15pxof space between the logo and the site navigation.
4.3 Fixing The Heading Tags
The next problem is a trickier one. In the last challenge, we removed the h1 tag and replaced it with an img tag. That's fine, but it also means that our highest level heading right now is an h2 tag, which isn't OK.
Each page should have one h1 tag, and the rest of the content should be organized with h2 and h3 tags. That means we need to shift our existing heading tag numbers down by one, and then update our CSS selectors to reflect that shift.
Task
- Start the fix off in
bands.html. Change anyh2tags toh1, and anyh3tags toh2. Do the same thing for the heading tags on
prependers-band.html.The band's name should be marked up with the
h1tag, followed by the page sections withh2tags, and then the album names withh3tags.Fix
regular-band.html,about.htmlandcontact.html, also make the heading shift in your CSS. Remember, what was anh2is now anh1, and so on.Delete the existing
h1selector and rules, and then update the CSS selectors inmain.cssto reflect the new heading tag organization.
Background Images
4.4 Adding CSS Backgrounds
Now we're going to really spruce up the Open Source Records site by adding backgrounds with CSS.
Task
Let's start by adding a background to the body of the page.
For the
bodyselector, use the CSS shorthandbackgroundproperty to set the following value:#555555 url(images/bg-tile.png)
We're using the default values for position and repeat, so we don't need to set those separately.
Next, let's add a background to the header section.
For the
.headerselector, use the CSS shorthandbackgroundproperty to set the following value:#242424 url(images/bg-header.png) top center no-repeat
Next, let's add a background to the main content section of the page.
For the
.content-sectionselector, use the CSS shorthandbackgroundproperty to set the following value:#dddddd url(images/bg-content.png)
We're using the default values for position and repeat, so we don't need to set those separately.
Now our links are too hard to read with the darker background.
For the
.nava selector, use the CSScolorproperty to set the following value:#ee932a
4.5 Writing Text on CSS Backgrounds
The Prependers are putting out a new album soon, and Open Source Records wants to feature them on the About page. We'll do that with a container that shows a background image.
Task
- Under the paragraph in the content section, add an empty
<div>container and give it a class ofrecording-now. - Switch over to
main.cssand select the new container with the.recording-nowclass selector. Set the dimensions of that container with awidthof440pxand aheightof200px. Now, add a
backgroundto that container with the following value:#ffffff url(images/prependers-recording.jpg) top left no-repeat
- In the
about.htmlfile, create a<p>tag inside of that.recording-nowcontainer with the textRecording Album Now!. - Finally, select the
.recording-now pand set thefont-sizeto28px. You can also experiment with differentcolorvalues and see the changes in the Preview section.
4.6 Bordered Background Images
Our "recording now" image is showing up, but it feels a little out of place. Maybe it will look a little better if we add a border.
Task
- For the
.recording-nowselector, add aborderwith a1px solidvalue. - Now, think about what property you can use to put
4pxof space between the border and the content. Much better, but our image isn't centered inside of the container anymore. As a result, the border is showing up on the right and bottom, but not at the top and left.
Adjust the
backgroundproperty so that it's set tocenter centerinstead oftop left, and our image should appear directly in the center of the container.
Floating Images
4.7 Floating Images 1
If we look back at bands.html, it's a little annoying that the band image appears above the band name. Ideally we want the band image to appear directly to the left of the band name.
Task
- Use the
.bands-list imgselector to float the images so the band image appears to theleftof the band name. Uh oh - that doesn't look right. The
floatis working, but the display isn't what we expected.To start fixing this, let's put some padding between the image and the band name.
For the
.bands-list imgselector, add apadding-rightproperty with a value of15px.To finish fixing this, the band list item height needs to be set to at least the height of the floated image.
In this case, the floated images are
120pxhigh, so update the.bands-list liselector to have aheightwith a value of120px.
4.8 Floating Images 2
This float thing is pretty cool, and it seems like we can use it on prependers-band.html to put each album image on the same line as the album name.
Task
- Write a selector that targets any
imgelements in thealbumcontainer, andfloatthem so the album image appears to therightof the album name.
Adjusting font styles
5.1 Setting Font Styles
Reset the default font styles and sizes, so you're going to need to go in and manually set those sizes again.
Update the following snippet in main.css
html, body, h1, h2, h3, h4, ul, ol, li, p, a {
padding: 0;
border: 0;
margin: 0;
font: inherit;
font-size: 100%;
}Task
- Set the
bodyfont withfont-familytoGaramond, and useserifas a fallback. - Set the font with
font-familyfor each of the heading tags toVerdana, and usesans-serifas a fallback.
5.2 Fixing Font Sizes
Task
- Start by giving the
bodyafont-sizeof16px. - Next, make the
h1tag twice the size of thebodyfont (using pixels). - Now make the
h2size smaller than theh1, but larger than the defaultbodysize. - Make the
h3size bigger than thebodysize, but don't go any bigger than22px. - Make the
h1andh2font-weightbold.
5.3 Adjusting Line Height
Some of our paragraphs and lists are a little hard to read at a glance because the text within each line is too close together. Let's adjust the space between those lines.
Task
- Make the space between the lines in paragraphs equal to
24px. - Make the space between the lines in list items equal to
22px.
Creating web forms
5.4 A Basic Form
The Open Source Records contact form is the main way that they'll be able to learn about new talent.
We won't be hooking up the form responses to a server, but we can still create the form's HTML now.
Task
- Start creating a form by adding an opening and closing
formtag underneath the Contact heading. - Add an
inputtag with atypeattribute set totextso that an aspiring band can enter their band name. - Add a
labelthat saysBand Namebefore theinputfield. Then add the appropriate attributes to thelabelandinputso the two are related with the valueband-name. - Below the
inputtag, add a newinputtag with atypeattribute set tosubmit. Thevalueattribute should say"Tell us about your band".
5.5 Other Inputs
Instead of separate fields with a few different questions, Open Source Records has decided to just invite bands to tell their story. That story will probably be pretty long, so we should use some input types other than just text.
Task
- Create a
labelthat saysYour Storyand add atextareaelement after it. Then add the appropriate attributes to thelabelandtextareaso the two are related with the valueyour-story. - Next, create a
labelthat saysOn Tourand add aninputelement after it. Thetypeattribute for theinputshould be set tocheckbox. Then add the appropriate attributes to thelabelandinputso the two are related with the valueon-tour.
5.6 Styling Forms
Our form looks pretty jumbled right now, so let's work on styling those different form elements.
Task
- Write three separate selectors for
label,input, andtextarea, and set theirdisplayproperties toblock. - Put
15pxof space at the bottom of eachinputandtextareaso the form fields aren't stacked so close together. - Set the
widthof eachinputandtextareato445px. - Now set the
font-sizeof eachinputandtextareato20pxso the text that's being entered is easier to read. - Finally, set the
font-weightoflabelelements toboldto further differentiate between thelabeltext and the form field text.
5.7 Attribute Selectors
Now our form is looking good, but there are a few small details that need to be fixed.
Task
- Use an attribute selector to select the
inputelement withtype=submit, and adjust the width to165px. We want the checkbox to appear on the same line as the checkbox's label.
Use attribute selectors to select the
inputelement withtype=checkboxand thelabelelement withfor=on-tour, and adjust thedisplayproperty toinline.Hmmm, the
inputandlabelfor the checkbox still aren't displaying side-by-side even though they've been set todisplay: inline;. In this case, that's because we've already got a rule that sets allinputelements to awidthof445px, and since there's no more space for the checkbox on the right, it moves onto the next line.Remove the
width: 445px;rule from the existinginputselector, and move it to a new attribute selector that only changes thewidthofinputelements withtype=text