Fundamentals of Web Development

In this course, you will learn the basics of building a website from scratch using HyperText Markup Language (HTML) and Cascading Style Sheets (CSS). You will learn about best practices, how to lay a webpage out, as well as styles, background images, CSS-based navigation, multi-column layouts, forms, and uploading files to a server via FTP.

Course Outline

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