I admit it can be intimidating to want to learn web development and to attempt to do so. Due to the overload of information the internet provides, many people never even give it a try because of the information overload. If you're not sure where to start, you're in the right place.

In this article, I want to explain to you how to learn and understand web development.

Together, we will take one step at a time.

What is Web Development

Web development is basically the creation of website pages — either a single page or many pages. There are several aspects to it, including web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites.

The word Web Development is made up of two words, that is:

Web: It refers to websites, web pages, or anything that works over the internet.

Development: Building the application from scratch.

How do Websites Exactly Work??

When you type a web address into your browser:

• The browser uses the DNS server to find the real address of the server that the website lives on

• Browsers send HTTP requests to servers asking them to send a copy of the website to clients as requested. TCP/IP is used to send this message and all other data between your computer and the server.

• If the server approves the client's request, the server sends the client a "200 OK" message, meaning "Sure, you can look at that website. Here it is", and then begins sending the website's files to the browser as small chunks called data packets.

• The browser assembles the small chunks into a complete web page to display

What is Front End And Back End

Front End:

The front end of a website is the part that users interact directly with. It is also known as the 'client side' of the application. It includes everything that Users experience directly: text colors and styles, images, graphs and tables, buttons, colors, and navigation menu. Front-end development is done using HTML, CSS, and JavaScript. Whenever a website, web application, or mobile app is opened, front end developers implement the structure, design, behavior, and content on the browser screen. Among the main goals of the Front End are responsiveness and performance. There should be no part of the website that behaves abnormally irrespective of the screen size, the developer must ensure that the site is responsive, i.e. that it appears correctly on devices of all sizes.

Back End:

The backend of a website is server-side. The server stores and organizes data, and ensures there is no problem on the client end of the web page. It is the part of the website that can not be seen or interacted with. It is the part of the software that does not have direct contact with users. Backend designers develop software components and characteristics that end users can access indirectly through a front-end application. Besides creating APIs, establishing libraries, and working with systems without user interfaces, the backend also includes scientific programming systems.

Start by Learning the Basics- HTML, CSS and JavaScript

Three basic components make every website. Those are: HTML, CSS, and JavaScript.

HTML:

Hypertext Markup Language (HTML) is a computer language that makes up most web pages and online applications. A hypertext is a text that is used to reference other pieces of text, while a markup language is a series of markings that tells web servers the style and structure of a document.

HTML is not considered a programming language as it can’t create dynamic functionality. Instead, with HTML, web users can create and structure sections, paragraphs, and links using elements, tags, and attributes.

CSS:

CSS stands for Cascading Style Sheets. It is a style sheet language that is used to describe the look and formatting of a document written in a markup language. It provides an additional feature to HTML. It is generally used with HTML to change the style of web pages and user interfaces. It can also be used with any kind of XML documents including plain XML, SVG, and XUL.

CSS is used along with HTML and JavaScript in most websites to create user interfaces for web applications and user interfaces for many mobile applications.

JavaScript:

JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies, two of which (HTML and CSS) we have covered in much more detail in other parts of the Learning Area.

Code editor:

You will need a program called a code editor on your computer to work with the three types of files mentioned above.

The type of coder editor you need depends on the type of code you want to write. The different types of code editors available are

i) Visual Studio Code:

Visual Studio Code is an open-source code editor developed by Microsoft. This is probably the closest thing we have to an IDE of all the code editors in our list. The program is very robust - but it takes a while to launch. While using it, VS Code is not only quick, but it can also handle quite a few interesting tasks, such as quick Git commits or opening and sorting through multiple folders.

ii) Sublime Text 3:

Sublime Text revolutionized the way code editors work. When you click the button, it doesn't take much time for your file to be ready for editing. The responsiveness of this code editor makes it the best in its class overall. Opening a file and making a quick edit may not seem like much of a hassle, but the delay can quickly become frustrating.

iii) Codespaces:

Github's owner, Microsoft, said it wants the cloud to be the centerpiece of its 2020s vision, and here's an example. Codespaces, a browser-based code editor based on Visual Studio Code, was released in May 2020. There is support for Git repositories, extensions, and a built-in command-line interface so you can edit, run, and debug  your applications from any device. It's obvious that this allows you to work from anywhere and makes collaboration with other developers easier.

iv) Atom:

Atom is an open-source code editor from GitHub. The editor was heavily influenced by Sublime Text in its initial development but has several major differences. Atom is free and open-source, and it integrates seamlessly with Git and GitHub out of the box. Atom has historically had performance and stability issues, but these have diminished as it has matured. While it does launch more slowly than some code editors, it's just as reliable and fast once it's running.

Frameworks to infinity and beyond

After you know everything, you must realize that to build a website, you will need to work with frameworks.

Frameworks are heavily used in real-world web development. Frameworks are more like add-ons to existing languages than they are new languages themselves. Frameworks change the rules and syntax of a language a little bit, but they save us a lot of time and effort in developing web development code

To use a framework, you will have to install it on your own website files. After that, you can then add commands on those structures to create the website according to your needs.

For Example: A CSS framework such as Bootstrap, for example, requires us to write CSS using slightly different rules than regular (vanilla) CSS. This will also limit the amount of customization we can do with CSSWhile Bootstrap has drawbacks, we often overlook them because we can create mobile-friendly pages faster and with less effort with it

So, that was all about the basics of web development.

Conclusion:

Before you leave, there are some things you should keep in mind.

• Please do not get overwhelmed. In beginning, you will not understand everything that is okay

• Take notes on syntax, theory concept, and everything

• Try to solve the bug by yourself

• Do not try to learn everything at once. In the end, you'll be back at square one. Trust me, that's not what you want.

• Keep your patience and don't jump from one video tutorial after another. I encourage you to skim through a few, but please choose only one to learn from.

From my end, that's all I have to say.

Oh! Last but not least:

I wish you the best of luck!

You can now extend your support by buying me a Coffee.😊👇

If you want to contact me you can do it here:

Thanks for Reading 😊