Designing a web application requires a very different mindset compared to building a marketing landing page or an e-commerce shop. Most standard websites are built for passive consumption and vertical scrolling, whereas applications demand high information density, navigation, and clear workspace organisation.

For my latest portfolio challenge, I built Quantix, a desktop-first financial trading and quantitative analytics interface translated directly from a detailed layout wireframe. The goal was to build a rich, interactive UI using pure HTML, custom CSS, and lightweight vanilla JavaScript.

Designing for an “Application” Workspace

The wireframe outlined a dense layout split into three distinct functional zones: global navigation, persistent sidebar tools, and a central workspace. To achieve this, I used CSS Grid to establish a rigid three-column application layout.

This structure gives each column a dedicated purpose:

1. Left Sidebar: A collapsible navigation drawer for secondary data tools.
2. Central Workspace: The active workspace featuring a user greeting banner, a live metrics showcase carousel, and a 4×3 matrix of trading tools.
3. Right Panel: Widgets for team chats, task management (My To-Do List), and recommended application highlights.

By keeping these panels fixed and letting content scroll within them independently, the interface feels like an installed desktop tool rather than a standard webpage.

Keeping JavaScript Lightweight and Purposeful

It is tempting to pull in a heavy framework or dozens of libraries when building an application dashboard, but I wanted to keep the codebase beginner-friendly, clean, and maintainable. I kept the JavaScript under thirty lines, focusing purely on essential interactions:

I wanted to keep the codebase simple, clean and maintainable. I tried my best to keep the JavaScript under thirty lines and searching up any features to add I thought might be helpful for interactivity.

The live deployment of this project can be found here on my GitHub!

For this assignment, I developed GreenNest, a demo property search platform designed to streamline the discovery of homes. The primary objective was to move away from cluttered interfaces towards a layout that prioritises user intent and visual hierarchy.

A Two-Tiered Layout Strategy

The main design challenge was organising a high volume of search controls without overwhelming the user, and using iframe. By using Flexbox and CSS Grid, I was able to stack these complex components while maintaining a logical reading order.

Technical Implementation and CSS Grid

The interface relies on CSS Grid for the property listing columns and the integrated map view. This approach offers significant advantages for responsiveness. As the viewport narrows, the layout transforms to stack content vertically.

I utilised the object-fit: cover property for property images. This ensures that the photos, regardless of the source aspect ratio, is presented within the UI.

Visual Branding and Performance

I opted for a ‘Deep Green’ colour scheme, implemented using CSS variables.

Performance was considered throughout the build. By keeping the CSS modular and minimising external dependencies, the platform remains lightweight. The use of sticky positioning on the search bar shows that filtering options are always accessible to the user.

The demo site can be found here.

Designing an image gallery often leads to rigid layouts where every photograph is forced into identical square containers. For my latest portfolio challenge, I wanted to avoid this constraint by constructing a custom landing page for Velvet Paw Portraits, a fictional pet photography studio.

The primary challenge was balancing an asymmetric, creative design with clean, maintainable code.

CSS Grid as the Foundation

Before writing any styles, I established a clear HTML structure complete with a top navigation bar and a semantic gallery container. Rather than relying on Flexbox for a two-dimensional layout, I utilised CSS Grid.

The key feature of this build is the use of grid-template-areas. By mapping out the rows and columns directly within the CSS, I could precisely place which photograph occupied a vertical slot and which occupied a horizontal space.

Smooth Micro-Interactions

A professional portfolio website should provide visual feedback when a user interacts with elements. I incorporated a subtle zoom effect for each gallery item using the CSS transform property combined with a smooth transition duration. When hovering over a portrait, the image scales up gently, offering immediate feedback without disrupting the page structure or causing layout shifts.

You can find the demo website here.

Layout design is a core skill for any front-end developer. For this portfolio piece, I challenged myself to build a landing page for ‘Form & Flow’, a fictional architecture studio, using only CSS Flexbox.

The Challenge

The wireframe needed a complex masonry-style gallery at the top and a structured invitation form at the bottom. The goal was to keep a good visual hierarchy while ensuring the components remained easy to maintain.

The Technical Execution

The gallery was the most significant hurdle. Since Flexbox is primarily a single-axis layout tool, I used a nested strategy. I treated the gallery as a flexbox row containing four vertical columns. By setting each column to flex-direction: column, I could control the vertical stacking of the images.

To maintain a consistent look for the images, I used the object-fit: cover property. This ensures that every image fills the containers perfectly, regardless of its original aspect ratio. This prevents the images from looking stretched or distorted.

For the contact portal, I used Flexbox to manage the input fields. By applying flex-grow: 1 to the input elements, the typing area automatically expands to fill the available width. This pushes the action icons to the far edge, ensuring a consistent and clean look for the entire form.

Overall, building this project reinforced that Flexbox is a versatile tool for complex layouts, provided you are willing to nest containers well. The demo site can be found here.

Web forms can be tricky to style. For my latest portfolio challenge, I built a custom order form for Pixel Pizza, a fictional retro arcade pizzeria.

Semantic HTML as the Foundation

Before writing any CSS, I structured the form using semantic HTML. Every input is wrapped in a <fieldset> to group related data, and every input has a dedicated <label> linked via the id attribute.

This improves the user experience significantly. By linking the label, clicking the word “Pepperoni” ticks the box next to it.

Focus States and Visual Feedback

A crucial part of form design is letting the user know exactly where they are. I used the :focus pseudo-class to remove the browser’s default blue outline when a user clicks into a text box. I replaced it with a bright pink border that matches the Pixel Pizza branding.

Overall, this portfolio project really challenged me to really think about accessibility when designing for web browsers.

The full project can be found on my GitHub Pages. If you are interested in the build, the repository is linked here.

For my latest portfolio project, I decided to strip all of that away. The brief was simple but intimidating: build a visually engaging webpage using nothing but text.

To tackle this, I created ‘Syntax Coffee Co.’, a fictional specialty roastery. The goal was to guide the user’s eye down the page purely through font choices, scale, and spacing. Without images to lean on, every CSS rule had to be intentional.

Establishing the Hierarchy

I paired three Google Fonts to create a clear, tiered structure:

• The Anchor: Bebas Neue provided the massive, heavy, condensed impact needed for the primary hero text.
• The Accent: Playfair Display offered an elegant, italicised contrast for secondary focal points.
• The Foundation: Inter kept the dense body copy clean and highly legible.

The demo site can be found here.