Feeling lost among tools and trends? Web design basics come down to one order: semantic HTML first, then CSS, then JavaScript, built for small screens and tested for accessibility.
| Item | Value |
|---|---|
| Unique mobile phone users, start of 2024 | 5.61 billion |
| Share of the world’s population using a mobile device | 69.4 percent |
| Share of the world’s population using the internet | Over 66 percent |
| Minimum content width for WCAG 1.4.10 reflow | 320 pixels |
| Equivalent starting viewport at 400% zoom | 1280 pixels |
The figures come from the Codeminer42 post on accessibility and responsiveness and the Educative lesson on fluid and adaptive design. They can change, so check the source before you rely on them.
What do web design basics actually include?
Web design is the craft of shaping how a website looks, reads and behaves in the browser. A RemNote study guide describes it as the front-end creation of a site, covering graphics, UI, markup, UX and SEO. That is a useful reminder that pictures and colours are only one slice of the job.
The basics fall into a handful of connected areas. Learn them roughly in this order and each one makes the next easier:
- Structure: semantic HTML that says what each piece of content is.
- Layout: how content is arranged, planned with sketches and built with modern CSS.
- Responsiveness: how the page adapts to phones, tablets and desktops.
- Colour and type: the palette and fonts that make text readable and give the page a voice.
- Navigation: the paths that let visitors find what they came for.
- Accessibility: making sure people with different abilities and devices can use all of it.
Standards sit behind every one of these areas. The same study guide notes that the W3C was founded in October 1994 and defines web standards, and following them keeps your pages readable and interoperable across browsers.
Web design shares a mindset with physical product work: both start from a person and a task, then shape form around function. If that crossover interests you, the guide on what is industrial design covers the physical side of the same thinking.
Interfaces also have a history worth a glance. Looking at retro computing is a good way to appreciate how hard limits on screens and memory shape design decisions.
The rest of this guide walks through each area in turn. Every section ends with something you can apply to a page today, even if you are only building a small personal site.
Structure first: HTML, CSS and JavaScript in the right order
The simplest mental model is a house. The study guide puts it as “HTML = foundation, CSS = paint, JS = furniture”, which makes the point that you need walls before you can hang pictures or add smart devices.
The method that follows from this is called progressive enhancement. You build the core content with HTML, add CSS styling, then add optional JavaScript features on top. If a script fails or a connection is slow, visitors still get the content.
A practical working order looks like this:
- Write the content and mark it up with semantic elements.
- Add CSS for layout, typography and colour.
- Layer JavaScript on top for optional interactions.
- Test with scripts off and with the keyboard only, then fix what breaks.
Semantic HTML deserves special attention. The Codeminer42 post quotes MDN: HTML defines the content and structure of any website, and written properly it also defines the meaning of that content in a machine-readable way. Semantic markup matters because screen readers depend on it, and the post says plainly that for screen readers to work properly the HTML must be semantic. The Codeminer42 post is a readable starting point.
In practice that means using elements for their real purpose:
- Headings for headings, in a logical order.
- Lists for lists and tables for tabular data.
- Buttons for actions and links for navigation.
- Landmarks such as header, nav and section to signal the page structure.
You also have to decide how the site is produced. The study guide suggests choosing a static site when content is largely unchanged, budget is tight and fast load is critical. It points to a dynamic, CMS-based site for frequently updated content.
Static does not mean you can skip search basics. The guide notes that even static pages need proper meta tags.
One more trap: valid code is not the same as accessible code. According to the study guide, validation checks syntax, not WCAG compliance, so a page can pass a validator and still fail real users.
Plan the layout: wireframes, grids and navigation
Before you pick a colour or a font, sketch the page. A website wireframe is a plain blueprint that shows where content goes and what matters most, and it is far cheaper to change than a finished design.
When you sketch, answer three questions for every page:
- What is the one thing a visitor should do or learn here?
- Which content supports that goal, and which can be removed?
- Where does the visitor go next?
Once the blueprint exists, you build it with CSS. The Codeminer42 post notes that tools like grid and flexbox make it easier to organise items on the screen in a responsive manner, and the Educative lesson lists CSS grid, flexbox, clamp and percentages as its responsive CSS toolkit. If you are unsure which to reach for, the comparison of css grid vs flexbox helps you pick.
As a rule of thumb, flexbox suits a single row or column of items, while grid suits layouts that need control in both directions. Many pages use both: grid for the overall frame, flexbox for the components inside it.
Navigation is the other half of structure. Visitors judge a site quickly, and a confusing menu sends them away, so website navigation design deserves as much care as the visuals. A few habits cover most of the ground:
- Use a short list of clear, plain-language labels.
- Keep the menu in the same place on every page.
- Show visitors which page they are on.
- Make sure every link and button works with the keyboard.
Do not assume a hidden menu icon solves small-screen navigation. The Codeminer42 post makes the point that alt tags and burger menus are not enough to make a site accessible.
Be sparing with decoration, too. The study guide flags carousels and sliders as an SEO and usability penalty, so treat them as something to avoid unless you have a strong reason.
Finally, give the page a clear visual hierarchy. Size, weight and spacing tell the eye where to start and where to go next, so the most important heading and action should be obvious within a moment of arriving.
Design for every screen with responsive and mobile-first thinking
Your visitors are on many devices. The Codeminer42 post, citing the Digital 2024: Global Overview Report, says the number of unique mobile phone users stood at 5.61 billion at the start of 2024, and that 69.4 percent of the world’s population used a mobile device. The same post reports that over 66% of the world’s population uses the internet, as of that 2024 report.
The post draws a simple conclusion: making your web app responsive is a must, especially since most online activities now happen on smartphones. Building only for desktop would exclude a large audience, which is why responsive web design is a core skill rather than an extra.
Responsive design is more than a flexible grid. The study guide lists it as a common misunderstanding and says true responsiveness also needs media queries, adaptable images and a touch-friendly interface. In practice you combine these pieces:
- Flexible layouts built with percentages, grid, flexbox and clamp.
- Media queries that change styling under defined conditions.
- Adaptable images that scale with their container.
- Touch-friendly controls with enough room to tap.
Media queries are not limited to width. The Codeminer42 post explains that conditions can also be device orientation, system preferences and others, such as a visitor’s choice of dark mode.
A warning from the same post: if you try to accommodate every single case, your code will definitely become very complex. Aim to cover most screen sizes without getting overly specific, and let simple pages stay simple.
The most dependable way to keep that complexity down is mobile first design. The study guide’s rule is to design for the smallest screen first and use CSS @media rules to adapt the layout for larger devices.
The study guide contrasts the two approaches on one point: starting small gives cleaner, leaner CSS, while starting large leads to more overrides. Its mental model is fitting a postcard into a pocket before expanding to a billboard.
A typical workflow follows from that:
- Write semantic HTML.
- Add base CSS for the smallest layout.
- Add min-width media queries where the content starts to look stretched.
- Check each stage on a real phone, not only in a resized desktop window.
Breakpoints should follow your content rather than particular devices. When a line of text gets too long or a gap looks awkward, that is the moment to add a rule.
Colour, type and visual hierarchy
Colour does two jobs: it sets the mood and it carries meaning. The guide on color theory for web design goes into palettes in depth, but a few basics make the biggest difference straight away.
- Choose a small palette: a neutral base, one main colour and one accent.
- Reserve the accent for actions so buttons stand out.
- Check the contrast between text and background every time.
- Never use colour as the only way to signal something, such as an error.
Contrast is not a detail. The Codeminer42 post, drawing on the WebAIM Million 2024 report, says the two most common accessibility errors relate to contrast between colours and the alt attribute on images. It adds that if those two main problems were resolved, most accessibility issues would be addressed.
Type is the second pillar. Most of a website is text, so web typography shapes how professional and readable the whole page feels. Good habits include a comfortable body size, generous line spacing, short lines and a clear step between heading levels.
Fonts need a fallback plan. The study guide distinguishes web-safe fonts from downloadable fonts: the former are guaranteed, while the latter require a fallback. Always name a similar system font after the one you download so text stays readable while the custom font loads or if it fails.
Motion is part of visual design as well. The study guide warns that unnecessary motion can distract, and that accessibility requires a way to disable it. It adds that media features such as prefers-reduced-motion must be respected for accessibility.
Pull these pieces together with consistency. Use the same spacing, the same heading styles and the same button treatment everywhere, and visitors will learn your interface in seconds instead of relearning it on every page.
Accessibility and a checklist before you launch
Accessibility means designing so that people with different abilities, devices and settings can use your site. The Codeminer42 post is blunt that it goes much deeper than adding alt attributes and a burger menu. It walks through the Web Content Accessibility Guidelines (WCAG) 2.2 to explain the reasons behind each principle.
For a structured overview of the rules and how they apply, see the notes on web accessibility guidelines. Treat them as part of your design process from the first sketch rather than a fix at the end.
The Educative lesson makes a mindset point that is easy to miss: aesthetics and beautiful design are still compatible with accessibility, but the concept of pixel-perfect design is not. Visitors will zoom, use screen magnifiers, change brightness and contrast settings and view your page on every kind of screen.
One concrete rule helps here. To meet WCAG 1.4.10, the Educative lesson says content needs to work at a minimum width of 320 pixels. That equals a starting viewport width of 1280 pixels at 400% zoom, so testing small phone widths and high zoom levels covers a lot of ground in one pass. The rule is described on the Educative lesson page.
Use this checklist before you publish a page:
- Headings follow a logical order and the HTML uses semantic elements.
- Text has enough contrast against its background.
- Every meaningful image has a useful alt attribute.
- You can use the whole page with the keyboard alone and see where focus is.
- Content still works at a narrow width and at high zoom, without sideways scrolling.
- Animations are minimal and can be switched off.
- Meta tags and page titles are filled in properly.
Run through the list on a real device when you can. Automated tools catch many problems, but they cannot tell you whether the page feels clear to a person.
Frequently asked questions
Where should I start with web design basics?
Show answer
Start with structure. Write your content in semantic HTML, then add CSS, and only then add JavaScript, which is the progressive enhancement order described in the RemNote study guide.
Is mobile first design always the right choice?
Show answer
For new projects it is the usual recommendation. The RemNote study guide advises applying mobile first to any new project, because starting from the smallest screen tends to produce leaner code.
Does passing an HTML validator make my site accessible?
Show answer
No. The RemNote study guide notes that validation checks syntax, not WCAG compliance, so you still need to test contrast, keyboard use, zoom and screen reader behaviour.
Which screen width should I test first?
Show answer
A narrow phone width. The Educative lesson says WCAG 1.4.10 expects content to work at a minimum width of 320 pixels, which also corresponds to a 1280 pixel viewport at 400% zoom.
Should I choose a static site or a CMS?
Show answer
It depends on how often content changes. The RemNote study guide suggests a static site when content is largely unchanged and speed matters, and a dynamic or CMS site for frequently updated content.
