Alright, let me tell you about my little “kevin barber” project. It’s more of a fun weekend thing than some grand scheme, but I learned a ton, so I figured I’d share.

So, the idea sparked when I was trying to find a decent haircut online. I mean, I saw a guy named kevin barber shared a lot of good haircutting videos. Then I thought, “Why not create a simple page dedicated to listing all the locations and contact details related to kevin barber” and I began.

Getting Started: The Basic HTML Structure

First thing’s first, I fired up my trusty VS Code. I started with the bare bones: an `*` file. Nothing fancy, just the basic HTML structure. I added a title “kevin barber” to start and a simple `

` tag with the same name for the main heading.

Adding Some Style: CSS Time

Next up, CSS. I created a `*` file and linked it to my HTML. I kept it super simple. Changed the font, added a background color, and centered the content. Just enough to make it look decent. I’m no designer, that’s for sure!

The Core Content: Listing the Barber Shops

This was the meat of the project. I decided to use an unordered list `

` to list all the locations. Each `
• ` would contain the shop’s name, address, and phone number. I manually filled in the info after some quick searching on google.

  

  Making it Interactive: Simple JavaScript (Maybe Later)

  I thought about adding a map using the Google Maps API, but I decided to hold off for now. It’s a bit overkill for this simple project. Maybe in the future, I’ll add some basic JavaScript to make it more interactive, like a search function or something.

  Deployment: GitHub Pages to the Rescue

  Once I was happy with the basic layout, it was time to deploy. I pushed the code to a new GitHub repository and set up GitHub Pages. It was surprisingly easy. A few clicks, and boom, the page was live! The URL is something like `*/kevinbarber`.

  What I Learned

  

  • Basic HTML & CSS: Refreshed my skills. I hadn’t done a basic website from scratch in a while.
  • GitHub Pages: Deployment is way easier than I remembered.
  • Simplicity: Sometimes, the best projects are the simple ones.

  Next Steps

  I might add a contact form later, so people can submit new locations. Or maybe integrate a simple booking system if I’m feeling ambitious. But for now, it’s a simple, functional page that does exactly what it’s supposed to do.

  That’s pretty much it. It was a fun little project that scratched an itch. Hope you found this little walkthrough helpful! If you have any suggestions or ideas, feel free to share!