It’s not just about learning a programming language and typing out code to build software. There’s a lot more to it. And one of the most confusing (and often frustrating) topics for developers is clean code.

So, what is clean code?

Simply put, it’s about writing code that’s so clear and well-organized that neither you nor anyone else will get frustrated trying to understand it six months later.

Think of clean code as the programming equivalent of great design — it’s functional, beautiful, and easy to work with.

And today, I won’t spend a lot of time explaining why clean code is important — you probably already know that. Instead, I’ll get straight to the point and share seven powerful hacks to help you write cleaner, better code.

Table of Contents

• 1. Write Code Like You’re Explaining it to a 5-Year Old

• 2. Use AI Tools (or an AI Code Reviewer)

• 3. Get Rid of Unnecessary Comments

• 4. Follow the DRY Principle

• 5. Fix Your Code Formatting & Follow a Consistent Style

• 6. Don’t Let Your Functions Do Too Much

• 7. Organize Your Files and Folders Properly

• Wrapping Up

1. Write Code Like You’re Explaining it to a 5-Year Old

Let me be honest — if you are writing exceedingly clever code that your teammates or someone else can’t easily read, it won’t be helpful to anyone.

You need to write code so simple that anyone, including someone who just opened the file for the first time, can easily go through it.

For example, if your variable names look like this:

let x = y + z;

This isn’t helpful. No one will know what x, y, and z mean — not even you, three weeks later.

Variables should describe what they hold. Think of them as self-documenting comments. Here’s a better example:

let totalPrice = productPrice + shippingCost;

This simple best practice can be applied even when writing functions, comments, and more.

Here’s an example of hard to understand code:

function calc(itm) {
 let t = 0;
 for (let i = 0; i < itm.length; i++) {
 t += itm[i].p;
 }
 return t;
}

You see, it doesn’t give you a proper idea about the function other than the logic.

Instead, try to write it like this:

function calculateTotalPrice(cartItems) {
    let totalPrice = 0;
    for (let i = 0; i < cartItems.length; i++) {
        totalPrice += cartItems[i].price;
    }
    return totalPrice;
}

Now it’s clear just from looking at the code what’s going on.

2. Use AI Tools (or an AI Code Reviewer)

AI is evolving quickly and is being used in almost every industry.

Well, as a developer, you can use AI to help you write clean and readable code — all thanks to AI tools like ChatGPT, Claude, and GitHub Copilot.

For starters, you can copy and paste your code into an LLM and ask it to review your code.

Here’s an example of a request I made to ChatGPT:

And here’s what ChatGPT recommended:

It even provided me with an improved version of the code. Here it is as follows:

Along with that, you can also use AI-powered code reviewers like CodeRabbit AI, which integrates with your pull requests to offer automated code reviews, walkthroughs, and more.

In simple terms, when you install CodeRabbit AI, add it to your pull request, and then create a pull request, CodeRabbit AI provides you with summaries, code reviews, walkthroughs, and more.

Here’s an example from an open-source repository “minefield” of a summary generated by CodeRabbit AI:

In the above examples, CodeRabbit AI simply goes through the code and provides a great summary highlighting the new features, bug fixes, and unit tests added via a pull request.

If you want to learn more, here’s a quickstart guide that provides more info on how to get started and use CodeRabbit AI.

Note that, AI tools can be a great help in improving your code, but they should never replace your own thinking.

When AI suggests changes, always ask yourself: Does this actually make sense?

After all, AI isn’t perfect—it can generate incorrect code. It might also miss important details that only a human can fully understand.

So instead of blindly accepting AI’s suggestions, take a moment to understand why they were made.

Remember, the goal is to use AI to speed up your workflow, catch errors, and more—while keeping full control over your code.

3. Get Rid of Unnecessary Comments

Writing good code comments can help others understand why your code is doing what it’s doing.

But I see developers writing too many comments, even where there is no need.

I believe that, whenever possible, good code should document itself.

Here’s an example of a not so helpful comment:

// Adding 10 to the result 
total = total + 10;

You see, here the comment doesn’t make sense, and it doesn’t really add anything to the code (or our understanding of it).

It’s a better practice to write comments only if they’re important in helping a reviewer understand why you did something in particular or if there’s some ambiguity that needs explaining.

Here’s an example:

// Adding 10 because the client requires a 10% buffer for calculations 
total = total + 10;

Now you can see that here the comment gives a clear idea about why the programmer added 10 to the total.

4. Follow the DRY Principle

I’ve seen a lot of programmers repeating the same logic or adding the same functionality in different files.

Well, you don’t need to repeat the same code everywhere because it makes the process much more complex. Keep your code DRY (Don’t Repeat Yourself).

Instead, abstract that logic into a single reusable function.

For example, instead of writing the same logic in different files:

if (user.age > 18 && user.age < 65) { 
 // Do something 
}

if (user.age > 18 && user.age < 65) { 
 // Do something else 
}

You can create a reusable function so that you can use the logic everywhere, as shown below:

function isWorkingAge(age) { 
 return age > 18 && age < 65; 
}

if (isWorkingAge(user.age)) { 
 // Do something 
}

In short — write once, and use everywhere.

5. Fix Your Code Formatting & Follow a Consistent Style

This is another simple hack, but many devs don’t even think about it.

First of all, you need to format your code with proper indentation.

You can just install a VS Code extension/linters like Prettier, ESLint, or Flake8, depending on the programming language you use. Configure a few settings, and you’re good to go.

These linters can help you write better code by finding mistakes, helping you follow coding rules, and keeping your code consistent. They can also catch errors, make your code easier to read, and save time on fixing bugs and reviews.

But fixing your formatting doesn’t just mean it’s clean code – it’s way more than that.

Beyond formatting, you should stick to a consistent style guide for things like function names or variable names.

For example, here’s some code that has an inconsistent style:

let total_price;  
let UserData;  
function getuser() {}

But some of you may ask, why is the code inconsistent?

Well, it uses several different naming conventions – like total_price uses snake_case, UserData uses PascalCase, and getuser() is in lowercase instead of camelCase.

This makes your code harder to read and more confusing. Instead, you can follow a consistent style. Here’s how:

let userData; 
let totalPrice; 
function getUser() {}

And just to let you know, JavaScript typically follows camelCase for variables and functions, so names like getUser(), userData, and totalPrice would be more consistent.

No matter whether you’re working in a team or solo, sticking to one style is a good idea. It makes the code clean, and the reviewer can easily go through it.

6. Don’t Let Your Functions Do Too Much

As a programmer, I know that sometimes you need to write complex logic inside a function.

But most often, programmers include too much logic in a single function, causing it to do more than one thing at a time. These functions become too complex, making them hard to read or understand.

It’s better to create multiple smaller functions, with each function handling a single responsibility.

Here’s an example of a slightly too complex function:

function calculateCart(items) {
 let total = 0;
 for (let i = 0; i < items.length; i++) {
 total += items[i].price * items[i].quantity;
 }
 return total > 100 ? total * 0.9 : total;
}

You see, this single function does too much—it applies discounts if applicable, and calculates the total price based on quantity, making it hard to reuse for specific use cases.

A better way is to split it into three functions:

• One to apply the discount (if applicable).

• One to calculate the total price based on quantity.

• One to get the total and apply the discount if needed.

This makes the code cleaner and easier to manage. Here’s an improved version:

function calculateCart(items) {
 const total = getCartTotal(items);
 return applyDiscount(total);
}

function getCartTotal(items) {
 return items.reduce((sum, item) => sum + item.price * item.quantity, 0);
}

function applyDiscount(total) {
 return total > 100 ? total * 0.9 : total;
}

You see, instead of writing everything in one long block, the logic is broken into smaller, clearer functions.

And that’s what makes it easier for you (and everyone else) to understand.

7. Organize Your Files and Folders Properly

Now comes the most important part.

When you’re working on a big project, it makes no sense to dump all your code into one single folder with a bunch of random files. It’s become a nightmare for anyone trying to review the code or find a specific file.

Think about it — going through 50 files just to fix a bug. Nobody wants that.

Instead, try organizing your project into multiple folders based on pages or features.

And don’t stop there — break large files into smaller, specific modules based on functionality. This way, everything is neat, easy to find, and makes sense at first glance.

Here’s a bad example of a project structure:

project-folder/  
│  
├── index.html  
├── app.js  
├── helpers.js  
├── data.js  
├── user.js  
├── product.js

It’s messy, right? Now, here’s how you can improve it:

project-folder/  
│  
├── pages/  
│   ├── home/  
│   │   ├── HomePage.js  
│   │   ├── HomePage.css  
│   │   └── HomePage.test.js  
│   ├── user/  
│   │   ├── UserPage.js  
│   │   ├── UserPage.css  
│   │   └── UserPage.test.js  
│   └── product/  
│       ├── ProductPage.js  
│       ├── ProductPage.css  
│       └── ProductPage.test.js  
├── components/  
│   ├── Header.js  
│   ├── Footer.js  
│   └── Button.js  
├── utils/  
│   └── api.js  
└── index.js

See how simple this is?

You have separate folders for pages, components, and utilities. Inside each folder, files are organized by purpose and given clear names.

For example, if you need something for the product page, you’ll know exactly where to find it.

Wrapping Up

In this article, you learned the basics you need to get started writing clean, efficient, and maintainable code.

We discussed how to write clean code, use AI tools, apply proper code formatting techniques, structure functions effectively, and follow other best practices.

If you apply these tips consistently, you’ll significantly improve your coding skills and write cleaner code.

I hope you liked it.

You can connect with me on Substack, and Twitter.

Also, if you're interested in learning more about AI, you can subscribe to my newsletter, AI Made Simple, where I dive deeper into practical AI strategies for everyday people.

To help anyone and everyone get started, I'll provide you with a collection of excellent free resources to learn Web development.

So let’s get started.

How I Started Learning Web Development

I was in my first year of Engineering, studying Electronics and Telecommunication Engineering. I wasn't at all interested in coding and all that tech stuff.

Until one day.

Accidentally, one of my friends recommended a Udemy Course to me on Web Development. Before that, I didn't even know about Web Development since I didn't have a technical background, and I wasn't trying to learn new skills.

So I didn't know what HTML, CSS, and all that techy stuff was about. My friend let me watch the course on his own Udemy account.

Well, I ended up watching the course two hours a day because I liked it. But at that time I wasn't practicing coding on my laptop like many of you.

Within days, I learned the basics of HTML and CSS. After that, I started up my laptop and tried to create websites based off what was taught in the course.

And in this way I started to learn about Web Development.

How to Get Started as a Front End Web Developer

Source: GitHub

Here you can see a broad roadmap for front end Web Developers. If you haven't seen it before, read through it to get a sense of the overall path.

There's a lot to take in – but in this article, I am going to help you create a shorter path to learn Web Development.

Before we dive into the skills you need to learn to become a web developer, you should know that web development isn't a single concept or subject. It has numerous subfields in it.

You can focus on front end development, back end development, graphic design, and so on. We'll start with the front end now.

For Front-end development, you need to learn HTML, CSS, JavaScript, and a library or framework like React, Angular, or Vue.js.

So now let's talk in more detail about what front end development is and what you need to learn.

What is Front End Development?

The front end of an application typically refers to the layer that represents the UI (user interface). This can include anything from a static site with HTML and CSS to a full React app that powers the UI. - Colby Fayock

There are some basics you'll need to know for Front-end Web Development. They are:

1. HTML

2. CSS

3. JavaScript

HTML and CSS use to create static websites.

What is HTML?

HTML stands for Hypertext Markup Language. It is used to add content to a website. The information which you see on a particular website is only visible because of HTML. You can run HTML code in an IDE like Visual Studio, Sublime Text, Atom, and many more.

HTML consists of tags like <h1> (for heading) and <p> (for paragraph).

For instance:

<!DOCTYPE html> 
<html>
<body>
  <h1>Hello, Readers</h1>
  <p>You are good to go.</p> 
</body>
</html>

This is some basic syntax for HTML. We have to write code inside body tags to display on Web pages. Here we're displaying an h1 tag with a paragraph tag.

The output of this code will look like this:

What is CSS?

CSS is an acronym for Cascading Style Sheets. You use it to create styling for a Website so that it looks attractive.

Once again, inspect the above HTML code. It doesn't display background color or shadow. This is because we haven't applied CSS to it yet.

So, CSS enhances HTML and tells elements how to display on Web pages.

CSS consists mainly of 3 types:

1. Inline CSS.

2. Internal CSS.

3. External CSS.

To help you to understand a bit better, we will use Inline CSS. Inline CSS is a type of CSS where you can add style properties inside HTML tags.

For example, here we have added a style property to the body tag. We just changed the body's background-color to pink:

<!DOCTYPE html> 
<html>
<body style="background-color:pink;">
  <h1>Hello, Readers</h1>
  <p>You are good to go.</p>
</body>
</html>

And here is the output:

Isn't it cool?

What is JavaScript?

So what about dynamic websites? That all happens thanks to JavaScript.

Even Google has mentioned JavaScript as the most popular programming language out there these days.

Source: Google

JavaScript is a programming language used mainly on the client-side to help web pages be more interactive.

While HTML and CSS are languages that give structure and style to web pages, JavaScript provides web pages with interactive elements that engage a user.

Let's explain how it works with an example.

Think about your house. Building the foundation and framework of your home with bricks and cement is all a part of HTML. Painting and decorating your house is CSS's job. And integrating technology – like IoT – is part of JavaScript.

That’s it. Front-end Web Development consists of HTML, CSS, and JavaScript.

Once you know the basics, you can add frameworks and libraries like React, Angular, or Vue.js to your skillset.

These are the basic skills you need to start as a Front-end Web Developer.

How to Learn Back-end Development

Source: GitHub

Now let's talk about Back-end Development.

For Back-end Development, you'll need to learn Node.js, Express, MongoDB, and Mongoose.

But What is Back-end Development?

Back-end development is also known as server-side development. It is the practice of communicating between the database and the browser.

Back-end Development languages and tools include:

1. Node.js

2. Express

3. MongoDB (Including Mongoose)

These three skills are important to learn if you want to become a Back-end Developer.

What is Node.js?

According to Node's documentation, Node.js is an open-source and cross-platform JavaScript Runtime Environment. It is a popular tool that you can use for basically any type of project.

Node.js runs the V8 JavaScript engine, the core of Google Chrome, outside of the browser. This helps Node.js be very performant.

Now, What is Express?

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. - Express Docs

You can think of Express as an NPM package that helps Node.js applications.

Let me explain how it works through some code. The below code is the basic syntax for Express.

const express = require('express');
const app = express();
const port = 5000;

app.get('/', (req, res) => {
  res.send("Hello, World")
})

app.listen(port, () => {
  console.log("App is running on port 5000");
})

Here we are installing and then requiring Express. You just initialize the app as express() and the port as 5000.

Then we request the '/' route to respond with Hello, World.

When our app is running, we log that it is running on port 5000.

Lastly, What is MongoDB?

Before proceeding further, I have to explain a crucial concept: databases.

To create websites, you need a Database. We know that websites require databases to store information. The database helps us store user information, show information based on user requests, and much more.

Databases come in two types: SQL and NoSQL.

What is the difference between SQL and NoSQL?

1. SQL is a relational database, while NoSQL is a non-relational database.

2. SQL is represented in tables, while NoSQL is in key-value pairs or JSON format.

3. The most popular SQL databases are MySQL and PostgreSQL while the most popular NoSQL database is MongoDB.

Now let’s talk about MongoDB. According to mongodb.com,

MongoDB is a general-purpose, document-based, distributed database built for modern application developers and the cloud era.

When you need to work on a database, MongoDB is a great NoSQL option.

You also have to learn Mongoose.

Mongoose helps you work more easily with MongoDB.

Mongoose provides a straight-forward, schema-based solution to model your application data. It includes built-in type casting, validation, query building, business logic hooks, and more, out of the box.

Those are the basic technologies you need to learn to become a back-end developer.

Once you've learned all these skills, you can call yourself a Full Stack Web Developer.

By the way, you might have heard people referring to certain tech stacks, like "MERN" or "MEAN".

Well, if you choose to learn React.js, you will be a MERN (MongoDB, Express, React, Node) Stack Web Developer.

With Angular.js, you will be a MEAN (MongoDB, Express, Angular, Node) Stack Web Developer.

Free Resources to Learn Web Development

Photo by [Unsplash](https://unsplash.com/@brookecagle?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Brooke Cagle / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit)

If you want to learn to code, this is the best time to dig into it.

And to motivate you, here are some facts:

1. According to Glassdoor, the average Web Developer salary in the US is $68,524/yr. Much more than we expect to earn during the pandemic.

2. There are a ton of great and high-quality free resources out there. Yes, you can learn everything related to Web Development for free.

3. You can start a Web Development Startup without a single cent. I have started something similar.

4. You can earn money in numerous different tech-related fields.

And the list could go on.

Before we get into these resources, I want to let you know that I use or have used all these languages, tools, and resources professionally. There are no affiliate links in the article, so there are no resources here that will help me earn money.

I have also spent about 10 days researching more about these resources. I've consulted more than 50 top web developers so I can provide free access to my readers.

Do note, though, that some of these resources are free up to a point. So you can check those out and see if you want to invest more.

I know many of you are beginners and don’t know the best resources to try. So I will keep it simple.

You can check all these websites and even bookmark your favorites to come back to again and again. Alright – let's check 'em out.

freeCodeCamp

The most crucial website I've ever visited in my life is freeCodeCamp. They have a full 3000-hour web development curriculum, and they've recently added certificates for scientific computing, data analysis, and machine learning with Python as well.

In addition to the curriculum, freeCodeCamp has a publication (where you're reading this article), a YouTube channel, and a Forum where you can get help with your programming problems.

You can also sign up as a subscriber, and Quincy (freeCodeCamp's founder) will email you some of the latest tech-related articles from freeCodeCamp's publication every week.

Want to know why Quincy founded freeCodeCamp?

Quincy Larson summarises in a podcast interview as follows:

freeCodeCamp is my effort to correct the extremely inefficient and circuitous way I learned to code. I’m committing my career and the rest of my life towards making this process as efficient and painless as possible. […] All those things that made learning to code a nightmare to me are things that we are trying to fix with freeCodeCamp.

Udemy

Yes, you can still get free courses from Udemy. Just search for Free Web Development Course, and it'll filter out your options. You'll see both paid and free course, but you can just choose the free ones and enjoy.

If you remember, my first programming course was from Udemy – the one my friend signed me up for. So it helped me get my start.

Documentation to Reference

When I want to learn about or implement a new concept, I visit Google. And Google often recommends the MDN or a tool or language's official documentation.

This is also helpful when I forget how the details of a specific topic (like Flexbox, for example) work.

W3Schools provides tons of short reference tutorials for many topics including Java, Python, JavaScript, jQuery, React, Angular, AJAX, SQL, Node.js, Raspberry Pi, Artificial Intelligence, Machine Learning, Data Science, NumPy, SciPy, Matplotlib, and MongoDB.

When I was studying engineering, I had to learn Java. And I didn't want to read a 500 page book for that. So I jumped onto w3schools to learn the language. Since I knew C, the logic was the same and there were just some syntax changes and new concepts like encapsulation, inheritance, polymorphism, and so on.

Believe it or not, I learned Java basics in about two days.

YouTube Channels to learn Web Development.

I have personally used every one of these channels for years and have learned a lot from them. I've also consulted a bunch of working web devs to help provide you with the best resources out there.

1. freeCodeCamp

freeCodeCamp's YouTube channel was the first one I tried out to learn Web Development after Udemy.

They publish courses on a wide range of topics from Python and Data Science to Game Development, JavaScript, Design, and more.

It's one of the largest programming-related channels on YouTube and they release new full video courses a couple times a week.

2. Clever Programmer

Rafeh Qazi, a tech expert, was a freelancer and then shifted his path to begin directly teaching students.

He started his YouTube Channel with Sonny Sangha and a few others to teach programmers through creating clones of popular websites.

I have used those tutorials to build clones of Amazon, Instagram, and more.

My YouTube history has tons of Web Development and App Development videos. And YouTube recommends similar topics to me. So one day, I got a recommendation to try building an Instagram clone with React.js, so I checked it out.

3. Traversy Media

Brad Traversy is the creator of Traversy Media. He is a freelancer, works for companies, and runs his own business.

Along with that, he runs a YouTube channel to teach Web Development.

I have been following him for a long time. Throughout his career, he's worked very hard and let his health suffer. So what did he do - quit? No – he invited other YouTubers to teach his students with him.

What great passion. Hats off to Brad Traversy.

Through Brad's channel, I have learned Chart.js, Pusher, Full Stack React, and Django.

4. Academind

I wanted to learn more about the MERN Stack when I was a beginner. So I went to Udemy and took a course.

I didn't know about Academind at that point but I learned about it from the course I took. So I went to check out his YouTube channel and really enjoyed it – so I subscribed.

5. Stefan Mischook

We all get stuck at some point. We might start thinking, how can I possibly become a web developer? How can I ramp up my learning? Are there any jobs out there for me, and how do I apply?

All these questions knock at our mind's door, and we need to answer. To help you tackle these questions, Stefan Mischook's is the best channel for you.

He answers many general questions that programmers and developers might while they're learning to code or gaining new skills.

6. London App Brewery

Angela Yu and her team run this YouTube Channel. And indeed, I am her biggest fan.

Why? Because my Web Development journey began thanks to her.

Other than Web Development, she teaches Flutter, iOS Development, and many more topics.

7. The Net Ninja

When I was learning the MERN Stack, I discovered that that React Native is simple enough. When I wanted to start learning about it, The Net Ninja helped me out.

There are tons of tutorials here that explain Vue.js, Angular, React, React Native, Flutter, PHP, Firebase, CSS, JavaScript, GraphQL, and more topics.

Code Editors for Web Developers

As a web developer, you'll need a good code editor to help you in your work. Let's look at a few of the most popular editors now.

Visual Studio Code

Personally, I use Visual Studio Code (or VS Code) for all of my projects. I really like its many features like live share, the built-in terminal, dark mode, and tons of extensions.

Extensions such as Prettier, ES7 React/Redux/GraphQL/React-Native snippets, and Live Server are a regular part of my life.

I am also learning Java for my placement. Many of you may have heard about NetBeans and all, but I am using VS Code for that.

In Visual Studio Code, you can run every programming language, as well as frameworks like React Native and Flutter.‌

Sublime Text

Sublime Text is another popular editor. I have not used it so far, but many of my friends do.

It has more than enough features for a beginner to use while learning Web Development.

Want more?

Want a full list of resources I recommend?

Here is a list of 80+ resources for Web Development.

Why Should You Be a Full Stack Web Developer?

I know some of you might be a bit overwhelmed after learning about Web Development and all the different skills you need to learn.

Knowledge is everywhere and it's vast.

But it's totally worth it to learn these skills. Let's talk about some of the benefits that come with being a web developer.

Benefits of being a Web Developer

1. Compensation (it's quite good)

2. The industry is not going anywhere any time soon

3. The work is fun and interesting

4. You can work as a freelancer or for a company

5. You can work from home or anywhere else

So...how much can you earn?

Source: Glassdoor

According to Glassdoor, the average salary for a Full Stack Web Developer in the US is $105,813/year.

What about app development?

Want to be an App Developer? You can dive right in.

Suppose you learn React.js to become a MERN Stack Web Developer. The same concepts apply in app development.

For example, React Native, a mobile app framework, uses the same concepts as React.js to create mobile applications.

To get started, you don't need to learn any other languages or major concepts. Focus on React.js and you'll be able to create your applications.

Embedded content

Wrapping Up

Congratulations on working your way through this long post.

It was just a brief guide for Web Developers, to help you get started in the field. You can bookmark this article for further use or even share it with your friends who want to start their careers as a Web Developers, too.

Good luck :)

Thanks for reading!

This article is a combination of 3 stories I wrote on Medium.