Learn Web Design, How to Code & Choosing a Content Management System

More and more people are going online for everyday tasks such as social media, shopping, learning, and general browsing.

Businesses are also increasingly building websites to sell products and services, especially following major shifts in online demand over recent years.

Over the past 20 years, web design has evolved significantly. Search engines like Google now prioritise mobile-friendly, fast-loading, and secure (HTTPS) websites, which means modern web design needs to follow current best practices.

In this guide, we’ll explore how to get started with web design, where to learn coding, and when to use a Content Management System (CMS) instead of building a site from scratch.

If you're completely new to web design, this is a great starting point.

Let’s Begin

So you want to become a web designer but aren’t sure where to start? You essentially have two main paths.

The first is learning to code your own website using HTML, CSS, and JavaScript. This gives you full control but takes time and practice.

The second is using a Content Management System (CMS), which allows you to build and manage websites without needing to code everything manually.

A popular example is WordPress, which powers a large percentage of websites worldwide and allows users to customise themes, install plugins, and manage content easily.

Learning HTML

HTML (HyperText Markup Language) is the foundation of every website.

It is used to structure content using elements like headings, paragraphs, images, and links.

When using HTML, you’ll see tags such as < and > which define elements on a page.

Resources

Here are some useful tools to help you practice:

Download Pulsar Edit – A free code editor.

Online HTML Editor – Practice HTML instantly in your browser.

Bootstrap – A framework for building modern responsive websites.

---

Basic HTML Examples

Headings

Headings structure your content from H1 (most important) to H6 (least important).

<h1>This is an H1 heading</h1>
<h2>This is an H2 heading</h2>
<h3>This is an H3 heading</h3>

Use H1 only once per page for the main title.

Paragraphs

Paragraphs are created using the <p> tag.

<p>This is a paragraph.</p>

Images

Images use the <img> tag and should always include alt text for accessibility and SEO.

<img src="image.jpg" alt="Description of image">

Links

Links allow users to navigate between pages or external websites.

<a href="https://example.com">Visit site</a>

To open in a new tab:

<a href="https://example.com" target="_blank">Visit site</a>

Spacing & Structure

Use <br /> for line breaks and <hr> for section dividers.

---

CSS Basics

CSS (Cascading Style Sheets) is used to style your website and control layout, colours, spacing, and typography.

It is best practice to keep CSS in a separate stylesheet for performance and organisation.

Simple Example

.example { color: #FF3333; padding: 10px; }

Content Management Systems (CMS)

A CMS allows you to build and manage websites without needing to write all the code manually.

This makes website management faster, easier, and more accessible for beginners.

Popular CMS platforms include:

• WordPress
• Drupal
• Joomla

WordPress

WordPress is the most widely used CMS in the world, powering a large portion of modern websites.

It is open-source and includes thousands of themes and plugins, allowing full customisation without advanced coding knowledge.

Many well-known organisations use WordPress due to its flexibility and scalability.

Code-Based Alternatives

For developers who prefer full control, frameworks like Bootstrap and modern front-end tools offer faster, lightweight builds compared to traditional CMS platforms.

Summary

Web design combines creativity and technical skills. Whether you choose to code manually or use a CMS, both paths can lead to professional-quality websites.

The key is consistency, practice, and understanding how modern websites are structured and optimised.