By : Saurav
Whenever we talk about being a developer for beginners or students, they opt app or full stack web developer. But being a beginner they never know where to start, what to do, and how to grow. They don’t know what is Full Stack, what technologies to learn, and what things come under it. Well as a beginner it was tough for me too to find a way and be a developer. Well for you guys, it’s easier to do as I will share an amazing roadmap as a blog for you to learn the basic things first and then come out as a skilled web developer.
Full Stack Web development – A field that brings up ideas along with various questions in engineer. To be simple, developing a web application. Most of the engineers today even make this field as their profession. 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: A wireframe is commonly used to lay out content and functionality on a page that takes into account user needs and user journeys. Wireframes are used early in the development process to establish the basic structure of a page before visual design and content are added. For better understanding: https://www.youtube.com/watch?v=zFBa7URT654&feature=youtu.be
Front-End Developer: A person who designs the user interface of an application. For better understanding: https://www.youtube.com/watch?v=Xd7huBu39qk
Back-end developer – A person who codes features and functionalities of an application using server-side scripting is called as a back-end developer. For better understanding: https://www.youtube.com/watch?v=0Kv_k4ypj6o
To start quickly and learn the basics take this Udemy free course: https://www.udemy.com/course/adobe-xd-experience-design/?LSNPUBID=iB4sgvVzQdQ&ranEAID=iB4sgvVzQdQ&ranMID=39197&ranSiteID=iB4sgvVzQdQ-UzD0Zv0H2IIWJo0Uv4MhYQ&utm_medium=udemyads&utm_source=aff-campaign
Things you will learn by taking this course –
- Installing tools b. Basic setup
- Basic prototyping d. Advanced prototyping e. Related Examples
To deep dive into it: https://www.udemy.com/course/master-the-fundamentals-of-rapid-prototyping-user-experience/?LSNPUBID=iB4sgvVzQdQ&ranEAID=iB4sgvVzQdQ&ranMID=39197&ranSiteID=iB4sgvVzQdQ-oiRQWbmg8INe04ilYCr.KQ&utm_medium=udemyads&utm_source=aff-campaign
Things you will learn by taking these courses –
- User-centered designing b. Irise c. User experience process d. Guidelines for design e. Project – Geico website wireframing
Please practice prototyping by making samples for Udemy, Facebook, LinkedIn, or Twitter. This will help you to be a professional UI/UX designer and come out as an industry-level designer.
B)Front end Development
1) First learn HTML&CSS from basic. There are 3 free courses by Udemy to help you achieve your goals:
- a) A complete introductory tutorial on HTML5: https://www.udemy.com/course/introductory-tutorial-html5/?LSNPUBID=iB4sgvVzQdQ&ranEAID=iB4sgvVzQdQ&ranMID=39197&ranSiteID=iB4sgvVzQdQ-oWNYXQiG7nqowjrsM5dswg&utm_medium=udemyads&utm_source=aff-campaign
- b) HTML and CSS3 Fundamentals: https://www.udemy.com/course/html5-fundamentals-for-beginners/?LSNPUBID=iB4sgvVzQdQ&ranEAID=iB4sgvVzQdQ&ranMID=39197&ranSiteID=iB4sgvVzQdQ-0PXQaj9.hDLCF0i6wbK93A&utm_medium=udemyads&utm_source=aff-campaign
- c) HTML and CSS for Beginners – Build a Website & Launch ONLINE: https://www.udemy.com/course/html-and-css-for-beginners-crash-course-learn-fast-easy/?LSNPUBID=iB4sgvVzQdQ&ranEAID=iB4sgvVzQdQ&ranMID=39197&ranSiteID=iB4sgvVzQdQ-giLghsP8OFUY2uguRdj4mw&utm_medium=udemyads&utm_source=aff-campaign
The things you will learn: Links, Layouts, Tables, multimedia, Forms, Viewport Settings, basic css3, selectors, dimensions, box-model, list, text, fonts, designing forms, etc.
2) Learn a CSS3 framework Bootstrap which will help you to make your task easier. There are 3 free courses by Udemy to help you achieve your goals:
- a) Learn Bootstrap 4 by example: https://www.udemy.com/course/learn-bootstrap-4-by-example/?LSNPUBID=iB4sgvVzQdQ&ranEAID=iB4sgvVzQdQ&ranMID=39197&ranSiteID=iB4sgvVzQdQ-TET_wVEROj6ZVXTptCNOKg&utm_medium=udemyads&utm_source=aff-campaign
- b) Bootstrap 4 Quick Start: Code Modern Responsive Websites: https://www.udemy.com/course/bootstrap-4/?LSNPUBID=iB4sgvVzQdQ&ranEAID=iB4sgvVzQdQ&ranMID=39197&ranSiteID=iB4sgvVzQdQ-zX1srcmrsEGLKPkXPDGbGQ&utm_medium=udemyads&utm_source=aff-campaign
- c) Complete Bootstrap 4 course – build 3 projects: https://www.udemy.com/course/bootstrap-4-tutorials/?LSNPUBID=iB4sgvVzQdQ&ranEAID=iB4sgvVzQdQ&ranMID=39197&ranSiteID=iB4sgvVzQdQ-.2.bTr.oUgimMgfN4.8BNA&utm_medium=udemyads&utm_source=aff-campaign
The things you will learn: navbars, grid system, cards, lists, bootstrap template, etc.
Follow this documentation to learn bootstrap 4 more: https://getbootstrap.com/
Follow this documentation to learn css3 more: https://developer.mozilla.org/en-US/docs/Web/CSS
Follow this documentation to learn HTML more: https://www.w3schools.com/html/
Keep this in mind that it is okay that you cannot memorize all things at once for styling or doing any task. Even if you can memorize only 10 things it is okay. It is also okay if you are referring to StackOverflow for any problem or any documentation like bootstrap4, w3schools for doing the task. I think you will learn only by seeing things how it is done and practicing it by referring. Most of the professional developers themselves refer when having any problem.
The things you will learn: the basics of js, AJAX, Flow control, functions, events, objects, etc.
Well, there are many frameworks & Languages for back end development –
- PHP – Most used language for back end development to date. But it is very basic and one should start with PHP for back end development. Because it is very old many free hosting platforms are available.
- 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. First, learn PHP given above and then learn OOPS in PHP which is essential for Laravel. There are no free courses for Laravel but a student always knows how to get it free. Please refer to youtube.
- .NET – Very old & vanished backend development framework while its release it wasn’t open source.
- 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.
- Django – A most popular framework for backend development using python recently version 2.0 was launched which made it very easy for a developer to gets hands-on with it. Learn the python language mentioned above and then go for the Django framework.
- 6. Flask – One of the emerging python framework for backend development. Slowly people are learning about it. Learn the python language mentioned above and then go for a framework.
- Ruby on Rails – Most widely used nowadays and gaining demand exponentially. This framework is getting very popular fastly. This is the most in-demand skill in the tech market. I would suggest using this for backend development. Learn the Ruby language and then go for a framework. https://www.udemy.com/course/ruby-on-rails-a-beginners-guide-free/?LSNPUBID=iB4sgvVzQdQ&ranEAID=iB4sgvVzQdQ&ranMID=39197&ranSiteID=iB4sgvVzQdQ-8yuQZ3WYfpHXv51nLmwtDA&utm_medium=udemyads&utm_source=aff-campaign
Note – If you are new into this field please start learning a framework, because the framework relies on MVC architecture which helps to develop a secure application.
Now for backend development, you need to choose one of the above methods to get started. You need to first learn a base language and then a framework for development.
In each basic language course, you will be learning about a. Installations b. Fundamentals c. Control structures d. Functions
- Classes and objects f. Assignments
And in each framework course, you will be learning about –
- 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
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.
How to host web development projects?
- Front end web developers can showcase by pushing it into a GitHub repository or Netlify.
- Back end developers can host through the following ways:
- PHP & Laravel – 000webhost
- Python & Ruby – Heroku
- Node.Js – Google Cloud Platform
I think I covered almost all topics to become a skilled web developer. I would also say you to refer Coursera and Udacity to see wonderful courses apart from Udemy and to access them free, a student always knows (lolz).
Now it’s just you who has to work and be the upcoming skilled developer.
Tip: Always be curious enough to learn new things, never satisfy your hunger for learning, use the first principle of Elon Musk of learning and at last always remember these lines: What you know is a drop, what you don’t know is an ocean.
1) Udemy 2) w3schools 3)Youtube 4)Career-high