HTML and CSS Intro

Students will learn to design webpages and HTML emails whilst formatting the content and layout using Cascading Style Sheets (CSS).


Target Audience:

This course is aimed at anyone looking to learn HTML and CSS to build webpages. No prior experience of HTML or CSS is required.


Setting Up Shop

  • The Basic Tools You Need
  • Windows v Mac
  • Beyond the Basic Tools
  • Creating a spot for your Web site

Your First Web Pages

  • Anatomy of a Web Page
  • Viewing the Source Code
  • HTML Element
  • Head and Title Elements
  • Meta and other Head Elements
  • Body Element
  • Paragraph Element
  • List Elements
  • Commenting and Symbols
  • Building your Homepage
  • Linking between Pages
  • The blockquote
  • The Cite Element
  • h3 and em

Adding Some Style

  • What is CSS?
  • Inline Styles
  • The span Element
  • Embedded Styles
  • External Style Sheets
  • Building a Style Sheet
  • Stylish Headings
  • Mix of Styles
  • Contextual Selectors
  • Group Styles Class Selectors
  • Styling Partial Text using Span

Shaping Up with CSS

  • Block-level Elements vs Inline Elements
  • Sizing Up the Blocks
  • Adding Borders to Block-level Elements
  • Shaping and Sizing our Site
  • Positioning Elements Anywhere you Like
  • Other Layout Options

Using Images on your Web Site

  • Inline Images GIF vs JPG vs PNG
  • Transparency
  • Adding Image Gallery
  • Basic Image Editing
  • Filling the Gallery
  • Sourcing Images for Web Site
  • Background Images in CSS

Table for Organizing Data

  • What is a Table?
  • Anatomy of a Table?
  • Styling the Table?
  • Making the Tables Accessible
  • Advanced Tables

Forms to Interact with Audience

  • Anatomy of a Form
  • A Simple Form The Building Blocks of a Form
  • Building a Contact Us
  • Page Processing the Form

HTML Emails

  • Plain Text Versus HTML Email
  • HTML Email Design Considerations
  • Building Your HTML Email Template
  • Using CSS in HTML Email
  • Adding Images To Your HTML Email
  • Testing Your HTML Email Template
  • Other Guidelines

Enhancing the Site with HTML5 and CSS3

  • HTML5: A Brief History
  • CSS3 —CSS2 —what’s the difference?
  • CSS3: Not Yet Universally Supported
  • The Good News on CSS3
  • Look at All Those Sharp, Pointy Corners!
  • The Details in the Shadows
  • From box-shadow to text-shadow
  • We Don’t Serve Your Type Around Here!
  • Other CSS3 Features to be Aware of

CSS Schedule

Duration 18 hrs.
Next Batch Starting