🌼 Natalie Williams

Freelance Work

Freelance Work - E-commerce store migration to Shopify

Using HTML, CSS, JavaScript and Liquid my role is to build a Shopify Theme to migrate the existing content and implement a responsive design for mobile and tablet users. Using the Liquid template language, created by Shopify, I am creating and customising "sections" which can easily be updated by non-technical staff allowing the content and marketing team better control of the website in line with current campaigns. This is acheived by defining properties to be customised within a section's schema, and styling the UI for the dynamic content.

My Recent Projects

Cart Project - Nat's Bakery

The aim of this project was to create a responsive website with a functional cart for a fictional online bakery. Each product is loaded dynamically from a json file using template literals to insert dynamic variables into the HTML. When an item is added to cart, the cart will open and display the contents. Once added, the "Add to Cart" button is disabled and confirms the item is now "In Cart". The user is able to update the quantity desired or remove items from within the cart. Any changes to the cart are saved to local storage.

View project

Node.js, Express and MongoDB project - Can You Dig It

Can You Dig It is a web app for gardeners to keep track of their activity for the year. Built with Node.js, Express and MongoDB we can store data using the MongoDB Atlas cloud based database. Items can be added, marked as complete and deleted. When marked as complete the item is striked through making the list reusable year after year. EJS is used to create reusable components, making the project more efficient to develop and debug. My aim to is introduce Google Oauth to allow individual users to log in and store their own individual lists. Please feel free to add and remove your own items to test the functionality.

View project

Dark Theme Project - Clock

This project is a simple clock built with JavaScript. Every second the time is calculated and displayed on the clock face and as a numerical value, alongside the current date. There is a dark theme created within the CSS (to maintain the separation of concerns) and when the button is clicked the class is applied or removed with JavaScript.

View project

Form Validation Project - Sign Up

This project uses Regular Expressions to validate data entered into a sign up form. Each input has an ID with an event listener set to validate the data on blur (once focus is lost). If the data does not meet the requirements an error div is revealed confirming what is required in order to proceed. By not initially displaying all requirements we can keep a minimal UI free from "visual noise" as most users will understand what to do. By revealing the requirements on error we highlight to the user exactly what is required to prevent any guessing and enable them to proceed on their second attempt. The project is responsive for desktop and mobile.

View project

Smaller Projects

Recipe Cards Image Gallery Would You Rather Loading Page Counter Search Loader