Practicing my design -> code workflow with a to-do-list
Figma
HTML
SCSS
JavaScript
Wireframing
UI/UX
2024
v1
HTML
SCSS
JavaScript
CONSTRAINTS
Main constraints were using JavaScript. I do not understand it perfectly yet but I like to think I have a decent grasp on the core code needed to understand how to write functions. I am mainly lacking in just the knowledge department and just need to create projects that introduce new JS functions to me to build a sort of library of information and understanding. Ultimately repetition is one of the best ways to learn something.
CHATGPT
I did utilize ChatGPT for this project entirely in the JS code. My process was; design a feature -> try to code that feature with a JS function if needed -> fail/not enough understanding of how to -> ask ChatGPT.
So typically I can give some semblance of a function to GPT which majority of the time it understands and helps me fix it. Along with more context from myself in how I want it to work and how the user interacts with it.
Design Process/thinking
For this project I approached it somewhat differently. Because of the simple nature of what the project is being a to-do-list.
I considered what a to-do-list would need, wireframed how the features could look and how the user would interact with them. They are designed in isolation which lets me explore more options and gives me a variety of choices of how the interaction occurs and looks.
I then picked the best choices for the core features of my to-do-list going ahead with, checking an item off the list, adding an item, and deleting an item off the list. These were some of the first to be wireframed and coded.
The code
I decided because its quite a simple and straightforward project to just create it in Codepen. If I decided to expand it to be more of a full project Ill move it into VS code.
In the future my coding should be all around improved but if I were to build it out now I would be more considerate of my nesting, SCSS variables, class names, and just the overall structure of the HTML.
The Results
Check an Item off
Add an Item
Delete an Item
Here are the three features I wireframed, understanding the userflow/experience -> prototyping it with code.
Outcome
Pretty fun project to be honest. Even though its pretty simple, straightforward and a project thats probably been completed quite a bit. This project clearly demonstrates my ability to wireframe/design a feature/idea to then build it out with code and see how it works. Being able to design -> code is quite fun and gives me more of an appreciation for both.
v2
Figma
HTML
SCSS
JavaScript
2025
WHats next
I am going to start setting up the design doc for this project trying to cover everything in my new process of how I go about starting, creating and finalizing projects. Mainly looking at getting all the components, colors, typography etc. set up to creating a good idea of how all the features & functionality a to-do list could have.
Setting up a Repo for the project and pushing changes to GitHub. Whether or not I can do the developer side of stuff covering all and any ideas I have from the design process who knows but I will try. Mainly be doing the front-end-ness of the project and just building out the design -> code with some simple JS functionality.
Started the above 21/03/2025
ALL RIGHTS RESERVED