Project

Screenshot of the Manage web app homepage

Shortly

This project required me to build a fully responsive landing page using Figma design files; to integrate with a third-party URL-shortening API; and experiment with browser storage and clipboard functionality.

HTML5 / CSS3 / Vanilla JS / Git / Mobile-First / Fetch API

Project Background

Introduction

This project was a challenge from Frontend Mentor; a platform that provides professional-standard project briefs and design files for a variety of real-world front-end challenges. Frontend Mentor offers no rules or suggestions regarding which tools or methods to use to implement their challenges.

Project Brief

The project brief stated that users of the Shortly app should be able to:

View the optimal layout for the site depending on their device's screen size
Shorten any valid URL
See a list of their shortened links, even after refreshing the browser
Copy the shortened link to their clipboard in a single click
Receive an error message when the form is submitted if the input field is empty, or an invalid URL is provided

Learning

Building this project gave me experience with mobile-first responsive development; rendering dynamic content using HTML template tags and the JS .cloneNode() method; integrating with third-party APIs; and handling promises returned from asynchronous functions.

Static Previews

Screenshot of the Bookmark web app homepage

Space

This project involved building out an accessible, fully responsive, multi-page space tourism website, utilising a CSS design system, mobile-first workflow, and vanilla JS for interactive elements (e.g. mobile navigation and tabs).

HTML5 / CSS3 / Vanilla JS / Git / CSS Grid / ARIA

Project Background

Introduction

This project was a challenge from Frontend Mentor; a platform that provides professional-standard project briefs and design files for a variety of real-world front-end challenges. Frontend Mentor offers no rules or suggestions regarding which tools or methods to use to implement their challenges.

Project Brief

The project brief stated that visitors to the Space exploration Website should be able to:

View the optimal layout for the site depending on their device's screen size
See hover states for all interactive elements on the page
View each page and be able to toggle between the tabs to see new information

Learning

Building this project gave me experience with using a CSS design system to create CSS utility classes and custom properties, speeding up the build process across a multi-page site. I also learned to use CSS grid responsively across different screen sizes, and to incorporate accessible rich internet applications (ARIA) to enhance accessibility (e.g. roles and attributes).

Static Previews

Screenshot of the Insure web app homepage

Minimalist Portfolio

This project involved building an accessible, fully responsive, multi-page portfolio website, forming the basis for my personal portfolio. Again, I utilised a CSS design system, mobile-first workflow, and vanilla JS for interactive elements (e.g. client-side form validation and conditional content rendering).

HTML5 / CSS3 / Vanilla JS / Git / Mobile-First / CSS Flex

Project Background

Introduction

This project was a challenge from Frontend Mentor; a platform that provides professional-standard project briefs and design files for a variety of real-world front-end challenges. Frontend Mentor offers no rules/suggestions regarding which tools or methods to use to implement their challenges.

Project Brief

The project brief stated that visitors to the portfolio website should be able to:

View the optimal layout for the site depending on their device's screen size
See hover states for all interactive elements throughout the site
Click the "About Me" call-to-action on the homepage and have the screen scroll down to the next section
Receive an error message when the contact form is submitted if:
- The Name, Email Address or Message fields are empty
- The Email Address is not formatted correctly

Learning

Building this project gave me further experience with using a CSS design system to speed up the build process across a multi-page site. I also learned to integrate CSS flexbox and grid to achieve responsivity across different screen sizes; to customise the default HTML5 form validation tooltips; and to render content conditional upon data passed via URL parameters.