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. Type it. Play with it. Practice.

By Monday, Feb. 23, 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 lot of unnecessary use of header, for example, 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. My badges are here. You will show me your badges!

Step 2: Your Assignments

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

The three assigned readings (see the Course Schedule) are for EVERYONE to read.

Student Type 1:

You need an HTML review. Complete ALL of these Codecademy exercises — 12 sections, each with multiple exercises. There are little projects in each section — complete ALL projects also. Complete every section shown on this page, and make sure you get your badges for completed work:

HTML & CSS

The first exercises are easy and you’ll breeze through them. Later exercises require you to READ MORE and think more. TAKE NOTES throughout the exercises to help you on the QUIZ.

Your benchmark for Week 6 is to complete all of those exercises. Make sure you are logged in when you are working so that Codecademy saves your work for each section.

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 (HTML & CSS) and complete only the CSS sections (there are 6 CSS sections, including the little projects). Start with CSS: An Overview.

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:

  1. One font for the H1 heading,
  2. Another font for a large-font introduction paragraph after the H1, and
  3. A third font 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 all CSS in the separate CSS file. You may show this to me on your laptop (you do not need to upload it to a server).

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. There is an assigned reading this week that will help you understand this.

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! I don’t want to see a copy of the Codecademy resume. Make it your own. Your resume must have a header, footer, sidebar and main section. Colors and fonts are your choice.

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. I expect to see MORE than just what you can copy from Codecademy.

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

Advertisements