They say that in 7 years, you can become an expert in anything. Even so—who has 10,000 hours on their hands? Designers finding their feet in the industry need a far more streamlined way to learn the fundamentals of web design. But let’s be real—streamlining processes isn’t just for beginners. Advanced designers juggling multiple clients need to be familiar with the fundamentals, too, so they can build sites by muscle memory—and deliver client projects like clockwork.

A new online web design course with web designer Brad Hussey, Editor X 101, aims to solve for these needs in just 5 hours of content. Here we’ve distilled the key concepts it covers, from site structure to interactive elements, to give you a headstart on understanding the main principles of web design.

Key web design fundamentals beginners and professionals need to know, according to web designer Brad Hussey.

5 web design fundamentals for successful creators

1. Understand website structure and styles

What makes good website design? Many things, to be frank, but a solid structure and brand is the baseline. First, structure. Without a visual hierarchy, website elements lack relationships between each other, and users may find it difficult to understand which information is most important on the page. When we say “hierarchy” we mean the HTML structure of elements on a page.

For example, on Editor X, there are 4 levels of site structure. The page is the parent of the sections, the sections are the parents of the containers and the containers are the parents of elements inside them. These relationships define how elements interact with each other. Typically, each of these parents control how their children behave. For example, elements inside a container can change in position and size based on changes to the parent container.

Site structure is based on how elements relate to each other. Here, two selected elements are stacked together.

Understanding these relationships empowers designers with the knowledge they need to control every aspect of the website and create the behaviors they want users to experience.

Establishing a cohesive brand identity for the site is equally important. And when it comes to adding styles, an understanding of color and typography is key. As you probably know, these factors are critical to communicatinge a website’s brand, and ensure site content is accessible and legible. Learning how to apply them efficiently (often with the help of a design system) gives designers the ability to create brands’ online presences at scale.

2. Use responsive design for create for different screen sizes

The total number of mobile devices worldwide is due to reach 16.8 billion this year. With endless new models being released by the day, there’s no one standard screen size to design for. As such, modern designers need to create fluid websites that adjust in appearance and functionality, depending on the device they’re being viewed on. You can achieve this with responsive design.

But what are the fundamentals of responsive web design? Breakpoints are the first concept to familiarize yourself with. A breakpoint represents a range of screen sizes. When designing for desktop, your layout should suit screens that are 1001px and larger in width. For tablet, you can work with 751px to 1000px and, for 750px and below, you’re into mobile territory. On Editor X, you can also create custom breakpoints for specific viewports.

Using fluid measurement units, docking and positioning, you can cause website elements to shift and resize, even between breakpoints. If you’re ready for a more in-dept explainer, check this out:

3. Populate and control content

Of all the web design principles and elements creators should verse themselves in, arguably the most important are those that give a website its character. That means you need to understand how to populate and control content. Content brings wireframes to life, and the possibilities are endless. However, there are a few concepts you can get comfortable with to move towards mastering content.

We’ve spoken about the relevance of typography, but proper text sizing and scale lets your choice of fonts sing across screen sizes. As well as dictating how legible website text is, your ability to let text grow and shrink based on screen size is a key component of the responsive experience. On Editor X, the scale text feature lets you define a font size range per breakpoint, meaning the text will stay relative to the screen it’s being read on.

Your ability to scale text based on screen size is a key component of the responsive experience.

Media and decorative elements, from PNGs to SVGs, are also crucial. They create the visual story of every site. Beyond the first step of designing, commissioning, or sourcing media, it’s integral that you understand how to add them to sites and how to control their appearance and behavior. Whether that’s tweaking their colors, opacity, sizing, or even animating them, getting versed in the different ways you can add interest to sites is a key skill.

Website content isn’t just there for aesthetics, though. Menus and buttons are types of navigational content you should verse yourself in. These give website visitors the ability to take actions and interact with the site, making them just as fundamental for designers.

4. Employ different layouting tools

A website can function without being usable. User Inyerface, anyone? Behind most poor UIs are inadequate website layouts:. If a site lacks a clear way to navigate through its components and content, users will inevitably end up confused or, worse, frustrated. To combat that, an understanding of the website layouting tools at your disposal is the best weapon.

Among the most popular ones in responsive design are CSS grids and flexboxes. In case you’re unfamiliar, a CSS grid is a 2D framework made up of columns and rows that intersect to create grid cells. You can achieve intricate layouts with grid because you can manage exactly how elements within them are placed, down to the pixel. Creators can then adjust the grid layout per breakpoint to create experiences tailored to different screen sizes.

Flexbox layouts are inherently responsive and let you arrange and align elements in a set order that may wrap as the viewport changes. No need to adjust the layout per breakpoint manually. Both options are powerful in their own right. What’s more, gone are the days where you’d have to code them by hand.

For a rundown of how to create these in a visual interface, check out this lesson from Editor X 101:

5. Add interactions and effects

The industry’s come a long way since the most we could expect from a website was a cute raster image—thanks, Flash. Nowadays, you can find interactions in use across the web, and code-free versions are constantly growing in popularity.

As well as adding intrigue to sites, interactions provide an avenue for website visitor engagement. Click and hover interactions are 2 powerful options. By applying them, and even combining them, the world of interactive elements is your oyster.

For a crash course in how to use and manage interactions and effects on Editor X, check out this tutorial:

Once you’ve familiarized yourself with structure, responsiveness, content, layouting and interactions, the real challenge begins—putting them into practice. To start learning more about these web design fundamentals and for step-by-step instructions on how to build a site using them, you can enroll in Editor X 101 for free.