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

Advertisements

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.

Questions?

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

Examples of interactive journalism – Week 7

To see all posts in the “Examples” series, view the category “Examples.”

Not as flashy as some previous examples, this week’s example (A can that works more like a glass, from the Boston Globe) is something you will know how to do very, very soon. Also, I like the clean, open look of the design. The interaction is almost non-existent (buttons only), but the page itself interacts, as you can see from the code shown below.

Boston Globe graphic

Notice that the part of the code shown below starts at line 298 of the HTML document (View Page Source to see for yourself).

HTML from the Boston Globe

What I want you to notice is that each of the “chapters” of the graphic is already present in the HTML when the page loads. However, you see only ONE chapter at a time. This is a basic and easy jQuery trick you will learn in the first week after Spring Break — the buttons on the page (also pure HTML) cause these different images to hide and appear.

Your Reply

Leave a comment on this post to submit your example for this week.

  • Post only ONE link.
  • Make sure your link is correct and functional.
  • Include the title or headline of the example you are linking to.
  • Write one sentence about why we should appreciate it.

Read the details and rules on the Required Work page, under the subheading “Extra credit.”

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. 18.

Review the Checklist for your HTML5 and CSS knowledge. Please note I added a section on page 4 about the “HTML5 shiv,” which is part of the HTML head.

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 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. 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: Form Is Liberating! (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.