Computer and Business Skills training

Coronavirus Notice

Sign Up
Home / HTML and CSS / Level 1

Web Development Level 1
Building Websites with HTML5 and CSS3

Course Description

This class is aimed at students new to Web development. You will learn to construct web pages by hand coding HTML and then applying Cascading Style Sheets (CSS) to control the layout and appearance.

Live face-to-face instructor. No minimum class size - all classes guaranteed to run!

The course consists of a series of Real World projects, which will give you the confidence to start building your own website straight after the class. No prior experience of HTML or CSS is required.

View our full range of Web Development training courses.

3 Days | $1495.00

Book this course

Detailed course outline

  • Coding Basics: Intro to HTML Syntax

In this exercise, you will learn the basic syntax and the most essential HTML tags that are needed to get up and running.

    • The HTML, Head, Title, & Body Tags
    • Headings, Paragraphs, & Lists
    • Strong & Em Tags
    • The Doctype Declaration (DTD)
    • The Lang Attribute
    • The Meta Tag & the Unicode Character Set

  • Coding Links

In this exercise, you will add some links to both external websites and other pages on your site.

    • Anchor Tags & Hrefs
    • Linking to Other Websites
    • Linking to Pages Within a Website
    • Opening a Link in a New Browser Window

  • Adding Images

In this exercise, you will add images to your webpage. You will also learn two other simple tags: the line break tag and another for creating the appearance of content division.

    • The Break Tag
    • The Image Tag & Source Attribute
    • Using the Width, Height, & Alt Attributes
    • Using Horizontal Rules

  • Intro to Cascading Style Sheets (CSS)

In this exercise, you will style the page using Cascading Style Sheets (CSS). This is the first of many exercises on writing CSS. The focus of this exercise is on styling text (such as font, color, etc).

    • The Style Tag
    • Tag Selectors
    • Class Selectors
    • Font-Size, Font-Family, Color, & Line-Height Properties
    • Hexadecimal Shorthand
    • The Span Tag

  • The Div Tag & Basic Page Formatting

In order to have full control over real page layout, another HTML element which comes in handy is the <div> tag. Wrapping content in <div> tags allows authors to create sections of content that are grouped together and styled via CSS rules.

    • Creating Divisions with the Div Tag
    • Setting a Div Width
    • CSS Background-Color
    • Adding Padding Inside a Div
    • Centering Content
    • CSS Borders
    • CSS Shorthand & the DRY Principle

  • Using Browser Developer Tools

In this exercise, we will introduce you to browser developer tools. All major browsers have built-in tools that allow you to access the code with precision. These tools allow you to review and edit the HTML and CSS with great ease.

    • Opening the DevTools in Chrome
    • Editing HTML in the DevTools Elements Tab
    • Enabling, Disabling, & Editing CSS in the DevTools
    • Using DevTools to Fine Tune Your CSS

  • HTML5 Semantic Elements

In the latest version of HTML, HTML5, we can make use of semantic tags to natively describe the contextual function of the element. This has several benefits over the <div> tag.

    • The Outline Algorithm
    • The Header, Nav, Aside, & Footer Elements
    • Understanding Articles & Sections
    • The Main Element
    • The Figure & Figcaption Elements
    • Validation

  • Fluid Layout & Max-Width

In this exercise, we will investigate how the <div> tag can and should still be used to group and style content non-semantically. We will also start to think about how to make our layouts fluid, so they adapt to different-sized browser windows.

    • Making Images Fluid
    • Divs for Presentational Style
    • Assigning IDs to Divs
    • Assigning Max-Width to Content

  • Revolution Travel: Real World Layout

This is the first in a series of exercises in which you will lay out a complete website. You will begin by laying out the basics of a single page. You will build the structure of the page and place content inside each section.

    • Organizing Content into Semantic Sections
    • Adding Images
    • Tagging Headings

  • The Box Model

In this exercise, we will explore this CSS Box Model to see how the width, padding, and margin properties can allow us to control the page layout.

    • What is the Box Model?
    • Setting Div Width
    • Fixing a Display Issue in Internet Explorer
    • Setting Page Defaults for Font Styles
    • Padding & Margin Spacing

  • Floats & Images

In this exercise, you will add some images and also learn how to position images alongside text by using the float property. Additionally, you will learn the usefulness of the class selector.

    • Adding a Hero Image
    • Fluid Images
    • Floating Images
    • Class Selectors
    • Margins

  • Coding Links: Images, Email, & Named Anchors

This exercise is a refresher on how to link to other pages within your site and how to code external links that open in a new browser tab or window.

    • Anchor Tags & Relative URLs
    • Wrapping Links Around Images
    • External Links (Using the Target Attribute)
    • Spambot-Resistant Email Links
    • Links Within a Page
  • Styling Links

This exercise will show you how to create your own link styles and customize different link styles for different sections of the page.

    • Styling the Anchor Tag
    • The :link, :visited, :active, & :hover Pseudo-Classes
    • Love/Hate: Ordering Link Styles

  • Styling the Navigation

This exercise will teach you how to style a navigation bar.

    • Semantically Correct Navigation
    • Overriding Default List Styles
    • CSS Navigation Styles
    • Using Descendant Selectors

  • Shared CSS & Centering Content

In this lesson, you will learn to store the CSS in an external file, which can be applied to multiple web pages. This will result in consistent styles across a website and facilitate easy site-wide changes.

    • Moving Embedded Styles into an External CSS File
    • Sharing Styles Across a Site
    • The Text-Align Property
    • Centering Divs

  • Setting the Viewport Meta Tag

In this exercise, you will add viewpoint meta tag controls that control how a webpage will display on a mobile device.

    • The Viewport Meta Tag
    • Device-Width
    • Initial-Scale
    • Maximum-Scale

  • HTML & CSS Wireframe

This is the first in a series of exercises where you will build a mini-site to announce a product launch. In this exercise you will setup a wireframe to visualize how the content will be presented.

    • Stacking Sections
    • Linking to an External Stylesheet
    • Using DevTools to Unpack the Box Model

  • CSS Background Images

In this exercise, you will build the homepage of our product launch website. You will overlay a header on a background image using the CSS background-image property.

    • HTML Images vs CSS Background Images
    • Background-Position
    • Background-Repeat
    • Background-Size

  • Fun with Fonts

In this exercise, you will enhance the look of your website by embedding custom fonts rather than using the bland fonts that ship with most operating systems. You will use Google Fonts, the industry leader in free web fonts.

    • How to Use Google Fonts
    • Safe Fallbacks in the Font Stack
    • Improving Line-Height and Margin for Legibility

  • Hipstirred Layout: Fine-Tuning with Box Model

In this exercise, you will refine the spacing and dimensions of the layout for the mini site and revisit the handy CSS max-width property. We will investigate wrapping content in container divs and firm up our understanding of how an ID selector differs from a class selector.

    • Removing Default Page Margin
    • Setting a Max-Width
    • Outer and Inner Wrappers
    • The Difference Between ID and Class Selectors

  • CSS Buttons & Floats

In this exercise, you will learn CSS border-radius for rounding corners, how to create a handy, reusable button class, and how to make a more complex layout by using floats to pull elements to the far left or far right of the layout.

    • Floats for Layout
    • Float Insert Position
    • Simple CSS Buttons
    • CSS Border-Radius
    • Reusing Class Selectors

  • Hipstirred: Hi-Res Images

In this exercise, you will add high resolution images which display better on smaller mobile devices.

    • Retina or HiDPI Graphics (@2x Images)
    • Setting HTML & CSS Size to Half the Image's Native Size
    • Hardware Pixels vs Reference Pixels

  • Uploading to a Live Website via FTP

In this exercise, you will use FTP (File Transfer Protocol) to upload a website to a web host's remote server so you can see how to take the work you have done on your local computer and actually put it live on the web.

    • What is FTP?
    • Using an FTP Client
    • Going Live

  • Form Basics

Forms allow you to collect information about your visitors so you can better serve their needs. In this exercise, you will learn to code and style a basic form to collect a user's name and email.

    • The Form Tag
    • The Input & Label Elements
    • Name & ID Attributes
    • The Button Element
    • Styling the Form

Our outlines are a guide to the content covered on a typical class. We may change or alter the course topics to meet the objectives of a particular class.



230 W Monroe St
IL 60606View Map

Guaranteed to Run Limited Seats Left

Class times: 9.00am to 4.30pm

Servicing Arlington Heights, Aurora, Bollingbrook, Chicago Loop,
Deerfield, Des Plaines, Evanston, Highland Park, Joliet, Naperville,
Schaumburg, Skokie, South Chicago and surrounding areas.

Other Cities

Request onsite training quote

Los Angeles

915 Wilshire Blvd
Los Angeles
CA 90017View Map

Guaranteed to Run Limited Seats Left

Class times: 9.00am to 4.30pm

Servicing Anaheim, Burbank, Covina, Downtown, Fullerton,
Irvine, Long Beach, Northridge, Pasadena, San Bernardino,
Santa Monica, Van Nuys, Ventura and surrounding areas.

Related courses

Why train with us? Need Group training quotation? Fresh Starbucks brewed every dayFREE Class Repeat with each course