Week 6 assignments: Getting solid with HTML and CSS

I’m going to look at your in-class assignment on Monday night or Tuesday morning (Feb. 4 or 5) and reply to your email with an assessment: Student Type 1, 2 or 3. These “types” are explained below. 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 Feb. 11, I’d like you all to be comfortable with everything on this list: Checklist for your HTML5 and CSS knowledge

Step 1:

Create an account at Codecademy (it’s free). There’s more to do — below the images.

  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.

Allow EVERYONE to view your profile

When completed, your profile should look like this (you will be showing this page in our meeting):

A Codecaemy profile page

Step 2: Your Assignments

Check your email Tuesday (Feb. 5) for an email reply from me. In it, I will tell you which type I have assigned to you, based on the in-class assignment.

Student type 1: If you can’t just sit down and write a basic HTML page, then complete ALL of these Codecademy exercises (including the CSS sections) — there are 6 sections, each with multiple exercises, including a project:

Web Fundamentals

Your benchmark for Week 6 (Feb. 11) is to complete all of those, including all six projects.

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

Student type 2: If your HTML is solid but your CSS is weak, you have two tasks to complete this week.

Task 1: Go to that same link at Codecademy (Web Fundamentals) and complete only the CSS sections (there are 3 CSS sections). 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: If your HTML and CSS are already solid — and if you understand how to use typography correctly on the Web to ensure that all users see the typefaces you intended them to see — then you have three projects to complete this week.

Your Project 1 is the resume project at Codecademy: Projecting Confidence (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!

Your Project 2 is 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.

Your Project 3 is the same as “Task 2” above, under Student type 2. It’s all about learning to use Google Web fonts.

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