just a layer blur

How I Built This Website with 0 Skill

The power of will, determination, and dream.

5 min read

Want to read in other language?

EN ID

Introduction

I've divided this article into four parts to make it easier for you to read: The Past, The Will, The Beginning, and The Ending.

I'll share a bit about how I went from having zero coding skills to building this personal website in just three months.

#The Past

A few years ago, during the Covid-19 era, I had the desire to create my own personal website.

But I had no idea how to build one. Back then, I had zero coding skills—I could only design the UI.

At first, I thought about using WordPress since it seemed easier, but I still confused (yep, too much overthinking). In the end, I had to hold my dream of having a personal website.

#The Will

A few years later, I started to think about creating that website again. But this time, it was more about having my own blog page. I enjoy taking notes on important things on e-courses I'm studying.

I also wanted to document experiences in my life, so why not share it with to the public? It could be useful for others too!

That’s why I wanted my own website. But the problem was still the same—I had no coding skills. And this time, I didn’t want to use WordPress because I wanted more flexibility.

#The Beginning

The first thing I did was search for an e-course to learn coding.

Oh wait—actually, there was one step before that: planning. I’m the type of person who likes to plan things out first, making sure everything is clear before jumping into execution.

Being a planner has its pros and cons. Once I start executing, things move fast because I just follow the plan I’ve already made.

But sometimes, I spend too much time planning and overcomplicating things. Even there’s no guarantee that everything will go as planned—there are always unexpected factors during execution.

In the end, I realized I had to improve my adaptability. No plan is perfect, and no execution is flawless. Better done than perfect.

1. Learning HTML & CSS

My first plan was to learn from an e-course on how to build a website using HTML and CSS since these are the basics that need to be mastered first.

I bought an e-course from here,

code with mosh website

My goal was to complete the course within a month, starting in November 2024, and I should be able to start coding my website right after that.

2. Website Creation

By December 2024, I had completed the e-course exactly within my target of one month. Now the time to move on and create my own website.

My website creation process didn’t start with coding. There were many steps before coding, because I wanted the result to be as good as possible.

First, I needed to figure out the structure or framework of the website. What content should the homepage have? What pages should I create? Everything had to be defined at the start before moving onto the next step.

Here’s an example of the website structure I created.

Second, coding? Not yet.

I designed the UI of my website first on Figma. Why? Because I didn’t want to start coding without having a clear visual of how the website would look as a whole.

Also the coding process would be easier if the UI design on Figma was complete.

Before I started designing, I needed to gather moodboards (references) from other websites. I also wrote some notes before starting the design. The reason is simple, we need references before designing, right?

Once all the notes, moodboards, and website references were ready, I started designing my website.

3. Code

Next, after finishing the UI design, the most challenging stage began. This is where I started applying everything I learned from the e-course I took earlier.

Most parts of the website were easy to code perfectly, but some design elements turned out to be more complex and required coding techniques I hadn’t learned before. But thanks to current technology, everything became easier because of ChatGPT.

For example, to create a gradient border (colored border) like this:

Or to write JavaScript code:

All more than 100 lines of JavaScript code for my website were created by ChatGPT, and I didn’t have any JavaScript skills at all. And it worked perfectly. Such an amazing (or terrifying?) technology, right? It’s incredible to see how far this technology has come in just under three years.

This is one of the reasons I felt confident executing my idea, even though the design was quite complex. Thanks to ChatGPT. There's no such thing as "stuck", just ask ChatGPT!

#The Finishing

After a month, all parts of the website were fully coded. The last step was to buy hosting and a .com domain so the website could go online.

And the result? Well, it’s what you’re looking at right now! 🚀

#What's Next?

At first, I made this personal website just for fun (I mean, having your own website sounds cool, right?). But now, it feels like a waste to buy hosting and a domain if I don’t make good use of it.

My plan now is to make this website useful for more people, especially through the blog page, where I share personal experiences and articles about network engineering. Who knows? Maybe new ideas for this website will come up in the future.

Thanks for reading until the end! I hope this short story can be useful, even just a little.

Cheers.