DEV Community

Jon ellisdon
Jon ellisdon

Posted on • Edited on

Can a PM / QA Tester Use AI to Build a CSS Grid Learning Tool?

My Background

I'm a QA tester with experience in testing / leading CRM projects and more recently Set-top-box software projects. I'm in no way a developer. The thought of trying to learn another language at the ripe old age for 42 is quite daunting to me so I thought "Why not see if I can use my testing and project management expertise to build a tool using AI (I'm using Claude to build this). As I myself cannot code I wanted to create something that people in my situation and younger people just learning can use the begin understanding how to code.

The Goal

I wanted to create a CSS Grid learning tool that:

  • Helps beginners pick up the basics
  • Helps beginners avoid common mistakes
  • Provides instant visual feedback
  • Allows users to experiment with different templates and styles etc.
  • Is free for the basic day-to-day tasks but has more complex functionality for seasoned developers (to help them save time)

The Result

I've been doing this for around 2.5 months now and have the first version of my tool - Gridlock Holmes:
[Link: https://gridlock-holmes.com]

What I Learned

About AI:

  • AI isn't the answer to everything. There are some major issues and I experienced frequent regressions. The main issue was the files being truncated which led to broken functionality and often when the fix for the truncated file came in, the AI would use an old version so fixes were implemented but some fuctionality / changes weren't even present
  • AI can be misleading. AI tools can often be your 'cheerleaders' so make it sounds like all of your ideas are amazing... they aren't!
  • Don't always follow AI's advice. Use your own logic, don't follow blindly! I wen't against my own instincts a couple of times and followed AI but I just had to work extra to rectify things in the future. For example, AI told me to hold everything in a HTML file as opposed to split into 3 files. This led to increased truncating for the HTML file (due to excessive size) and general confusion. Further down the line I had to split them which cased regressions
  • Testing and iteration are crucial. Test, test, test... Having always had this mentality, this seemed like a 'no brainer', but even thinking small, uncomplicated things won't break is unrealistic. When I initially had a soft launch (about 5 days ago) my old colleagues pointed out minor changes that needed doing, mainly around formatting.
  • It's much nicer to have a real person doing the work for you but AI is certainly useful. AI doesn't ask many questions back, whilst a real person will. Also, when it comes to 'flair' and some more personal touches, AI isn't as good with this.

About Product Creation:

  • You don't need to write code to create software but it would certainly help!
  • Clear vision + testing skills + AI = functional product but with headaches (maybe I've just not got there yet with my prompts etc.)
  • Validation from users is incredibly motivating

Can anyone offer any advice?

I'm just learning so if anyone has any advice, whether it be learning how to code, how to more effecively use AI or just having a look at the site and advising what you would find more useful, that would really be appreciated.

Here's a link to the site: https://gridlock-holmes.com

Questions?

I'm happy to share more about the process, working with AI, or anything else!


Tags: #css #webdev #ai #learning #tutorial

Top comments (0)