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.

Continue reading


Week 7 assignments: Next steps with HTML and CSS

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

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 by Feb. 17.

Review the Checklist for your HTML5 and CSS knowledge.

Also, read the two 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 CSS style sheet. Create a brand-new CSS style sheet 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 style sheet. Use only hexadecimal codes for colors. 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. You may use Lorem Ipsum text for the paragraphs. 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).

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 wrapper div that encloses all the content in the body (on every page)

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

(c) Nested lists: These were covered in Codecademy HTML Basics II (Section 1 of 3)

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.

(d) Tables: These were covered in Codecademy HTML Basics III (Section 2 of 3)

Create two separate tables, both on one 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).
  • 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).

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

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

You have freedom with the colors you choose, the font-families, and the page layout. You may use HTML5 tags or plain old DIV tags (your choice). Each page will be different. You can choose what goes on each of the three pages, as long as you meet all the criteria listed above. You must show me three different HTML pages that all use the same CSS style sheet (and optionally an additional reset 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, PLUS  the form project at Codecademy: Web Form (complete all seven parts). 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.

Note that you can make a CSS style sheet that affects only the form elements and selectors, and use it in addition to the style sheet you use for all the other pages. By linking the form style sheet after the general style sheet 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.

Include at least one image on every page.


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

Games lead to great careers in journalism

Sisi Wei is a news apps developer at ProPublica and previously was a graphics editor at The Washington Post. She was one of our fabulous guests at Journalism Interactive here in Gainesville in February.

This blog post (open it!!) links to three Flash games she created while she was an undergrad journalism student at Northwestern. She graduated in June 2011. You can see her resume (PDF).

The point is, making games can teach you a lot! (In spring 2011, we still used Flash. Now we don’t.)

Professional Web design techniques

We’re seeing more journalism sites trying out customized article designs, like this:

WaPo cycling story - February 2013

The design for this article is responsive — try it out on your phone. Change the size of your browser window too, and see how the images and text both respond to the new width. We talked about this in class on Feb. 18.

Source code for cycling article

Naturally, you will not understand all of the code if you view source on this Web page. But you should try it. You WILL understand some of the code very well. It’s important to learn how to look at other people’s HTML and see how they use CSS and JavaScript to create their page layouts — especially an innovative layout such as this one.

I wrote a two-page document (Google Doc) to help you think about how to look at this code. Open it up and have a look.

If you are feeling ambitious, look up some of the techniques used in the cycling article design, and try them yourself!