Week 6 assignments: Getting solid with HTML and CSS

You will receive an email from me that tells you whether you are Student Type 1, 2 or 3. These “types” are explained below. Your type determines your benchmark for Week 6.

As always, work for one hour every day to build your skills. Even though we are not learning Python this week, the same principles for learning (really learning) code apply to HTML and CSS also.

By Monday, Feb. 10, I’d like you all to be comfortable with everything on this list: Checklist for your HTML5 and CSS knowledge.

Everyone: Review the proper use of HTML5 tags (article, aside, nav, section, footer). Here’s a good, brief post about that. I saw a number of improper uses of these tags in the “Abe” exercise.

Step 1: Codecademy Setup

Create an account at Codecademy (it’s free).

  1. Use your real first and last name.
  2. Upload a photo of your face.
  3. Add your location (Gainesville, Florida USA).
  4. Enable EVERYONE to view your profile (this is under “edit account settings”).

My profile is here.

Step 2: Your Assignments

I will tell you which type I have assigned to you, based on the in-class “Abe” assignment.

Student Type 1:
You need an HTML review. Complete ALL of these Codecademy exercises (including the HTML and CSS sections) — there are 6 sections, each with multiple exercises, including a project in each section (complete all projects):

Web Fundamentals

Your benchmark for Week 6 (Feb. 10) is to complete all of those, including all six projects. Make sure you are logged in when you are working so that Codecademy saves your work for each section.

You should KNOW this stuff. It is basic, and it is essential if you want to design and produce online content.

Student Type 2:
Your HTML seems solid but your CSS needs work. You have two tasks to complete this week.

Task 1: Go to the same link at Codecademy (Web Fundamentals) and complete only the CSS sections (there are 3 CSS sections, plus 3 projects). Start with CSS: An Overview. Complete all three CSS projects too.

Task 2: After completing those 3 CSS sections and projects, move on to:

Google Web Fonts

Using separate CSS and HTML files, produce an 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 the 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.

Student Type 3:
Your HTML and CSS are already fairly solid. You have three tasks to complete this week.

Task 1: Complete the resume project at Codecademy: Build a Resume (complete all eight parts). Copy the final result as a standalone HTML document and a standalone CSS document on your own hard drive. You will need to make enhancements to what the Codecademy project spells out — and of course, use your own resume information!

Task 2: The same as Task 2 under Student type 2. It’s all about learning to use Google Web fonts.

Task 3: Complete 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.

If you have any questions, you can post them here (if they are general), or email me (if they are specific to you).