This content originally appeared on DEV Community and was authored by Cecilio Navarro

Client

I am making a website for a mobile detailing business. I start with a simple roadmap when making a website for a client. First, I talk with the client about what they want. Then, I make a list of questions about their business. This is to create the content for the website, and I place it in my notes or in Google Docs. I then interview the business owner and write down the answers to all my questions. This interview allows me to form the paragraphs for the different sections and pages.

I learned from The Website Architect to only begin forming the layout and design after getting the content. This allows you to make the design custom-fit to the content.

Design And Ideation

I make a mood board on Figma to gather inspiration for the website. I find websites everywhere I can, like from Awwwards.

My wireframing was done on my iPad, and the basic components were created there with the document from earlier. The iPad gives me the ability to quickly edit my big ideas, like changing the layout, without having to gather content and then erase it. I move everything to Figma once I have a feel for the website.

I form the theme according to the business. This is a site for a mobile detailing business, so I make it car- and retro-themed with checkered icons and colors.

Setup

When I move on to coding, I follow what I call “maps,” and these guide me through the repetitive procedures of each project. I first make the repository and copy the first three lines GitHub provides when making a new repo:

echo "# 05-garcia-auto-detailing" >> README.md
git init
git add README.md

I paste them into the terminal, which initializes the project on my local computer. Next, I copy and paste the next four, making my first commit:

git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/cecilionavarro/05-garcia-auto-detailing.git
git push -u origin main

I chose Vite to start my site and paired it with Tailwind CSS. I originally went with ShadCN to learn it, but since ShadCN uses Tailwind, I decided to get a strong foundation in Tailwind first.

I used the documentation to install Tailwind CSS with Vite and followed the instructions. I erased everything from my index.css and added @import "tailwindcss"; at the top. Here is where I would build my themes and add custom fonts.

I got stuck when making variables for Tailwind the old way, by using a tailwind.config file, but with Tailwind v4 all we have to do is:

@theme {
  --color-brand: #A52A2A;
  --font-neue: "NeueMontreal", sans-serif;
  ...
}

Once done with installing Tailwind, I installed React Router DOM for my navigation. This makes Single Page Applications and makes the website pages load faster by not resetting the entire page.

Small Details

Sometimes we don’t take the time to figure out simple things. When I was first learning to code, I thought ternary operators were difficult, and seeing them made me think a piece of code was complex—until I Googled it and found the structure was just a one-line if-else statement.

While setting up this project, I realized something obvious that I had not paid attention to: copy path and copy relative path. I thought about it for two seconds and realized that the relative path is relative to the original workspace folder, while copy path copies your entire path from the root folder. I normally would click either one when importing assets, until I thought about it for a second.

Sometimes we don’t take the time to think through very obvious things, and perhaps that “laziness” is comparable to the saying about how fear is a mile wide and an inch deep.

This content originally appeared on DEV Community and was authored by Cecilio Navarro