Document structure
Organise content with semantic elements, logical heading levels and useful landmarks.
Study HTML
Digital Foundations / Module 02
Make the web
Make the web
work for people.
Frontend development turns structure, design and behaviour into the interface people actually use. Learn how HTML, CSS and JavaScript work together to create accessible, responsive and interactive websites.
01<!-- Structure with meaning -->
02<main>
03 <section class="intro">
04 <h1>Build something useful</h1>
05 <p>Clear. Responsive. Accessible.</p>
06 <button id="explore">
07 Explore
08 </button>
09 </section>
10</main>
11// CSS controls presentation
12// JavaScript adds behaviour
Semantic structureHTML · CSS · JS
THE FRONTEND STACK Structure → Presentation → BehaviourDesigned for learners who want to understand, not just copy code.
A guided learning path
Three technologies. One interface.
Frontend development becomes easier to understand when each technology has a clear responsibility. Select a module to explore the concepts and skills it covers.
MODULE 01 / STRUCTURE
HTML: give content meaning.
HyperText Markup Language describes the structure and meaning of content. Elements identify headings, paragraphs, links, images, forms and page landmarks so browsers and assistive technologies can interpret the document.
Semantic markupElements, tags and attributes
Understand opening and closing tags, nesting, attributes, document structure and valid markup.
Semantic page landmarks
Use header, nav, main, section, article and footer according to their intended meaning.
Links, images and forms
Provide descriptive links, alternative text, associated labels and clear form instructions.
MODULE 02 / PRESENTATION
CSS: shape the experience.
Cascading Style Sheets control layout, typography, colour, spacing, responsive behaviour and visual states. Good CSS separates presentation from document meaning and uses a consistent set of design rules.
Layout & design systemsSelectors and the cascade
Learn selectors, inheritance, specificity, the box model and how browser styles are resolved.
Flexbox and Grid
Use Flexbox for one-dimensional alignment and Grid for two-dimensional page layouts.
Design tokens and states
Use CSS custom properties for colour and spacing; design hover, focus and disabled states consistently.
MODULE 03 / BEHAVIOUR
JavaScript: make interfaces respond.
JavaScript adds behaviour to a page: responding to events, validating input, updating the DOM and requesting data. Interactive code should be predictable, robust and accessible.
Events & interactionVariables, functions and logic
Learn values, conditions, loops, functions, arrays and objects as the foundation of browser scripting.
Events and DOM updates
Listen for clicks, input and form events, then update interface elements in response.
Validation and resilience
Validate input, handle errors, avoid unsafe HTML injection and provide clear feedback.
MODULE 04 / ADAPTATION
Responsive UI: design for every screen.
Responsive design allows a layout to adapt to different viewport sizes, input methods and user settings. It is more than shrinking a desktop page to fit a phone.
Mobile-first thinkingFluid layouts and breakpoints
Use flexible units, max-widths, Grid, Flexbox and media queries to adapt layout when content needs it.
Accessibility and input methods
Ensure controls work with keyboard, touch and assistive technology, with visible focus and readable contrast.
Performance and testing
Test real viewport sizes, reduce unnecessary assets and check layout shifts, loading and interaction.
Core skills
What frontend developers work with.
These topics connect the basics to the everyday decisions involved in building reliable interfaces.
Layout systems
Build predictable layouts with the box model, Flexbox, Grid and responsive constraints.
Study CSSInteraction logic
Respond to events, manage state and make interface behaviour clear to the user.
Study JavaScriptAccessibility
Design for different abilities using semantic markup, keyboard support and clear focus.
Check your knowledgeResponsive design
Adapt content and controls to different screen sizes without losing usability.
Study responsive UIDesign consistency
Use reusable patterns, tokens and components so pages feel like one coherent product.
Try the interface labInteractive interface lab
See how layout choices change a page.
Use these controls to preview three common frontend decisions. This small demonstration changes the preview directly in your browser.
- Switch between wide and compact layouts.
- Change the visual theme.
- Toggle the supporting content cards.
The preview is illustrative. A production interface should also be tested with keyboard navigation, screen readers and real devices.
Live layout previewInteractive example
STUDIO / LEARN
Ideas into useful interfaces.
Structure your content. Design the experience. Make it interactive.
Current setup: Wide layout · Blue theme · Supporting cards visible.
Check your understanding
Practice the fundamentals.
Answer the question, then review the key terms below. The quiz provides immediate feedback and does not record your responses.
Quick quiz / 01
Which technology primarily defines the meaning and structure of page content?
Choose the best answer.
Select one option:
Quick glossary
Terms worth remembering.
DOMThe Document Object Model represents a page as a tree of objects that scripts can inspect and update.
Responsive designA design approach that adapts layout and content to viewport and device conditions.
Semantic HTMLElements chosen for their meaning, not just their default visual appearance.
AccessibilityDesigning and implementing interfaces so people with different abilities can use them.