Understanding Code Easily: A Web Developer’s Guide

And avoid tutorial loop

Image for post
Image for post
Web Development

This year has seen a massive shift in the way things are done web-wise. With changes to Modular design,

Responsive design, Motion UI and Accelerated mobile pages to name a few.

Unfortunately not many(myself included) are at the forefront of these concepts.

I’ve done my best to study hard to make sure I stay relevant and the fact that you’re reading this article, tells me you’re actively doing the same thing! GREAT JOB!

To stay relevant, you might have had to take up a ton of projects and tutorials and study materials. Which can prove overwhelming. But here’s a strategy I found that helps you do this less painfully.

Understanding The Code

I’m willing to say that this isn’t the first time you’ve heard this phrase. I’ll tell you a little bit of what it is but I’ll use more words telling you how it works because Socrates said:

‘I cannot teach anybody anything, I can only make them think’

Take a moment and look at this code. What is being done? It’s easy to say you know what’s going on and certainly, you do. Why not say it out loud.

.class-one {   background-color: rgb(134,183,226) !important;
width: 100%;
height: 80vh;
font-family: ‘Hansief’, sans-serif;
}

Let’s try something a little more complex:

<script>
function colorRed( ) {
let root = document.getElementById(‘root’);
root.style.color = ‘red’;
}
</script>

What is the function? Say it out loud.

Understanding code is simply the ability to look at a piece of code (which sometimes might not be your own) and be able to tell what exactly is going on.

How Then Can You Do This

Understand the Terms

Earlier this year around August, a friend called me out for mixing up internal and external styling in CSS when we were talking. Subconsciously I dismissed this and labelled it unimportant but the truth is you’ll go a long way by understanding terms.

In HTML understanding the main, section tags help you reduce your use of div tags and write better-looking code.

In CSS this can help you correct errors that you might get even if you follow a study material step by step

In JavaScript: As with anyone that uses JavaScript, you know there is more than one way to do something. Understanding the technical terms allows you to be VERSATILE

Example: If I asked you to write a function that takes an element with an id of root and gives it a colour of red.

This sounds better than telling you to copy this syntax

<script>
function colorRed( ) {
let root = document.getElementById(‘root’);
root.style.color = ‘red’;
}
</script>

There’s more than one way to approach that particular task and being versatile is very helpful in Web Development.

Document With These Terms

Another important thing we are often told to do as developers that it is important to write but that’s all we’re told to do.

It was until I encountered a hefty problem that gave other developers issues, that I believed in writing.

Whether it’s a discussion article you’re writing or a tutorial blog. Use more technical terms, this forces you to learn them appropriately and the same goes for the reader. But more than anything it helps them understand why they’re writing the code you’re asking them to write. An important way I did this is in my article about using Borders for a better design View Here.

If you’re reading this I’m glad you’ve made it to the end of 2020. It’s been a very confusing year. Remember to take it easy and I look forward to our exploits Next Year.

I am a Web Developer that plays Chess daily. I am interested in ReactJs and LaravelPHP Let's connect!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store