CS 180: Introduction to HTML and CSS

In this course, you'll explore the basic structure of a web application, & how a web browser interacts with a web server towards the end. You'll also gain an introductory understanding of HTML, CSS, and using an an integrated PHP/MySQL environment.

Enroll Today to Save Tuition

Course Curriculum

1. Ch 1.1 Hypertext Markup Language (HTML): Definition & History
2. What Is HTML?
3. A Glance Back
4. HTML Code
5. Lesson Summary
6. Quiz 1.1
1. Introduction
2. What is the Internet?
3. History of the Internet
4. Internet Protocol (IP) Address
5. Internet Service Provider
6. Process for Retrieving a Web Page
7. Lesson Summary
8. Quiz 1.2
1. Introduction
2. HTML
3. Web Design Software
4. Cascading Style Sheets
5. Lesson Summary
6. Quiz 1.3
1. Introduction
2. Definition of a Domain
3. Characteristics of a Good Domain Name
4. Domain Name System
5. Subdomain
6. Rules Governing the Formation of Domain Names
7. Purpose And Function of Domains
8. Parts of Domain Name Syntax
9. Procedure for Acquiring a Domain Name
10. Differences Between Domain Names, Websites, And URLs
11. Lesson Summary
12. Frequently Asked Questions
13. Quiz 1.4
1. Introduction
2. What Is Markup Language?
3. Markup Languages Over the Years
4. Browser Battles
5. Lesson Summary
6. Qui 1.5
1. Introduction
2. Definition of an HTML Document
3. Types of HTML
4. Lesson Summary
5. Quiz 1.6
1. Introduction
2. Setting Up a Coding Environment for HTML/CSS
3. Follow-Up Questions
1. Ch 2.1 HTML Document Types & Elements: Purpose & Examples
2. Document Type Definition - DTD
3. The Purpose of , , Elements
4. Summary
5. Quiz 2.1
1. Introduction
2. Structural & Semantic Markup
3. Lesson Summary
4. Quiz 2.2
1. Introduction
2. HTML Formatting Tags
3. How to View the Source for any HTML Web Page
4. Summary
5. Quiz 2.3
1. Introduction
2. Definition of a List in HTML
3. Lesson Summary
4. Frequently Asked Questions
5. Quiz 2.4
1. Introduction
2. Comments in HTML
3. Character Entities
4. Summary
5. Quiz 2.5
1. Introduction
2. Web Page Layout
3. HTML Div Tag
4. Header & Footer Tag
5. The Nav Tag
6. Lesson Summary
7. Quiz 2.6
1. Introduction
2. Lesson Overview & Knowledge Required
3. Program Code
4. Required HTML Elements
5. Code Application
6. Division Section
7. Code Application: Final Code
8. Follow-up Questions
1. Ch 3.1 Images in HTML: Placement & Location
2. Image Element
3. The SRC Attribute
4. The ALT Attribute
5. The HEIGHT and WIDTH Attributes
6. Absolute vs. Relative URLs
7. Directory Paths
8. Image Copyrights
9. Lesson Summary
10. Quiz 3.1
1. Introduction
2. Adjusting Images in HTML
3. Lesson Summary
4. Quiz 3.2
1. Introduction
2. Image File Type
3. Optimizing Images
4. Adding an Image With a Border
5. Setting Background Image With HTML
6. Lesson Summary
7. Quiz 3.3
1. Lesson Overview & Knowledge Required
2. Program Code
3. HTML Boilerplate
4. Using the tag
5. Using background-image
6. Follow-up questions!
7. Lesson Summary
1. Ch 4.1 Links, Hyperlinks & Blank Targeting in HTML: Use & Examples
2. Links and Hyperlinks in HTML
3. URL
4. Constructing a Hyperlink
5. Same Page Anchors
6. Email Hyperlinks
7. Blank Targeting
8. Lesson Summary
9. Quiz 4.1
1. Introduction
2. HTML Table basics
3. Lets's get creative
4. HTML tables may not always be advisable
5. Summary
6. Quiz 4.2
1. Introduction
2. What is HTML Validation and Why Do It?
3. Some HTML Grammar Rules
4. Browsers Are Too Tolerant
5. Troubleshooting Methods
6. HTML Markup Validation
7. Smart Text or Code Editors
8. Limitations to Validation
9. Lesson Summary
10. Quiz 4.3
1. Lesson Overview & Prior Knowledge Required
2. Important Notes
3. Lesson Exercise Code
4. Exercises
5. Lesson Summary
1. Ch 5.1 HTML Forms & Submission: Overview & Example
2. HTML Forms
3. Method Attribute
4. Action Attribute
5. Lesson Summary
6. Quiz 5.1
1. Introduction
2. User Input
3. Lesson Summary
4. Quiz 5.2
1. Introduction
2. Radio Buttons
3. Checkboxes
4. Dropdown Lists
5. Lesson Summary
6. Quiz 5.3
1. Introduction
2. Buttons
3. Labels
4. Hidden Fields
5. Lesson Summary
6. Quiz 5.4
1. Introduction
2. HTML Forms
3. File Upload
4. Grouping the Drop-Down List
5. Lesson Summary
6. Quiz 5.5
1. Lesson Overview & Knowledge Required
2. Prerequisites
3. Program Code
4. Code Application
5. Follow-Up Questions
1. Ch 6.1 Cascading Style Sheets (CSS): Definition, Types & Examples
2. What Is CSS?
3. Three Types of CSS
4. CSS Instructions
5. Lesson Summary
6. Quiz 6.1
1. Introduction
2. CSS Box Model
3. Lesson Summary
4. Quiz 6.2
1. Introduction
2. CSS Attributes
3. Commonly-Used CSS Attributes
4. Lesson Summary
5. Quiz 6.3
1. Introduction
2. HTML Style & CSS
3. Style Precedence in HTML
4. Lesson Summary
5. Frequently Asked Questions
6. Quiz 6.4
1. Introduction
2. External Style Sheets
3. Lesson Summary
4. Quiz 6.5
1. Introduction
2. Why the Need for CSS with HTML
3. CSS & HTML Knowledge Overview
4. Using CSS
5. Code Application
6. Follow-Up Questions
1. Ch 7.1 Creating & Using CSS Classes: Examples & Application
2. CSS Classes
3. Uses of CSS Class Selectors
4. Multiple Classes for an Element
5. Grouping Selectors
6. Lesson Summary
7. Quiz 7.1
1. Introduction
2. Selector Specific Classes
3. Name Specific CSS
4. Lesson Summary
5. Quiz 7.2
1. Introduction
2. Pseudo-Classes
3. Commonly Used Pseudo-Classes
4. Lesson Summary
5. Quiz 7.3
1. Lesson Overview & Knowledge Required
2. Program Code
3. Code Application
4. Using the CSS Classes
5. Follow-Up Questions
1. Ch 8.1 HTML 5: Overview & Uses
2. Use of HTML 5
3. New Elements
4. Multimedia Improvements
5. New API's
6. HTML Drag and Drop
7. Web Workers
8. Local Storage
9. Lesson Summary
10. Quiz 8.1
1. Introduction
2. Audio and Video
3. HTML5 Video Support
4. HTML5 Audio Support
5. Lesson Summary
6. Quiz 8.2
1. Introduction
2. HTML 5
3. Browser Compatibility
4. Lesson Summary
5. Quiz 8.3
1. Introduction
2. Vector
3. SVG
4. Embedding
5. HTML
6. SVG file
7. Quiz 8.4
1. Introduction
2. Make Your Webpages Awesome, the HTML5 Way!
3. Lesson Summary
4. Quiz 8.5
1. Introduction
2. HTML 5 Canvas Advanced Features
3. Creating the Canvas
4. Drawing with JavaScript
5. Code Sequence
6. Creating Gradients
7. Rotating the Canvas
8. Drop Shadows
9. Filling Shapes
10. The Final Product
11. Lesson Summary
12. Quiz 8.6
1. Introduction
2. CSS Transformations
3. Multiple transformations
4. Browser Specific property
5. Lesson Summary
6. Quiz 8.7
1. Lesson Overview & Knowledge Required
2. Program Code
3. Audio
4. Scalable Graphics
1. Assignment
2. Final Exam

About this course

286 lessons
1750+ Transfer Colleges
ACE & NCCRS Approved
Globally Recognized

Answers You Didn't Know You Needed!

General Questions

Is there any time commitment we have to give?

With UPI, you determine your own level of time commitment. You can move through coursework quickly or slow down your pace.
Are there exams? How is the course grading done?
YES, there are exams—held online on our platform and are proctored. Your course grade distribution is:

25% Attendance

25% Quiz

25% Assignments

25% Final Exam

Content Questions

How to check if your university will accept credits from UPI study?

To ensure your UPI Study courses transfer to your university, check two things:

1) Is your university listed? If it's one of the 1,500 universities listed with NCCRS, you're all set.

OR

2) Check your university's credit policy. If it says they accept credits from "regionally accredited" universities, you're good to go! As long as you meet one of these criteria, your courses should transfer without a hitch.

Check the list of colleges here.

Membership Questions

Will there be hand holding to help transfer courses?

Yes, that is what differentiates UPI. With each student their advisor will guide them on how to move forward.

Ch 1. Introduction to HTML

Ch 1.2 The Internet: IP Addresses, URLs, ISPs, DNS & ARPANET

Ch 1.3 Hypertext Markup Language: Software to Create Web Pages

Ch 1.4 What is a Web Domain? - Definition & Explanation

Ch 1.5 Markup Language: Definition & Examples

Ch 1.6 What is an HTML Document? - Structure, Types & Examples

Ch 1.7 Practical Application for HTML & CSS: Setting Up a Coding Environment

Ch 2. HTML Elements & Lists

Ch 2.2 Headings, Paragraphs, Line Breaks & Indents in HTML: Use & Examples

Ch 2.3 Formatting Text With HTML

Ch 2.4 Ordered, Unordered & Description Lists in HTML: Definition & Examples

Ch 2.5 Special Characters & Comments in HTML: Types & Uses

Ch 2.6 DIV, Header, Nav & Footer in HTML: Definition & Examples

Ch 2.7 Practical Application for HTML & CSS: Creating a Basic Web Page

Ch 3. Images in HTML

Ch 3.2 Adjusting Images in HTML: Procedures & Examples

Ch 3.3 Images in HTML: Types, Optimization, Borders & Page Background

Ch 3.4 Practical Application for HTML & CSS: Adding Images to Web Pages

Ch 4. HTML Links & Tables

Ch 4.2 Creating Tables in HTML: Purpose, Syntax & Examples

Ch 4.3 Validating HTML Pages: Error Types & Troubleshooting

Ch 4.4 Practical Application for HTML & CSS: Creating a Table of Links

Ch 5. User Interaction with HTML Forms

Ch 5.2 Adding Text Fields for User Input to HTML Forms

Ch 5.3 Adding Radio Buttons, Checkboxes & Lists for User Input to HTML Forms

Ch 5.4 Adding Buttons, Labels & Hidden Fields to HTML Forms

Ch 5.5 How to Send E-Mail, Upload Files & Group Fields Using HTML Forms

Ch 5.6 Practical Application for HTML & CSS: Building HTML Forms

Ch 6. Styling Web Pages with CSS

Ch 6.2 CSS Box Model: Definition & Components

Ch 6.3 Cascading Style Sheets (CSS) Attributes: Definition & Examples

Ch 6.4 Inline Styles in CSS: Definition & Examples

Ch 6.5 External Style Sheets in CSS: Definition & Examples

Ch 6.6 Practical Application for HTML & CSS: Styling Web Pages

Ch 7. Advanced Styling Using CSS

Ch 7.2 Selector-Specific Class Definitions & Name-Specific CSS: Purpose & Examples

Ch 7.3 Pseudo Classes in CSS: Definition & Examples

Ch 7.4 Practical Application for HTML & CSS: Creating & Using CSS Classes

Ch 8. Web Development & HTML 5

Ch 8.2 Adding Audio & Video to Pages With HTML 5: Implementation & Examples

Ch 8.3 HTML 5 Document Structure: Elements & Examples

Ch 8.4 Using HTML 5 to Create Scalable Vector Graphics Files

Ch 8.5 The HTML 5 Canvas: Definition, Purpose & Examples

Ch 8.6 Advanced Canvas Features in HTML: Use & Examples

Ch 8.7 Transformations & Rotations in CSS & HTML 5: Definition & Examples

Ch 8.8 Practical Application for HTML & CSS: Adding Multimedia & Graphics to a Web Page

Final Exam & Assignment

About this course

Answers You Didn't Know You Needed!