5 Tips For a Beginning Coder

At Epic Notion, we believe very strongly in staying current in our industry’s best practices and learning something new just about every single day. Professional development is important – which is why we frequently read marketing newsletters, books, articles, reports and the like, join webinars, attend networking and training events, travel for conferences and accept invitations to Google’s headquarters.

I recently took a series of Introduction to Coding Classes to strengthen my skills in this ‘technical’ area. The classes took place several times over two weeks and focused on HTML, CSS and JavaScript. I’ve been maintaining and updating websites for many years now, but always with a very friendly open content management system. I’m often able to troubleshoot and fix issues with HTML but I was ready to learn more about web development.

I’ve compiled a list of my five favorite things I learned during the course. Although my takeaways are certainly obvious items to a skilled developer, these little tidbits helped a coding newbie like me tremendously; they were just the things I needed to know to solve tricky issues I encountered as I built a webpage for the final class project.

---

1. Syntax

This, as I’ve learned has been my biggest (or smallest?) hurdle to getting an item working correctly on a webpage when I’m writing all the code. Computers only process code when its written properly and will not understand errors, so you must compose those lines correctly.

Correct – display: block;
Incorrect – display: block: OR display; block:

Did you ‘camel case’ the name of a class in your HTML? Then be sure that you also do so in your CSS since ‘.Headertop’ will not work, only ‘.HeaderTop’ will.

---

2. CSS

This is a class is group of things; an id is that thing. Reference a class with a dot (.) and reference an id with a #.

---

3. Self-Closing Tags

There are such things as self-closing tags in HTML. I’ve long known that just about everything needs an opening and closing tag such as  <h1>This is my header title<\h1>, however it never registered that bits like <img…>, <br>, <hr>, and <a href=“…”> take care of themselves without the closing slash.

---

4. Codepen

There are so many great sites out there as you’re starting to code, but one helpful one for me has been Codepen. Check out codepen.io to render code, immediately view what you’re building, and explore ‘pens’ by other developers. Reading someone else’s code almost always means you’re likely going to get more proficient at writing your own.

---

5. Page Inspector

The page inspector is your BFF. The inspect menu item in my Google Chrome browser was something I’ve used before to look at exact lines of code, but I never knew how helpful of a tool it is. GAME. CHANGER. This topic alone could be a blog post (perhaps to come?). Not only can you see all code on the page but you can modify the code right in the inspector to achieve what you are after while immediately viewing the changes. (I seriously had no idea) For example, you’ve written h1s to be 24px and they’re to be a dark green, but they still don’t quite look right. Open your HTML file in Chrome, select Inspect, and go to a line of code where you are using a h1. You should then see all the rules currently applied to h1s in the inspector tool. Adjust the size of the header in the editor space and discover 30px looks much better. For the color – select the small colored box you see in that same area, open the color tool and adjust until that green color looks perfect!

---

Coding Tips and Tricks

Now that I’ve metaphorically dipped my toes in the coding water I can’t wait to learn more. Please share with us any suggestions of websites or other resources for a beginning developer.