January 15, 2019

Web Development, Head First



When I first thought of the prospect of making my own company, I quickly realized that I needed to have some sort of online presence (read: website).

This idea was a little bit scary for me. I had no idea how to make a website, let alone host one. So, I'm going to tell you how I did it, and also show you some problems I faced.

Step 1: Skipping most people's Step 1

Okay, here's the deal: I pretty much knew the basics of HTML and CSS, meaning I understood a lot more than other people starting out with Web Development.

With that being said, I started looking at basic examples of building out a website with plain ol' HTML and CSS.

...After being disillusioned by that, I turned to the template market after I heard someone on StackOverflow saying that's how he learned Web Dev (Don't do this. People on StackOverflow at its worst are entitled pricks). This was a little annoying as I needed to find a template that I could sort of see being my website.

I eventually found a theme called Dopetrope created by HTML5UP (as seen on the footer), and downloaded it hoping to play around with it.

Step 2: Learning how other people's web designs work

This was the longest and most frustrating part of this process: Understanding it. Now, this may be that Dopetrope isn't that good or that I'm pretty clueless, but regardless of the Why the process was annoying. Figuring out how to change fonts or other information took a little bit of time for each.

After sometime I got it to look like this.

Step 3: Making the site functional

That right there is pretty much it. I had no links working, the font wasn't changed, and that background is butt ugly.

One of the more important things I did at this time was to separate the blog and the website.

Back then I assumed that the blog was going to be apart of the website. You might think that decoupling the two is a bad thing, and I could argue as well. However, for me being as bad of a Web Dev as I am, scrapping the prospect turned out to be a good idea.

I also had to figure out how to present my games. I decided early on that it was going to be on the front page (Cubytes is the green box, there's more information on it if the picture were to be scrolled down), but the actual page itself I had no idea.

However, Dopetrope actually gives you a sort of blog post type template, so I ripped that, leaned it down, added the content I wanted, and called it a day.

Step 4: Launching the Site 

Once I pretty much had a working website, I decided that it was time to publish it to the Internet. By this time I had already got the blog up and running, so all I did there was change the domain to blog.sledgehogsoftware.com and everything seemly was good to go. I uploaded the site to DreamHost, made sure everything was fine, and launched it.

Turns out it's not that simple. I ran into DNS problems, and that took me two days to fix (Eventually I abandoned Google Domain's DNS in favor of Dreamhost's).

The next set of problems were lack of https and the font simply not working.

https was easy to add as Let's Encrypt makes it easy and 100% free... but forcing https is another thing in itself that I still haven't figured out. For now it'll be fine.

The font issue opened up another can of worms. The problem turned out to be in my stitched together CSS file, in which I had no hope of fixing it. So, I did the most obvious thing and restarted the CSS file, and had it looking roughly where it was originally with a proper font.

Problem Solved!

Step 5: It seems good enough

Now, the website seems to be in good enough shape for me to leave on the internet. Over the next couple of days I might make some small adjustments to certain backend/SEO elements, but that'll be it.

finally...

No comments:

Post a Comment