Tips for building your first website

(From a guy who has only just done it)

Published on: 16th June 2017

If you’re reading this relatively close to the publish date, then wahey you’re on my new website! I know it doesn’t look much, and that’s because I designed and built it myself, every line of code. And as is probably pretty clear – I am neither a designer nor developer.

This post is going to cover a few of the issues and tips I picked up along the way when embarking on building my first website (this one!). I also did a talk about this very subject at Shareup Soton last night, which you may have seen. If you didn’t (or even if you did) – feel free to download the slides, which go nicely (if I do say so myself) with this blog post. I just want to point out again – I am NOT a developer, these are just things I came across when learning which might hopefully help you out!

Why did I want to build a website?

Well, technically benmichaeljoy.com has actually been kicking around unattended and unloved for about 3 years. I set it up when I was searching for jobs in the digital agency industry when getting ready to leave university. BUT that was a botched together WordPress blog which I did zero code or design on. It wasn’t that great, but it served its purpose.

Now I’ve been in the industry a little while, my interest in the development side has grown to the point where I want to be able to do it, so I decided to embark on teaching myself – the website in its current state, a marker for my progress so far.

Anyway, the real point of this post is to hopefully offer some useful tips for what I discovered along the way for anyone else interested in doing the same as me. I must stress, this is not a how-to guide, I am not a pro, I am only learning myself, so don’t necessarily take this as gospel!

Talk is cheap

One of the most important things I have taken away from the experience so far is to just do it. I had been talking about it for a while but never followed through. I got some tough love from a friend, and I’ll share that tough love with you. If you REALLY want to do it, do it – the resources are there and readily available. The only thing stopping you, is you.

Focus

Once you take the decision to start, don’t take on too much. There is so much out there that you could choose to learn. It is best to pick one thing and see it through. Trying to learn everything at once will only start to confuse you and potentially dishearten you as you’ll feel like you’re not getting anywhere. When I first started I jumped around between HTML/CSS, javascript and ruby – and go nowhere with any of them. I’m now solely focussing on HTML and CSS as a base, and feel like I am finally making some progress. Commit to one area of development and concentrate on that until you’re ready to move onto something new.

Take your time

I made the mistake of whizzing through a couple of Codeacademy courses (estimated time = 14 hours, My completion = 3 hours) and thinking I was set and ready to go. I was dead wrong and when I tried to put it into practice I had no idea what I was doing. That isn’t because the courses aren’t good (they are great, I’ll do a separate post on helpful resources), it was as I have later learned this is called the Hand Holding Honeymoon, where everything seems so easy, which is quickly followed by the Cliff of Confusion where you realize you can’t do anything on your own yet. Learning isn’t a race – make sure you really understand something before moving onto the next thing.

Get in the game

When you’re learning it can be easy to fall into the trap of just watching the videos and thinking, I’ll practice it all at the end. In hindsight, first time around I wish I had started actually writing code a lot early when learning. It will hopefully start to become ingrained the more you do it – get the basics down so you can build on it as you go rather than trying to do everything at the end. Get yourself a text editor and make a start on practising.

Design is a whole other beast!

This one hit me hard. In my head, I was crafting a beautiful design for this site. But, as you have probably noticed – this site is far from beautiful! It can also be quite hard to come up with a design to practice building. Don’t worry, there are plenty of great designers out there, so head over to Dribbble and pick something to build, or even practice by trying to replicate certain elements of your favourite websites. I live in hope that the more I practice the better my builds will look – but I guess we’ll see….

Have a plan

When you’re ready to start on your own site, have a plan for what you want to do. As I said, design is hard, so keep it simple. Make a sketch of what you want to build and work to it. It doesn’t matter how basic it is. Having something to work towards will help structure what you do. You’ll waste a lot of time if you are chopping and changing the layout a lot when you’re building.

Start with Mobile!

I should’ve known better on this on. It’s something we practice every day at work, but in my own project, I didn’t. when you start, it can seem easier to just build for desktop. Don’t. Sort mobile and work up – it’s much easier*. It would have saved me a lot of headaches and time.
(*it is still hard!)

Keep going and make notes

Once you’ve made a start – keep at it. Like learning any new skill, it is not advisable to keep picking it up and putting it down. See it through, even when things get tough. This is actually the second attempt I made at building this site. I made a start, left it for a month and when I came back had no idea what I had done, so scrapped it and started again.

Which leads onto the next point. Sometimes you can’t help but have to drop it for a while. In which case, prepare for this. Leave yourself lots of notes in your code so you understand it when you come back it.

Try to solve problems by yourself first

It will definitely aid your learning, and also provide proof you’re progressing. Plus it feels great when you find the solution! But, that feeling won’t last and you’ll soon run into another problem, and this time you might not be able to get there on your own. Don’t worry, it’s not a problem to ask for help as long as you’ve tried first.

Seek guidance, not answers

Probably the best piece of advice I can give is if you need to ask for help, wherever possible get guidance, not an answer you can copy and paste. I found I learned more by being asked “have you thought about this..”, rather than just being told the answer. It helps you to take a new look at your work and see where a solution may lie. If you do need to just be given the answer, make sure you understand it, don’t just copy and paste it and accept that it works.

Don’t beat yourself up

Making mistakes is part of the learning process. There are so many colons, semicolons, curly braces, point braces you have to remember, you’re bound to forget things from time to time. Just the other day I spent 30 minutes trying to figure out why my code wouldn’t work – all I’d done was forget the `#` from my hexadecimal colour value!

Don’t be a hero

There are tools out there to make your life easier. I began with the mindset that using them was cheating, and I wasn’t really learning. But, I think as long as you understand how the tools are making your life easier and the process they aid with then that’s fine. A good example is I use a tool called SourceTree to manage my version control and commits. The command line with git can be scary, this tool makes it much less daunting.

Don’t be embarrassed

You’re self-taught, and just starting out, so your code is probably messy, and your site may look like this one – but that’s okay. Show it to a seasoned developer – they will be able to give you constructive tips on where you can improve. Remember, they were in your shoes once, and they know and respect that.

Be proud!

Finally – be proud of yourself. It isn’t easy, so when you get there and get a site live it is an achievement. Don’t underestimate what you’ve done, and let yourself be pleased with it. You’ll then be ready for your next challenge and to keep learning and improving.

What next?

Well, this all done without the use of a CMS, so any change (even adding this blog post), requires me to do work on pretty much every page of the site. Which is obviously far from ideal. So for me, the next step, along with continuing to work on my HTML/CSS skills, is to try to learn how to take what I have here, and get it into a CMS, most probably WordPress, to make my life a whole lot easier. If all goes well, who knows, I might even write a post about that as well. But I wouldn’t expect that one all too soon!

There is a lot more I could ramble on about my experience with this, but I’ll save that for other posts. The code for this site is up on my GitHub if you are inclined to look under the hood at my messy code. Tweet me to let me know how you get on if you decide this is something you want to do. Best of luck!