Building Responsive Websites

HTML & CSS Courses

This course will teach you how to combine HTML and CSS to begin building modern, responsive websites. This is where your journey begins: HTML provides the structure for all web pages, and is the essential foundation skill for learning about web design. CSS will be your next step – CSS is all about design: typography, colour, page layouts, responsive design and much more.

You’ll learn how to edit and write your own HTML and CSS code from scratch, but there’s more to building websites than coding; we’ll teach you how to structure and manage a website, upload files to a server, work with different types of web graphics, optimise for search engines and accessibility, add maps and fonts, integrate social networks and much more.

The course is designed as a direct follow-on from our Intro to HTML5 & CSS3 course. You’ll need to have completed that course or have equivalent knowledge.

If you are already experienced with HTML & CSS and want to learn more complex and advanced CSS, you should check out our CSS Advanced course – HTML5 & CSS3 In-Depth.

Why train with The Web School

Expert instructors with proven teaching skills

Free tech support for 12 months following your course

Access to our support forums for Certification students

Professionally written and approved courseware

Free course refreshers and workshop days

Professional training environment with Macs and PCs


Book a Course

Course outline - WHAT you’ll learn

Deeper into CSS: page layouts and menus

In this session, we begin looking at how pages are designed using HTML and CSS, and how to create great looking navigation. We learn how to avoid repetition and use shorthand for faster workflow.

  • HTML5 Semantic Markup
  • Planning a web page layout.
  • Using DIV tags for page layouts.
  • Using Classes, IDs and Descendant selectors to style specific elements.
  • Using vertical margins to control spacing.
  • Using background colours and images.
  • Centering a layout using auto margins.
  • Working with Borders.
  • Working with Margins and Padding.
  • Building menus using unordered lists and CSS.
  • Designing horizontal menus.
  • Creating a ‘button’ style using background colour, hover effects and transitions.

Introducing responsive design

In this session, we introduce responsive design techniques. We take a first look at CSS Media Queries, and learn about breakpoints and how to use them.

  • What can be done with Responsive Design.
  • About Mobile-first design.
  • Introducing Media Queries.
  • Choosing Breakpoints.
  • Allowing the page to adapt to the browser width.
  • Setting a maximum page width.
  • Allowing images to scale proportionally.
  • Meta tags for responsive scaling

Multi-column design, fonts and social menus

In this session we’ll learn how to create more complex layouts, work with basic multi-column layouts, and how to incorporate downloadable webfonts.

  • Creating side by side columns using Floats.
  • The CSS Box Model – calculating padding, borders and margins.
  • Clearing floats – using the Clearfix solution.
  • Using Google fonts – how downloadable fonts work, and how to optimise for file size.
  • Creating a social menu.
  • Vertical and horizontal menus

Forms, site management and web hosting

In the final session, we’ll learn all about contact forms and finally, site management. We’ll see how web servers work, and how to upload/download files to and from a server. We’ll look at how to purchase your own web hosting, and how websites can be maintained and edited by developers and their clients.

  • Forms – building a form in HTML, validating fields, using HTML5 form elements, about form processors.
  • Styling forms – tips and tricks for great looking forms.
  • Adding metadata to your pages.
  • About domain names.
  • About web hosting.
  • How to use FTP to upload your website.
  • Solutions for allowing clients to edit their own content.

  • Contact Us