✦ Digital Agency

We build the digital
brands of tomorrow

Strategy, design and development for brands that want to make a mark. We craft experiences people remember.

View Our Work Get in Touch

What we do

🎨

Brand Design

Visual identities that communicate your values and connect with your audience.

💻

Web Development

Fast, accessible, and beautifully engineered sites built to scale.

📈

Growth Strategy

Data-driven campaigns and content that move the needle.

📄 agency-homepage.html HTML/CSS/JS

Document Structure

<!DOCTYPE html>

▼ explain

Line 1 — DOCTYPE Declaration ⚡ Memorise

This must be the very first line of every HTML file. It tells the browser which version of HTML to use. <!DOCTYPE html> means "use modern HTML5." Without it, browsers enter "quirks mode" and render things unpredictably.

→ HTML Basics → DOCTYPE Deep Dive

▼ explain

Line 2 — Root HTML Element 💡 Understand

The <html> element wraps everything on the page. The lang="en" attribute tells search engines and screen readers the page is in English — this is important for accessibility and SEO.

→ Accessibility → HTML Attributes

3 4 5 6

▼ explain

Lines 3–6 — The <head> Block ⚡ Memorise

The <head> contains metadata — information about the page that isn't shown to users.

charset="UTF-8" — Enables all characters (emojis, accented letters, etc.) to display correctly.

viewport meta — This is what makes sites responsive. Without it, mobile browsers zoom out to fit a desktop-width page. width=device-width tells the browser to match the device screen width.

→ Responsive Design → Meta Tags

Navigation Component

10 11 12 13 14

<nav class="main-nav"> <div class="logo">Nova<span>Studio</span></div> <ul class="nav-links"> <li><a href="#work">Work</a></li> </ul> </nav>

▼ explain

Lines 10–15 — Semantic Navigation 🔁 Pattern

We use <nav> instead of <div> because it's semantic HTML — it tells the browser (and screen readers) "this is site navigation".

The <ul> → <li> → <a> pattern is the standard for nav links. href="#work" links to an element with id="work" on the same page — an anchor link.

→ Semantic HTML → Anchor Links → Nav Patterns

20 21 22 23

.main-nav { display: flex; justify-content: space-between; align-items: center; }

▼ explain

CSS — Flexbox Navigation ⚡ Memorise

Flexbox is the modern way to lay things out in a row or column.

display: flex — turns on flexbox. Items line up in a row.
justify-content: space-between — pushes the logo to the far left, and nav links to the far right.
align-items: center — vertically centres the logo and links.

→ Flexbox Guide → CSS Layout

Hero Section

30 31 32 33 34 35

<section class="hero" id="home"> <div class="hero-content"> <span class="tag">✦ Digital Agency</span> <h1>We build <span>digital</span> brands</h1> <p>Strategy and development for tomorrow.</p> <a href="#work" class="btn">View Work</a> </div> </section>

▼ explain

Lines 30–37 — Hero Section Structure 🔁 Pattern

<section> is a semantic HTML5 element. It groups related content. Adding id="home" lets anchor links scroll here.

Notice the wrapper div pattern: the outer <section> controls background/full-width, while the inner class="hero-content" div controls the max-width and padding.

The <span> inside <h1> lets us colour just one word — a common design technique.

→ Semantic Elements → Hero Section Pattern → CSS Backgrounds

CSS Custom Properties

1 2 3 4 5

:root { --primary: #7c6fff; --bg: #0a0a0f; --text: #e8e8f0; --radius: 10px; }

▼ explain

CSS Variables (Custom Properties) ⚡ Memorise

:root targets the top of the document. Variables defined here are available everywhere.

To use them: color: var(--primary). If you want to rebrand the whole site, change --primary once. This is professional CSS architecture.

→ CSS Variables Deep Dive

Gradient Backgrounds

20 21 22 23

.hero { background: linear-gradient( 135deg, #0a0a12 0%, #12102a 50%, #0a1520 100%); }

▼ explain

CSS Gradient Backgrounds 💡 Understand

linear-gradient() blends colours in a straight line.

135deg — the angle. 0deg is bottom to top; 90deg is left to right; 135deg is diagonal (top-left to bottom-right).

The colour stops (0%, 50%, 100%) control where each colour appears along the gradient.

→ Gradients Guide

YOUR STUDY NOTES

⚡ Memorise Key Lines to Know by Heart

→ <!DOCTYPE html> — always first

→ charset + viewport meta — always in head

→ display: flex — layout workhorse

💡 Understand Concepts to Grasp

→ Semantic HTML — meaning over divs

→ Box model — padding, border, margin

→ Specificity — why your CSS sometimes loses

HTML Basics

HTML (HyperText Markup Language) is the skeleton of every web page. It describes the structure and meaning of content using elements — paired tags that wrap content.

example.html

/* Every HTML element looks like this: */ <tagname attribute="value"> ← opening tag Content goes here </tagname> ← closing tag /* Self-closing tags (no content needed): */ <img src="photo.jpg" alt="A photo"> <br> <hr> <input>

DOCTYPE Declaration

The <!DOCTYPE html> declaration is not an HTML tag — it's an instruction to the browser. It must be the very first line of your file, before even the <html> tag.

Without it, browsers render in "quirks mode" — an old compatibility mode that causes layout bugs.

1 Exercise — Write a minimal HTML page

Write the five lines every HTML page must start with: the DOCTYPE, opening html tag, head with a title, and an opening body tag.

<!DOCTYPE html> <html lang="en"> <head> <title>My Page</title> </head> <body>

HTML Attributes

Attributes provide extra information about an element. They always go in the opening tag, written as name="value" pairs.

attributes.html

/* Common attributes and what they do: */ <a href="https://example.com">Link</a> ← where it goes <img src="photo.jpg" alt="Sunset"> ← source + accessible text <div class="card" id="main"> ← CSS hooks <input type="text" placeholder="Search">

2 Exercise — Add attributes

Write an image tag that shows "logo.png", with alt text of "Company Logo", and a class of "site-logo".

Semantic HTML

Semantic HTML means using elements that describe their meaning, not just their appearance. A <nav> means navigation. A <main> means primary content. This matters for accessibility, SEO, and readability.

semantic.html

/* ❌ Non-semantic (all divs — machines can't understand) */ <div class="nav">...</div> <div class="header">...</div> <div class="content">...</div> /* ✅ Semantic (clear meaning for everyone) */ <nav>...</nav> <header>...</header> <main>...</main> <article>...</article> <aside>...</aside> <footer>...</footer>

Navigation Patterns

The correct HTML pattern for navigation is always: <nav> wrapping a <ul> (unordered list) of <li> items containing <a> links. This is what screen readers expect.

CSS Layout

CSS layout determines how elements are positioned and sized on screen. The two main modern tools are Flexbox (one dimension) and Grid (two dimensions).

Flexbox

Flexbox arranges items in a row or column. It's perfect for navbars, button groups, and any single-axis alignment problem.

flexbox.css

.container { display: flex; /* activate flexbox */ flex-direction: row; /* row (default) or column */ justify-content: center; /* main axis alignment */ align-items: center; /* cross axis alignment */ gap: 16px; /* space between items */ flex-wrap: wrap; /* wrap to next line if needed */ } /* justify-content values: */ /* flex-start | flex-end | center | space-between | space-around */

3Exercise — Flexbox Nav

Write CSS to make a .nav display as a horizontal row with the logo on the far left and links on the far right, both vertically centred.

.nav { display: flex; justify-content: space-between; align-items: center; padding: 16px 32px; }

CSS Variables

CSS custom properties (variables) store values you reuse throughout a stylesheet. Defined on :root to be globally available.

variables.css

:root { --color-brand: #7c6fff; --font-size-base: 16px; --spacing-md: 24px; } /* Using variables: */ .button { background: var(--color-brand); padding: var(--spacing-md); font-size: var(--font-size-base); } /* Override in a component: */ .dark-theme { --color-brand: #ff6b6b; /* overrides locally */ }

CSS Gradients

Gradients create smooth transitions between colours. They're set as background values — not colours themselves.

gradients.css

/* Linear gradient — straight line */ background: linear-gradient(to right, #7c6fff, #ff6b6b); background: linear-gradient(45deg, #000 0%, #333 100%); /* Radial gradient — radiates from center */ background: radial-gradient(circle, #7c6fff 0%, transparent 70%); /* Multiple layers (last = bottom): */ background: radial-gradient(circle at top right, rgba(124,111,255,.2), transparent 60%), linear-gradient(180deg, #0a0a12, #0d0d20);

4Exercise — Gradient Hero

Write a CSS background that fades diagonally (135 degrees) from a very dark navy (#0a0a12) to a dark purple (#12102a) to a dark teal (#0a1520).

background: linear-gradient( 135deg, #0a0a12 0%, #12102a 50%, #0a1520 100% );

Responsive Design

Responsive design means your site works beautifully on any screen size — from a 320px phone to a 4K monitor. The core tools are the viewport meta tag, CSS media queries, and relative units.

responsive.css

/* Mobile-first: write base styles for small screens */ .grid { display: grid; grid-template-columns: 1fr; /* 1 column on mobile */ gap: 16px; } /* Then override for larger screens: */ @media (min-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); /* 2 cols on tablet */ } } @media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); /* 3 cols on desktop */ } }

Accessibility

Accessible HTML works for everyone — including people using screen readers, keyboard navigation, or other assistive technologies. Good accessibility is also good SEO.

accessibility.html

/* Always add alt text to images: */ <img src="team.jpg" alt="The NovaStudio team at the office"> /* Use proper heading hierarchy: */ <h1>Main page title</h1> ← only one per page <h2>Section title</h2> <h3>Sub-section</h3> /* Label form inputs: */ <label for="email">Email</label> <input type="email" id="email">

Same Site, Different Languages

// The same navigation component, built three ways

HTML / CSS / JS

<nav class="nav"> <a href="/">Home</a> <a href="/about">About</a> </nav>

▼ explain

HTML Approach

Simple, static HTML. The nav links are hardcoded. CSS handles styling, and JavaScript might add a hamburger menu toggle. Best for: simple sites, beginners, static content.

Ruby on Rails (ERB)

<%# Rails ERB navigation partial %> <nav class="nav"> <%= link_to "Home", root_path %> <%= link_to "About", about_path %> <% if user_signed_in? %> <%= link_to "Dashboard", dashboard_path %> <% end %> </nav>

▼ explain

Ruby on Rails Approach

ERB (Embedded Ruby) mixes Ruby code into HTML. <%= %> outputs a value. <% %> runs code without output. link_to generates a correct anchor tag using Rails named routes. Conditionally show the dashboard link only if a user is logged in.

→ Rails Routing → ERB Templates

Key Differences

LINKING

HTML: Hardcoded paths like /about

Rails: Named routes like about_path — Rails auto-generates the URL. Change the route once, updates everywhere.

DYNAMIC CONTENT

HTML: Needs JavaScript to show/hide elements based on state.

Rails: Ruby logic runs server-side. if user_signed_in? is evaluated before HTML is sent to the browser.

REUSE

HTML: Copy-paste across pages.

Rails: Partials (_nav.html.erb) are included with render 'nav' — write once, use everywhere.

Build Sites.Understand EveryLine of Code.

We build the digitalbrands of tomorrow

What we do

Brand Design

Web Development

Growth Strategy

HTML Basics

DOCTYPE Declaration

HTML Attributes

Semantic HTML

Navigation Patterns

CSS Layout

Flexbox

CSS Variables

CSS Gradients

Responsive Design

Accessibility

Build Sites.
Understand Every
Line of Code.

We build the digital
brands of tomorrow