HTML & CSS Modern, Responsive Websites
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.
- 3 Days
- In person
Course Objectives
- This course aims to provide delegates with the skills and knowledge necessary to construct stylish and responsive HTML pages that exploit all the core HTML elements including text elements, hyperlinks, multimedia, tables, and forms. Delegates should also be able to style and lay out said elements exploiting a solid understanding of CSS concepts and core CSS properties.
Skills you'll gain
-
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
Prerequisites
- Delegates need only possess basic computing skills - navigate the filesystem, create and edit files and surf the web.
Course content Back to top
-
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
Training a team?
Run this course privately, on your dates
What delegates say Back to top
“Excellent session”
Which part of the course did you find particularly valuable
“The tips given throughout the session are really useful”
“I particularly benefitted from the level of depth and explanation that went into the course step by steps. the exercisers allowed learning time to understand each module and skill.”
“I’m very pleased I went on this course I have learnt a lot and I’m sure I will be more efficient in my role as a result. The tips I learnt will save me a lot of time at work.”
“Found the course to be exactly what I needed to move forward in my role. Thank you”
“I was happy with all of it as it will allow me to use Excel more confidently”
“Very impressed, would recommend this course”
“Good trainer and very clued up on subject”
Please contact us to discuss your HTML & CSS Modern, Responsive Websites course, we have many solutions available to ensure you receive the best training possible.
Learn with IT Training Solutions. Small course sizes. Course materials included. Flexible HTML & CSS Modern, Responsive Websites course content. Expert trainers and tried & tested training methods. Many course materials available online using your personal training account. Please contact us to booka place or get a quote for your HTML & CSS Modern, Responsive Websites course.
Oakville, 14 Durham Road West, Bowburn, Durham, DH6 5AU
0191 377 8377
ittrainingsolutions.co.uk
Printed: 10/23/2026 11:52:57 PM