Your Unusual Web Development Journey

Think of gaining admission into University without knowing what courses are offered. That really is awkward.

This article introduces you to tools used in developing a website, and different categories and languages to explore in Website Development.

Web Development is basically the building and maintenance of websites. It is the work that happens behind the scenes that make web pages look great and have beautiful features.

For Web pages to display on the web, there must be a connection of different files. Web pages are written in HTML (Hypertext Markup Language). These files can be read and interpreted by browsers such as Chrome or Firefox.

You may wonder how the internet provides this information. All websites are just a bunch of files that are stored on a computer called a server just like you store your clothes in a box. This server is connected to the internet where it can be loaded in a browser e.g. Chrome or Safari or Firefox, etc.

Your browser is also called a client. So anytime you are on the internet, you (client browser e.g. Chrome) are loading data from the server and also submitting data back into the server. This back-and-forth process between the client and server is the basics of the internet.

Whilst having different web browsers, Chrome is the most recommended web browser that interprets Markup languages to be displayed on the web HTML.

Web Development is categorized into three. Frontend Web Development and Backend Web Development and Full stack Web Development.

The term frontend, backend, and full stack describes which part of the client-server relationship that you're working with.

Frontend Web Development means that you are dealing mainly with the client side. It's called Frontend because it is what you can see in the browser. It also focuses on the visual aspects where the user interacts on the web page.

On the other hand, Backend development focuses on the site's structure, system, data, and logic. It is the part of the website that you can't really see but handles the functionality that makes things work.

Full stack Web Development combines both frontend and backend to create interactive web pages.

Imagine this scenario:

"Starving John walks into the restaurant and orders a meal. After waiting for 25 minutes, his order is brought to him, and begins to eat"

Now pause for a second and ask yourself - what really happened and how can these possibly explain Frontend and Backend Web Development? How did John just order for a meal and immediately it is brought to him? How???

To explain how Frontend is related: The meal is served by the ushers or servers and delivered to starving John and he begins to eat.

To explain how Backend works: The meal is prepared in the kitchen with lots of effort and teamwork. The ingredients are carefully chosen and applied to make John enjoy his meal comfortably.

This is how web pages come to life with amazing features and functionality.

What are the intricacies of Web Development? What is involved?

This is the real gist.

When building a website, an essential tool that you need is an IDE(Integrated Development Environment). This tool allows you to write the markup and code that will make up the website. The most popular code editor or IDE is VS code (visual studio code). Others include Atom, Sublime Text, Emacs, IntelliJ IDEA, etc.

Frontend: The frontend of a website is made up of three types of files; HTML, CSS, and JavaScript. These files are what is loaded on the client side in the browser.

Tools For Web Development:

- Package Managers: These are online collections of software much of it Open source. Each piece of software called a package is available for you to install and use in your project. The most popular package manager is Node although we have Yarn, it is best to start with Node.

Node or Node.js is an open-source JavaScript runtime environment. It is a tool used to run JavaScript on the server side.

- Build Tools: This tool like Gulp or Webpack or Parcel helps you run tasks and process files and to compile your SASS files.

Additional Frontend Web Development Component:

- SASS(Synthetically Awesome Style Sheets): It is an extension of CSS(Cascading Style Sheets). It offers a more organized and intuitive way of writing CSS code, making it easier to maintain and reuse styles across a project. SASS extends the capabilities of CSS by introducing features like variables, nesting, mixins, inheritance, and more.

With SASS, you can split your styles into multiple files for better organization. These files are compiled into standard CSS that can be used in web development.

- Responsive Design: This is making your styles look good on different screen sizes e.g. mobile smartphones, laptops, desktops, and tablets. As mobile traffic increases, building websites that are responsive is a win-win.

- JavaScript Frameworks: JavaScript framework is like a toolbox filled with pre-built tools that make it easier for developers to build web applications.

Imagine you want to build a big and cool Lego castle. Instead of starting from scratch and placing every brick one by one, you can use a Lego castle kit. The kit provides a structure and pre-designed pieces that make it easier and faster to build the castle. In a similar way, a JavaScript framework is like a kit for building websites or web applications. It provides pre-made tools and features that help developers create websites more easily and quickly without starting from scratch.

Examples of these frameworks are React, Angular, and Vue. React was created by Facebook, Angular by Google, and Vue by Eva You(a former Angular developer and Google's former employee). Any of these frameworks makes building web applications easier and seamless.

Backend Development: Backend development involves working on the "behind-the-scenes" components of a website or application. It primarily focuses on server-side programming.

The server, databases, APIs, Logic, security, performance optimization, and integration are key aspects typically involved in Backend Development.

Programming languages like Python, Ruby, PHP, Java, or Node.js and frameworks are used in Backend Development.