HTML5 & CSS3 Web Principles

Intro to HTML5 & CSS3

HTML & CSS Courses

This course will introduce you to HTML5 and CSS3, the languages used to create webpages. You’ll learn how websites are designed and built, and how to use HTML5 code to create webpages from scratch. We will show you how to format content using headings, paragraphs and lists, create hyperlinks and insert images. You’ll gain confidence with editing and writing code, and discover how HTML5 is used along with CSS3 to design and build modern websites.

Whether you want to be able to edit web content using a Content Management System (CMS) or plan to become a professional web designer/developer, this one-day course teaches you the essential foundation skills you need.

Why train with The Web School

Expert instructors with proven teaching skills

Free tech support for 12 months following your course

Access to our support forums for Certification students

Professionally written and approved courseware

Free course refreshers and workshop days

Professional training environment with Macs and PCs

10-special

Book Your Course

Course outline - WHAT you’ll learn

Overview

  • About web technologies – how HTML5 and CSS3 work together, and the role of Javascript
  • Tools of the trade – about code editors, web development applications, Content Management Systems and online web building solutions
  • Web standards – following conventions
  • About Web Browsers, and how to test your work
  • About HTML5 and older versions of HTML

HTML essentials

  • Principles of HTML5 – document type, document structure, tags and attributes.
  • The HTML5 document structure
  • Containers and empty tags
  • Inline & block level elements – how tags display
  • Inserting special characters
  • Commenting your code

Website structure

  • Typical website structure – files and folders
  • File and folder naming conventions – case and space
  • The importance of filename extensions
  • Home page considerations

Marking up text with HTML5

  • About whitespace
  • Using headings and paragraphs
  • Line breaks
  • Ordered and Unordered lists – customising lists
  • Bold and italic

Working with Tables

  • When you should use tables
  • Tables for displaying data

Images

  • Inserting images with HTML
  • About GIF, JPG & PNG and when to use them
  • Image optimisation – reducing file size while maintaining quality
  • Image resolution
  • The ‘alt’ attribute
  • The ‘title’ attribute

Hyperlinks

  • Terminology – absolute vs. relative paths
  • Targeting links to open in a new window
  • Creating ‘same page’ links
  • Links to downloadable content
  • Applying links to images

Layout and design techniques

  • Using DIV tags as containers
  • Applying styles to divs for layout and design
  • Using Span tags to style selected content

Styling a Web Page with CSS3

  • Understanding CSS3 syntax
  • Writing styles that apply to the whole page
  • Styling an entire website
  • Fonts – using device fonts
  • Colour – colour names and using Hexadecimal code
  • Typography – fonts size, line height and other properties
  • Using Classes to style individual elements
  • Styling Hyperlinks with pseudo-classes

External content

  • Embedding a Google map
  • Embedding a youtube video

Search Engine Optimisation

  • How good coding means good SEO
  • Strong vs. Bold
  • The importance of the Title tag
  • HEAD content – using META tags for page descriptions

  • Contact Us