For a while now, the idea of having my own personal website has been a constant buzz in my mind. As a programming enthusiast, I saw it as not just a platform to showcase my portfolio but also as a new frontier to conquer. Recently, I finally turned this dream into reality by building it from the ground up.
Table of contents
Learning experience
Reflecting back, my journey into web development started a couple of years ago when I took on the challenge of creating a website for a local company. It was quite challenging as it was, since I had no background in web development but the opportunity showed itself and I decided to take it. I immediately started googling about how to build a website but I have to admit, I was quite impatient. I wanted to skip the learning process and didn’t want to dive deep into the different technologies. Well, what a mistake. I used HTML and CSS to create the webpage, they can be called “the basics” when getting into website development. HTML wasn’t at all difficult to understand, I got familiar with it quite quickly. CSS on the other hand, even though it has a very simple syntax, it was what made things hard for me. I didn’t know anything about positioning, design principles or responsiveness. I just started searching about “how to make a header”, “how to style a picture” and how to do this and that. The problem was that I had no idea what my code really did. While it got the job done, I skipped the learning process, and it wasn't until later that I realized the value of understanding the technologies I was working with.
Details on technologies
Fast forward to the creation of my personal website—I embraced a new approach. Understanding the importance of getting the basics right, I delved into the intricacies of HTML and CSS. But I didn't stop there; I aspired to make a dynamic website. To achieve this, I explored Node.js for the server-side application and used Express as the framework. They opened doors to learn about routing, middleware, template engines (I chose EJS), RESTful APIs, CRUD operations, database integration, and more.
Hosting Challenges
One of the significant hurdles I faced was hosting. Initially considering Github Pages, I discovered that it’s only possible to host static sites on it. Then a friend of mine told me about Firebase as a hosting platform. I was quite intrigued. What wasn’t so clear though is that Firebase offers many types of different storage options. I had some prior experience with Firestore, so I was aiming for that. I read an article about using it to host dynamic websites—I shouldn’t have believed it. I set up my Firebase project and made everything connected to the website just as it was in the article, which took quite some time. Well, something didn’t work. As it turned out, the Firestore free plan is also only able to host static websites and it’s with another plan that it’s possible what I wanted. What I knew was that since I’ve just built the website and I’m broke, I wanted to use a free host to see how things work out. I bumped into Render (not sponsored, it couldn’t be, it’s my first article haha), where I could choose a free plan option to start with.
Closing Thoughts
As I wrap up this reflection on my journey, there's a genuine sense of pride in the progress I've made. While there's always more to uncover and learn, standing at this chekpoint feels like a significant milestone.
Each challenge, whether it was grappling with HTML and CSS in the beginning or delving into the complexities of Node.js and Express, has only been a stepping forward.
Looking ahead, I'm excited about learning more and exploring new things. I find joy in overcoming challenges and gaining new skills, and that keeps me enthusiastic about the exciting journey ahead.
Sample picture caption
