From No Programming Experience to Web Developer in 11 Small Steps
Tags: webdev, javascript, programming, beginners
Published: 2022-06-12 06:22:08

**Web Development** can be difficult, especially for beginners. But don't fret! This article will provide you with a comprehensive list of simple steps & a few resources too, that you enable you to become a **Top-Notch Web Developer** (provided you put in the effort)!

## Step 0: Get a Code Editor

Before you get your hands dirty with coding, getting yourself a **Code Editor** can drastically boost your productivity as it streamlines your **workflow** by **getting rid of the mundane tasks**.

If you want to learn how **Pros Automate the Boring Stuff VS Code**, check out [this article](https://tapajyoti-bose.medium.com/how-pros-automate-repetitive-code-using-vs-code-28ba8c669047).

![code-editor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzveu1yupq48e4c4tf95.jpg)

## Step 1: Learn HTML

**HTML** is the **fundamental skill** required to start Web Development, but don't bother to learn each and every **HTML tag** as most of them are rarely used. Learning the **structure** of the **HTML** only is enough to get you moving!

To get started, you can check out [this course](https://www.codecademy.com/learn/learn-html)

If you still want to hone your knowledge of **HTML**, check out [this article](https://tapajyoti-bose.medium.com/5-tricks-to-truly-call-yourself-html-master-c31dedb7c386)

## Step 2: Learn CSS

**CSS** is responsible for **styling your website**. It is crucial to have a good understanding of **CSS**, as in this day & age if your website doesn't look appealing, people just won't use it.

I highly recommend [the course by Academind](https://www.udemy.com/course/advanced-css-and-sass/?utm_source=adwords&utm_medium=udemyads&utm_campaign=WebDevelopment_v.PROF_la.EN_cc.INDIA_ti.8322&utm_content=deal4584&utm_term=_._ag_82381207578_._ad_533094292050_._kw__._de_c_._dm__._pl__._ti_dsa-774930035449_._li_1007828_._pd__._&matchtype=&gclid=Cj0KCQjw-pCVBhCFARIsAGMxhAfDWn84YgQT58WyTiAZnFz32NirEXDEyQFQnqtKBbP6ujkbbi7WtVcaAg6wEALw_wcB) as it's where I learned **CSS** from.

Here are a few other articles to sharpen your **CSS** skills:

1. [Dark Mode using CSS variables](https://tapajyoti-bose.medium.com/dark-mode-using-css-variables-5c60e148f6b)
2. [Create Dynamic Spinners only using CSS](https://tapajyoti-bose.medium.com/create-dynamic-spinners-only-using-css-1af62c8d4cc0)
3. [5 awesome CSS tricks for beginners](https://dev.to/ruppysuppy/5-awesome-css-tricks-you-did-not-know-2j4a)
4. [CSS decoded ::before and ::after](https://tapajyoti-bose.medium.com/css-decoded-before-and-after-c13e87ab5df3)
5. [Master useful CSS pseudo-elements](https://tapajyoti-bose.medium.com/master-useful-css-pseudo-elements-c82f0384d12a)

## Step 3: Do funky stuff using JavaScript

![web](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdr5rw98ppa7oez186y3.jpg)

Till now, your website was LOOKING SOMETHING. But now it's time to make it DO SOMETHING!

If **HTML** was the skeleton, **CSS** is the skin, then **JavaScript** is the muscle, which enables it to be interactive. Learning **JavaScript** opens up a whole new world of possibilities for your website!

## Step 4: Build!!!

**Now you know enough to build something... so build something**!

You must put the **skills** you learned to use, otherwise, you will end up misjudging what you can do, as **everyone can build stuff while following a tutorial**.

## Step 5: Harness the power of Dev Tools

**Dev Tools** is your best friend when it comes to **debugging** your website! You can check out the **DOM elements**, **styling** they hold, and the **control flow** of your **Javascript code** too.

![dev-tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/was56px6kfi54fd0im5n.jpg)

## Step 6: Familiarize yourself with Responsive Design

Your website **looks cool** and **does cool things**, so now it's time to **make it work on every device**.

The **Academind** course got this covered too!

## Step 7: Deploy to the Web

When you're happy with something you've built, you want the world to see & appreciate it. **It's something you can show off to employers** and something they can have a look at quickly as **they are not going to spend more than 2 minutes looking at your resume**.

You can use [Netlify Drop](https://app.netlify.com/drop) or [GitHub Pages](https://pages.github.com/) as a starting point, then move on to more robust deployment sites like [Vercel](https://vercel.com/login?next=%2Fdashboard) or [Netlify](https://www.netlify.com/).

## Step 8: Get acquainted with Git

![git](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t312kmuvk2ozahf03h6s.jpg)

**Git** is an absolute must-have for any developer. It's a tool that **allows you to track your changes** and keep your code up to date. If you are working in a team environment, you can be confident you will be using **Git**.

Some helpful articles for **Git**:

1. [Git Simplified: Fundamental Concepts & Commands](https://dev.to/ruppysuppy/git-fundamentals-concepts-commands-simplified-2k4j)
2. [Git Simplified: Working with Remote Repositories](https://dev.to/ruppysuppy/git-simplified-working-with-remote-repositories-106f)
3. [Advanced Git Concepts You Should Know](https://tapajyoti-bose.medium.com/advanced-git-concepts-you-should-know-f617e79f3edf)
4. [Automatically Format your code on Git Commit using Husky, ESLint, and Prettier in 9 minutes](https://tapajyoti-bose.medium.com/automatically-format-your-code-on-git-commit-using-husky-eslint-prettier-in-9-minutes-4dd6233f32b1)

## Step 9: Toy around with a Framework

While working on a large project, if you try building everything from scratch, you will end up with **code-mares** (read: **coding nightmares**).

**Frameworks** provide **pre-built code** that you can use to build your project, thus significantly speeding up your **workflow**!

If you are confused about which **framework** to start with, check out [this article](https://jsreport.io/the-ultimate-guide-to-javascript-frameworks/) which weighs the **pros and cons of each framework**.

## Step 10: Start applying to jobs!

Once you have a **Github** with a few projects and something deployed on a domain, you're ready to start applying to jobs.

**Even if you feel totally unqualified, go for it anyway**! You miss 100% of the shots you don't take

You will learn what to show off on a resume and what might be asked in interviews.

## Step 11: Never Stop Learning!!!

Every single developer is learning every single day as **the technology landscape is everchanging**. Keep building new projects and trying new things. But **make sure to take a break when you require it**!

There are plenty of other routes to becoming a **web developer**, like mastering **HTML**, **CSS** or **Javascript** without knowing any **frameworks**, or getting **accredited at a university** or **Bootcamp**. **But these 11 steps are the best and simplest if you want to learn by yourself, and they WORK.**

**Good luck my nerds!**

![you-got-this](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12quxohx4brt6ujmwk1y.gif)

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

# Thanks for reading

Need a **Top Rated Front-End Development Freelancer** to chop away your development woes? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

Want to see what I am working on? Check out my [Personal Website](https://tapajyoti-bose.vercel.app) and [GitHub](https://github.com/ruppysuppy)

Want to connect? Reach out to me on [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose/)

Follow me on [Instagram](https://www.instagram.com/tapajyotib/) to check out what I am up to recently.

Follow my blogs for **Weekly new Tidbits** on [Dev](https://dev.to/ruppysuppy)

**FAQ**

These are a few commonly asked questions I get. So, I hope this **FAQ** section solves your issues.

1. **I am a beginner, how should I learn Front-End Web Dev?**
   Look into the following articles:

    1. [Front End Development Roadmap](https://dev.to/ruppysuppy/front-end-developer-roadmap-zero-to-hero-4pkf)
    2. [Front End Project Ideas](https://dev.to/ruppysuppy/5-projects-to-master-front-end-development-57p)

2. **Would you mentor me?**
   Sorry, I am already under a lot of workload and would not have the time to mentor anyone.