HTML and CSS Introduction

In this module, we will investigate basic website structure and using HTML and CSS concepts. We will learn how to build simple static websites and style our HTML using Cascading Style Sheets (CSS).

HyperText Markup Language (HTML) is a fundamental building block of the web. When HTML was first invented it was very simple. However, the modern web has added a lot of complexity to the standard. For example, the current HTML living standard pdf is (as of 2021) 1298 pages long! Compare that to the current (as of 2021) C++ standard pdf at 1448 pages long. C++ is a turing complete programming language and HTML is only a markup language. Even if you have extensive experience in HTML take some time to dive deep into the standard because there is always something you can learn 😁.

CSS (Cascading Style Sheets) is a textual language for describing how a web page is styled for visual presentation. Before CSS was invented it was common for web developers to use the <table> tag to layout websites. CSS is now the defacto standard for adding style to your pages. Check out the CSS Zen Garden for a demonstration on the power that modern CSS has!

TIP

This module will take an estimated 20 - 25 hours to complete.

Module Assignments

• Complete the textbook reading assignments that are linked in canvas
• Complete the reading quiz on canvas
• Complete project 2 on canvas
• Complete the end of module reflection on canvas(flip grid)

Important topics

• Document Structure
• Fundamental HTML Tags
• Containers
• Forms
• Widgets
• Multi-media (Audio and video)
• The <script> tag
• CSS in HTML
• Basic and Advanced Selectors
• Font and Text Properties
• The Box Model

Objectives

By the end of this module, you will be able to:

• Identify basic HTML tags and attributes and use them to create a static web page.
• Apply styles using id and class attributes.
• Use CSS selectors to select specific HTML elements for styling.