For many young, entrepreneurial web developers, making your first website will be the most educating, eye opening experience of your career. Coding your first site from the ground up presents a set of unique, unpredictable challenges created through your own mistakes — which you will soon learn is the best way to learn. I’m not going to sit here and tell you what to do and how to do it, but I am going to highlight 5 key things that you should learn from doing your first build, and how you can utilise that knowledge to make sure your next build is even better than the first.

1. Know your tools:

Find a text-editor that you like and become familiar with it. When writing code, you don’t want the tools you’re using to hold you back — they ought to be an extension of you and be conducive to your work flow. If you find yourself constantly stopping because you don’t understand what’s happening in your text-editor, take a step back and read through some of its documentation. Become familiar with useful shortcuts and hotkeys. Continuous interruptions can cause you to lose concentration and your train of thought.

If you’re using a framework such as foundation or bootstrap (which I highly recommend for your first build), make sure you have properly read through the respective documentation and understand the classes you’ll be implementing in your mark-up. If you’re really itching to get into your build, this is something that can be done along the way. Both websites feature extensive, easy to read documentation — get used to reading! It will save you a lot of time and energy.

2. Cross-check with online resources and don’t be afraid to ask for help:

It can often be hard to know if what you’ve done is ‘right’. It looks ‘right’ it works ‘right’, but is it? There are a plethora of resources online where you can further educate yourself and confirm the validity of your code. I personally recommend codeacademy, the odin project, codepen and even reddit (!). Your results may vary, but you can learn a lot from other people’s mistakes, too, and discussion boards such as reddit and stackoverflow can be just as useful a learning tool as the interactive sites. Check back, get feedback on your work, and if you’re stuck, ASK someone. The web development community is very forgiving to newcomers because we were all new at one point. People want to help.

3. Do it the ‘wrong’ way first, and then fix it later on:

Focus on your design and do whatever you can to get it looking how you want it to look. float: elements, force positioning with left: px and right: px, do whatever you can to ‘hack’ the site together to get it looking how you want. When you’ve finished, you can look in awe at your beautiful patchwork creation. Then, go back and refactor your code and try and figure out a more elegant solution. Could I use the same style class on multiple elements? Do all these blocks of content really have to be in separate containers?

4. Time to get responsive:

I’ll never forget the moment I finished my first build. I had refactored the code, it looked great, I was through the roof. I had done it! And then I re-sized the window and everything just fell apart. I had such a sinking feeling in my stomach — EVERYTHING WAS BROKEN.

Don’t worry, we can fix this.

It’s time to start again — not truly from the top, but really, we’re gonna start again. Create a new folder, call it a 2.0, and slowly incorporate each layer of content. First the navbar, then the jumbotron, then your images, whatever you have on the site, bring it in one step at a time and each time you do, resize your browser. Is it responsive? No. Okay, why isn’t it responsive? This part was the absolute most difficult point for me in the development of my first website. It took me a good 2–3 days of smacking my head against my desk trying to get things to work, but if you go through your code with a fine tooth comb and systematically go from top to bottom and check EVERYTHING — it will work, and it will feel even more amazing then completing version 1.0.

If you are truly stuck, just check back to point 2. Read through your documentation, double check your code, and then reach out and ask for help. Somebody might have already come across your problem, asked the question on StackOverflow, and a solution has already been posted. GOOGLE IS YOUR BEST FRIEND. Use it.

5. Think of things you would do differently next time:

Its been two months since my first build, and already I have started building myself an entirely new website. 1 or 2 months doesn’t sound like a lot of time, but when you’re learning and developing every single day, it really is. The world of programming is a constantly evolving beast, and as a developer, you must evolve with it. Keep learning and improving then go back and do it all over again.

Congratulations on building your first website! I knew you could do it.

Thank you for reading my first post.

If you want to know more about me please visit my website!

Want to see my code?

Want to connect?