Barclays Website Rebuild

A front-end assignment where I recreated two pages of the Barclays website using semantic HTML, CSS, and JavaScript — including a working light and dark mode.

Front-end HTML / CSS / JS Light & Dark Mode 2 Pages
View Code on GitHub View Wireframe Back to Portfolio

Context

School assignment based on an existing website and provided wireframe reference.

Goal

Rebuild the layout accurately with clean HTML/CSS and add a functional theme toggle.

Deliverables

Two recreated pages + dark/light mode using JavaScript.

Focus

Structure, reusability, responsive behavior, and correct theming.

The Challenge

Accuracy + maintainability

The main challenge was to recreate the layout in a clean, semantic way while keeping styling consistent across components. On top of that, the design needed to work in both light and dark mode without duplicating lots of CSS.

Semantic HTML

Structured the pages using semantic HTML elements to improve readability and maintainability.

Reusable CSS

Created consistent styling using CSS variables and modular layout rules to keep the design scalable across pages.

Light & Dark Mode

Implemented a theme toggle using JavaScript and CSS variables so the interface can switch between light and dark themes.

Responsive Layout

Ensured the layout adapts across screen sizes while maintaining the original design structure.

Process

How I approached the rebuild

1) Break down the layout

Plan

I identified recurring blocks (header, navigation, hero, content sections) and planned a structure that could be reused between pages.

2) Build HTML first

Structure

I focused on semantic HTML so the layout stays stable and readable before adding styling.

3) Style with variables

Theme

Colors were handled through CSS variables to make light/dark mode easy to maintain.

4) Add theme toggle

JS

JavaScript switches between themes and keeps the UI consistent. (Optional improvement: storing preference in localStorage.)

Outcome & What I Learned

Front-end precision

The result is a clean recreation of two pages with a working theme toggle. This project strengthened my skills in building layouts from references, writing maintainable CSS, and structuring JavaScript for UI state.

Screens

Optional: add exports (light vs dark)