A practical approach to web development.

“There are three responses to a piece of design — yes, no, and WOW!
Wow is the one to aim for.”
-Milton Glaser

Read this short, to the point article as it guides you through how you should approach towards web development.

This article is linked to my medium article -- WebDev Guide

So you are a beginner having no knowledge about this field.
No Problem. This article will remove all your doubts regarding how you should start web development. It is written in an easily understandable language and practical steps which can help you start with web development.

Why do I write?

The main reason is that I am also a web developer, willing to help all the aspiring web-developers out there who want to step into this community of developers, but need a mentor. I committed many mistakes when I was a beginner, and I don’t want anyone else to make the same mistake which I made.

“You don’t have to be great to start, 
but you have to start to be great.”

Let’s Start This Awesome Journey Of Web Development.

ROADMAP

1. CODER’S TOOLKIT

Probably, at this stage, you are an absolute beginner to coding or development and you need to know what to do first, and how to start.
Before we begin, there are some tools that you must have which will make your life as a web developer much more easier.

1. A Laptop — that is the basic need
2. A good web browser — chrome, chrome or maybe chrome
3. A text editor — Atom, VS Code, Sublime Text, Notepad++ or any IDE
4. FTP/SSH Tool (Filezilla, Putty, gFTP) — you will require these in later stages of development
5. Cloud Storage (Optional) — Dropbox, Google Drive etc.

2. Lights! Camera! Code!

At this stage, you have already got a good toolkit which contains everything you will need. Now you must start coding.

1. HTML5 (Get yourself familiar with all these and code)
   • Tags
   • Attributes
   • Links
   • Images
   • Tables
   • Layouts
2. CSS3 (Learn the basics of css, selectors, declaration, property and value) Right now you are capable of making some nice and visually attractive websites, but your web sites are not yet dynamic and user friendly. Basics of any design software (choose any one, will help you a lot)
   • Photoshop
   • Illustrator
   • GIMP (for linux users) etc.
3. Basic Javascript get to know the following things.(Javascript will bring life to your web pages)
   • Basic JS (Dont jump into Node.JS and frameworks for now)
   • Datatypes: String, Number, Arrays, Objects etc.
   • Functions, Conditionals, Loops, Operators, etc.
   • Event handling
   • JSON
   • jQuery (Only if you feel really comfortable with JS)

3. Three! Two! One! DEPLOY

Congrats, you are a web designer now. You now have HTML, CSS and JavaScript in your hands, you can make basic websites, you also know the basics of one design software, you know how to build static websites and front end, you can call yourself a web designer.
Before going any further you must do some more things.

1. Learn about GIT (or, any other version control)
2. SSH
3. Learn basic Terminal usage (or, Command Prompt in windows)
4. Get a shared hosting account (Hostgator, InMoton, 000webhost, etc)
5. Learn Cpanel basics (Email, FTP Setup)
6. Upload your project via FTP
7. Register a domain name and link to your hosting account

Web Designer! you’ve got opportunities out there

1. Build simple, attractive websites for startups
2. Build UI’s for Web Applications
3. Do Internships
4. PSD to HTML/CSS conversions
5. Work for a company or be a freelancer

4. Time for decisions (IMPORTANT DECISIONS)

Now is the time you will have to ask yourself where to go. You can continue and go deep in frontend development or you can go for backend developer.
Choose where to go next……

• Frontend HTML/CSS frameworks (Bootstrap, Foundation, Bulma, Materialize etc…)
• Server side programming (PHP, Ruby, Django, NodeJS..)
• JavaScript Front end Frameworks (React, Angular…)
• Databases (MySQL, PostgreSQL, Hadoop, Mongo….)

4a) So you choose to develop your skills in front end

Learn any one(or more) of the following frameworks, this will make your life very easy.

1. Bootstrap
2. MaterializeCSS
3. Zurb foundation
4. Skeleton
5. MUI
6. Pure

4b) So you got some coding skills? Try Backend!!

Choosing to be a backend developer sure is a wise option at this point. Now you should learn some some server side scripting language. Choose any one (or more, though there is no need of learning more than one!)

1. PHP — Not the best language but is rock solid and not going anywhere for years.
2. Node.JS — New, Exciting, Powerful, Amazing Developer Community. (I personally prefer you to choose this)
3. Ruby on Rails — Great framework, but not so popular and has levelled off
4. Python — Easy to learn but not at all popular

4c) Since you have stepped into backend, try learning databases

Relational Databases

• MySQL
• PostgreSQL

NoSQL databases

• MongoDB
• CouchDB

Pick one to focus on (I recommend this):

• PHP/MySQL
• Node.JS/MongoDB

4d) Move your dev skills to a next level

Learn the frameworks that are highly in use today.

1. Angular
2. React [Flux/Redux]
3. Apollo Client ( A fully-featured, production ready caching GraphQL client for every server or UI framework)
4. Vue.JS
5. Express/Sails
6. If you code with PHP, learn 
   • MVC
   • Routing
   • Database Mining
   • Helpers
   • Data Binding etc..

5. Side Technologies To Learn (no matter you do frontend or backend)

To work in a professional environment, you must need to know about the following

1. GIT (or any other) Version control & GITHUB
2. SSH & Basic Command Line
3. CSS Precompilers — SASS/LESS
4. APIs/REST Services
5. HTTPS/SSL

Deploying your applications

Now you have much more knowledge than before, and probably you have started making your own web based applications, now use these technologies to get your app online.

1. Dedicated Server/VPS
2. App hosting — Heroku, Digital Ocean, AWS
3. Deploy tools
4. Linux command line
5. Maintenance & Updates

6. Web Developer! you’ve got opportunities out there.

Congratulations! You can finally call yourself a Web Developer and you have got some exciting opportunities out there.

1. Create simple to advanced web applications
2. Build backend API’s
3. Teach fellow developers
4. Work with servers
5. Work with databases
6. Work with network security
7. Get a great job
8. Do freelancing
9. Start your own buisness

7. Move one step forward

Learn about content management systems (CMS) like wordpress, Joomla, Drupal etc. They are great for working, offer fast deployment, there are thousands of plugins/addons/templates, and they offer great maintenance.
Mobile App Development
Now that you have come to this level, why limit yourself only to web? Mobile Applications are the future. All in all there are two types of applications, Native and Hybrid. 
A Native application is the one which is (as the name says) native to the operating system. For example, say I am an android developer, therefore I make native applications using JAVA, XML, or KOTLIN etc.
A Hybrid application is the one which is (as the name says) not native, but built on another platform. This is where the great thing comes, as a web developer, you can even make your own mobile applications.

1. Progressive Web Apps are the future
2. You don’t need to learn JAVA/Kotlin/Swift/Objective C….
3. JUST JS!!! Javascript is enough to make your own hybrid applications. Use the frameworks like React Native, Ionic, Cordova…

NOW WHAT?

• Keep Learning and exploring
• Focus on your career
• Make good profile
• Go back and learn another stack
• Learn about other domains (like Machine Learning, Computer Vision, Deep
• Learning, AI, Competitive Coding etc.)
• Keep yourself up to date with new technologies
• Do some research
• Learn some high level languages (C#, Java etc.)
• Increase your social circle, follow great people, get inspired and keep learning.

We can be friends…

I hope this article helped you, we can connect on GIT-HUB or LinkedIn and I would more than happy if you send your feedbacks, suggestions or ask queries. 
Moreover, I love to make new friends and we can be friends, just drop me a text :)

Thanks a lot for keeping your calm and reading till end. 
You know what to do and how to proceed, All the best!
You can contact me in case of any doubts or if you need any assistance:
Email: madhavbahl10@gmail.com
Web: http://madhavbahl.ml/
Github: https://github.com/MadhavBahlMD
LinkedIn: https://www.linkedin.com/in/madhavbahl/

ROADMAP — Frontend Developer?

ROADMAP — Backend Developer

Reference

https://github.com/kamranahmedse/developer-roadmap