The internet is of no use without the websites. The main aim of this article is to get you started with Web Development so that you can start creating cool websites. Let's start.

INTRO

Web Development is creating and building new websites in addition to managing or improving the existing ones. It is creating an application that works over the internet.

A website is divided into two parts.

• FRONT-END - Front end is the part of the website that users interact with, which is also known as the client-side.

• BACK-END- Back end is the server-side of the website which users can't see and interact with.

So based on this classification, there are three types of web developers:

1. FRONT-END DEVELOPER - This developer specializes in the front end.

2. BACK-END DEVELOPER - This developer specializes in the back end.

3. FULLSTACK DEVELOPER - This developer specializes in both front-end and back-end.

Now let's dive into the real stuff.

FRONT-END DEVELOPMENT

As we have already seen the definition, a front-end developer deals with the client-side of the website. Everything you see on a website is developed by a front-end developer. The front-end developer is responsible for the design and visuals of the website.

Front-end developers mainly work with three technologies:

1. HTML
2. CSS
3. JAVASCRIPT

HTML

HTML stands for Hyper Text Markup Language, and it essentially forms the skeleton of a website. It defines the meaning and content of a website, like text, images, buttons. HTML gives the structure to a website.

HTML is a very easy language and can be learnt .

Here are some resources to learn HTML:

W3 Schools is one of the best places to get started with your HTML

Free Code Camp is the go-to place if you prefer video content.

HTML is pretty basic but very important. Let's jump on to the next one.

CSS

CSS stands for Cascading Style Sheets, and it is used to style the website. You form the structure and give content to the website using HTML. You style the website or you decide how the website is to be presented using CSS.

CSS is the reason why every website looks different because every developer decided to style every website differently. This gives CSS a lot of power as it is wholly responsible for the visual of a website.

CSS is also easy to learn.

Here are some resources to learn CSS:

Again, W3 schools has done a great job in teaching CSS.

This tutorial by Free Code Camp is also very good for learning CSS.

Keep in mind that one can only get good at CSS by experimenting and tinkering.

After getting familiar with CSS, it is time to learn BOOTSTRAP and TAILWIND. Let's know more about them.

BOOTSTRAP AND TAILWIND

Bootstrap is a front-end toolkit that makes life easier for a front-end developer. It has all these templates of the objects that a website usually contains. It reduces the workload. Copy-paste the code from the docs of Bootstrap, and the website is ready.

While Bootstrap gives components of content to be displayed on the webpage, Tailwind is a CSS-specific framework that helps in styling the page by just changing the class names.

There's a huge debate about whether to use Tailwind or Bootstrap, it boils down to the usage, Bootstrap's utility and layout classes provide you with everything you need to style a responsive webpage. With Tailwind, however, you are much more involved in styling the webpage because you end up having to create your own components using the utility classes that the framework offers.

Below are links to learn Bootstrap and Tailwind:

• Documentation - Bootstrap , Tailwind

• Video Lectures - Bootstrap , Tailwind

Now, let's move on to JAVASCRIPT, the final technology of Front-End Development.

JAVASCRIPT

JavaScript, abbreviated as JS, is one of the most popular programming languages in the world. 98% of all the web pages in the world use JS on the client-side of the website. JS is used to add functionality to a website and hence making it a very important technology. It makes the website interactive.

JavaScript is a very vast and multi-domain language. Moreover, it is very easy to learn.

Some resources to learn JS:

You can learn basic JS from W3 Schools.

After you are done with the basics, I recommend this hands-on challenge tutorial by Free Code Camp where you can increase your knowledge of JS by solving challenges along with the tutor.

Now, it's time to dive into JS FRAMEWORKS.

FRAMEWORKS

First of all, let's define what a framework is. A framework is a structure that you can build software on. This means that you're not starting from scratch. It helps us in making applications faster and more efficient. There are many JS front-end frameworks, so explaining all of them will result in another article.

So, read this article by Hardik Shah to get familiar with all relevant frameworks of JS in 2022.

Although there's a huge debate as to which framework is the best and which to use, I believe that every framework has its own specific use-case, and choosing the correct framework is the most important thing one should focus on. Now depending on what your use-case is, you should learn the most suitable framework. The best way to learn these frameworks is to create projects, and the best place to learn them is the official documentation of the frameworks. There are also many great tutorials of all the frameworks available for free on Youtube.

So, this wraps up almost everything about Front-End Development. Remember, the best way to learn is by doing and implementing all that you have learned.

I will also be publishing a similar article next week on BACK-END DEVELOPMENT. So be sure to follow me for more updates.

Here is my link tree. Feel free to check out my socials.

Feedback and suggestions are welcome.

Peace 🕊️. Until Next Time.