HTML and CSS (Tutorials and CheatSheet)

Learn the basics of HTML and CSS by building a working blog website. We will mimic the styles of the popular Bootstrap front end framework. You can use the Bootstrap framework or create your own styling by hand.

CheatSheet: Free web version | Desktop version: for Mac or Windows to create or modify your own CheatSheets.

Link to HTML Introduction tutorial page

HTML Introduction

Build your first "Hello World" website. Then create the file structure and page layout of an example Blog Site. Learn the basic structure of HTML elements.

Open CheatSheet

Link to CSS and Bootstrap Introduction tutorial page

CSS and Bootstrap Introduction

Introduction to CSS. Learn where and how to place style rules in our Blog Site. Learn CSS terms. Connect to the Boostrap CDN.

Open CheatSheet

Link to Working with Colors tutorial page

Working with Colors

Add color to our Blog Site example. Learn the different color notation including named colors and hexadecimal notation. Learn Bootstrap color classes. Mimic the Bootstrap color classes in our own stylesheet.

Open CheatSheet

Link to Grid Layout tutorial page

Grid Layout

Add columns to our page layout using Bootstrap grid classes. Then code our own layout using the CSS Grid module in our stylesheet.

Open CheatSheet

Link to Spacing: Box Model and Dimensions tutorial page

Spacing: Box Model and Dimensions

Add spacing around HTML elements using margin, padding, and borders. Review the most common measurement units (px, percent, em, rem) and the box model.

Open CheatSheet

Link to Styling Text tutorial page

Styling Text

Style text including size, font-weight, line height, font, and alignment. Style headings h1-h6. Make the the styling responsive.

Open CheatSheet

Link to Working with Lists and Tables tutorial page

Working with Lists and Tables

Learn to structure and style lists and tables. Apply list tags to the navigation bar, footer, and sidebars.

Open CheatSheet

Link to Hyperlinks, including Navigation Bars tutorial page

Hyperlinks, including Navigation Bars

Use hyperlinks. Apply hyperlinks to navigation bars, footers, and sidebars. Use Bootstrap's navigation bar classes.

Open CheatSheet

Link to Working with Images tutorial page

Working with Images

Learn how to add images to your website. Add your logo. Add a favicon. Use Bootstrap icons.

Open CheatSheet

Link to Forms and Buttons tutorial page

Forms and Buttons

Create web forms. Add submit button to the form and button links.

Open CheatSheet