HTML/CSS

Overview:

This unit covers the HTML and CSS coding elements and syntax that are essential to building any website.

By the end of this unit, students will be able to:

plan, code, edit and display HTML websites
apply principles of design, layout, and typography to enhance web page communication.
create and modify internal and external style sheets to format the styling of text, layout tables, content flow, positioning of objects.

Before you teach...

If you are not already familiar and/or comfortable with the coding topics in this unit, we recommend watching and practicing HTML and CSS via the videos and links below.

HTML Tutorial - YouTube Video
Khan Academy - Intro to HTML
Khan Academy - Welcome to CSS

Emphasize and cultivate page design that is similar to professional pages. Students will need a firm understanding of these concepts as we proceed to the other units. At a bare minimum, understanding the use of html tags, id and class

Teaching Sequence

(Pacing is based on a block schedule of 90 minutes/day for a 90 day course)

First 5 to 10 Days:

Have students sign up to Khan Academy and work through the units on HTML and CSS

Days 10 through 20:

When students are more comfortable with the Khan Academy content, transition to the use of Notepad++

Overview of Notepad++
- Creating and saving files. Focus on folder and file structure: organization is important and will save you headaches down the road!
- Setup the preferences:
  - view->word wrap
  - settings->preferences
    - New Document: default language HTML
    - Default Directory: Have students set to a web design folder for your class in their Documents folder.
    - Auto-Completion: put a check in the html/xml close tag box
(Topic 1 below) Guide students to make a basic template that they can use every time they open a new page
(Topic 2 below) Create a basic index page for a dog website together with the students. Students will then link 3 other pages that they will create in order to demonstrate their understanding of the basic HTML tags and CSS styles that you introduce.
Reinforce the css box model. Demonstrate the use of the inspect tool (right click on the page and choose inspect).
Test: Assess students on their grasp of the basic concepts.
Div Flags: Introduce the "div" tag. Demonstrate how divs are able to provide an organization and layout to a page. Assign the "div flag" project.
Demonstrate how lists can be styled to create drop down menus. Do not allow them to use any tools from the web (We will get to that later in bootstrap).
Layouts, replicate a professional page: Show how divs are the most used tag on a modern web page in order to arrange items on a page.
- Use a site like stumbleupon.com or http://random-ize.com/random-website/ or do a google search for "random web sites" to show a variety of sites and discuss how they are laid out. Focus on how you can draw a series of rectangles aligned in various ways.
- Choose a site to replicate. This is all about placing the content around the page, not the content itself. Students may copy the words and pictures, but NOT the underlying HTML or styles.
- Try to create a site that has navigation bars, images that stretch from edge to edge, cards that layout side by side. Do not allow students to use any advanced tools like bootstrap yet. They need to struggle with applying styles to divs for a while.

Days 20 through 35:

Introduce Bootstrap by having students go to the documentation page.
- Click documentation and scroll down for the starter template which has links to files needed for bootstrap to work. A copy is linked here, but the actual website my have updated code.
- Show students around the documentation, demonstrating how to use some of the features, but allow for some free exploration of the site.
- Give students some generic text and images and give them a class period to apply as much bootstrap to the code as they can. NO CSS ALLOWED for this assignment, only bootstrap.
Travel Website: index+4 sub pages. Focus on bootstrap navigation , images, text, and cards. Pages must adapt to any size screen. Do as much with bootstrap as you can before you try to add other styles. If you need to use a style, you might need to use !important; next to the style for it to over-ride a bootstrap setting.

1 - Basic HTML

Show students the basic skeleton of all html pages: html, head, title, body. Focus on headings, paragraphs, lists, images, links (<a> tags), and briefly, divs.

Concepts:

What is HTML?
HTML document setup
Saving .html files
HTML elements vs. attributes
- <head> What goes in the header?
- <body> What goes in the body?
  - <h1... h6> headings
  - <p> paragraphs </p>
  - <strong> <em> <u> formatting text
  - <ol> ordered list </ol>
  - <ul> unordered list </ul>
  - <a href=""> hyperlinks </a>
  - <img src=""> images
    - using a saved image vs. URL
  - <table> table with rows/columns

Student Resources:

HTML Periodic Table - clickable by type of tag
HTML Notes

2 - Cascading Style Sheets (CSS)

Begin with the basics:

Margin, padding, border
Color and background - show them color palettes on the web. Encourage professional color coordination. Discourage flashy neon, blinking and rotations. (I usually allow them some free play at first, but make it clear that we will be using good taste in our design).
Encourage students to explore, search the web for new styles, and to use the css documentation.

3- Focus on the DIV tag and Layouts

Div tags are used more than any other tag as a way to layout a page in sections and columns. Encourage students to plan out a web page with sketches, and to avoid simple top to bottom line by line layouts that resemble documents that they are used to writing . These lessons will help students organize pages as a layout of rectangles rather than a linear list from top to bottom.

Teacher Guides

Div Flags Project - Using div tags and styles create some common flags. This is an excellent way for students to understand how to organize sections of a page into columns and rows. Page layout is the main focus here. Some thigs to know:

By default, div tags extend to the full width of the parent container, but do not have any height. For this assignment, you will need to apply a height, width, and background style in order to see the div.
Div tags stack vertically by default. Apply a style like "inline-block" to make them line up side-by-side.
Create an outer div with the class "flag" with dimensions like 500x300. Organize the flag stripes as child divs nested in the outer flag div.

Replicate a Page Project - Show the students a professional page, such as espn.com. Students copy the content of the page, but need to create the html/css structure. The html should be founded on what you have shown them. Obviously, wholesale copy and past from the original pages html would not be allowed, and is much more advanced than students would be able to do on their own.

4- Bootstrap

The web has developed with the input of thousands of individuals, which can lead to some pretty odd and difficult code in order to do some very common things. Bootstrap can make some of those challenges a little bit easier and a little more uniform.

Teacher Guides

Play with bootstrap, and spend a class period encouraging students to play around with all of it's features. It may be helpful to give them a completely un-formatted site and tell them that they can only use bootstrap, no css, to make it look as nice as possible.

Travel Website - partially completed to give you an idea of what to expect. Best viewed on Chrome.

Student Resources

Travel Website Index:

Navbar with working links
Heading and sub heading that clearly shows the destination and alluring quote or mini-description
Well chosen and formatted banner image that stretches edge to edge (using bootstrap)
Call to action that causes the user to scroll down "below the fold"
4 cards with thoughtful and enticing descriptions and links
Well chosen images related to the content
Bootstrap is used primarily to format content, with styles only as a supplement to the bootstrap features. Because of this, the page must resize and adjust well for viewing on all devices.

Travel Site Sub Pages

The first sub page of the travel site can focus on activities, dining, lodging, history, or any other approved topic. The page must focus on providing information about the top 10 in that area;

provide easy to read and navigate display of the top 10 ranked in that area (top 10 restaurants, activities, museums, etc.)
page theme look and feel clearly sticks to the established styles on the index page
must not be a copy and paste of the index. Do not use a banner image, but rather a smaller image format. You may use cards again, but in a different layout.
bootstrap should continue to be the focus of your design. Consider using media lists, tables, cards, or some other bootstrap organization to present your top 10 lists.
embed a google map to show locations of your sites
provide links, address, phone, and a creative and informative description for each item in the list.

Finish all other pages for your travel site. You should use your established layout that you used for page 2, modified for the content.

Code Validation

Concepts

W3C Validation

Project Ideas

Project Docs

*ordered from least to most difficult

Dogs or Cats
Student Resume
Flags with divs
Restaurant Site
Club or Team
Four Seasons Site

Report abuse