Nagaraj Pandith • Sep 4, 2021
views | 12 min read | 2271 words

Starting Web Development the right way in 2021

In the past few years, Web Development has become a hot topic among developers and numerous coders are eventually getting into it. This resulted in enormous amount of online resources, roadmaps, video guides and a lot more which are hard to digest all at once. Moreover, the technology present yesterday is getting obselete today, which makes it hard to stick to a Tech stack while getting started. So, In this article you’ll get

  • A clear Roadmap to get started with Front-end Web development.
  • A clarity of what exactly different Technologies do with a simple analogy.

What Exactly is Web Development?

It’s not really possible to give an exact definition to this term, but you can definitely visualise it as creating, building, testing and maintaining Web Applications/Websites. Mainly, it has two divisions - Frontend and Backend Development. I don’t want to bombard you with a lot of technical terms, So let’s understand everything with a simple real-world analogy.

Frontend Web Development

Food vector created by upklyak Food vector created by upklyak — www.freepik.com

Imagine the Website as a Restaurant, where Tables and seats are like the Frontend and Kitchen is the Backend server. When you visit a Restaurant, you obviously get to see the Tables, Seats and whatever is presented to you there. This is exactly the Frontend part of a website, it is simply what the user can see on a Website. Now, What’s Frontend built with?

HTML, CSS and Javascript are the very Foundations of almost all of the websites present on the web. Restaurant tables are like an User Interface where you can Interact with the Restaurant, and the Food Menu is like the Website content built with HTML & CSS. The Waiter is like the Javascript who adds an Interactivity between you and the Backend Kitchen and makes the whole restaurant Dynamic. You might be thinking, why 3 languages and not only one? Here’s the famous Animal Metaphor for it, HTML is like the skeleton needed for a proper structure and CSS is like the skin which makes the overall appearance beautiful and Javascript is like the Muscles which makes it Dynamic. Here’s a tweet to lighten your mood 😺 Tweet from @EmmaBostian Tweet from @EmmaBostian

Introduction to Frameworks

If you’ve read an Article on Web development in the past, I’m sure you’ve heard the terms Frameworks and Libraries. Nowadays, these have become an essential part of any Modern Website but doesn’t mean you can’t develop a website without Frameworks and Libraries. Let’s understand it this way, the Framework is like a toolbox containing Pre-written skeletons which you can use to extend the functionality of your website. While you’re developing a Website you may see some functionalities getting reused and you’ve to write the code all over again. That’s where Frameworks make our journey smooth with pre-written codes. Note that is a very dilute definition just to understand it easily.

While most of us use Library and Framework words interchangeably, they’re different from each other. A framework tends to have more Rules compared to that of a library and you have the power to call a Library in your code but in case of Frameworks, you have to call your code inside the framework. I know it might be overwhelming for now, but let’s just simply understand them as a pre-defined set of tools to enhance our website.

Backend Web Development

Background vector created by katemangostar Background vector created by katemangostar — www.freepik.com

Now, you’re clear with what exactly is the Frontend part but once you order your food from the waiter, where does the prepared dish actually come from? Here comes the Backend part of our website. Once the user places a request in Frontend side, the request is sent to the Backend server to process. It is more like the Behind the scenes of any hard worked project, it deals with configuring servers and databases to power the site and is more of a logical side of the Website. Web development on itself is a very vast topic, so in this article, we’ll not dive deep into the Backend part and we’ll only focus on the Frontend Web development.

What exactly happens when a Website loads?

If you’re an all time Web Surfer like me, you’d be visiting 100+ websites a day. You click a link and the website loads from nowhere, Oh! that’s it? When you open a website, your Browser (most likely Google Chrome) makes a request to the Server where the Website code is present. Your browser then downloads the code from the server and builds the page. Voila! You see the page now.

Roadmap to Frontend Web Development in 2021

  1. Internet Fundamentals: Nobody would like a ‘Web’ Developer without the knowledge of ‘Web’, right? Start your journey by learning How Internet works, What is HTTP and HTTPS, What is DNS, What is an IP Address etc.

2. HTML & CSS: Image from https://wallpapercave.com Image from https://wallpapercave.com/

As mentioned earlier, these are the building blocks of any Website. So, start your journey learning HTML Syntax, Forms, Tables, Modern HTML tags etc. Once you get well acquainted with writing a basic HTML code, jump to learning CSS Basics, Selectors, Box model, Grid, Flexbox, Responsive Design and a lot more stuff. You can practice your frontend skills on online code editors like codepen.io making mini projects using HTML and CSS.

Pro Tip: Never chase perfection thinking that you’ve to complete 100% of anything. In that way, you’ll find yourself stuck with 10 more courses and hours of Tutorial hell. Trust me with this, avoiding advanced concepts at the beginning will save a lot of time in your journey. Learning about 80% of HTML and 60–70% of CSS in the beginning is fine. You’ll learn more while building projects.

3. Javascript: Image from https://wallpapercave.com Image from https://wallpapercave.com/

Never mistake HTML & CSS to ‘Programming’ Language as you never program anything there. HTML is simply a Scripting language and CSS is a style sheet language. Whereas, Javascript is a Programming language which runs on Browser. Eventhough, Javascript is very vast and not a cakewalk like HTML/CSS, learning it by Building projects along the way will help you learn faster. Start by learning Javascript essentials, Arrays, Object literals, Loops, Functions etc. Once you have your basic JS foundations laid, slowly move to the world of DOM, new JS features, Async & Await promises and a lot more things. Remember to not chase the 100% learning curve as JS is very vast and even learning 50% of it would mean a lot.

Additional: As mentioned earlier, Frameworks make our work easier. So, you can also spend some time learning a CSS framework. Currently, Bootstrap and Tailwind CSS are industry leading CSS frameworks, you can start your journey with either of them. You can also learn a preprocessor for CSS like PostCSS, Sass which makes writing CSS code easier than ever. I personally suggest learning Sass where you don’t have to use brackets, semicolons etc. It also extends CSS functions like nested rules, mixins, selector inheritance and a lot more.

4. Chrome DevTools: Image from https://bit.ly/3jHLhty Image from https://bit.ly/3jHLhty

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. Why should you learn it? Well, by learning this you’d get a very clear idea on debugging your programs and it’ll be very helpful in future when you get stuck with errors. Start by some Crash Course on Chrome Devtools and get used to Elements, Console and other tabs.

If you’re okay with Investing money into learning skills, I personally suggest Brad Traversy & Florin Pop’s 50 Projects in 50 Days Udemy course. It’ll help you brush up your frontend dev skills: https://bit.ly/3jFloe2

5. Git & Github: Image from https://bit.ly/3kTDAzV Image from https://bit.ly/3kTDAzV

Now, you’re strong enough to build your own projects but how would you show it to the world? How would you collaborate with your Developer friends? Welcome to the world of Git and Github. Git is a version control system, which means it allows you to track modifications of your code. In this way, it’ll be very easy to collaborate with your fellow developers and track different versions of the project. Also, it can help you to push your code to Github where you can show your code to the world. Never use these two terms interchangeably, as they’re different from each. Git is a version control system and Github is a free code hosting platform. Start by learning very basic git commands like git commit, git revert, git push, git merge and others. Learn how to deploy your website live using free services like Github pages, netlify, vercel etc. You’ll eventually learn more once you start using it.

Additional: By now, you might have come across some package managers like NPM & Yarn while deploying your website live on the internet. These are package managers for node, but also used in the frontend. Start by learning what is JSON, how dependencies are managed, what are log files, how to install packages, how to remove packages, etc. These will be helpful once you start learning a JS framework.

6. Javascript Framework: Image from https://bit.ly/3n47owu Image from https://bit.ly/3n47owu

It’s time to make your website more feature-rich and sophisticated. JS Framework make processes of handling states, re-rendering and many other things easier. By now, you’d have understood how useful using a framework can be, so it’s time to learn one! There are many out there React, Svelte, Vue, Angular and others. But, based on the current trend I personally suggest learning react.js. Remember that React is a library and not a framework, but learning it along with some other tools would make your frontend tech stack very powerful. Start by learning React fundamentals, Router, Webpack, Server Renders, Redux and others. Also add some tools to your bucket by learning React Query which is now a standard for network requests and learn a UI library like Material UI or Tailwind CSS.

7. Next.js: Image from https://bit.ly/3kSlkXB Image from https://bit.ly/3kSlkXB

Once you’re comfortable with creating websites with React and it’s ecosystem, you must consider moving to Next.js. What exactly is Next.js and why is it even required? Next.js is a React framework which means it’s just React but with a lot more functionalities like Server Side Rendering and SEO which is missing in React. Let’s understand it with the Restaurant analogy again, imagine the cook in the kitchen collects all the ingredients and gives it to the clients on the table to make the dish. This is client side rendering using React. Whereas, wouldn’t it be good if the cook himself prepared the dish in the backend and then serve it to the clients on the table? Yes, this is exactly what Server side rendering is. For this, just focus on learning the frontend part ignoring the backend part to save some time and also it’s very convenient to use Next as only a frontend layer and use some other standalone API system for backend.

Congrats! You’re now a Proficient and Job-ready Frontend web developer with the Modern tech stack in your hands. Now you have two paths, either continue more on the frontend to make beautiful User interfaces and create engaging user experience designs, which is the UI/UX designer path or start learning Backend Web development which is the path to becoming a Full stack Web developer!

We’ll explore backend Web development & DevOps in future articles with our Restaurant analogies, Cheers.

Discussion

Hello! Please Sign in to comment.

No comments yet. Be the first to comment.

Back to BlogRead Next