Home > Web Design Courses

Responsive Web Design with HTML & CSS (4 days)

This four day hands-on web design course is for those that want to be able to hand code responsive websites to modern standards. This course is ideal for anyone looking to get into a web designer role and needs a firm understanding of HTML and CSS.

Covid-19 Information

Our top priority is your safety. Courses will be limited to 4 delegates per session with strict social distancing restrictions in place. The University have put in special measures to ensure all areas within our building are sanitised regularly. Special attention is paid to the cleaning of desks, chairs, screens, keyboards, mousemats and mice.

Due to the situation, the on-site restaurant is not yet open, so we are unable to provide catered lunches until further notice. We encourage you to bring lunch and refreshments, although we will have drinks and refreshments available with a good supply of hand sanitiser and antibacterial wipes.

Click here to see our full Covid-19 Secure statement.

Course Information

  • Price : £625 + VAT
  • Level : Introduction & Intermediate Level 1 Level 2
  • Version : HTML5 & CSS3
  • Venue : Jubilee Campus, Nottingham
  • Duration : 4 days
  • Times : 9:30am - 4:30pm

Build stunning responsive CSS websites using HTML5 & CSS3 that conform to modern standards. This course is essential for anyone working as a web designer or developer.

A 4 day, Responsive Web Design with HTML & CSS training course hosted in Nottingham, East Midlands.EventScheduledWeb Studio Training£625017th - 20th February 2020East Midlands, UKNottingham, East Midlands, UK40 leftfinished
A 4 day, Responsive Web Design with HTML & CSS training course hosted in Nottingham, East Midlands.EventScheduledWeb Studio Training£625626th - 29th May 2020East Midlands, UKNottingham, East Midlands, UK40 leftfinished
A 4 day, Responsive Web Design with HTML & CSS training course hosted in Nottingham, East Midlands.EventScheduledWeb Studio Training£62542nd - 5th November 2020East Midlands, UKNottingham, East Midlands, UK44 leftbook now

This course includes

  • 4 days trainer led in small groups
  • Your own printed course manual
  • Course files & exercises to take away
  • Choice of PC or Mac for training
  • Professional environment with high spec computers
  • Refreshments throughout the day
  • Lunch provided
  • Printed course certificate
  • Post course support via email
  • Access to our FREE workshop days

HTML & CSS Overview

web design tables

This course is aimed at individuals who:

  • want to get into the web design industry
  • are responsible for creating web content
  • want a better understanding of HTML & CSS
  • need to edit existing WordPress themes

The course is very hands on and focus will be on the implementation phase of developing W3C compliant CSS based web sites. The course works to the HTML5 and CSS v3 standard for desktop and mobile displays and also includes extensive use of the new features that are supported with CSS3 browsers for those targeting mobile devices.

Creating websites using CSS (Cascading Style Sheets) design is the modern method of creating web pages. Using CSS means that web designers can separate the content within a document from its design. By doing this, the information on a web page can be described using HTML to give it semantic meaning while the design elements and layout can be contained within a separate CSS document.

HTML and CSS code

This is the industry standard way in which professional web designers and developers build web sites today. This is the reason why all of the courses that we run teach web design this way. This course is primarily aimed at designers and developers who need to maintain XHTML or HTML5 and CSS at the code level.

If you are already creating PHP, ASP or Ruby code and want to be able to understand, create and troubleshoot flexible CSS based web sites, then this is also the course for you.

Course Outcomes

By the end of this web design course students will understand how to create standards compliant websites including :

  • fixed & fluid mutli column templates using Flexbox and CSS Grid layout
  • search engine optimised content
  • cross device support through style sheets
  • responsive layouts using CSS3 media queries
  • accessible web forms
  • clean optimised CSS

Course Requirements

This course is an entry level course that does not assume any knowledge of HTML or CSS. Those wishing to attend should have an understanding of design or should be interested in hand coding websites.

Although aimed at an entry level, many experienced designers that have attended this course, have found it useful to consolidate the knowledge they already have - understanding "why", rather than just "how".

Web designers who would like to eventually move on to server side web development languages like PHP or ASP, find this a good starting point too.

Course Description

The course opens with a short explanation of where the HTML5 and CSS3 standards have evolved from. This is useful to have a better understanding of how the implementation of HTML and CSS benefits both developers, search engines and for the implementation of web accessibility. This leads on to a look at the software that can be used to implement web standards solutions and what the benefits and disadvantages are to these tools. For example, those that advocate the use of notepad as the sole tool for creating CSS based website are probably not being very efficient in their workflow.

Web Design course layouts

The course then gets a little more hands on with students creating and understanding valid HTML structured pages. This is followed by a healthy focus on page structure for accessibility and search engine optimisation with many students post course reporting significant improvements in ranking in Google after just implementing this part of the course on their existing websites.

Once the page structure is understood, the course then provides students with a break down of the various HTML5 content tags that are used to give page information semantic meaning. This is once again vital to accessibility and ensures that HTML tags are implemented to W3C standards. Special mention is made of creating accessible form elements so that all users and devices are supported.

Supporting JavaScript and 3rd party plugins is covered to ensure that documents still retain standards compliance when validating though the W3C validation services. The course also discusses the need for sometimes not complying with the W3C's standards.

The course then focuses heavily on the CSS aspect of the page design process by starting with a look at default browser styles and the need to be aware of how these may affect design. There is a good explanation of when to use internal and inline styles and then on to the main course of external style sheets and their cascading abilities.

Responsive Web Design course

There is a full break down of the CSS syntax with explanations of the various types of selectors that are widely supported by modern day browsers. The course then looks at the various value types that are available in CSS and what the pros and cons of using relative values (percentages and ems etc) versus absolute values (pixels and points etc). Contrary to popular belief, absolute values do have their place in the CSS world.

The box model provides for an interesting discussion on the implementation of standards across browsers. The course identifies the differences between inline and block level elements and how margin, padding and border properties can affect the layout of elements within a design. The box model also provides the ability to attach background images to elements and this can be used to great effect with CSS based designs especially with support for transparency either through PNGs or CSS3 properties.

Although most CSS designs can be achieved using floats, Flexbox and CSS Grid, there is sometimes the need for using the position property to absolutely or relatively position elements within the design. This can lead to issues with browser compatibility problems, so the course ensures that developers are aware of the rules associated with CSS positioning.

W3C HTML Validator

As responsive design becomes the norm within the industry, we look at creating responsive layouts and styles for mobiles phones, tablets and desktop devices using CSS3 media queries.

Finally there is a look at validating CSS to W3C standards and troubleshooting CSS inconsistency across the various browsers and platforms using tools such as the excellent Firebug plugin.

Web Design Course Highlights

The course covers the following areas :

  • Structural Markup (HTML)
    • Structuring documents for the XHTML1.0 Strict & HTML5 Doctypes
    • Effective use of title and meta tags for better search engine optimisation
    • Working with the link tag to attach external stylesheets
    • Using structural tags to identify content areas
    • Marking up content appropriately using tags such as headings, paragraphs, ordered and unordered lists, tables, links, images and formatting
    • Block level and Inline level tags
    • Building accessible forms for interaction
    • Optimising code and content
    • Supporting Javascript and 3rd party plugins
    • Validating Web Content to meet W3C Standards
    • HTML validation services
    • Validation versus quality controls
  • Cascading Style Sheets (CSS)
    • Understanding browser, user and author styles
    • Implementing inline, internal and external styling
    • CSS syntax
    • CSS selectors (type, class, id, pseudo and relational selectors)
    • CSS property values
    • Using relative and absolute values (pixels, points, ems, rems, and percentages)
    • The visual formatting model
    • Understanding the CSS box model and quirks mode
    • Block and inline level behaviours
    • Working with margin and padding
    • Text formatting (size, spacing, typeface)
    • Working with background images and attachment options
    • Fixed attachment backgrounds
    • Layered presentation
    • CSS layouts with floats, Flexbox & CSS Grid
    • CSS Position - static, fixed, absolute & relative positioning
    • Building effective float layouts
    • Building and styling accessible forms for interaction
    • Cascading, inheritance and specificity within stylesheets
    • Modularising stylesheets
    • Creating stylesheets for print or mobile devices
    • Cross compatibility testing
    • CSS validation
    • Debugging CSS issues
  • What's new in Web Design
    • Current browser support
    • Browser specific properties
    • New selectors & fitlers
    • CSS3 border-radius
    • CSS3 text & box shadows
    • Multiple background images
    • CSS3 column count
    • CSS3 dynamic gradients
    • CSS3 opacity & alpha transparency
    • CSS3 media queries
    • Responsive design & styling

Web Design Course Feedback - 4.8 out of 5.0 stars

"The course was concise and relevant, with many practical examples and opportunities to get all your questions answered. - I had a great time and now definitely a better understanding of code and styles. Good to know the "behind the scenes" of beautiful websites. Bjorn's teaching approach was fantastic. I'd happily recommend Web Studio Training to friends. Lastly, having coffee and biscuits throughout the day made that little extra difference from good to great!" - Stela @ Inniaccounts
"You cover so much in the 4 days. - Brilliant course, although I think it definitely helped having basic HTML knowledge already before starting this course. It was quite intensive, there was a lot to take in every day but our trainer Bjorn was very thorough, made it easy to grasp, with clear explanations of everything and took the time to ensure that everybody kept up and understood as we progressed with each step of the course. Really enjoyed it, happy with what I got out of it and am excited to develop my new skills further!" - Alysha
"Bjorn's manner in teaching us the course really helped to grasp what could've ordinarily been a jargon-filled, difficult to understand subject. The structure and timing of the days really helped to break the information down in to a digestible amount. - The course has already had a positive impact on my work, allowing me to make some tweaks to my existing website CSS. I'm really hoping to build on the basics learned on the course and develop my skills in the future." - Stewart @ Optic Creative
"The knowledge and approachability of the trainer. Good to have a trainer who is professionaly working on websites. The way the content was "tailored" to our group. Relaxed atmosphere conducive to learning. - The subject matter will be very useful to me in my role of creating/editing web pages. It has definitely raised my understanding of HTML and will no doubt save me time and improve the quality of my output." - Tom @ Leicestershire Police

Course Trainer


Bjorn has been involved in CSS based web design for over 20 years and has experience developing web applications in both small and large teams of developers. Having insights into both the design and development worlds, he is able to understand the capabilities of design packages such as Illustrator, Flash and Photoshop as well as develop with server side platforms such as PHP. Combing these two worlds through the use of hand written markup and CSS is something he excels in and has been teaching these skills to other developers for over 15 years.

Over the past few years he has closely followed the evolving standards for web development and has spent countless hours discussing appropriate markup with web designers in the industry. He has also run training courses on web standards and accessibility which stems from his vast experience with CSS web design.

Course Location

This HTML & CSS course is run from our rooms on Jubilee Campus in Nottingham, which is part of the University of Nottingham's Innovation Park. These are serviced by a state-of-the-art tram system allowing easy access to the city centre as well as direct hourly rail services from London, Liverpool, Manchester, Birmingham, Derby and Leicester.

Please note that all course prices exclude VAT.

Training Rooms