Step-by-Step Guide To Web Development In 2022

Hey people,

New year, new beginnings, and new tech which can be of good use for your web developer career. As a developer, you will not have a peaceful sleep when you hear of new technology that just takes all the social media platforms like a firestorm especially in the "bird" social media platform 😂. When I say "firestorm" I mean it (consider the spread of the dangerous Amazon Fire which happened last year).

But, I will tell you one thing, you don't have to know all the new technology that becomes a cause for heated discussion in the tech world. Instead, you just have to stick to your main niche which you have been practicing for some months or years, which brings me to the main topic of today's blog.

So, if you are a beginner who wants to get into web development like others to enjoy the essence of creating something new and unique which provides you with a fair amount of fortune, or a seasoned developer who's here to check for the new techs who might be useful for your armory of skills or to have a revamp your web developer career this blog is for you.

Please bear in mind that this will be a big blog and each step is simplified to ground level or as much as I could

Let's get started...

WHAT IS A WEBSITE?

A website is a page that can be accessed by the user when he sends requests to the browser and the browser, in turn, sends the data of the page that the user accesses and fulfills his purpose of visit. In other words or in a more technical way.

A website is a collection of many web pages, and web pages are digital files that are written using HTML(HyperText Markup Language) and are styled using CSS (Cascading Style Sheets).

Developing a website is very easy but, don't think it's a piece of cake to develop. It requires a lot of hard work and determination to develop a good-looking website like Facebook, Netflix, Hulu, etc. You have to be creative in your design skills so that it can attract more users to your site and also it should be user-friendly.

Now that we know what is a website let's see how we can build one. PS: We won't be building a website here instead we will see what technologies are used to build one.

TECHNOLOGIES AND LANGUAGES

Now, let's look at the languages/technologies/framework you have to learn to get into web development.

TYPES OF WEB DEVELOPERS:-

Before you start learning about web development, you need to decide what type of web developer you want to become. There are 3 types of web developers:

1. Front-end developer:- Front-end developer works on the client-side/browser and creates UIs (User Interfaces). In other words, they create the look of a website. They usually create it using HTML, CSS, JS (JavaScript), DOM, etc.
2. Back-end Developer:- Back-end developer works on the server-side and deals with databases or you can say they work on the logic behind the working of a website in the back-end. They use languages like JS, Python, PHP, etc., and databases like Postgres, MongoDB. They also work on the deployment and server configuration of your website.
3. Full-stack Developer:- Like the name suggests they work on both frontend and backend. And they work with the combination of these tools mentioned above.

Now that we know the types of web developers let's jump into the necessary tools to start learning and creating websites.

NECESSARY TOOLS:-

So, let's look at the tools which are necessary for developing a website

• Computer & OS:- You need a computer with an OS and it doesn't really matter which OS you want or which OS. They all have the same objectives but, different features. So, if you are just starting I would recommend you to go for a windows based system but, again it's up to you to take whatever OS you want to take. It's up to you.

• Web Browser:- Again you need a browser to display the website you are building and to see the output of what you have coded. You can use any browser there's strictly no restrictions because every browser almost have some functionality and feature and all are equally fast. You can use anything like Chrome(which I use as a primary browser), you can also use brave(I found it popular and it's good for learning it has a lot of tools for devs), Firefox, Edge, Safari for macOS.

• Text Editor/IDE:- Again you can use any text editor you want it's up to you to decide but, I would recommend going VSCode if you are a beginner in a development environment and the reason is pretty simple it's light, fast, it also has many features like you can install a plugin for literally everything, you can install extensions for any language you want and it also has a feature called emmet which gives you a hint of what can come next. -Terminal:- You also might need a terminal to execute and to install a few additional requirements for whatever stacks you choose. Working with the terminal is a must as it saves a loottt of time in development. Again you can use anything Windows Command Prompt or git bash, Powershell, etc. It's up to you to decide.

  
  

• -Design Software:- These are mostly for Front-end developers but, if you want to have a prototype of how your website will look after you have implemented your design learning these tools can be very much effective. There are a lot of tools like Figma which is very popular nowadays, Adobe XD and Sketch.

Now that we have looked into the tools required to start learning or for development let's jump straight into the technologies available.

FRONT-END DEVELOPERS

BUILDING BLOCKS:-

HTML and CSS

HTML and CSS are literally the building blocks of web development. Consider web development or any development as building your house. You develop a design prototype(House Plan) for your house and then lay the foundation and those foundations are your !Doctype statement and all the meta tags statements. After the foundation, you start making the pillars and walls and those pillars and walls are your HTML which is just a skeleton of your house/website and then you add colors and position the design, windows, and all those things are called CSS i.e styling the HTML skeleton of your website.

Of course, you will learn frameworks for your development but, HTML & CSS are always going to be your building blocks of a website. Not a single website is available that can run without HTML and CSS.

So, what do you need to learn in HTML and CSS?

1. HTML5 Basic & Semantic Tags(Page Layout)

2. CSS Fundamentals

3. CSS Alignment (Flexbox and CSS grid)

4. Media Queries/Responsive Design

5. Simple Animations/Transitions

   
   

Once you have finished learning HTML and CSS then you can learn these two tools which specify below. Again it's not compulsory, it's optional if you want to have an extra bit of skillset to ease your styling process then you can consider these tools:

• SASS:- Sass is a CSS pre-processor that adds the functionality of CSS. It also offers variables, functions, nesting, etc. It's a CSS compiler that offers you code reusability which you can't find in normal CSS. -PostCSS:- It's a tool for transforming CSS with JS. There are a lot of plugins in VSCode to add stuff to SASS offers.

  
  

Once you are done with HTML & CSS and you got a fair bit of knowledge to develop a clone of Hulu or Netflix landing page then you can go ahead and learn anyone of the CSS frameworks. So, CSS frameworks give you predefined classes/components to style elements. They can speed up your development process of creating the layouts. Here are some of the CSS frameworks from where you can choose one:

• BootStrap - Highly Popular CSS Framework and is beginner-friendly. High-Level Framework has a lot of pre-defined component classes.
• Tailwind CSS - Low-level utility-based framework and it's light-weighted compared to BootStrap.
• Materialize - Based on material Design
• Bulma - Not much popular CSS Framework but, they are the mobile-first and modular framework which means they are for the mobile/tablet design first projects/development
• Foundation - Advanced CSS framework with more features than BootStrap and Tailwind.

So, here are a few popular CSS frameworks from which you can learn anyone, you can also learn more if you want to but, the decision is up to you to learn all of them or one of them. Personally, I feel learning BootStrap or Tailwind is good enough to make a great layout.

Now till this point, you should have grasped the creative/design thinking if you are a front-end developer and must know some basic principles like Colour and Contrast, Whitespace, Scale, Visual Hierarchy, Typography, etc.

Now, that we know how to create a webpage using HTML and we can style them using CSS it's time, to give the webpage a life and JS does that job for us easily.

JavaScript(JS)

JS is a browser language and every web developer should know some level of JavaScript. Web developers need to know javascript because no website is fully complete without JavaScript. So, you must know the concepts like:

• JS Basics:- Data Types, Data Structures, functions, loops

• DOM:- Document Object Model which is used to target HTML id or class using inbuilt functions

• Async JS:- Promises, Async/Wait is a must

• Fetch API & HTTP:- Make requests to API's & understand HTTP

• Array Methods:- Map, Filter, Reduce, etc.

  
  

Now that you know HTML, CSS and JS it's time to learn and see some version control tools which are highly popular and are great tools to keep your source code files securely in the cloud.

1. Git: Git is a popular version control system and it is used with remote repositories such as GitHub, GitLab, and BitBucket.

2. NPM: NPM is a package for JS which is used to install packages into your project.

   
   

NPM requires Node.js to be installed.

3. Browser Dev tools: They are important for every developer as they provide solutions to some logical errors done by developers during designing.

4. Emmet in VSCode, Live Server, Prettier, ESLint, GitHub Copilot, etc.

   
   

Now that you know what it takes to be a front-end developer let's see what a front-end developer must be able to do by now:

• Create website layout using HTML/CSS
• Understand some basic design principles
• Know JS and how to work with DOM
• Create basic interactive front-end applications
• Connect to APIs
• Work with GIT or any other version control systems

There are technologies by which your front-end development can be made easier. Sounds great ain't it? So, why waste time looking around let's jump into some front-end frameworks which are gaining constant popularity in the tech world!

FRONT-END FRAMEWORKS

The front-end JS frameworks can be used for Single Page Applications (SPAs). Some of thee popular front-end frameworks are:

• React:- Front-end framework created and maintained by Facebook. It's the Most popular Framework of JS.
• Vue:- Second most popular JS framework, next to React which has great community support.
• Angular:- It's a JS framework that is created and maintained by Google. Popular for enterprise projects.

So, these are the technologies that are very useful for Front-end developers. Now, let's look at some of the Back-end technologies.

BACK-END DEVELOPERS:-

Back-end developers use languages called Server Side Language which runs on the server-side and takes care of all the server-side logic and website securities. Let's look at some of the server-side languages/technologies:

• Node.js:- A JS framework for backend development typically used in MERN and MEAN stack development.
• Python:- Python is a great framework for web development having been used and making my career in python's backend framework Django is a pretty awesome experience which only a Pythonista can experience. It's fast, secure, and has a lot of in-built functionality which is the main advantage of any python framework.
• PHP:- You can use frameworks like Laravel.
• C# is widely used for game development but, it's also good for web development also.

There are other server-side languages like Java, Ruby, Golang, Rust, Scala, Kotlin, etc. which aren't much popular in Web development fields.

BACK-END FRAMEWORKS

There are a lot of server-side frameworks out of which I'm gonna point out a few popular ones.

• For JS, we have Express.js, Nest.js, Node.js, Koa, Fastify, etc.
• For Python, we have Django, Flask, FastAPI(used to create APIs and is really fast as the name suggests)
• For PHP we have Laravel, Symphony, etc.
• For ruby, we have Ruby on Rails which is a highly popular framework when it comes to developing some highly complex and advanced websites.

So, these are a few popular frameworks which you can learn after learning your main Server-Side Language.

Note: You just have to learn one language for the Server-Side. It's not mandatory that you learn all of them present out there. Just learn one get used to it if you feel you have to learn some more then you can choose another language and any one framework from that language.

DATABASES

Backend and full-stack developers work with various database tools and they implement all the logic for database querying and maintenance. So, it's important to learn Database Management if you want to become a back-end or a full-stack developer. Here are a few database technologies which are popular and highly used in web development

• PostgreSQL
• MongoDB
• MySQL
• MS SQL Server
• Firebase
• SQLite
• Supabase (recently took the industry by storm)

We have looked at the things which are pretty necessary to become a backend developer or a full stack developer. Here are the things which you must be able to if you are a backend or a full-stack developer:

• Comfortable with Server Side scripting

• Know how to set up and manage a database

• Know how to create authentication

• Know how to work with the servers

  
  

A full-stack developer can do this as well as frontend tasks.

CONCLUSION

So, here is the list of tools and technologies which you must learn to become a frontend or backend or a full-stack web developer. I hope you enjoyed reading it and I know it's a long blog which is like some 10 minutes odd read, if you have read it till the end it's well and good and I hope this blog helps you in becoming a successful web developer. Do give me a follow on hashnode for more blogs on web development and we will also build some cool stuff using the tools I mentioned above. Also do follow my social media account link for the same can be found on my profile or is given at the end of the blog. Thank you once again for reading and happy coding!