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
“All of it was really good and gave me a good understanding of onedrive”
Following this training what are you going to do differently
“Set up and use a site for our team”
Are there any aspects of the course which you feel require improvement
“No, I feel that the pace was good and the way that the training was setup with a 'lecture' period followed by a 'practical' period is a good way of learning.”
“Ideal for entry level”
Following this training what are you going to do differently
“Use pivot tables and charts to display information clearly”
“Trainer was very knowledgeable”
“This course will change the way we format and present data in the department, saving us time and giving us a much better overview of our workload, budgets, and monthly stats.”
Which part of the course did you find particularly valuable
“All of the course. A lot of these are tips that I will use every now and then, and some i.e. quick paths are ones I will begin using regularly.”
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/20/2026 10:14:02 PM