5 Tips For a Beginning CoderBook a Free Consultation ▸
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’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.
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.
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.
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.
I hope you meet you at a Charlotte area MeetUp or class soon!