Fundamentals of Web Development Training in Calgary

Who Should Attend?

1. Coding Basics: Introduction to HTML Syntax

• Headings, Paragraphs, and Body Tags
• Strong and EM Tags
• The Doctype Declaration (DTD)
• The Lang Attribute
• Meta Tag: The Unicode Character Set

2. Coding Links

• Linking to Pages Within a Website
• Linking to Other Websites
• Opening a Link in a New Browser Window

3. Adding Images

• The Image Tag and Source Attribute
• Using the Width, Height and Alt Attributes
• Using Horizontal Rule
• The Break Tag

4. Intro to Cascading Style Sheets (CSS)

• The Style Tag
• Tag Selectors
• Class Selectors
• The Class Attribute

5. The Div Tag and Basic Page Formatting

• Understanding Divisions
• Setting a Div Width
• Adding Padding Inside a Div
• CSS Background-Color
• CSS Borders
• CSS Shorthand and the DRY principle
• Content Structure with Multiple Divs
• Assigning IDs to Divs
• Adding Images
• Organizing Content Into Divs
• Tagging Headings

6. The Box Model and Background-Images

• Using ID Selectors
• The Background-Image Property
• The Box Model
• Padding and Margin Spacing
• Setting Div Width
• Setting Page Defaults for Font Styles

7. Floats and Images

• Adding Images
• Adding an Image Title
• Floating Images
• Class Selectors
• Margins

8. Links

• Anchor Tags and Relative URLs
• External Links (Using Target Attributes)
• Spambot Resistant Email Links
• Linking Within a Page (Named Anchors)

9. Styles for Links and Navigation

• Styling the Anchor Tag
• Pseudo-Classes
• Creating CSS Navigation Styles
• Using Descendent (Nested) Selectors
• Managing White-Space and Wrapping Issues

10. Shared CSS and Centering Content

• Moving Embedded Styles into an External CSS File
• Sharing Styles Across a Site
• Text-Align
• Center Divs
• Fixing "Page Shift" with Overflow-y
• Planning a Two-Column Layout

11. Two-Column Layout: Floats and Clearing

• Linking to an External Style Sheet
• Using Floats to Position Divs
• Using a Content Wrapper Div
• Clearing Floated Elements

12. More Box Model: Margins and Padding

• Margins vs. Padding
• CSS Shorthand: TRBL

13. More Practice with CSS

• Styling Anchor Tags
• Styling the Hover Pseudo-Class
• Using Descendent Selectors
• More CSS Borders
• Managing White-Space and Wrapping Issues
• Fixing Spacing Around Images
• Moving Borders with Padding

14. Fine-Tuning Lists, Paragraphs, and the Footer

• More Descendent (Nested) Selectors
• Styling Lists
• Organizing Styles

15. Using Browser Developer Tools

• Opening the DevTools in Chrome
• Editing HTML in the DevTools Elements Tab
• Enabling, Disabling and Editing CSS in the DevTools
• Using DevTools to Fine-Tune Your CSS

16. FTP Uploading to a Live Website

• What is FTP
• Using an FTP Client
• Going Live

17. Creating a Form

• The Form Tag
• The Input and Label Elements
• Name and ID Attributes
• Fieldset and Legend Elements
• Select, Option * Optgroup
• Input Types: Text, Checkbox, Radio, and Submit

18. Submitting Form Data to a Server-Side Script

• A Simple PHP Script
• Setting the Form Action
• Uploading and Testing the Form