Web Development - Roadmap for beginners.

I have been mentoring my colleagues for quite some time. I have helped a few with picking up Javascript and a few with React JS. These people had a background in how computers work and what is web development. So it was easy for me to explain the content to them. A few days back someone with no computer background reached out to me seeking web development training. I cannot randomly begin a topic for this person, so I decided to create a roadmap that we could follow and share it here so that it could be helpful to you too. Let me begin with what web development refers to. Developing any web application from simple landing page websites to complex ones like social networking sites and net banking for banks etc is referred to as web development. We can run these applications if we have a device with internet and a browser. To develop a web application, we need an editor like Visual Studio Code(my favorite) and a web browser(Chrome, Edge, etc).

As you are a beginner, I recommend you start with a simple static website using HTML and CSS. Instead of picking up a course for this, I recommend starting with a simple project. You can check tags on the go, whenever you need. No one remembers all the tags from the first day. As you use the tags multiple times, you would be able to remember. Repetition means practice is the key, as they say in kindergarten. Let us begin with a small project, say we would like to create a website about you, displaying your skills, your personal information(general), and your photograph. Divide the screen into three rows - header, content, and footer. Let the content section split into two columns - one for your picture and another to display your information. Don't stop here, continue to explore with different HTML tags.

You could master CSS in the long run with practice, as CSS is vast. We can achieve 2D animations and much more using CSS. And there are many frameworks around CSS and plenty of libraries that could be used to achieve great effects on your websites and applications. There are many resources that you can refer to for CSS-related content, which I will share in another thread.

Coming back to web development. If you have created a static site with an index.html and styles.css file that is being marked in the index.html file, you are good to launch it in a browser. Check a site that I made for my client here.

Moving on from creating beyond landing pages to web applications that have some functionalities beyond scrolling, say submitting a registration form for admission into an online course or making a payment on an e-commerce site etc, we would need to know a programming language that can communicate between our instructions to browser and backend. Say we hit a button to submit a form from the browser, it first reads all information that the user entered and then sends it to the backend through an HTTP/HTTPS API (Application Programming Interface). The focus of this blog is the front end, you can use JSON files to serve the API service purpose. We can use a serverless, firebase kind of backend as well for achieving the CRUD operations from our application. However, we need to understand a programming language in and out before we proceed to build an application. Unlike starting off with a project for learning a programming language, I suggest you to refer javascript.info. Pick up a topic from here, read and then research the same from other sources. This site - javascript.info is divided into three sections, Part1, Part2, and Part3. Once you complete part1, you are good to begin a project. However, I strongly recommend you to complete Part2 as well, to understand the Browser and DOM.

Let me sum it up for you:

  1. Start with freecodecamp.org to learn html and css for daily exercises.
  2. Create a landing page for yourself, displaying your profile (say a digital resume).
  3. Get started with javascript from javascript.info . Pick up each topic and research. Practice over a web browser console by experimenting with each js feature.
  4. Create some projects such as an e-commerce website that sells your skills (as in maybe courses of various skills you possess).

This would take about 4weeks to 24weeks of time to master and land a job. On that note, the only key to achieving that is to be persistent and consistent in learning every day. You could take up a 100 days of code challenges in order to be persistent.

I hope the article was helpful. Thanks for reading so far. Happy learning!!