HTML & CSS Modern, Responsive Websites

Course Overview

HTML & CSS are the fundamental building blocks of the web. This course is designed to provide delegates with the knowledge and skills necessary to build and deploy stylish, accessible websites that look good on any device.

Delegates will learn how to build websites that incorporate text elements, hyperlinks, images, audio and video, tables and forms, all styled using the latest CSS techniques. Delegates will also learn how to make their sites responsive from the start.

Exercises and examples are used throughout the course to give practical hands-on experience with the techniques covered.

NB: Some similar courses make mention of HTML5 and CSS3. Ours does not because HTML5 implies JavaScript which is not covered by this course, and CSS3 implies only a subset of the total specification. The code delegates will produce during the course will make use of the most up-to-date features of both languages.

Prerequisites

• • Delegates need only possess basic computing skills - navigate the filesystem, create and edit files and surf the web.

Skills Gained from this Training

• • The delegate will learn and acquire skills as follows:
    Build and deploy a simple website
    Mark up and style text elements and lists
    Create hyperlinks
    Target elements for the purpose of styling
    Structure content using semantic elements with a focus on accessibility
    Embed and style images, audio, video, and other content
    Organise data into and style tables
    Build and style forms that make use of all modern input types
    Lay out content using flexbox, grid, media queries, and more
    Transform and animate content
    Exploit CSS frameworks and preprocessors
    Design a site according to UI/UX guidelines and optimise it for search engines and performance

Course Content

• Introduction

  Setting up the development environment
  How the web works
  HTML
  Elements, tags, and attributes
  HTML document structure
  An introduction to mobile-first development
  Special characters
  Comments
  CSS
  Rules, selectors, and properties
  Linking HTML and CSS
  Chrome's Developer Tools
  Publishing
  

• Text Elements

  Headings and paragraphs
  Other and Styling text elements
  CSS values and units
  Web fonts
  Unordered and ordered lists
  Styling lists
  

• Hyperlinks

  Hyperlinks
  URLs and paths
  Document fragments
  Email links
  Styling links
  

• More CSS Selectors

  Selectors (again)
  Selector lists
  Type, class, and ID selectors
  Attribute selectors
  Pseudo-classes and pseudo-elements
  Combinators
  The cascade, specificity and inheritance
  At-rules
  

• Structuring Content

  Block and inline elements
  The box model
  Styling boxes
  Semantic elements
  Line breaks and horizontal rules
  An introduction to layout using CSS Grid
  

• Multimedia and Embedding

  Images and Image formats
  Figures and captions
  Styling images
  Background images
  Video and audio
  Media container formats
  Video text tracks
  Embedding content with iframe, embed, and object
  SVG
  Icons
  

• Tables

  Table rows and cells
  Headers
  Spanning
  Column groups
  Captions
  Semantic table tags
  Styling tables
  

• Forms

  The purpose of forms
  Forms
  Labels and text boxes
  Buttons
  Styling forms
  Sending form data to the server
  Grouping form fields
  Input types and attributes
  Drop down boxes
  Progress bars
  

• More Layout

  Normal flow
  Floats
  Positioning
  Flexbox
  Multi-column layout
  Grid
  Responsive design
  Media queries
  Feature queries
  Responsive media
  Intrinsic layout patterns
  

• More CSS Properties

  Rounded corners
  Multiple backgrounds
  Gradients
  Shadows
  Text effects
  Transforms, Transitions, Animations and more…
  

• CSS Frameworks and Preprocessors

  CSS frameworks
  The pros and cons of CSS frameworks
  Popular CSS frameworks
  CSS preprocessors
  CSS preprocessor features
  Popular CSS preprocessors
  CSS’s var function
  

• Introduction to UI/UX Design, SEO, & Performance Optimisation

  UI/UX design
  UI/UX design guidelines and best practices
  Search Engine Optimisation (SEO)
  HTML tags that are important for SEO
  SEO best practices
  Website performance optimisation