Hello again! Welcome back and thanks for tuning into these recurring ramblings on my journey becoming a programmer. LFG.
Programming, as I’ve come to understand it is a game of details. Computers only understand us via a set of languages and in each one, everything from a space to a semicolon, to every dotted “i” has meaning and implication. Too many times to count I’ve been stuck in limbo tweaking code trying to figure out why something wasn’t working, when the problem was staring me in the face clear as day; a missing coma, unclosed divs, improper paths, argh. Much like human languages, computer languages; PHP, HTML, CSS, JS, PYTHON, C+, the list goes on and on, heavily depend on clarity.
So today, in a bid to clear the air (and really to burn these tips to memory) I’ve made a list of the best practices for coding HTML & CSS. Really these tips are applicable to all coding languages so anyone can use them.
Plan the structure of your project with pseudo-code. Much like an architect sketches up rough drafts before drawing definitive dimensions, every coder needs to make a similar rough draft in their editor called ‘pseudo code’. Using pseudo code helps to break down big projects into little problems, basically drawing a roadmap of the basic elements of the website you’re trying to build. It’s an amazing hack because it keeps you working in the larger perspective as opposed to getting lost tackling small problems.
Avoid the plague of ‘div-itis’. div’s are the html coders bread and butter. But using this tool too often leads to problems, the computer has a harder time rendering 100 different divs in a web page and makes it all clunky, hard to scale and harder to edit. It’s easier using semantic elements like header tags, body tags and footer tags so the computer understands what you’re trying to do than smashing divs over and over again. The computer gets confused while you get frustrated cuz your website is all funky. Bottom line, avoid using divs unless they’re completely necessary. Don’t infect your code with div-ites.
Choose a custom naming habit and stick with it. This basically means to decide once and for all time, how you’re gonna name all your classes and id’s. For example; headerImg, header_Img, header-Img & headerImage are different ways you could name a header image, pick one of these naming habits (or make up yours) and stick with it.
Don’t stop coding! Coding isn’t exactly a cake walk, that much is true. But how else are you going to get better at it? Build your muscle memory. Between where you are now and where you want to be there will be many off days, your eyes will hurt, there will be many silly mistakes, everything from a syntax error to your browser completely crashing. Only with constant practice do you get more comfortable staring at code, your syntax gets better and you ultimately solve problems much faster. Join a community, make friends with coders so you get comfortable talking about code, visualizing it. Develop the habit of forcing yourself to love the strain, because it’s only temporary and there’s simply no other way to get better at it.
Of all the web programming languages, HTML is generally considered the easiest and most foundational. Getting this right makes it much easier for all the other stuff you’ll learn, so it’s important to pick up the right habits and stick with them.
Last but not least, remember to have fun while you’re at it.