The Web

Since the invention of the internet, there has been an escalation in the number of individuals who seek to learn how to fully understand web development. In today’s day, this has been increasingly true with the growing number of people who are now online thanks to smart devices with mobile data and wi-fi, keeping us connected constantly.

The thing is that one quickly becomes overwhelmed by the amount of content available and can get lost in the amounts of technologies and information that is available for those technologies. This was the case for me, and if I would have had a set path in my adolescence I would not have strayed away from a path I would soon return too many years later. If you are seeking to learn web development, but have heard things such as “web development is dead”, I am here to tell you it is far from dead. If anything it is augmented more daily. And the opportunities are as wide as our imaginations. This article seeks to give you an overview of how the web and web development work, which will allow you to start from the proper beginning (or my opinion of a proper beginning). Well, let’s dive into it, first off let’s find out what the web actually is.

Understanding the Web

A lot of people will often synonymously use “web” and “internet”. Technically this use is not correct. It is important to understand the differences to really understand web development. When we say internet, we really mean the huge network of connected devices (billions). These devices can connect with each other as long as they are on the internet. When we mention the “web”, we are talking about the pages of information (webpage) that we can view on the internet from a device. These web pages live on servers which listen for requests from clients. A client, for example, can be a web browser such as chrome.

What is a Protocol, HTTP Explained

Just like there are rules on how we speak with each other (such as waiting for someone to finish talking before beginning to speak), there are also rules governing the flow of information on the internet. These rules are built into HTTP. HTTP is short for HyperText Transfer Protocol and it determines how messages are transmitted and formatted. Also, it decides the path a server and browser should take when responding to different commands

Request /Response

Understanding the Request/Response cycle is essential for understanding web development. When a client makes a request to a site such as weWillCode.com that request is sent through the internet and received by weWillCode’s server (if it exists, is running properly, and you are connected to the internet). Depending on the request the server responds accordingly. There will be code on that server which decides what to do with that request and sends a response back to the client. Then that response is received by say a web browser and interpreted (There are other types of clients besides web browsers find out more here).

Creating Stuff Web Pages

Once you understand the anatomy of HTTP requests and understand that one can make a request and receive a response, we after want to ask how can I create a web page?

HTML

I.M.O. The Best Way to Learn HTML Foundations

Understanding how to add structure to a webpage is the first thing. HTML (short for hypertext markup language is a language that allows us to define the structure and content of our page. HTML code is made up of tags. For example, if I wanted to create a heading with a tile of “Hello World” and a paragraph saying “Hello everybody on earth” I would type:

<h1>Hello World</h1>

<p>Hello everybody on earth</p>

This would print out:

Hello World

Hello everybody on earth

Learning HTML would help you understand the language many web pages are built from.

CSS

I.M.O. One of The Best Way to Learn CSS Foundations

After you understand how to add content and structure to your page, you can begin learning styling. CSS short for Cascading Style Sheets allows us to decide how our HTML elements should be displayed. You can add your CSS in your same HTML file using style tags(<style></style>, but it is better to create a separate file and include it in your HTML file(Find out how here). One is able to target elements on a page, such as those headings and paragraphs we talked about earlier, and add specific styling to them. It is also possible to group elements into classes, or specify a unique element using an ID. Here is an example targetting a heading 1 element and turning its font color blue and font size to 34px:

h1 {

color:blue;

font-size: 34px;

}

This would select all h1 elements on the page and change their color to blue. Learning the box model is indispensable when you get this far. Once you learn how elements are positioned within the box model, it will facilitate making responsive websites. After you feel comfortable in your HTML and CSS skills you can begin diving into the programming aspect.

Javascript

I.M.O. The Best Way To Learn Javascript Foundations

HTML and CSS, only allow us to do so much. Javascript is where the interactivity can really start. Javascript can also be included in your HTML file using script tags(<script></script>), but is usually in a separate file and linked to your HTML(find out how here). With javascript, we can begin to manipulate our web page through the DOM(Document Object Model). The DOM is a tree structure of our site and through Javascript, we can modify the DOM to add “events”. An event can be a click of a button or by moving the mouse. An example of this can be clicking a button that says “Click Me” to update an empty paragraph element. The browser listens for a click event, and when that event happens, it runs the code within the event function. An example of this could look like this

<button onclick=”myFunction()”>Click me</button>

When first loaded this would simply have a button that said clicked me. This button listens for a click event, and when it hears it, it runs the code in the function myFunction() which is in the script tag.

If you are feeling comfortable with HTML, CSS, and Javascript check out how to make responsive web pages here.

What Next?

Congrats! If you have made it thus far you have a pretty good overview of how web development works. You should be feeling more confided when someone asks if you understand web development. Next, you probably would want to learn about serving your website, and maybe storing data somewhere which can be updated, added to and deleted. I would suggest learning more about Nodejs, and SQL. Nodejs uses Javascript on the server. This allows us to use Javascript outside of the browser. Once we can do this, one can use Express to serve web pages. After we are serving our pages on a server, we can connect it to a database. I like SQL (but that’s just my preference and different situations cause for different technologies). I will explain Nodejs and SQL in a later post. Hope you guys learned something. And remember, Web Dev will never die. (: