Have a browse through Kelly's Projects

About this portfolio

Hi, I'm Kelly Watters, and I made this website with HTML, CSS with SCSS, and JavaScript. It showcases some of my coding projects and ongoing learning in the (web) tech space.

My current projects focus on core web technologies: HTML, CSS, and JavaScript, supplementing with tools like SCSS where they offer benefit. My approach is to have a good foundation with the basics, especially since they're under the hood of popular web dev tooklits.

Responsive website design and development

This project is a custom website created with core web technologies and using end-to-end process, from design to development to deployment.

My aim was to create a website from scratch, exploring layout design and how it translates code, and proceed to having the code deployed online as a website for others to view.

I devised a fun content theme with cakes and baking, which influenced the design and development, particularly colour choices.

Project features

Responsive layout design with attention to font, colours, and contrast.
Code implementation in HTML, CSS, and JavaScript without frameworks. Emphasis on CSS grid and flexbox.
Learning about key topics in web dev, particularly accessibility, thinking in UI components, and images.
Source control with Git and GitHub and deployment to Netlify.
Custom-written copy text and license-appropriate image stock.

See the website

Visit the Cakes Unlimited website.

Note: This project is adapted from CSS course material from Kevin Powell @ Frontend Masters.

A variety of snippets of blog post articles on colour topics.

Colour research and blogging

Colour is a special interest of mine and I generally love to deep dive into topics and details.

I used this project to get the feel of doing focused research and thinking alongside my interests, then presenting that work in an engaging online format. Each blog article investigates a specific curiosity I have with colour, including topics on art pigments and digital art tools.

Project features

Methodical research: devising a research question, investigating existing information online and in print, reporting my own observations.
Management of a custom domain and template-based WordPress website.
Controlled experimentation with art materials such as paint mixing and swatching.
Custom image work using my own digitised painting, free image stock, and art supply brand marketing.

Browse through some articles

Swirls of black and white paint mixing greys on canvas.

Read article on chromatic black

A paintbrush dipped in blue paint resting on the edge of a paint jar.

Read article on pigment hues

A computer keyboard covered in coloured paint splatters.

Read article on mixing greys

A collage of watercolour paint tubes and flora in nature.

Read article on natural paints

A paintbrush dabbing a watercolour palette fading to a computer screen showing code.

Read article on creative coding

An online tic-tac-toe game board showing a game in progress.

Tic-Tac-Toe browser game

This Tic-Tac-Toe is my version of the classic game, made to play in a web browser.

I created this game to improve my JavaScript coding skills, and to learn more about game logic behind the scenes.

Project features

Framework-free HTML, CSS, and JavaScript with a minimalist design.

Launch a game of Tic-Tac-Toe in the browser.

$A computer drawing of an H tree fractal shape.$

Fractal visualisation

This project is a 2D drawing program that renders fractal-like H shapes to a web browser.

I created this program to visualise an interesting and abstract concept (fractals and H Trees), and to learn basic graphics programming with web technologies.