Web basics for site builders

What sits under every site you will build: domains, DNS, hosting, HTTPS, and enough HTML and CSS to read and fix what a page builder produces.

Domain and registrar

Also called domain name, registrar, domain

What: A domain is the name people type, such as example.com. You rent it yearly from a registrar, which records who owns it and which name servers answer for it.
Why: Whoever holds the registrar account controls the site and the email. Clients should own their domain in an account they can log into.

Watch out

Registering a client domain in your own account, then becoming the bottleneck for every renewal and transfer for years.

DNS records

Also called DNS, A record, CNAME, MX record, TXT record

What: Entries that tell the internet where a name points: A to an IP address, CNAME to another name, MX to mail servers, TXT for verification and email security such as SPF.
Why: Connecting a domain to WordPress hosting, Shopify or Webflow is a matter of setting the records the platform lists. Changes spread as old answers expire (their TTL).

Watch out

Deleting the MX records while pointing the site elsewhere, which silently breaks the client email.

Hosting models

Also called hosted vs self-hosted, SaaS, managed hosting, shared hosting, hosted platform

What: Self-hosted software such as WordPress runs on a server you rent (shared, VPS or managed). Hosted platforms such as Shopify and Webflow run the servers, updates and security for a monthly plan.
Why: The model decides who patches software, who takes backups, what you can customise and what the client pays every month.
Example: A bakery wants a blog and a menu: cheap managed WordPress works. The same bakery selling 300 products online with card payments may be happier on Shopify.

HTTPS and SSL certificates

Also called SSL, TLS, Let's Encrypt, HTTPS, certificate

What: HTTPS encrypts traffic between browser and server using a TLS certificate for the domain. Shopify, Webflow and most WordPress hosts issue free certificates automatically.
Why: Browsers mark plain HTTP pages as not secure, and payment and login forms must never travel unencrypted.

Watch out

Leaving old http:// image or script links in content, which triggers mixed content warnings after the switch.

HTML structure

Also called semantic HTML, headings

What: Elements that give a page meaning: one h1, headings in order, nav, main, footer, real a links and button elements, alt text on images.
Why: Search engines, screen readers and page builders all rely on this structure. You need to read it to debug any theme.

HTML

<main>
  <h1>Handmade soap from Lahore</h1>
  <h2>Best sellers</h2>
  <img src="rose.webp" alt="Rose soap bar on a slate tray"
    width="600" height="400">
  <a href="/shop/">Browse the shop</a>
</main>

CSS for tweaks

Also called selectors, specificity, media queries

What: Selectors pick elements, properties style them, and the cascade and specificity decide which rule wins. Media queries change styles by screen width.
Why: Most client requests are small visual fixes. Knowing where a style comes from lets you change one rule instead of fighting the theme.

CSS

.site-header .button {
  background: var(--brand, #0f766e);
  padding: 0.75rem 1.25rem;
}
@media (max-width: 600px) {
  .site-header .button { width: 100%; }
}

Watch out

Piling on !important until nothing can be changed without another !important.

Browser DevTools

Also called inspect element, Network tab

What: The browser panel that shows the HTML, the CSS rules applied to any element, network requests and console errors, with live editing.
Why: It answers "why does this look wrong" and "why is this slow" in seconds, on any platform.
Example: Right click a misaligned button, choose Inspect, and the Styles pane shows which theme rule sets its margin and from which file.

What a CMS does

Also called content management system, CMS

What: A CMS stores content (pages, posts, products) in a database separately from the design (a theme or template), and lets non-developers edit content through an admin.
Why: Separating content from design is what lets a client update prices or post news without breaking the layout.

Watch out

Hard coding text into templates, so every small content change becomes a paid developer task.

Go deeper