CareerHigh - Building Better Career




Web Development Roadmap- Learn Front-End, Back-End & Wireframe Development

Web development – A field which brings up ideas along with various questions in engineer. Every engineer dreams of developing a website in his/her starting days of college. Most of them even make this field as their profession. But many few of us know how to get started into this field of web development.

As of now many of us think that there are only two types of web developers namely front end and back end web developer. But very few of us know that there is a third division as well, which is a wireframer/prototyper.

Wireframer/Prototyper – A person who develops wireframes or dummies of a demanded application so that it can be used to assess goals, milestones, and deliverables in a future course, also it can be used for pitching the product to customers or investors before actually starting the development. Click here for better understanding.

Front end developer – A person who designs the user interface of an application is called a web developer. Click here for better understanding.

Back-end developer – A person who codes features and functionalities of an application using server-side scripting is called as a back-end developer. It is also essential for a back-end developer to have an understanding of client-side scripting. Click here for better understanding.

Now as you understand the difference between these three divisions you can now refer sections of your interest(s). For each section, I will be pointing out ways to get started, courses, milestone and job opportunities.

A. Wireframing / Prototyping

Well this is a job which very much less preferred by engineers. But now because of job opportunities, many people are eyeing on this field as well.

How to learn wireframing?

1. Its time to let you know if you are fit for a wireframing job? Look at this video. Do not implement what he does but watch and check if you find this interesting.

2. Now if your answer is Yes, take Udemy course on How to Design & Prototype in Adobe XD  as it will take you through the basics of how can you start developing prototypes.

Things you will learn by taking this course -
a. Installing tools
b. Basic setup 
c. Basic prototyping
d. Advanced prototyping 
e. Related Examples

3. Now as you know the very basics of prototyping its time to check if you really got it right.
Using the prototyping skills that you learned in the above course, design a wireframe for following websites –
a. 9GAG b.Udemy  c. Youtube d. Paytm

4. Now its time for a deep dive into a complete course which makes you a professional in prototyping. Below are the courses - 
a. Master the fundamentals of rapid protyping
b. iRise11 Hands on training for beginners

Things you will learn by taking these courses -  
a. User centered designing
b. Irise
c. User experience process
d. Guidelines for design
e. Project – Geico website wireframing

5. Now as you have become a professional in prototyping, its time for some tough tasks. Prototype following web applications and practice them
a. Facebook b. 
Twitter c. Linkedin

6. Now you have become a professional web application prototype. But nowadays most of the products have mobile application as well, which is to also be prototyped. Learn mobile application prototyping by taking course on Wireframe & protype a Mobile App.

Things you will learn by taking this course-
a. Installing Balsamiq (Tool for Mobile App prototyping)
b. Using Balsamiq
c. Wireframing Mobile application

7. Now its time for you to try a hand on prototyping a mobile application. Create prototypes of following mobile applications  -
a. Whatsapp
b. Facebook
c. Instagram
d. Pubg

Bonus: Many people now-a-days use just-in-mind prototyping tool. It is quite easy to use. I would recommend giving it a shot. If you don't have a lot of time to deliver wireframes, just-in-mind can help you.

Job opportunities for prototyper

There is high demand for prototypers / wireframers nowadays. You can see some job listing here in these documents.
1. Prototyping Jobs (1)
2. Prototyping Jobs (2)

How to get a prototyping / wireframing job / internship ?

1. Linkedin -  Add your skills as wireframer, prototyper and also add names of software you use to do prototyping
2. Glassdoor – Many companies post opportunities on glassdoor, keep checking time-to-time.

Note – It will take around 4-5 weeks (everday 1-1.5 hours) to complete the courses and be it will be able develop ability to take up projects.

B. Front-end web development

How to become a front end web developer?

1. Learn HTML5 the very basic of web development. A complete introductory tutorial on HTML5 is a very good course to learn it.

2. Now you just have a hunch of how it works. You need to get more familiar with it. So follow this tutorial Learn HTML5 programming from scratch. But if you are looking for free courses you can do a free course on HTML5 and CSS3 fundamentals and follow HTML tutorial for beginners youtube video.

These courses will take you through important topics of HTML5. You can choose one of the option. But if you decide to choose 2nd option, most of the things will get repeated and  time will be wasted. Also the 1st option has a project section in it which can be very helpful.
Things you will learn by taking this course-
a. Links
b. Layouts 
c. Tables
d. Multimedia
e. Forms
f. Viewport Setting 

3. After learning HTML5 its time to learn CSS3. CSS3 is used to enhance user experience. Follow this tutorial HTML and CSS for Beginners - Build a Website & Launch ONLINE.

Famous proposal sentence for designers’ – You are CSS to my HTML page.

4. Its time to be a perfectionist in designing. You need to take a deep dive. Follow this course to be a professional designer ->
 The Complete HTML & CSS Course - From Novice To Professional  

Or

CSS Tutorial for Beginners on youtube.

You can choose one of the options as both are quite similar but in 1st option there is a project. This course is very famous for CSS3 and if you have this certification it can blossom up your resume.
Things you will learn by taking this course-
a. Basic CSS3
b. Selectors
c. Dimensions
d. Box model
e. Lists
f. Text
g. Fonts
h. Designing forms
i. Tables

5. Bootstrap is a CSS3 framework. It has various essential classes which can be directly implemented to make pages more interactive. You can learn bootstrap from the following courses.
a. Complete Bootstrap 4 course - build 3 projects
b. Bootstrap 4 Quick Start: Code Modern Responsive Websites
c. Learn Bootstrap 4 by Example

OR 

you can follow The Bootstrap 4 Bootcamp course

In this section you will be learning –
a. Basics of bootstrap
b. Designing navbars
c. Grid System
d. Using classes
e. The base six colors
f. Cards
g. Lists
h. Using a prebuilt bootstrap template

6. Its time to try some tasks to check whether are you really getting concepts! Try mimicking following pages from what you have learned so far
a. 9GAG b.Udemy  c. Youtube d. Paytm

You can show this to your friends , relatives and ask for some feedbacks.

7. As a designer you should also know about client side scripting. There are many languages and frameworks available for client side scripting.
a. Javascript
b. Typescript
c. React Js
d. Angular Js
e. Vue Js

I would recommend you to start with javascript as it is easy, popular and most widely used.

8. Now its time to learn javascript. Take Javascript Essentials course on Udemy.
9. Its time to be a professional javascript developer. Become a professional javascript developer by taking  The Complete JavaScript Course 2019: Build Real Projects! or Learn to Program in Javascript: Beginner to Pro course on udemy.

In this course you will be learning –
a. Basics of javascipt
b. Flow control
c. Functions
d. Objects
e. Events
f. Ajax

10. Now its time to practice and get hands on a big task. Do any 7 tasks out of 20 listed in this link : 20+ Projects You Can Do With JavaScript

Job opportunities for front-end web developer

Front end web development is very vast and progressing field. You can find multiple opportunities on internshala, linkedin, and glassdoor.
Note – It will take around 5-7 weeks (everday 1-1.5 hours) to complete the courses and you'll be able develop ability to take up projects.


C. Back-end web development

Well, there are many frameworks & Languages for back end development -
1. PHP - Most used language for back end development till date. But it is very basic in nature and one should start with PHP for back end development. Because it is very old many free hosting platforms are available.
2. Laravel - A framework based on PHP , which is very user friendly. Laravel also is losing its popularity because of some advanced frameworks coming into corporate.
3. .NET - Very old & vanished backend development framework while its release it wasn't open source.
4. Python (web.py) - When python came into market one of its module was developed for backend & web development. It is not used very frequently in the market.
5. Django - A most popular framework for backend development using python recently version 2.0 was launched which made very easy for developer to gets hands-on with it.
6. Flask - One of the emerging python framework for backend development. Slowly people are learning about it.
7. Ruby on Rails - Most widely used nowadays and gaining demand exponentially. This framework is getting very popular fastly. This is most in demand skill in the tech market. I would suggest using this for backend development.
8. NodeJS - This is also getting very popular and this could be your second option for back end development.

Note - If you are new into this field please start learning a framework , because framework rely on MVC architecture which helps developing secure application.
Now for backend development you need to choose one of the above methods to get started for backend development. You need to first learn base language and then framework for development. But before you choose one, I would request you to have a look on a trend below.

Now as you know about trends and you an select base language you want to learn.

Note - It is not necessary to have certificate of base language but you should have at-least one certificate for framework. In this table below you can do one for learning language and one for framework.

In each basic language course you will be learning about
a. Installations
b. Fundamentals
c. Control structures
d. Functions
e. Classes and objects
f. Assignments

And in each framework course you will be learning about –
a. Installations
b. Environment Setup
c. Setting up local server
d. Getting started by creating pages and routes
e. Adding HTML5 and CSS3 to backend
f. Database installation
g. Database connectivity
h. Inserting data to database
i. Retrieving data from database
j. Update data in database
k. Delete database
l. Session Management
m. Cookie
n. Authentication
o. Capstone project  

 No. Technology  Base Language Framework
1. PHP PHP- Udemy PHP Course OR PHP Tutorial in Youtube  
2. Laravel PHP- Udemy PHP Course And OOPS PHP ( It is essential to do this course as for understanding Laravel you need to know basic OOPS in PHP) Laravel
3. Web.py Python- Udemy Python Course OR  Python Tutorial in Youtube web.py
4. Django Python- Udemy Python Course OR Python Tutorial in Youtube Django
5. Flask Python- Udemy Python Course OR Python Tutorial in Youtube Flask- Course1, Course 2
6. Ruby on Rails Ruby Rails- Course 1, Course 2
7. Node Js Javascript: Javascript Essentials, Programming in Javascript Udemy Node Js course & Node Js tutorial in Youtube

Note -  It would take 3-6 months for you to become a backend web developer.

Very Important Point:
While going through these courses you will be facing many difficulties but do not worry as you are not alone. Just google your problem and you can find suggestions in stackoverflow. Open that, take a look and your problems will be solved in minutes.

Job opportunities for back-end web developer
1. Amazon     
2. Flipkart        
3. Udaan
4. Capgemini
5. Tata Digital & many more..

How to ace in field of web development?

1. Create projects & solve real world problems.
2.  Do open source contributions at github.
3. Complete internships (find them using internshala).
4. Try implementing features you find interesting while surfing web.
5. You should be always willing and ready to learn something new.
6. Keep your linkedin profile always updated. Keep your projects links and allows add skills you possess in your linkedin profile.

How to host web development projects?

1. Front end web developers can showcase by pushing it into a github repository
2. Back end developers can host through following ways:
a. PHP & Laravel – 000webhost
b. Python & Ruby – Heroku
c.  Node.Js – Google Cloud Platform

A developer always try to solve real world problems. There are many places where automation and data sharing can be implemented to reduce the time involved in task and as a developer its now your responsibility to do so. Learning is just a first step , experience and persistence can add up a lot more to what we can do. 
Now you know how much efforts are required to become a web developer. I wish you all the very best for your ventures. Keep learning, keep building and be humble.

By,
Pawan Dhanwani


We would love to hear your feedback and suggestions. Click here to provide your feedback so that we can improve the platform.

For more exciting content like this,  Signup now to stay updated!

FIND MORE ROADMAPS

Post your comments here

Please login to reply