While coding a website may be a little overwhelming, there are a few ways you can make it a bit easier for yourself. Luckily, since there are so many people making websites, there are a million resources available for you. Alright, I might be exaggerating there, but I don’t think I’m exaggerating by much. The world wide web is a veritable gold mine for coding information. Here’s a quick guide with a few tips and tricks on how to code better.
Organize your code
First and foremost, the most important thing you can do to help yourself with your code is to code in a way that makes sense. Don’t code the footer at the top of your code, that makes literally no sense. You’ll want to roughly code in the order that things appear in the page. Obviously this doesn’t always apply and sometimes things need to be moved out of order. The other thing you can do to help yourself out is to use comments! Things might make sense for you now, but go back to your code in a few months and you’ll probably be lost without comments that tell you what’s what. Oh, and use classes and ids that make sense, while you’re at it.
Use available resources
It’s a good idea to try and figure out some of the things you want to try to do on your own. You won’t always have a teacher around to annoy – I mean, ask – for help. Want to learn how to make a mobile menu? Oh look, W3Schools has a tutorial for just that. Don’t just aimlessly copy and paste the code though, be sure to understand the code you’re working with. For reference, W3Schools is a great spot for tutorials. They have a lot of information to help you with any type of question you might have.
Another great option is GitHub. While many designers are fleeing now that it has been bought my Microsoft, it remains a valuable resource. Our very own Eric Girouard, teacher and photographer extraordinaire, has put together a bunch of great resources for students to use on the JAC GWD profile. Though I’ve been coding for over two years now, and I still used the basic codes he posted as a reference for a project recently. I wanted to make sure I remembered all the important stuff.
Verify your code on numerous platforms
And one last quick tip – always check your website on a few platforms. Even DreamWeaver cannot always be trusted to give you an accurate view. The more you check and double check, the less chance you have of something going horribly wrong.
To sum, before asking your teacher for help yet again on something you could have figure out yourself, try a quick search. If you still need help, they’re there for you.
Great post, Natalie! If I may, I would also add to the list of useful tips: see what others are doing. Here’s what I mean:
Two and a half years ago, I started a new job where I was asked to develop websites using WordPress. At the time, my only resources (aside from the WordPress Codex) were Google, Stack Overflow, and the ability to read. From there, I’ve built my first themes. With terrible practices, might I add.
Over time, I knew I had to refactor my code, and while doing so, I’ve come to separate “design” and “functionality” by creating a plugin. And like I said, I was refactoring, and knew from 2 years of working with my code I ended up having to rewrite about 100-150 lines of code just to change 2 or 3 lines which just impacted the front-end. That’s where I said “enough is enough” and I took a look at how WooCommerce worked. Not functionality, just how the templates were loading because that’s essentially where I spent most of my time. (If you don’t know, WooCommerce templates are overridden by copying the file to your theme in a specific path and making any changes there.) Well, with a bit of my basic skillsets (Google, Stack Overflow and the ability to read), I found how that worked and am now using the same concept.
So in my personal experience, reading what others are doing has allowed me to cut down on my production time (although as I write this I have been refactoring my code for several months already). From what I see here, you’re already on the right track: clean, organized code, and you know your way around references. I’m not worried you’ll do well in the web.
Happy Coding!
PS: Check out Tuts Plus courses (https://code.tutsplus.com/courses). Some are free, but don’t be scared to register for a monthly subscription (somewhere in the 15-20$ CAD range) and see what’s going on. I’ve used it for about a year and some change and even with 8 years in the game, I’m still learning a lot. In the words of Steve Jobs, “stay hungry, stay foolish”.