HTML/CSS | Coding For Kids

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

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

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