# E5: Basic Coding Exercise
Points: 20
Now that we've gotten through some lectures and you've been practicing in Codecademy, it's time to try some practical skills by coding a simple text-based design in Codepen.
Download this Illustrator file. It's the beginning text from our Responsive Web Design lecture set in Open Sans from Google Fonts. Measure the type and set it in Codepen with HTML and CSS.
# HTML
Copy the text into the HTML panel in Codepen and mark it up with the appropriate tags. Since it's Codepen, you don't need to worry about the <body> tag or anything like that, just create a main container, then markup the text.
# Responsive
Since we haven't talked about responsive coding yet, the only thing expected on this exercise is that your text be contained in a centered container that is flexible, but has a max-width set to keep the line-length under control. That container should have white space around it on mobile, but grow larger as the screen grows larger.
# Fonts
The font used is Open Sans. You can get it from Google Fonts. For simplicities sake, just copy this code into Codepen's settings > HTML > "Stuff for <head>"
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
This adds it to your CodePen document's <head> tag.
# Colors and sizes, etc.
The main task of this exercise is to practice marking up text, and then setting appropriate text styles in your CSS. You should be able to determine colors, sizes, and weight from the the Illustrator file, as well as figure out your margins and paddings.
# Turn in
Name your Codepen "DES-340: Exercise 5". Copy the URL and send to me via Slack.
Due Dates
March 18th