Learn to Code HTML & CSS

Learn to Code HTML & CSS is a simple and comprehensive training dedicated to helping beginners learn HTML and CSS. Outlining the fundamentals, this training works through all common elements of front-end design and development.

Course Content

  • What are HTML and CSS?
  • Understanding Common HTML Terms
    1. Elements
    2. Tags
    3. Attributes
  • Setting up the HTML Document Structure
  • Add JavaScript to your WebPage
  • In Practice
  • Understanding Common CSS terms
    1. Selectors
    2. Properties
    3. Values
  • Working with Selectors
  • Using CSS Resets
 
 
  • Semantics Overview
  • Identifying Divisions & Spans
  • Using Text-Based Elements
  • Building Structure
  • Creating Hyperlinks
 
  • The Cascade
  • Calculating Specificity
  • Combining Selectors
  • Layering Styles with Multiple Classes
  • Common CSS Property Value
 
  • How are Elements Displayed?
  • What is the Box Model?
  • Working with Box Model
  • Developer Tools
 
  • Positioning with Floats
  • Positioning with Inline-Block
  • Creating Reusable Layouts
  • Uniquely Positioning Elements
 
 
  • Adding Colors to Text
  • Changing Font Properties
  • Applying Text Properties
  • Using Web-Safe Fonts
  • Embedding Web Fonts
  • Including Citations & Quotes
 
  • Adding a Background Color
  • Adding a Background Image
  • Designing Gradient Backgrounds
  • Using Multiple Background Images
  • Exploring New Background Properties
 
 
  • Unordered Lists
  • Ordered Lists
  • Description Lists
  • Nesting Lists
  • List Item Styling
  • Horizontally Displaying List
 
  • Adding Images
  • Adding Audio
  • Adding Video
  • Adding Inline Frames
  • Semantically Identifying Figures & Captions
 
  • Initializing a Form
  • Text Fields & Textareas
  • Multiple Choice Inputs & Menus
  • Form Buttons
  • Other Inputs
  • Organizing Form Elements
  • Form & Input Attributes
  • Login Form Example
 

HTML coding Practice

As pages grow, managing HTML can become quite a task. Thankfully there are a few quick rules that can help us keep our syntax clean and organized. These include the following:

  • Use lowercase letters within element names, attributes, and values
  • Indent nested elements
  • Strictly use double quotes, not single or completely omitted quotes
  • Remove the forward slash at the end of self-closing elements
  • Omit the values on Boolean attributes

Observing these rules will help keep our code neat and legible. Looking at the two sets of HTML here, the good code is easier to digest and understand.