Web 1

A Hands-On Course in Programming and Web Development for Beginners

Are you interested in exploring computer programming and web development?

This course is designed for people who have no programming experience. It is not a comprehensive course, nor is it intensive (unlike so many introductory courses in programming!!!). Instead, the course is designed to give you a quick introduction to programming fundamentals and web development. If you've ever wondered what it would be like to be a web developer or software engineer, and you want to see if it's something you might be interested for a career, then this course is for you! Once you complete the course, you will have a solid understanding of programming fundamentals, and you'll be in a good position to learn any programming language.

For more information about the course, see the course notes.

HTML

  1. Hello World! - Create your first web page in just a few minutes!
  2. Getting Set Up for the Course
  3. Overview of HTML
  4. Block and Inline Elements
  5. Self-Closing Tags
  6. Attributes
  7. Doing the Worksheets
  8. Lists
  9. Relationships
  10. Hyperlinks
  11. Images and Video
  12. Tables
  13. Forms
  14. Odds and Ends
  15. Semantic Layout Elements

After finishing the HTML unit, you could complete step 1 of the final project.

CSS

  1. Overview of CSS
  2. Selectors
  3. Layout Activity
  4. Fonts and Colors
  5. Inheritance and Specificity
  6. The CSS Box Model
  7. Flexbox
  8. Absolute Positioning
  9. OPTIONAL: CSS Positioning
  10. Media Queries

After finishing the CSS unit, you could complete steps 2 and 3 of the final project.

JavaScript

  1. Introducing JavaScript
  2. Variables and Data Types
  3. The Coding Problems
  4. 3 Ways to Embed JavaScript Code into a Web Page
  5. Functions
  6. The Debugger
  7. Adding Comments
  8. IF Statements
  9. Operators
  10. More on Functions, IF Statements and Operators
  11. Variable Scope
  12. Objects
  13. Methods
  14. DOM Objects
  15. Arrays
  16. Loops
  17. More on Loops
  18. Events (and Handling Them)
  19. Create an Image Gallery (from scratch!)

Final Project

  1. Step 1 - Creating the HTML for the home page
  2. Step 2 - Styling the home page with CSS
  3. Step 3 - Making the home page 'responsive'
  4. Step 4 - Adding blog pages to the web site
  5. Step 5 - Adding an image gallery page

Course Notes