Web development in 2020 - A complete                                  Roadmap.(P-1)


How do you feel when you created your own Webpage. It makes you feel like a magician that's you have created that it's quite fascinating. Remember the first time when you visit on the internet and see the websites suddenly a question stuck in your brain that how its made. So, in this blog, you will be going to learn web development. And  I will share Some Free Resources to learn web development with a complete guide. So this is Part 1 of 2.

First,decide your path.

When you started learning web development many questions moving around your brain that how I start from where I start, What things I have to learn and the most important steps to learn Web.
If you learning to program the main thing is to keep patients in the coding world you have to keep patience and passion about your work. If you don't have passion and determination about work. I would say you are in the wrong field.
  • You want to work for a company as a web developer which is the most popular and common reason.
    • You want to work as a freelance developer to start your own business or agency.
    • You can become a consultant for other companies.
    • You can create your own app to make money.
    • Code as a hobby.

    Decide what you have to learn.

    If you start to learn web development first you have to decide what things you have to learn the whole web divided into two parts (Front-end development),(Back-end Development).

    • Front-end development:- Front-end web development is the practice of converting data to a graphical interface, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that data.

    • Back-end Development:- Backend development (also stylized as back-end or back end development) is the skill that powers the web. ... Backend development languages handle the 'behind-the-scenes' functionality of web applications. It's code that connects the web to a database, manages user connections, and powers the web application itself.


    Tools you need for web development.

    • Computer/OS:- For web development you need an operating system and a computer because you cant do programming on your smart-phone, So for web development, you need an OS like(macOS),(Windows), or (Linux). You  Can use mid-range Pc Or laptop for web development.

    • Text-editor/IDE:- If you start programming you should need something for writing your code and process it. So, some Text editors are VScode, Subline Text editor, Atom, or Notepad++. Nowadays VScode is much popular and very easy to use the tool I recommended you VScode.

    • Web Browser:-Most developer recommended Chrome or Firefox. Chrome is faster it runs on a V8 engine (Javascript engine). Firefox also comes with some good stuff that chrome does not have. Both the browser have fantastic dev-tools to troubleshoot the problem in web development.

    • Terminal:-You will be working a lot with CLI using some system commands. You can use the default or third-party terminal for your web development project. Bash, Zsh, Powershell, Git Bash, iTerm, Hyper these all are options available to use.

    Start with basic.

    At the beginning of web development, you have to learn the basics.
    The basics you have to learn first.Html and CSS are the building blocks of the web development on every web page you see on the internet are made up of HTML and CSS.
    Let me explain this in a simple way HTML is used to structure the web page and CSS is used to design and make beautiful the page and JavaScript is used make web page dynamic as same as a human body our bones structure the body Muscles and skin make us beautiful and Brain and heart make us dynamic let me explain these things in books way. 
    • HTML:- Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets and scripting languages such as JavaScript. 

    • CSS:- Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript. 

    • JavaScript:- JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions




     Learn Responsive Layout.

    when you learn the basics after that learn Responsive layout design.Because when you make your Application it should visible and useable to all kinds of devices such as smartphones, tablets, Television, laptops, Desktop, or any kind of display. So, it's important to learn Responsive Layout Design. Some important topics you have to learn are.

    • Learn how to set Viewport.
    • Learn Media Queries for Different Screen Size.
    • Fluid Width.
    • Rem units
    • Mobile-First Design.



    CSS FrameWorks.

    Learning CSS Frame helps to Develop any Application Fast and using Less line of codes. Some Popular CSS frameworks are Bootstrap, Bulma, Tailwind, And Materilize. These are the most used famous frameworks and easy to learn.


     Vanilla JavaScript.

    After Learning HTML and CSS the next thing is to learn Vanilla Javascript. It is very important for Developers to have good command on the basics of the Javascript.
    Because you after learning web you are going to work with the server-side. That's why you have to learn with PHP, python, node js, etc. Some of the important topics you have to learn are:-

    • JavaScript fundamentals(variables, data types, functions, conditionals, etc).

    • DOM(Document object model).

    • JSON(Javascript Object Notation).

    • Fetch API(Request/Response/Ajax).

    • Modern JS(ES6).



     Important Tools.

    There are some tools that will be using in web development. These tools help you in debugging and boosting your productivity, managing your code, Collaborate with other developers and Many others Stuffs like that. Let's see some stuff.


    • Git(Version Control)&Github is the most useful and popular tool that helps you to collaborate with other developers managing your codes.

    • Learn how to use Dev Tools. Whether it's Chrome Or Firefox You have to know how to use Dev-tools like using the Javascript Console tab, Element Tab Network Tab for request, and response.

    • Most of The IDE or text editor has the ability to add the extension or Plugins that's help a lot in increasing productivity and boosting your web app. Let me give you an example of a Text Editor is VSCode is the best example for this because you can download extension like live server, live sass compiler that a golden gift for the developer.

    • Emmet is another and most used tool These tools allow you to write HTML CSS very fast and that will help in increasing productivity and saving time.

    • Learn to use JavaScript Package Managers Like Npm or Yarn. These Package manager Using a lot if you are working with javaScript Frameworks and library such as react for another language (Python or PHP) you use other packages managers.




    Web Deployment.


    At this point, once you know what tools or technology you should learn for web development, you need to know how to deploy your website on the internet. If you are building some tiny applications, landing pages, or personal sites for small businesses there is no need to learn AWS or DevOps just because it is shiny and trendy. You will be complicating things more instead of making it simple. There are some tools and steps for deployment that you should learn in 2020.
    • Domain Registration(Godaddy, Namecheap, Google Domains, etc.).

    • Managed Hosting(HostGator, Inmotion, BlueHost, etc.).

    • Static Hosting(Netlify, Github pages).

    • SSL Certificate.

    • FTP, SFTP(File Transfer protocol)Good for small application.

    • SSH(Secure shell)for advanced Application.

    • CLI(Command-line interface) & Git.

     Free Resource To Learn Web Development.

    These are the Free and best resources for learning Programming. Hope It Helps you.




    All the above technology, tools are good enough to make you a frontend. 


    Thanks for Reading The Blog.😊

    Author