How I made this website

In this blog post, I’ll be talking about the making of this website, the resources which helped me, and stuff I’ll do in the future. This is my first blog post so I have no idea what I’m doing. Wish me luck!

Contents


Why?

I made this website because I made my GitHub account on April 05, 2022, sometime around 12 PM. I surfed around on GitHub and found people linking their websites on their profile. I thought “Why not make one, I’m learning CSS anyway."

How?

I started off by making some concept art of my website. I took a lot of inspiration from other websites. I made a pretty bad mistake of writing HTML and CSS together. Instead of writing HTML first, then CSS. My ‘concept art’ didn’t help at all and was very vague. It didn’t help that I was making this on a phone.

Technological limitations 🤖

It was quite difficult and time-consuming to make this mostly on a phone. For starters, you can’t link external CSS for some reason. I had to experiment so much that I’m sure I spent a whole week troubleshooting. There were a lot more issues too. But hey, atleast I got something.

Learning Vim

I decided to learn Vim on termux as I was tired of using my file manager’s text editor. It took me around a week or two to adapt. But it was worth it. I became a lot more faster and started appreciating Vim’s keybindings. Although I’m a beginner, I look forward to learning more about Vim.

Procrastination

I’ll be honest, this was a major reason as to why this website took so long to make.
I faced an issue, tried fixing it, the fix didn’t work, so I gave up. A few days later, I’ll try spending a whole day or two trying to fix it, it gets fixed. Rinse and repeat.

Screenshot of my old website

I also wasn't happy with the way my website looked.

Redesign

So, I redesigned my website. After messing around with some color pallettes, I was lost. I liked none of them. Then, I came to a realisation, “Why don't I just use gruvbox's colors?” and that's what I did. It was also helpful that a website using gruvbox's color scheme already existed. I also added a dark and light mode.

Making it responsive

The website also acted weird on devices other than mobile. It needed to become responsive. I did some stuff and it became responsive. I also cleaned the code a bit.

Resources

Feel free to skip this section if you’re not interested in this type of stuff. I was an absolute noob when it came to many things. These are the resources I used to help me.

Vim

CSS

Plans for the future

I’ll make around 3 more websites, then I’ll be done with CSS (thank lord). I hope to learn JavaScript after that. Maybe I’ll do some backend after that?? The truth is, I don’t even know if that’ll happen. I originally wanted to be done with CSS in a couple of months. Here I am after 10 months, with only 1 project completed. Better late than never, right?

Conclusion

And that’s how I made this website. I hope you liked this. Stay tuned for more and follow me on Github, a sentence I never thought I would’ve said in my life.

Thanks for reading 👋