Being a professional web designer does not mean that I need to know how to “code” a website, or even know much about coding in general, but there has always been a push from developers and the industry for a designer to have some front-end knowledge. As a result, I finally decided to figure it out on my own…Turns out it isn’t as complex as I had thought.
By learning to code a real website I found out so much about the post-design process that affect my actual design process. I also figured out how to make the developers life easier and help them use their time more effectively. Any web-designer without the ability to code their own page needs to learn if not for themselves, then at least for the developers who they hand their designs off to.
The key to starting to code, just as in learning another language, is baby steps:
1. Know the basics
85% of learning to code is unique in that you only learn by doing, failing, correcting, and playing around with code. And only about 15% is memorizing terms, syntax, and understanding the basics. Once you know the basic fundamentals and terminology, coding is pure trial and error. If you need to add style or structure to the page but you don’t know how you can always Google the answer.
Here are some great resources for the basics of HTML and CSS:
2. Video tutorial effectiveness - a common misconception
These can be extremely helpful, but will also only get you so far. In the world of design you could watch a video tutorial on Photoshop that would give you a tangible product at the end of the video that you created from scratch. In the process of creation you are also gaining valuable technical skills (which is all you are really getting from the video). In the world of coding, the videos are much more for terminology and learning concepts. Even if you were to follow a tutorial of the creation of a webpage from start to finish, it would only be explaining concepts and terms. Don’t think that you will be able to understand how to build your own page from a tutorial; they are only there to help teach you how everything generally works.
www.TeamTreeHouse.com is one of the best resources I have found at a very small price. Some of the tutorials on there are free but buying only a one month membership should be enough.
3. Even if you have no idea what you are doing, just start coding
I was pretty sure I still had no idea what the hell to do until I chose a website to code and just started building it. Start with a crude layout and slowly iterate on the page until the product starts to come together. If you ever are confused you can google your question, ask a developer you might know, or just take a step back and ask yourself why? When it comes to coding, everything has an answer or a reason why it is or isn’t working. It can get frustrating at times and it might take hours to simply space text out correctly but in the beginning, this is valuable learning time. You can read every book on HTML and CSS out there but you won’t learn a damn thing unless you just jump in and start doing.
What might at first seem like the most daunting problem you have ever encountered can immediately become a piece of cake once you have figured it out. No one likes errors or road blocks, but remember this: every time you encounter a problem you must solve, you are learning the most while attempting to fix it. Having patience and carrying through gives you mastery over that particular facet of code.
5. Ask a peer
If you are lucky enough to work with any developers or happen to know any friends that have some knowledge, suck it up and talk to them. It was hard for me at first to ask for help because I felt as though everyone was so busy, they wouldn't have time to help me. What I’ve learned is most developers love teaching and sharing their passion with someone else that is interested. Plus, in the beginning, your problems are so well understood to them through their own trials and tribulations that the answers are very apparent to them. They can help you in a fraction of the time it would take you to figure it out. I once spent two hours trying to figure something out before I asked for help from a developer who straightened it out in about 15 seconds.
6. DO NOT USE OTHER PEOPLES CODE
You will soon find out that there are endless amounts of resources and “frameworks” around the internet that give you all of the HTML and CSS you need to create an amazing page in seconds. If you use the code from these, or even some of the code, you will simply never learn how to code. I started copying & pasting code from the young age of 14. I always had a decent grasp of what HTML meant and how it worked, but not nearly enough to code by myself from scratch. For over ten years I was convinced I had a good understanding of code. Even after customizing plenty of Wordpress themes and watching every video on TeamTreehouse.com, I found out that I knew nothing once I had to actually write code from scratch. If you are stuck on something and you need to reference someone else’s code to help you, by all means, go for it. Just remember: referencing other people’s code helps you understand and learn while copy and pasting someone else’s code only sets you back even further.
If you want to learn to code it is best to make sure you will have a block of time to commit to the process. Spreading the learning over a course of time is not as effective because you will quickly forget a lot of what you learned and why it worked. You will also have to try and remember where you were, what you were doing last and why. Gaps of time in between the process throw off your train of thought and you will be forced to re-learn. Dive in, commit to a goal and accomplish that goal.