Work alone or work with a classmate of your choosing, as you wish. I won't assign partners.
Goals
- Practice using HTML and CSS to create a page layout.
- Play around with HTML and CSS to test whatever features you find interesting.
Rubric
1 - author names in comments at top of index.html and styles.css
4 - meets layout listed below (panel arrangement, visibility, etc.)
1 - meets code specifications (vanilla CSS only)
1 - CSS and HTML readably organized
1 - HTML page validates
Your tasks
- Create a directory named simple-html in your repository.
- In it, create a file named index.html and another named styles.css for your (surprise!) HTML and CSS code, respectively.
Using HTML and CSS, create a web page that has three regions: a top panel, a left-side panel, and a large lower-right panel. Something like this:
This arrangement is very common on the internet, of course, where the top panel often provides a title, a logo, maybe some navigational links, etc.; the left-side panel often acts as a hierarchical menu or provides frequently-used tools; and the bottom-right acts a content region, where the information the page is focused on gets displayed.
- Ensure that your three-panel layout has the following properties:
- The shape and size of the three panels are visible, either by having a distinct background color or by having a border, or both.
- The combined width of the left and right panels is the same as the top panel.
- The heights of the left and right panels are the same.
- All three panels fit on a single screen without scrolling on a small laptop or a tablet in landscape orientation. (This is known as putting your page content "above the fold", in analogy to the front page of a newspaper, where above-the-fold stories are much more likely to get read than below-the-fold stories.)
- Everything visible on this page (other than the default background color) should appear within the bounds of one of the three panels.
- Use only "vanilla" CSS and HTML for now. That is, don't use any of the common add-ons to CSS like Bootstrap, Flexbox, etc. (See, I'm not even linking to them yet—that's how much I want you to not use them right now.) We'll look at those two add-ons in particular, but there's a gigantic world of common styling tools that are not part of the official CSS standard. Keep it to the standard for this simple assignment, and we'll build up from there.
- Check your HTML file (not your CSS) by using the "By file upload" tab of the W3C validator. (This kind of validation is easy to do without any installation on your machine.) If the validator finds errors, fix them.
- Otherwise, put whatever you want in your three panels. Play around, make it fun for the graders (or not)...whatever suits your fancy.