DEV Community: Louise Aldridge

From Marketing to Frontend Development

Louise Aldridge — Mon, 30 Jun 2025 08:52:49 +0000

It’s been just over a year since leaving my marketing role and embarking on a career switch to frontend development, and I wanted to take some time to reflect on what this past year has taught me.

How I realised tech was what I loved

Before I made the leap, I worked in marketing and ecommerce roles where I often found myself tinkering with code in my spare time. In my ecommerce role, I frequently edited HTML email templates, adjusted landing pages, and troubleshooted user and website/app issues - which made me realise how much I enjoyed those technical moments. However, like many people juggling a full-time job, it was difficult to dedicate consistent, meaningful time to learning development when I was exhausted from work.

It wasn’t until my role shifted to being 100% marketing-focused that I truly noticed what was missing. I found myself getting unusually excited when asked to help troubleshoot a Zoom issue or contribute to a technical problem. Those small moments reminded me how much I enjoyed working with technology and solving problems.

I took part in a Code First Girls Kickstarter Web Development course to jog my memory on the coding I had already learned. I eventually presented my solo project, Dish Diaries, which was met with lovely feedback from other students and recognition as a Highly Commended Candidate. This was a big confidence boost and encouraged me to pursue learning more frontend development.

After my marketing role was made redundant, I decided it was time to focus on my long-term goal of becoming a frontend developer.

Some key things I've learned this year

I’m fortunate to have been in a position where I could take a step back and dedicate focused time to learning frontend development. Over the past year, I’ve built projects, learned new tools, languages, and frameworks, and spent countless hours navigating the frustrations and wins that come with learning web development.

Consistency beats intensity. Short, regular learning sessions have done more for my progress than occasional long marathons. I found Scrimba’s Frontend Career Path especially helpful because each lesson is brief, and the instructors often encourage breaks to help soak in new information.
Build your own solo projects. Tutorials are a great starting point, but I’ve found working on solo projects forces you to problem-solve, apply what you’ve learned, and figure things out without step-by-step instructions. You can check out a few of my projects here or on my GitHub.
The frontend ecosystem moves quickly. It can be overwhelming at times, but I focused on the core skills at first - HTML, CSS, JavaScript - before diving into frameworks such as React and more complicated topics like TypeScript. Having a solid foundation made it much easier to understand how frameworks work and why they’re so widely used.
Accessibility matters. I used to work in marketing at charity AbilityNet, which is where I first learned about the importance of creating inclusive, usable digital experiences. Since then, it’s something I’ve cared about deeply. There’s always more to learn, but I’m committed to making sure the websites and applications I build are accessible to everyone, and to continue growing my skills in this area.
AI is great, but it’s not a replacement for doing the work yourself. I’ve always learned best by doing, and sometimes AI feels a bit like someone fixing a problem for you instead of showing you how to solve it. Simply copying and pasting an AI-generated solution into your project might get the job done, but it won’t help you build lasting skills. However, it’s incredibly helpful when used thoughtfully - like explaining a concept or providing tailored, interactive examples.

What's next

I’m proud of the progress I’ve made, even though at times it feels like I’m standing still. Looking back at my first few projects is a good reminder of how far I’ve actually come. Over the next year, I plan to continue honing my skills, build more solo projects, delve into backend, contribute to open source projects, and hopefully land my first professional frontend development role.

If you’re reading this and also learning to code or considering a career switch, I hope this encourages you to keep going. It’s not easy, but it’s absolutely worth it.

My Portfolio: https://louise.codes/
My GitHub: https://github.com/louiseka

Building a Goal Tracker with React

Louise Aldridge — Wed, 18 Jun 2025 12:26:43 +0000

After completing Scrimba’s Frontend Career Path, I was keen to put my new skills into practice by building a solo project. Around the same time, I picked up a new diary for the year and was inspired to create a simple web app to help track my goals digitally - and that’s how I thought of Pinpoint.

What is Pinpoint

Pinpoint is a goal-tracking web app designed to help users stay organised, focused, and motivated. The app lets users create goals, break them down into to-do lists, sort by priority, and track progress with a progress bar — all while choosing from four colour themes.

What I Learned

This project helped me deepen my understanding of React fundamentals like reusable components, state management, and callback functions. I also prioritised accessibility and responsive design to ensure a smooth, inclusive experience across devices (though, I would say there is room for improvement here).

Challenges I Faced

One of the trickiest parts was managing state across multiple components while keeping the code clean and easy to scale. I also had fun figuring out how to implement custom theming options without things getting messy.

Final Thoughts

Building Pinpoint was a fun and rewarding way to put my React skills into practice and tackle some real UI and state management challenges.

You can check out Pinpoint live here: https://louiseka.github.io/pinpoint/
And find the code on GitHub: https://github.com/louiseka/pinpoint

I’d love to hear what you all think, let me know in the comments!

It's fine to prop drill

Louise Aldridge — Fri, 14 Mar 2025 20:54:44 +0000

For context: At the start of the year I started planning and documenting a new solo project, called Pinpoint. Pinpoint is a goal tracker which allows users to create, sort and breakdown their goals so they are less overwhelming. This blog article is my latest documentation of building the project.

It’s fine to prop drill - at least when building Pinpoint. Since it’s a small application with only one or two layers, passing props directly isn’t an issue. In fact, as I’ll explain in this blog, I’m only passing props to components that actually use them, rather than just forwarding them further down the tree.

As I started building Pinpoint, I quickly realised how important it is to consider where state and functions are created. In this blog, I’ll share how I used parent state management and callback functions in child components to build Pinpoint’s core functionality. But before diving in, let me introduce the components I’ve created.

Components Overview

App - The parent component that manages the application state and renders child components.
AddGoal - A button component for adding new goals.
GoalForm - A form where users input goal details.
SavedGoal - Displays user-created goals.

Managing state in the Parent Component

Parent state management allows me to create and maintain the goals state in App.jsx (the parent component) and pass it down to AddGoal.jsx and SavedGoal.jsx via props:

goalData={goals}
goalData={goals[0]}

The goals state is initialised as an empty array, with new goals added to it over time. In AddGoal.jsx, I use a ternary operator to determine the button text based on whether any goals exist:

const buttonText = goalData.length > 0  ? "Add another goal": "Get started and create your first goal"

Meanwhile, in SavedGoal.jsx, the goals state is used to render the saved goal to the DOM:

<h2>{goalData.goalName}</h2>

Callback Functions for Child Components

I’ve used callback functions in child components to modify the goals state in the parent component. By passing functions from the parent as props, the child components can call them to update the goals state in App.jsx.

In GoalForm.jsx, the formData state stores the user’s goal details. When the user submits the form by clicking the save button, the saveGoal function is called, passing formData back to App.jsx. There, saveGoal updates the goals state using setGoals.

Similarly, in SavedGoal.jsx, the toDoData state stores the user's to-do list items for a saved goal. When the user adds an item, the saveToDoItem function is called, passing toDoData to App.jsx. In App.jsx, setGoals updates the goals state by mapping over the existing goals and adding the to-do list to the relevant one.

Reflecting back on this week

Overall, this week was a great learning experience! Focusing on parent state management and callback functions in Pinpoint further solidified my understanding of building applications with React. It also clarified why avoiding prop drilling is crucial in larger applications.

Visit the GitHub Repo

Read more about Pinpoint

My first portfolio

Louise Aldridge — Mon, 17 Feb 2025 14:21:48 +0000

I kicked off this year by creating my portfolio, which showcases my coding journey so far. It highlights my skills and projects in HTML, CSS, JavaScript, React.js, and more. As I start searching for my first developer job, I’d love to hear from fellow developers who have been in this position before.

Live site: https://louise.codes/

GitHub repository: https://github.com/louiseka/portfolio

Questions for you reading this post:

Is there anything important missing from my portfolio?
Is it easy to navigate?
What are your overall thoughts on the site?

Thank you :)

Looking forward to posting more on here!