HTML/CSS for Kids

Intended Audience

  • A minimum of Grade 7 is required to do this course

What do I need?

  • If Live Online Training : A laptop, and a stable internet connection. The recommended minimum speed is around 10 Mbps.
  • If Classroom Training : If you are not brining your own laptop (recommended), please let us know so we can have one ready for you.

Certification

  • A progress report will be issued for an incomplete year
  • After all classwork is completed, and the assessments passed, a Competency Certificate will be issued

Duration

  • 6 Months (20 one hour lessons, 10 per term, one per week)
  • Crash Course This course can be crashed over a periond of 1-2 weeks full-time

Outcomes

  • Know how Web Pages are created
  • Know how to seperate content and style
  • Use web standards
  • Create great-looking web pagesr
  • Build modern layouts

One

Part 1 - Creating the HTML Foundation

  • 1. Sound HTML Foundations
  • Creating a Basic Page
  • Understanding the HTML in the Basic Page
  • Meeting Your New Friends, the Tags
  • Setting Up Your System
    • Displaying file extensions
    • Setting up your software
  • 2. It's all about Validation
  • Somebody Stop the HTML Madness!
    • XHTML had some great ideas
  • Validating Your Page
    • Aesop visits W3C
  • Using Tidy to repair pages
  • 3. Choosing your tools.
  • What’s Wrong with the Big Boys: Expression Web and Adobe
    • Dreamweaver
  • How About Online Site Builders?
  • Alternative Web Development Tools
  • Picking a Text Editor
    • Tools to avoid unless you have nothing else
    • Suggested programmer’s editors
    • My Personal Choice: Komodo Edit
    • Other text editors
    • The bottom line on editors
  • Finding a Good Web Developer’s Browser
    • A little ancient history
    • Overview of the prominent browsers
    • Other notable browsers
    • The bottom line in browsers.
  • 4. Managing Information with Lists and tables
  • Making a List and Checking It Twice
    • Creating an unordered list
    • Creating ordered lists
    • Making nested lists
    • Building the definition list
  • Building Tables
    • Defining the table
    • Spanning rows and columns
    • Avoiding the table-based layout trap
  • 5. Making connections with links
  • Making Your Text Hyper
    • Introducing the anchor tag
    • Comparing block-level and inline elements
    • Analyzing an anchor
    • Introducing URLs
  • Making Lists of Links
  • Working with Absolute and Relative References
    • Understanding absolute references
    • Introducing relative references
  • 6. Adding Images, Sound and Video
  • Adding Images to Your Pages
    • Linking to an image
    • Adding inline images using the img tag
    • src (source)
    • height and width
    • alt (alternate text)
  • Choosing an Image Manipulation Tool
    • An image is worth 3.4 million words
    • Introducing IrfanView
  • Choosing an Image Format
    • BMP
    • JPG/JPEG
    • GIF
    • PNG
    • SVG
    • Summary of web image formats
  • Manipulating Your Images
    • Changing formats in IrfanView
    • Resizing your images
    • Enhancing image colors
    • Using built-in effects
    • Other effects you can use
    • Batch processing
  • Working with Audio
    • Adding video
  • 7. Creating Forms
  • You Have Great Form
    • Forms must have some form
  • Building Text-Style Inputs
  • Making a standard text field
  • Building a password field
    • Making multi-line text input
  • Creating Multiple Selection Elements
    • Making selections
    • Building check boxes
    • Creating radio buttons
  • Pressing Your Buttons
    • Making input-style buttons
    • Building a Submit button
    • It’s a do-over: The Reset button
    • Introducing the button tag
  • New form input types
    • date
    • time
    • datetime
    • datetime-local
    • week
    • month
    • color
    • number
    • range
    • search
    • email
    • tel
    • url

Two

Part 2 - Styling with CSS

  • 1. Coloring your world
  • Now You Have an Element of Style
    • Setting up a style sheet
    • Changing the colors
  • Specifying Colors in CSS
    • Using color names
    • Putting a hex on your colors
    • Coloring by number
    • Hex education
    • Using the web-safe color palette
  • Choosing Your Colors
    • Starting with web-safe colors
    • Modifying your colors
    • Doing it on your own pages
    • Changing CSS on the fly
  • Creating Your Own Color Scheme
    • Understanding hue, saturation, and lightness
    • Using HSL colors in your pages
    • Using the Color Scheme Designer
    • Selecting a base hue
    • Picking a color scheme
  • 2.Styling text
  • Setting the Font Family
    • Applying the font-family style attribute
    • Using generic fonts
    • Making a list of fonts
  • The Curse of Web-Based Fonts
    • Understanding the problem
    • Using Embedded Fonts
    • Using images for headlines
  • Specifying the Font Size
    • Size is only a suggestion!
    • Using the font-size style attribute
    • Absolute measurement units
  • Relative measurement units
  • Determining Other Font Characteristics
    • Using font-style for italics
    • Using font-weight for bold
    • Using text-decoration
    • Using text-align for basic alignment
    • Other text attributes
    • Using the font shortcut
    • Working with subscripts and superscripts
  • 3. Selectors: Coding with Class and Style
  • Selecting Particular Segments
    • Defining more than one kind of paragraph
    • Styling identified paragraphs
  • Using Emphasis and Strong Emphasis
  • Modifying the Display of em and strong
  • Defining Classes
    • Adding classes to the page
    • Using classes
    • Combining classes
  • Introducing div and span
    • Organizing the page by meaning
    • Why not make a table?
  • Using Pseudo-Classes to Style Links
    • Styling a standard link
    • Styling the link states
    • Best link practices
  • Selecting in Context
  • Defining Styles for Multiple Elements
  • Using New CSS3 Selectors
    • attribute selection
    • not
    • nth-child
    • Other new pseudo-classes
  • 4. Borders and backgrounds
  • Joining the Border Patrol
    • Using the border attributes
    • Defining border styles
    • Using the border shortcut
    • Creating partial borders
  • Introducing the Box Model
    • Borders, margin, and padding
    • Positioning elements with margins and padding
  • New CSS3 Border Techniques
    • Image borders
    • Adding Rounded Corners
    • Adding a box shadow
  • Changing the Background Image
    • Getting a background check
    • Solutions to the background conundrum
  • Manipulating Background Images
    • Turning off the repeat
    • Using CSS3 Gradients
  • Using Images in Lists
  • 5. Levels of CSS
  • Managing Levels of Style
    • Using local styles
    • Using an external style sheet
  • Understanding the Cascading Part of Cascading Style Sheets.
    • Inheriting styles
    • Hierarchy of styles
    • Overriding styles
    • Precedence of style definitions
  • Managing Browser Incompatibility
    • Coping with incompatibility
    • Making Internet Explorer–specific code
    • Using a conditional comment with CSS
    • Checking the Internet Explorer version
    • Using a CSS reset
  • 6. CSS Special Effects
  • Image Effects
    • Transparency
    • Reflections
  • Text Effects
    • Text stroke
    • Text-shadow
  • Transformations and Transitions
    • Transformations
    • Three-dimensional transformations
    • Transition animation
    • Animations

Three

Part 3 -Building Layouts with CSS

  • 1. Fun with the fabulous float
  • Avoiding Old-School Layout Pitfalls
    • Problems with frames
    • Problems with tables
    • Problems with huge images
    • Problems with Flash
  • Introducing the Floating Layout Mechanism
    • Using float with images
    • Adding the float property
  • Using Float with Block-Level Elements
    • Floating a paragraph
    • Adjusting the width
    • Setting the next margin
  • Using Float to Style Forms
    • Using float to beautify the form
    • Adjusting the fieldset width
    • Using the clear attribute to control page layout
  • 2. Building Floating page Layouts
  • Creating a Basic Two-Column Design
    • Designing the page
    • Building the HTML
    • Using temporary background colors
    • Setting up the floating columns
    • Tuning up the borders
    • Advantages of a fluid layout
    • Using semantic tags
  • Building a Three-Column Design
    • Styling the three-column page
    • Problems with the floating layout
    • Specifying a min-height
    • Using height and overflow
  • Building a Fixed-Width Layout
    • Setting up the HTML
    • Fixing the width with CSS
  • Building a Centered Fixed-Width Layout
    • Making a surrogate body with an all div
    • How the jello layout works
    • Limitations of the jello layout
  • 3. Styling Lists and Menus
  • Revisiting List Styles
    • Defining navigation as a list of links
    • Turning links into buttons
    • Building horizontal lists
  • Creating Dynamic Lists
    • Building a nested list
    • Hiding the inner lists
    • Getting the inner lists to appear on cue
  • Building a Basic Menu System
    • Building a vertical menu with CSS
    • Building a horizontal menu
  • 4. Using alternative positioning
  • Working with Absolute Positioning
    • Setting up the HTML
    • Adding position guidelines
    • Making absolute positioning work
  • Managing z-index
    • Handling depth
    • Working with z-index
  • Building a Page Layout with Absolute Positioning
    • Overview of absolute layout
    • Writing the HTML
    • Adding the CSS
  • Creating a More Flexible Layout
    • Designing with percentages
    • Building the layout
  • Exploring Other Types of Positioning
    • Creating a fixed menu system
    • Setting up the HTML
    • Setting the CSS values
  • Flexible Box Layout Model
    • Creating a flexible box layout
    • Viewing a flexible box layout
    • … And now for a little reality
  • Determining Your Layout Scheme
Back to top