1. Web Design

Web Design Learning Guides

Learn some essential new web design skills with these learning guides. Each one has been specially designed to help you master an important topic, like web accessibility or using Figma for web design.

If you have questions about a web design concept or framework, these learning guides will answer them. The guide to Vue.js, for example, gives a concise explanation of what Vue is and how it works, while linking out to more in-depth tutorials and courses to help you learn more. You can find similar guides for Adobe XD, Foundation, and much more.

  1. AJAX for Front-End Designers

    4 Posts
    This series aims to familiarize front-end designers and newbie developers with AJAX, an essential front-end technique. Loading content “asynchronously” is helpful for keeping the initial weight of a page low, instead presenting certain information only when the user specifically asks for it. 
    View Learning Guide...
  2. Examining Responsive Navigation Patterns

    4 Posts
    Welcome to a series exploring a number of responsive navigation patterns. During these four tutorials we'll look into how to develop them yourself, rather than leaning on a copy-paste approach. Everything from top nav bars, through select dropdowns and footer patterns, to off-canvas navigation will be examined.
    View Learning Guide...
  3. Strange and Unusual HTML

    15 Posts
    In your day-to-day HTML coding you'll undoubtedly use <div> elements, hopefully even <section>, <aside> and <article> tags where more appropriate. You'll describe semantic relationships between headings using <h1> through to <h6>. Your form inputs are probably of the correct type, dictating whether entered data should be a valid email address, or number - but there are loads of obscure HTML tags and attributes which you might not be familiar with. Some are simple, others are still in development and the occasional one is just downright weird! This collection of tutorials and quick tips will get you up to speed with some of the more unusual HTML tags.
    View Learning Guide...
  4. Design and Build a Responsive Timeline Portfolio Page

    3 Posts
    During this series you'll be using Photoshop CS6 to design a simple, clean, three-column portfolio page, with a trending timeline. Once done, you'll move over to a code editor and begin building your finished page for the web. Along the way, you'll learn about the designer > developer workflow, whilst using tools such as Sass and jQuery.
    View Learning Guide...
  5. Bringing Premium Pixels to Life

    11 Posts
    Orman Clark has brought joy to the masses with his pixel perfect creations, many of which he dishes out for free on his site Premium Pixels. This session focuses on bringing his .psd files to life, teaching and demonstrating modern web techniques and standards wherever possible.
    View Learning Guide...