Introduction to HTML and CSS Coding Part 1

A well-designed website provides customers with information about a company, details on how to find or contact them, and the ability to make purchases and place orders. Businesses of all sizes can use websites to help drive traffic, and to reach more customers than ever before.

The basis of many webpages – a collection of webpages form a website — are the HTML and CSS computer programming languages. Learning how to use these languages, which are used to build and style the content of a webpage, is an important step to creating your own well-designed webpages.

Course Topics:

Lesson 1: Getting Started with HTML

TOPIC A: HTML Basics

• HTML – Background Information
• Anatomy of an HTML Tag
• Getting Started
• Activity 1-1: Inspecting a Webpage

TOPIC B: Basic Webpage Elements

• The Heading Tag
• Paragraph and Break Tags
• Basic Text Formatting Tags
• Activity 1-2: Using HTML to Add Basic Elements

TOPIC C: Creating Lists

• Ordered Lists
• Unordered Lists
• List Items
• Activity 1-3: Creating an HTML List
• Summary
• Review Questions

Lesson 2: Doing More with HTML

TOPIC A: Images in HTML

• The Image Tag
• Defining an Image Source
• Defining Alternative Text for the Image
• Image Sizing
• Activity 2-1: Adding an Image in HTML

TOPIC B: Links in HTML

• Linking to Another Webpage
• Internal Links
• Activity 2-2: Adding a link

TOPIC C: Tables in HTML

• Breakdown of a Table in HTML
• Table Header Row
• Table Data Rows
• Activity 2-3: Creating an HTML Table
• Summary
• Review Questions

Lesson 3: Getting Started with CSS 

TOPIC A: Basics of CSS 

• CSS: Cascading Style Sheets 

• The <style> Tag 

• CSS Typography and Hierarchy 

• Activity 3-1: Creating a Styling Area Using the <style> Tag 

TOPIC B: CSS Color 

• Changing the Color of a Webpage Element 

• Color Names in CSS 

• RGB Color System 

• Hexadecimal Color System 

• Background Color 

• Activity 3-2: Adding CSS Colors in a Variety of Ways 

TOPIC C: Using Additional CSS Identifiers 

• Using ID Names in CSS 

• Using Class Names in CSS 

• Activity 3-3: Using an ID Name for Styling 

• Summary 

• Review Questions 

Lesson 4: Styling Text with CSS 

TOPIC A: Font Families 

• What is a Font? 

• Using the Font-Family Property 

• Serif vs Sans-serif 

• Font Names 

• Additional Font Types 

• Font Backups 

• Activity 4-1: Changing the Font Family in CSS 

TOPIC B: Font Size 

• The Font-Size Property 

• Pixels 

• EMs 

• Activity 4-2: Changing the Font Size of Text 

TOPIC C: More CSS Text Properties 

• The Font-Style Property 

• The Font-Weight Property 

• The Line-Height Property 

• The Text-Align Property 

• Activity 4-3: Customizing Text Using Additional Properties 

TOPIC D: Font Shorthand 

• CSS Shorthand 

• CSS Shorthand for Fonts 

• Activity 4-3: Using the CSS Font Shorthand in Practice 

• Summary 

• Review Questions 

Lesson 5: Extended Styling Techniques using HTML and CSS 

TOPIC A: Grouping Elements 

• What is a Grouping Element? 

• Inline vs Block Formatting 

• Activity 5-1: Using the <span> and <div> Tags to Group Webpage Elements 

TOPIC B: Div Dimensions 

• Adjusting the Width of a Div 

• Adjusting the Height of a Div 

• Overflow 

• Activity 5-2: Adjusting the Style of a Div Block 

TOPIC C: The CSS Box Model 

• The CSS Box Model 

• CSS Margins 

• CSS Borders 

• CSS Padding 

• Activity 5-3: Adjusting the Style of a Div Block 

• Summary 

• Review Questions