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...
This first assignment is meant to get you to explore a few of the new tools you've learned over the past few lessons. This assignment is intended to be fairly straightforward and to build up muscle memory as much as anything else. The end-of-unit projects will be much more involved.
For this assignment, you'll build a very basic "blog" page but one which utilizes the HTML5 semantic elements and some new CSS3 features. The page will have two different form factors -- one for wide screens, and another for narrow screens. This is practice is called responsive design.
You'll get to practice with the Git workflows that we'll use throughout the course as well.
index.html
file for HTMLstyles.css
file for styleslink
to the stylesheet in the <head>
of your HTML documentQuick tip: If you have an ad blocker installed, it may not show the ad unit you're trying to create (especially if it has a suspicious class name like ad-content
)! You can get around this by using an incognito window (which has no extensions running) or just disabling the blocker for your page.
Your job is to produce the mockups included above. You'll start by building the basic structure of the wide page and then implementing the changes necessary to make the page degrade gracefully to a narrower form factor.
Don't worry about producing perfectly beautiful code the first run through. You will refactor it afterward.
lorem
and then hit Tab in Sublime text to generate a Lorem Ipsum paragraph$ git push origin master
).Done!
The solution will be available here on Github once you've submitted your pull request.
Here's a quick refresher of how to submit a pull request. You'll do this about 100 times during the course so it'll very quickly become second nature.
Go to your fork and click the green "Pull Request" button:
Examine the files that will be submitted. If you don't see this screen, make sure you were actually on your fork in step 1:
Title, add any clarifying comments, and submit your pull request: