How I Actually Build a Website
Most people picture web design as dragging boxes around on a screen.
And honestly, that is how a lot of sites get built. Platforms like Wix and Squarespace let you pick a template, swap in your logo, drop in some photos, and call it a day. It works for some people. But that's not what I do.
I write code. Every line. Every detail. I wanted to walk you through what that actually looks like, because I think it's one of the things that sets the work apart.
Where It All Happens
The first thing I open every day is a program called Visual Studio Code, or VSCode for short. It's a code editor. Think of it like a word processor, but instead of writing essays, I'm writing instructions that tell a browser how to build a website.
There's no visual preview while I'm working. No dragging things around with a mouse. It's a dark screen full of colored text, and every color means something. It sounds intimidating, and it was at first. But once you learn to read it, it's like reading sheet music. Every piece has a purpose and a place.
The Language Behind Every Website
Every website you've ever visited is built on two core things: HTML and CSS.
HTML is the structure. It tells the browser what's on the page. This is a heading. This is a paragraph. This is a button. This is an image. Think of it like the framing of a house. It's the bones that hold everything up.
CSS is the style. It tells the browser how everything should look. This heading is white and large. This button is orange. This section has a dark background with some space around it. If HTML is the bones, CSS is the paint, the flooring, the finishes. It's what makes the house feel like a home.
When you use a site builder like Wix, you're using a visual tool that writes HTML and CSS for you behind the scenes. The problem is that auto-generated code is usually bloated and messy. It loads things you don't need, adds extra weight to every page, and makes it harder for Google to understand your site. When I write it by hand, every single line is intentional. Nothing wasted, nothing extra. That's why custom coded sites load faster, rank better, and look exactly the way they're supposed to.
My AI Assistant
If you've seen Iron Man, you know Jarvis. Tony Stark still makes every decision, still designs the suits, still runs the show. But Jarvis is right there with him, catching things he might miss, running calculations, and helping him move faster. That's the best way I can describe how I use Claude.
Claude is an AI built by a company called Anthropic, and it understands code the same way I do. Here's how it works in practice. I'm building a page and something isn't displaying right. Maybe a layout is broken on mobile or a color isn't showing up where it should. I can describe the problem to Claude, or paste in the code itself, and it spots the issue. Nine times out of ten, it finds it faster than I would digging through it on my own.
It also helps when edits get complicated. Say I need to update a design element that touches every page on a site. I can talk to Claude using the same language the code is written in, explain exactly what needs to change, and it handles the repetitive work while I focus on the bigger picture.
To be clear, Claude doesn't build the site for me. I still make every design decision, every layout choice, every creative call. It's an assistant, not a replacement. But having that kind of tool in my corner means I can work faster and catch problems before they ever reach a client.
Bringing Visuals to Life
When I'm designing a site, I usually don't have the client's final photos on day one. That's normal. But I still need to show them what the site will look and feel like with real images in place, not just gray boxes.
I use a couple of AI image tools for this. Midjourney is great for creative exploration and getting started. When I'm not sure what visual direction to take, I can generate a bunch of options quickly and see what feels right. Sometimes an idea that starts in Midjourney sparks something I never would have thought of on my own.
Adobe Firefly is another option, and it's built right into the Adobe suite. The big advantage with Firefly is that everything it generates is commercially licensed out of the box. For client work, that matters. You want to know the images you're using are legally clean, and Firefly takes that worry off the table.
Either way, these are starting points. I take the best elements from what AI generates and bring them into Photoshop to refine, cut, composite, and create something that actually fits the client's brand. AI gives me a head start. Photoshop is where it becomes real.
Photoshop
I've been using Photoshop for years, going all the way back to my graphic design classes in high school. It's where I do logo work, photo editing, custom graphics, and image compositing.
When a client gives me their photos, I run them through Photoshop before they ever hit the site. Color correction, cropping, making sure everything looks sharp and consistent across the whole design. When I'm building a brand identity from scratch, Photoshop is where the logo, the color palette, and all the visual assets come together.
I also use Figma, which is a design tool that lets you mock up a website visually before writing any code. The client can see exactly what they're getting and leave feedback before anything gets built. I'm currently building a deeper knowledge base on it and working it more into my process.
Making Sure People Actually Find You
Building a fast, good looking website is only half the job. The other half is making sure it shows up when people search for what you do. That's SEO, and it's built into everything I create from the very start.
One of the first things I do for any local business is set up or optimize their Google Business Profile. It's free, and it's often the very first thing people see when they search your business name. Your location on a map, your hours, your phone number, photos, and reviews all in one place. A lot of business owners either don't have one or set it up once and forgot about it. Getting it dialed in properly makes a real difference in how you show up locally.
On the website itself, I write custom meta titles and descriptions for every page. Those are the lines of text that show up in Google search results. I make sure every page has a proper heading structure, clean URLs, and internal links that connect related content together. All of this tells Google what your site is about and which pages matter most.
I also add something called schema markup behind the scenes. It's invisible to visitors, but it tells search engines exactly what your business is, what services you offer, and where you're located. It can help you get those enhanced search results with star ratings, business info, and FAQ dropdowns.
If you want to see how your own site is doing, you can run it through Google PageSpeed Insights. It's free, and it gives you a breakdown of your site's speed, mobile friendliness, and overall performance. You can also check Google's Rich Results Test to see if your schema markup is working correctly.
SEO isn't a one time thing. After launch, I keep an eye on rankings, monitor what's working, and make adjustments. The longer you invest in it, the stronger it gets.
That's the Real Process
It's not flashy. It's a lot of typing, a lot of problem solving, and a lot of caring about the details that most people will never see. But those invisible details are exactly what makes a site fast, findable, and built to last.
If you made it this far, you know more about how websites actually get built than most people ever will. And if any of this made you think about your own site or your own business, you know where to find me.