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 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).  Continue reading

Get ready for Weeks 6 and 7 and our HTML, CSS review

We will move on from Python after the Week 5 meetings, quiz and problem assignment.

Next up is a review of HTML and CSS. This begins in class on Monday, Feb. 16, when I will give you an HTML-and-CSS exercise to do during class and hand in. Based on this exercise, I will assess how much you know — basically, your skill level.

Before that class, you should review your previous work with HTML and CSS so you are properly prepared to complete the in-class assignment on Feb. 16.

Read the assigned readings. These are listed under Weeks 6 and 7 on the Course Schedule. Material from the readings will be in the quizzes in these weeks.

Review the checklist (link under Week 6 on the Course Schedule) to refresh your memory.

You can also review HTML and CSS at the excellent HTML Dog website.

DO NOT rely on the W3schools website. It is not a respected resource. See W3Fools for more information and other good resources.

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!

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

Do you feel like writing code is still hard for you?

In this very amusing blog post (you must read it to the end!), by student Michelle Bu, you’ll find out how hard her first coding experience was for her:

21 Nested Callbacks

I was laughing out loud as I read it.

I’ve realized that with each piece of code I’ve written since my triangles, I’ve only gotten better at “Googling it,” debugging, and being generally competent about miscellaneous programming topics–and it’s all because I saw each and every silly project through. — Michelle Bu

So 21 months ago, she didn’t even know how to write a loop. Now she’s a Ph.D. student in computer science.

Here is her first attempt (21 months ago), and here is her new, responsive, fabulous version.

Check out Michelle’s Projects.

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!