Reading and writing web code can be incredibly intimidating if you’re not a developer or programmer. But if you run a membership site or online business, a basic knowledge of some concepts and language can be immensely helpful. Whether you’re building your own website or working with an experienced developer, these coding hacks will help make things run smoother.
I’d like to add a quick disclaimer that I am NOT a developer. However, as a digital strategist I am frequently called upon to make website tweaks, customize newsletters, liaison for clients with developers, fix urgent issues in backend code, and more. Over the years I’ve used my very, VERY basic coding knowledge to customize WordPress/Squarespace/MailChimp/AWeber templates, build custom widgets, highlight keywords and important information on web pages and blog posts, and so much more. The following hacks have been my saving grace, and I hope they help you too!
1. Learn the lingo
Understanding some basic coding vocabulary is really helpful when trying to communicate needs or issues with a developer. A good place to start is understanding the different languages of code out there (HTML, CSS, Javascript, etc), places to find and place code (source code, style sheets, etc), and the terminology for different components of code (brackets, tags, properties, variables, etc).
Having a grasp of the language is not only a great way to communicate with a developer, but also makes searching forums for troubleshooting help so much easier. If you can’t express the problem you have, you probably won’t get the solution you need.
2. Master HTML basics
HTML is one of the earliest code languages and (in my opinion) one of the easiest to learn. There are countless tutorials on the web and endless applications for the skills you learn. I have used my base level HTML skills to customize blog posts, newsletters, web pages and more. Whether I’m trying to align an image, highlight important text, format a heading, or link out to another site, knowing how to write and tweak small snippets of HTML code has been critical.
If you’re feeling intimidated by all the information, remember to take it at your own pace and pay careful attention to patterns and structure. Once you understand the logic behind the language you are using (and I promise there is a method behind every madness), things should fall into place more easily.
3. Examine source code
Did you know: If you right click in a blank space on any website and select “View page source,” you can look at any website’s code. I find this especially helpful if I see something on someone else’s site and want to know how they did that! Sometimes a solution can be as easy as copy, paste, and tweak.
Examining source code is also a great way to see real life applications of those basics you have started learning. If you’re more of a visual learner, you can examine a page’s source code right next to it to see the functions of specific lines of code. It’s like a step-by-step guide on how to build that exact webpage.
4. Search forums
If you’re having trouble writing a line of code from scratch or if you’re trying to solve an issue that you haven’t had experience with before, a simple Google search will generally do the trick. Whether you’re customizing a WordPress/Squarespace theme or creating a website from the ground up, relax in the comfort of knowing that someone has probably gone through this before. By searching for very specific answers on the web you will inevitably find a multitude of forums to help. Chances are that the very problem you are running into right now has been tackled by many others.
If you’re working with a specific theme or template on a longer project, I highly recommend bookmarking forums you find useful so you can easily come back to them for any future problems.
5. Practice, practice, practice
In my experience, the best way to understand code is to experiment with it. Create a hidden, unpublished page on your website, paste a snippet of code in it from a forum or another site’s source code, and practice manipulating it. Almost everything I know about reading and writing code has stemmed from making mistakes in a safe space. It really is one of those things that makes more sense the more you do it.
The great thing about practicing on a hidden, unpublished page is that you have the freedom to tinker without the fear or crashing or ruining your entire website. When you find the piece of code that works, simply copy and paste it into the source code or stylesheet for the page you actually need it on.
In closing…
I hope you find these tips helpful and are feeling ready to build something wonderful today. If you have any questions, please drop them in the comments below and I will do my best to answer them. And if you’re a developer with some extra tips for us, we’d love to hear from you!
Nicole,
What a breath of Fresh Air, what an Oasis in a Desert!!! Coding is something I want to learn and feel that I must know it almost up to a moderate level. I know that it is necessary when doing most anything on my website and I find it very difficult relying on other people so often. I am attempting to study a tutorial on HTML but I am not as disciplined as I need to be!!
I do have one question that will allow me to practice a little on a “private” page on my site…If I see a small, single column ad that I like on anyone’s website, and would like to design something similar…you are suggesting to right click on the ad and click on “source”. If I click on the ad, can I then assume that all of the code in the “source” pertains to the entire layout and design of that ad? How do I determine the start and end of the code that I am seeking if I click on a whole page?
I didn’t mean to become lengthy in my comment on your post…I’m just hungry for knowledge and I loved your post!! I will be checking out your website and hopefully become a regular follower!!!
Thanks,
Les
Hi Les,
Thank you so much for your comment! I completely agree learning HTML is something that requires quite a bit of dedication, but the satisfaction of being able to get in there and make the changes you need to without having to hire a developer is so worth it.
To answer your question: if you right click the add and select the option “inspect element” it should open up the source code and highlight the exact section of code that has built that ad. Of course, you will have to change the file name and hyperlink in the code to meet your specific needs, but that should give you the skeleton to build off of and keep you from having to search through the entire page’s code.
I hope this helps, and best of luck!
Warmly,
Nicole