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!
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.
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
- Vimtutor: Easily the best for learning vim. It might be slow to go through at first but it is completely worth it.
- Actually using it: This and vimtutor are the only things you need to learn vim.
- Youtube: I learned some cool and time-saving tips and tricks from youtube. Most of these are from Jake@Linux, and Ben Kadel.
CSS
- Traversy Media: The 🐐. I originally learned HTML from this channel. So I learned CSS from it too. Highly reccomended if you’re a noob
- Kevin Powell: Great teacher. Taught me a lot about typography and how to write clean code. Also has some cool tips.
- CSS-Tricks: Best website for solutions. Always has many answers and they’re usually the best ones.
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 👋