Project: Coding A Simple Website

My latest project has been learning how to create a simple website from scratch (using AI to generate code) and deploy it. I'm actually really glad I started with this instead of diving straight into my larger web application project, because I have learned a ton throughout this process.

And yeah... it was way harder than I expected.

I've created websites on Wix and Squarespace for years, but I always find that no matter how much you try to make them unique, they all end up looking the same. Also I'm sick and tired of subscriptions that auto-renew–I can't tell you how many times I have seen a $144 credit card charge from Squarespace for a website I made a year ago and forgot about.

I've always had this fascination with launching a website that I built from scratch, but it felt like a useless goal. Why struggle to learn code and repositories and blah blah blah when I can make a useable website in 15 minutes and move on with my life? Well, called it boredom or masochism, but I was determined to wrestle this dream into reality.

My goal: to create a website for my songwriting team, Plumwine. We are going to start pitching ourselves around town, so I wanted to create a simple place that people could 1. hear our music, 2. learn more about us, and 3. contact us.

I wanted the home page to feature a plum that spun around depending on where a user's cursor was on the screen. The music page needed to have a SoundCloud playlist embedded into the page. The contact page needed to be simple: just an email address and link to download our EPK, which I still need to build.

I used Claude to generate the base code with all these features, and then put it into Cursor, and basically told it to "make it cooler". I took the code from Cursor and added it to VS Code. I started to realize that these two steps might have been redundant, but I really struggled with setup and tool selection on this project because I literally had no idea what I was doing.

From VS Code, I created a Github repository, which I connected to Vercel to ultimately deploy the final site. Now, it's important to note – I haven't figured this bit out yet. I can only get the site to appear on my local server, so it's not live yet. But, I'm working on it.

Here's what the home page looks like so far.

Yeah, its pretty simple.

But that's what I wanted. The plum spins around. If you click it three times, it triggers a pop up message that looks like:

I was able to embed the SoundCloud player with our music on the music page, like so:

And the contact page isn't worth viewing, as it's just an email address.

I may outline some of the early issues I faced in a subsequent post–this simple website took me a couple days, mostly because I was so lost with the initial file management within the directory and how to use terminal. The click counter gave me a little bit of trouble, as did size and placement of the plum.

I am leaning heavily on AI for this project, but I'm asking it to teach me along the way. A lot of my prompts include, "remember I have NO CODING EXPERIENCE. I am trying to learn. Please be thorough and make each step as clear as possible. TREAT ME LIKE A BABY."

It's still not always easy, as jumping around from different AI agents, or even conversations within the same agent, requires a step back to re-contextualize the project. Sometimes I get conflicting suggestions for different tools to implement eg. Vite vs Create React App – this took me a day to figure out because half of my project was set up in .js and wasn't working with Vite.

Despite the reliance on AI – I am learning a lot. I feel like even just looking at code for the last few days, I am identifying patterns and starting to unravel this foreign language. For now, I need to push to the end and get this website live on the internet. I will update this post with a link when I can.