HTML and CSS Advanced Course
Build sophisticated, responsive websites using advanced HTML and CSS on this two-day course.
Covering advanced CSS, responsive design, CSS grid, flexbox, transitions and animations.
Build sophisticated, responsive websites using advanced HTML and CSS on this two-day course. Covering advanced CSS, responsive design, CSS grid, flexbox, transitions and animations.
-
Expert trainers Experienced industry expert
- Class size Up to 8 in London, or up to 6 live online
- Support 28 days of helpdesk support
- Cancellation 7 day cancellation
- Certificate Certificate of attendance
- Volume discounts Save with Learning Pots
HTML and CSS Advanced Course
Build sophisticated, responsive websites using advanced HTML and CSS on this expert-led two-day course for experienced web developers who already know the basics.
You will review the roles of HTML, CSS, JavaScript and PHP, explore advanced CSS including the cascade, inheritance and complex selectors, learn how to go systematically from wireframe to working code, apply responsive design using fluid layouts, flexible images and media queries, work with mobile-first and desktop-first methodologies, and implement modern CSS features including grid, flexbox, custom properties, transitions and animations.
Private & team training
Get a quote for HTML and CSS Advanced
This course isn't on the public schedule right now. Request a quote and we'll come back with dates, pricing and delivery options, at our centre, live online or at your venue.
Course outline
Introduction
Overview of the roles and responsibilities of:
HTML
CSS
Javascript
PHP/ASP
From Wireframe to code - review of HTML Structural Elements
To div or not to div
CSS Essentials
Cascade and Inheritance
Locations - where to hold the CSS and why:
External, Internal, Inline, Imported
CSS Syntax
Core Selectors Theory and Practice:
Tag (Type)
Class
ID
Groups and Descendants
Working with Text
Font size and family
System Fonts and Server Fonts
Text colour and background colour
Alignment, line spacing and letter spacing
Styling Links
Layout Fundamentals
CSS Box Model
Working with padding, margins and borders
Longhand and shorthand syntax
Changing the width of elements
Understanding the difference between Block and Inline Levels
Image Essentials
Understanding background images
Creating tiled backgrounds
Controlling background repeats
Controlling background positions
Using image headers
Using fixed backgrounds
Creating Custom Bullet Points
Controlling Icons
Working with Unicode
Responsive Design
Mobile first or Desktop first?
Fixed units versus percentage values
Applying responsive font size
Responsive image and video techniques
Using media queries to create breakpoints
Using the browser mobile emulator for testing
Practical Layout Techniques
Styling Data Tables and Forms
Using Image Floats
Creating columns with floats
Understanding box-sizing
Working with overflows
Inserting content with :before and :after
Fixing float issues with overflow hack
Fixing float issues with clearfix hack
Modern columns with Flexbox
Layering content with absolute Positioning
Pseudo Selectors
Hover effects
Styling the first letter and first line
Styling first, last, alternate and nth elements
Styling by Attribute
Styling direct descendants
Using : not to omit elements
Overview of various other pseudo elements
CSS Effects
Rounded corners, Box Shadow and Text Shadow
CSS Transitions
CSS Animation
Who is this course for?
For web developers and designers who want to build sophisticated responsive layouts. Requires our HTML and CSS Introduction course or equivalent working knowledge.
Explaining concepts in detail with practical application to help with understanding as well as being fluid and moving at the best pace for…
Training was at a good pace and relating examples back to every day use
Patient, attentive, informative, comfortable environment
Training given at a good pace, but accommodating for different abilities of trainees when required.
Knowledgable about the history of html and css and knew strange quirks, that have caused problems with coding in the past.
Everything else was great. The training was very helpful and the facilities were excellent.
Explaining advanced html and css in the format of building a site. Its very innovative and helpful as i can go back and review.
Good examples. Good pace - although others may disagree, enjoyed that the training moved through things quite quickly as I already had a ba…
Swipe for more
Read course reviewsWho attends?
Getting better at your job
You need a skill for the role you already have, or your employer is investing in the team.
Changing career
You're moving into a new field and need the practical skills it asks for.
Just graduated
You know the theory. A practical course and a certificate of attendance show employers you can do the work.
Further reading
How to Start Your Freelance Web Design Career?
A freelance web design career path is full of freedom, and excitement, but it requires a mix of design, development and…
5 Ways to use Python at Work
Interested in learning Python?
5 Reasons Why You Should Learn How To Code
Coding skills are in high demand.