🚀 I Built My First Personal Website. Here’s Everything I Learned

After months of thinking about it I finally did it. My personal branding website is now live at www.surajkofficial.com.. To be honest the journey of building it taught me more than I expected.

As a marketer having a personal website is not just a nice thing to have anymore. It is my storefront. It is where my work speaks before I do. So I decided to stop putting it off and build one from scratch. Without hiring a developer.

Here’s a full breakdown of how I did it the tools I used and what I learned along the way.

🎨 Step 1: Wireframing with Figma

Before I even started building my website I sat down with Figma. Mapped out exactly what I wanted. I made a plan for my website. Wireframing first was a game-changer. It forced me to think through the user experience. What sections do I need for my website? What’s the flow? What goes above the fold? Figma made it incredibly easy to sketch out layouts, experiment with structure and iterate quickly without wasting hours rearranging content on my personal website.

If you’re building a website and you’re skipping this step. Don’t. Plan before you build your website.

🌐 Step 2: Building with WordPress + Elementor

For the build I went with WordPress paired with the Elementor page builder plugin. I chose WordPress for my website because its flexible widely supported and perfect for someone who wants full control without writing code for their personal website.. Elementor made the whole drag-and-drop experience smooth and intuitive. I could see my changes in time which made it easy to align the final product with my Figma wireframe for my personal website.

For the contact form I used WPForms. Reliable and it integrated seamlessly with the rest of my personal website. Getting that form up and running took than 15 minutes.

🔍 Step 3: Getting the Design Details Right

This is where things got really interesting. Design isn’t about layout. It’s about colours and typography and I wanted mine to feel intentional and professional on my personal website.

Two Chrome extensions made this process much easier for my personal website:

Color Picker — Eyedropper Tool. Whenever I came across a website with a colour palette I admired I could just hover and pick the exact hex code. No more. Trying to eyeball shades. This extension helped me build a colour palette that felt authentically “me” for my personal website.

Rendered Font Picker. Typography is something most people overlook. As a marketer I know how much it affects perception. This extension let me hover over any text on any website and instantly identify the font being used. It helped me understand what makes certain sites feel premium.. Apply those learnings to my own personal website.

These two tools alone saved me hours of design research for my website.