Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Noble Desktop

Intro to HTML & CSS

via Noble Desktop

Go to class Write review

Overview

In this class, we’ll introduce you to HTML (HyperText Markup Language), the standard markup language used to create webpages.

You’ll dive in and hand-code a webpage from scratch, learning how to format paragraphs, headings, and lists. You’ll also learn how to create links, add images, and modify tags with attributes. In addition, you will learn about CSS (Cascading Style Sheets), including tag selectors, class selectors, and the class attribute.

This one-day class is the first day of our more comprehensive Web Development Level 1 class. If you find that you enjoy coding HTML and want to learn more, you can do the remainder of Web Development Level 1, and we’ll take the price of this class off that course.

Syllabus

Section 1

Coding Basics: Intro to HTML Syntax

  • The HTML, head, title, & body tags
  • Headings, paragraphs, & lists
  • The strong & em tags
  • The doctype
  • The lang attribute
  • The meta tag & the Unicode character set

Coding Links: Absolute & Relative URLs

  • Anchor tags & hrefs
  • Linking to other websites
  • Linking to pages within a website
  • Opening a link in a new browser window/tab

Adding Images

  • The break tag
  • The image tag & source attribute
  • Using the width, height, & alt attributes
  • Using horizontal rules

Intro to Cascading Style Sheets (CSS)

  • The style tag
  • Tag selectors
  • The font-size, font-family, color, & line-height properties
  • Hexadecimal color codes

Section 2

CSS Class Selectors

  • The class attribute
  • CSS class selectors
  • The span tag
  • CSS opacity

Div Tags, ID Selectors, & Basic Page Formatting

  • Dividing up content with the div tag
  • Assigning IDs to divs
  • Setting width & max-width
  • CSS background-color
  • Adding padding inside a div
  • Centering content
  • CSS borders
  • CSS shorthand & the DRY principle

Using Browser Developer Tools

  • Opening the DevTools in Chrome
  • Editing HTML in the DevTools Elements panel
  • Enabling, disabling, & editing CSS in the DevTools
  • Using DevTools to fine-tune your CSS
  • Hexadecimal shorthand

HTML5 Semantic Elements & Validating HTML

  • The outline algorithm
  • The header, nav, aside, & footer elements
  • Understanding articles & sections
  • The main element
  • The figure & figcaption elements
  • Checking for errors: validating your code

Taught by

Dan Rodney, Brian McClain, Colin Jaffe, Greyson Frazier, and Chett Tiller

Reviews

4.9 rating at Noble Desktop based on 46 ratings

Start your review of Intro to HTML & CSS

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.