Towards the end of last year, a YouTube video popped up in my recommended list. It was a “code-along” video by Traversy Media. In fact, it was this one to be exact.
I’d wanted to try my hand at web design for a while. I had already done some tinkering with WordPress sites in the past, and had built some sites using WYSIWYG editors like Elementor, but “coding” something by hand always seemed like something out of my league. This video though, at just over an hour-long, promises that you can make a professional-looking, responsive site if you just follow the steps. Sounded like a great deal for an hour’s work. In reality, I spent more like two hours finishing the project, but still, I’d made an actual website by myself. Well, sort of, but this video taught me that coding a website by hand wasn’t as hard as I thought.
Shortly afterward, I started working through the CSS course on Freecodecamp and got stuck into making a site of my own. At the time, I was hosting a podcast with a friend of mine called Let’s Explore Tokyo. The podcast really needed a site. It’s true that the best motivation is making projects of your own and after a month or two of study and practice, I decided to build a site for the podcast based on the site of another podcast that I often listen to – How2wrestling.com.
I really liked the clean layout of How2wrestling’s site. It’s an effective, yet fairly simple site. The biggest challenge making this site was definitely responsiveness. I tried hard to build this site using CSS grid. For the most part, I got it right, but there were certain elements that were nested within others that I admit to trying anything as long as it would work. I particularly remember the navbar being very hard to style and get it working right.
One more resource that I think helped me grasp CSS grid was Netninja’s videos on the subject. Really good tutorials that aren’t too long but do a great job at explaining concepts to complete beginners.
In the end, my first hand-made project did give me a lot of grief. There are more than likely a few lines of code that could be trimmed out of it, but it works and is responsive. It’s a static site, which means that any changes I need to make have to be done by going directly into the code, but I just wanted to get my first site out of the way before tackling something like making a WordPress theme. My challenges with WordPress will be coming up soon.June 4, 2020