Week 7 assignments: Next steps with HTML and CSS

Don’t delete your Codecademy account — you’ll be using it again for JavaScript next!

This week you’ll be the same “type” you were last week. Find your type below and do all the work listed there, to be finished in the week of Feb. 23 – 27.

Review the Checklist for your HTML5 and CSS knowledge.

Also, read the assigned articles linked on the Course Schedule page.

Please keep in mind that the goal for this class is STILL to work about one hour every day, seven days a week. Play and experiment to make sure you really know how the code works. The more you understand, the more you will be able to learn about JavaScript and jQuery.

You will show me your pages and your CSS style sheet. Expect to be questioned about any item appearing on your style sheet.

Student type 1

Using what you reviewed (in Codecademy) last week, create three new Web pages that all use the same external CSS stylesheet. Create a brand-new CSS stylesheet and make certain you understand  each and every line in it. Do not include any extra or unnecessary selectors or declarations. For example, if you don’t have any H3’s in your HTML, then there should not be any H3’s in your CSS stylesheet. Use only hexadecimal codes for colors (NO color words!). Use Google Web fonts as explained below.

Here’s what your three pages must include:

(a) Google Web Fonts (learn about them here)

Produce at least one HTML page that uses three different Google Web fonts: One for the H1 heading, another for a large-font introduction paragraph after the H1, and a third for the regular paragraph text of the page. Do not use Lorem Ipsum text for the paragraphs. Instead, select a topic you enjoy from Wikipedia and adapt the text from Wikipedia to use on this Google Fonts page.

  • Use at least 500 words of text on the page.
  • Use at least three separate paragraphs.
  • Be sure to include a functioning link back to the Wikipedia page!

Do not embed any CSS styles in the HTML page — put them all in your separate CSS file. You may show this to me on your laptop (you do not need to upload it to a server).

The three fonts should complement one another. The font sizes of the H1, the intro paragraph, and the regular paragraphs must also be complementary.

Add any additional font properties necessary to make your page look good.

Good advice: CSS Typography: Techniques and Best Practices (read it).

Be prepared to explain the difference between: (1) the use of Google Web fonts, and (2) the use of @font-face. You need to be able to explain which one is better, and why.

(b) A container div that encloses all the content in the body (on every page)

View source and the CSS for this page to figure our how a DIV can center the page content automatically.

(c) Nested lists: These were covered in Codecademy HTML Basics II

Create two separate nested lists, both on one HTML page. One list must use only OL lists. The other must contain only UL lists. Each of the two lists must have at least one correctly coded nested list. NOTE: The requirement is to create nested lists correctly. If you create just a plain list with no nesting, you will fail this week.

(d) Tables: These were covered in Codecademy HTML Basics III

Create two separate tables, both on the same HTML page.

  • Table 1 must contain at least 4 rows and at least 4 columns, and the table background color must be different from the surrounding background color. This table must have visible lines (borders). You may use any content, but it must make sense. Example: name of a TV show, network, name of the lead actor, type of show (e.g. drama, sitcom). Choose a real topic for the text contents of this table!
  • Table 2 must not have any visible lines (yay, CSS!), and it must contain at least 5 rows and exactly 3 columns. The content of Table 2 must be hexadecimal color codes (column 1), the matching color filling a cell completely (column 2), and the name of the color, such as lilac, which you can choose (column 3). NOTE: The table cells that are filled with color (in column 2) must not contain anything at all. That is, they are empty. How will you make the table cells visible as blocks of color?

(e) Pseudo classes: Link all three pages to one another. Your CSS must include correct declarations for all link styles (look them up!), including a:focus.

Each of your three pages must link correctly to the other two pages.

(f) Correct CSS: You may use the normalize.css stylesheet, or not. It’s your choice, but be prepared to explain your choice in either case. Apart from normalize.css (optional), you must have only one stylesheet for all your pages in this assignment. Make sure ALL styles are in the stylesheet and NO styles in the HTML.

You have freedom with the colors you choose, the font-families, and the page layout. Each page will have different content, but each page will look similar in terms of colors and layout. Make sure you meet all the criteria listed above. You must show me three different HTML pages that all use the same CSS stylesheet (and optionally normalize.css).

Note that you should be experimenting and testing how things work in HTML, how the CSS changes things, and trying your best to create pages that look good, attractive and professional.

Student type 2

You must do everything that Student type 1 must do, with the following differences:

(a) You MUST use the normalize.css stylesheet correctly for all of your pages.

(b) Include a fourth page, which is a Web contact form. To do this, complete  the form project at Codecademy: Web Form (complete all seven parts). I will ask to see your badge.

After completing the full project, copy the final result as a standalone HTML document AND a standalone CSS document on your own hard drive. Make enhancements to the CSS for your form to make it look beautiful. You need to have this fourth page to pass for the week.

Note that you can make a CSS stylesheet that affects only the form elements and selectors, and use it in addition to the stylesheet you use for all the other pages. By linking the form stylesheet after the general stylesheet in the HEAD, you can efficiently use all the same styles that you made for your other pages in this assignment. Thus your form page can look like the other pages in this assignment.

Student type 3

Choose one of these popular frameworks to use for this assignment: Bootstrap, Foundation or Skeleton.

Read this: Comparing Responsive CSS Frameworks

Your assignment is to make a mini-site with three pages that utilize responsive design. Choose a topic suitable to a collection of similar modules, such as a database of birds, or cars, or roses (things that can be represented with photos). You can use Wikipedia for all the data and images — just make sure you attribute the information with a link on each page. The point is not to have you spending a lot of time on research — rather you should spend your time on the code. But do choose a subject that you like for the collection.

Include at least one nested list and at least one table on your three pages.

One of your pages must include a Web form. First, complete  the form project at Codecademy: Web Form (complete all seven parts). I will ask to see your badge.

After completing the full project, copy the final result as a standalone HTML document on your own hard drive. Examine how the form looks and works with the default form-element styles from your framework. Then, as needed, make enhancements to the CSS for your form to make it look beautiful.

You need to have this form page to pass for the week.

Include at least one image on every page.


If you have any questions about your assigned benchmarks, email me!