Beginner Guides
Short, practical guides to the most important concepts in web design and development. Written for complete beginners — no experience needed.
A website is a collection of files — mostly HTML, CSS, and image files — stored on a computer called a server. When someone types your website address into a browser, the browser connects to that server across the internet and downloads those files. The browser then reads the HTML and CSS code and "renders" it visually as the page you see on screen.
Every website has an address called a URL (like example.com). Behind that address is an IP address — a string of numbers that identifies exactly where the server is located. The Domain Name System (DNS) acts as the internet's phone book, translating your easy-to-remember domain name into that numerical IP address automatically.
Websites live on web servers, which are just computers connected to the internet that are designed to respond to requests and serve files reliably 24 hours a day. A "web hosting" service provides this server space for you — you pay them to store your files and keep them accessible online.
Some websites are "static" — every visitor sees the same files. Others are "dynamic" — a server generates a custom page for each visitor based on a database (like a news site showing your personalised feed). Static sites are simpler, cheaper, and faster to load. Dynamic sites are more powerful but more complex to build and maintain.
At its most basic, a website is just a folder of text files that browsers know how to display. The complexity comes from what you do with those files — not from some mysterious technology only experts understand.
HTML stands for HyperText Markup Language. It's the foundational language of every webpage — it defines what's on the page, not how it looks. HTML uses "tags" to mark up content. A tag is a keyword wrapped in angle brackets, like <p> for paragraph or <h1> for a main heading.
Most tags come in pairs — an opening tag and a closing tag. The closing tag has a forward slash: <p>This is a paragraph.</p>. The content sits between the two tags. Some tags are "self-closing" and don't need a pair — like <img> for images or <br> for a line break.
HTML documents follow a standard structure. At the top, <!DOCTYPE html> tells the browser this is HTML5. Then comes the <html> element that wraps everything. Inside it, the <head> contains invisible information like the page title and CSS links. The <body> contains everything the visitor actually sees.
HTML isn't programming — you can't do calculations or logic with it. It's purely for describing content: "this is a heading", "this is an image", "this is a list". That makes HTML remarkably forgiving — browsers will usually display something sensible even if you make mistakes. It's also why HTML is the perfect starting point for anyone learning to build for the web.
Modern HTML (HTML5) also includes "semantic" tags that describe the purpose of content, not just its appearance — like <header>, <nav>, <article>, and <footer>. These help search engines and screen readers understand your page's structure.
CSS stands for Cascading Style Sheets. It's the language that controls how HTML elements look — colours, fonts, spacing, layout, animations. While HTML says "this is a paragraph", CSS says "this paragraph should be 18px, dark grey, with 1.6em line spacing".
CSS works by targeting HTML elements using "selectors" and applying "rules" to them. A rule is a property and a value, written as: color: blue;. A group of rules wrapped in curly braces is called a "declaration block". Together, a selector and its declaration block form a "ruleset".
The word "cascading" means styles inherit and layer on top of each other. A style set on a parent element can cascade down to its children. When two rules target the same element, the more specific one wins — and if they're equally specific, the one written later in the CSS file takes precedence. This hierarchy is called "specificity".
CSS connects to your HTML in three ways: inline (written directly in an element's style attribute — generally bad practice), internal (inside a <style> tag in the HTML head), and external (in a separate .css file linked via <link rel="stylesheet"> — the best approach). An external stylesheet can be applied to every page on your site from one file.
Modern CSS has become incredibly powerful. CSS Grid and Flexbox handle complex layouts. CSS variables let you define values once and reuse them everywhere. CSS animations and transitions can create smooth effects without any JavaScript. You can build a lot of impressive-looking websites with just HTML and CSS.
A web designer creates the visual look and user experience of websites. They decide how a site looks, how it's organised, and how easy it is to use. This covers colour schemes, typography, button styles, layouts, spacing, and the overall visual language that makes a site feel coherent and professional.
The process typically starts with discovery — understanding the client's goals, their audience, and what the site needs to achieve. Then comes wireframing: rough sketches or diagrams showing the layout and structure of each page before any visual design begins. Wireframes focus on content placement and user flow, not aesthetics.
From wireframes, designers move into visual design using tools like Figma. This is where colours, typography, images, and component styles are defined. A good designer creates a consistent visual system — not just one-off page designs — that can scale across the entire site.
Web designers often work closely with web developers who write the code. Some designers code their own work (often called "design/developers" or "unicorns") — this is increasingly common as tools like CSS Grid and Figma have made design and code more aligned. Others hand off design files to a separate developer.
The distinction between "web design" and "web development" can blur: design without code knowledge leads to designs that are hard or impossible to build; development without design sense leads to sites that work but look terrible. The best web professionals understand both sides — even if their primary strength is in one area.
A domain name is your website's address on the internet — like mybusiness.com. You don't "buy" a domain; you rent it annually from a domain registrar (like Namecheap, Google Domains, or Cloudflare). Prices vary by extension (.com domains typically cost £10–£15/year). You own it as long as you keep renewing it.
Hosting is the service that stores your website files on a server and keeps them accessible online 24/7. Domain and hosting are separate things — your domain is your address, your hosting is the actual building. You can buy them from the same provider or different ones (and then connect them by updating the domain's DNS settings to point to your host).
There are several types of hosting: Shared hosting is the cheapest option (£2–£10/month) — your files sit on a server with hundreds of other sites. Performance can be inconsistent. VPS (Virtual Private Server) gives you a dedicated portion of a server — more reliable and faster, typically £15–£40/month. Managed WordPress hosting is optimised specifically for WordPress sites. Static hosting (Netlify, GitHub Pages, Cloudflare Pages) is ideal for simple sites without databases — often free, very fast.
When you set up hosting, you'll typically receive "nameserver" details. You update your domain registrar to point to those nameservers, and the DNS change (which can take up to 48 hours to fully propagate) connects your domain to your new hosting. After that, anyone typing your domain will be served your website from your host's servers.
For most small businesses and personal sites, static hosting on Netlify or Cloudflare Pages is the best starting point — it's free, fast, secure, and requires minimal technical knowledge to set up.
Mobile-first design means starting your design and CSS with the smallest screen (mobile phones) and then progressively enhancing it for larger screens like tablets and desktops. This is the opposite of the older "desktop-first" approach where designers built full desktop layouts and then tried to shrink them for mobile.
Why does this matter? Over 60% of web traffic now comes from mobile devices. Google also uses the mobile version of your site as the primary version for indexing and ranking — this is called "mobile-first indexing". If your site looks terrible on a phone, you lose both users and search rankings.
In CSS, mobile-first means writing your base styles for small screens and then using "min-width" media queries to add or change styles as the screen gets wider. For example: @media (min-width: 768px) { ... } applies those styles only on screens 768px or wider. This approach tends to produce cleaner code because you're layering complexity on top of simplicity, not trying to remove complexity for smaller screens.
Mobile-first design also forces good design decisions. When you have limited space, you have to prioritise. What's the most important content? What can be hidden or moved? This constraint often results in cleaner, more focused designs that also happen to look great on desktop. The key layout tools for mobile-first development are CSS Flexbox and Grid, combined with relative units like percentages and rem instead of fixed pixel values.
Key things to check on mobile: touch targets should be at least 44×44px, text should be readable without zooming, no horizontal scrolling, and forms should be easy to fill in on a small keyboard. The Responsively App (free) lets you test your site at multiple screen sizes simultaneously.
Getting found on Google involves three stages: crawling, indexing, and ranking. First, Googlebot (Google's automated crawler) discovers your site by following links from other websites or from a sitemap you submit. It reads the content and code of each page it finds. This is why having links from other websites pointing to yours (backlinks) helps — they give Googlebot more pathways to discover your content.
After crawling, Google adds your pages to its index — a massive database of content from across the web. Only indexed pages can appear in search results. You can check if your pages are indexed by typing site:yourdomain.com into Google. If pages aren't appearing, they might be blocked by your robots.txt file, marked with noindex, or simply not yet discovered.
Ranking is the most complex part — Google uses over 200 factors to decide which indexed pages appear for which searches, in what order. The most important factors include: content quality and relevance (does your page actually answer the search query?), page experience (does it load fast, work on mobile, and not have intrusive ads?), backlinks from authoritative websites, and technical factors like structured data, canonical tags, and clean URL structure.
For a small business or new site, the practical starting points are: make sure your page titles and meta descriptions clearly describe what's on each page; use headings (H1, H2) logically; write genuinely useful content; get your business listed in Google Business Profile; and make sure your site loads quickly on mobile. Submitting a sitemap via Google Search Console also helps Google index your pages faster.
SEO is a long game — results rarely come overnight. A new site might take 3–6 months to start ranking meaningfully even with good practices. Consistency matters more than any single tactic.
A CMS (Content Management System) is software that lets you create and manage website content through a user-friendly interface — without writing or editing code directly. Instead of editing HTML files, you log into a dashboard and use forms, editors, and menus to update your site. WordPress is the most widely used CMS, powering over 40% of all websites. Others include Squarespace, Wix, Shopify, and Webflow.
The main advantage of a CMS is that non-technical people can update content. A business owner can write a blog post, update product prices, or change a phone number without needing a developer. This is valuable if your site changes frequently — a restaurant updating its menu, a news site publishing daily articles, or a shop adding new products.
The downsides are real though. A CMS adds complexity and potential security vulnerabilities (WordPress sites are a common target for hacking if not kept updated). CMS sites can be slower than hand-coded sites because they generate pages dynamically from a database rather than serving pre-built HTML files. And themes and plugins can conflict with each other in frustrating, hard-to-diagnose ways.
For some types of sites, a CMS is overkill. A static "brochure" site with five pages that rarely change doesn't need a database or a backend — it can be built as plain HTML files and hosted for free. This approach is faster, cheaper, more secure, and easier to maintain. Modern static site generators can make this process just as manageable as a CMS for developers.
The question to ask is: "Will non-technical people need to update this regularly?" If yes, a CMS probably makes sense. If the site will be updated mainly by developers or rarely changes, a static approach may serve you better.