100+ Web Development Concepts Summarized

Embarking on a journey through the vast expanse of web development can be both exhilarating and overwhelming. As the digital ecosystem expands, so does the arsenal of tools, languages, and frameworks at a developer's disposal.

Whether you are a seasoned coder, an aspiring web developer, or simply a curious mind eager to comprehend the inner workings of the virtual universe, this comprehensive guide is designed to be your compass.

Let's start with the Internet. it's a network of billions of machines connected. It was officially born in January 1983 thanks to the establishment of the Internet Protocol Suite which standardized the way these computers communicate.

The internet protocol is used to identify different computers on the network by assigning each one of them a unique IP Address. These computers can then send data back and forth with the Transmission Control Protocol breaking data into a bunch of small Packets kind of like puzzle pieces then send them through a bunch of physical components like fiber optic cables and modems before they're put back together by the receiving computer.

Think of the Internet as hardware but the Internet is not the same thing as the Web. The World Wide Web is like software that sits on top of the Internet where people can access web pages with the Hypertext Transfer Protocol.

What's special about it is that it gives every page of content a Uniform resource locator URL. Humans typically use a tool called a Web browser to access a URL where it can be rendered visually on their screen.

The browser is called the Client because it's consuming information but on the other end of that URL, there's another computer called a Server. The server receives an HTTP Request from the client and then sends a Response containing the web page content, these are called HTTP messages but more on that later.

What's interesting is that every web page has a unique Domain Name like stanley.org or example.com. A domain name can be registered by anyone via a Registrar who's accredited by ICANN, a nonprofit responsible for overseeing namespaces on the internet.

When you navigate to a domain in a browser, it gets routed through the Domain Name System (DNS) that maps these names to an actual IP address on a server somewhere. DNS is like the phone book of the internet.

Now when you look at a webpage, the actual content you see is represented by Hypertext Markup Language (HTML). Most browsers have Dev Tools where you can inspect the structure of the HTML at any time.

To build your web page, you'll want a text Editor like VS Code.

An HTML document is just a collection of Elements, where an element is an opening and closing tag with some content in the middle like a paragraph and a heading. It also has elements that handle user input like the select and input elements which are used to build Forms.

In addition, elements can have one or more Attributes to change their behavior, for example, an input can have a type like text or number which the browser will render differently to collect the appropriate value. But the element that puts the hypertext in HTML is the a tag or Anchor. It's a link that allows one page to navigate to a different page based on its URL.

These elements are nested together in a hierarchy to form the Document Object Model or DOM. From the root element, a web page is split into two parts the Head contains invisible content like metadata, and then we have the Body for the main content that the end user sees.

The reason we wrap everything in tags is to give browsers and bots a hint about the semantic meaning of the web page. This allows search engines to display results properly and also helps with Accessibility for devices like screen readers that allow anybody regardless of disability to enjoy the content.

One of the most common elements you'll come across is DIV or division. To define a section of the webpage on its own, a div might not seem to do anything and currently produces this plain black and white website that begs the question how do we make this website look cool?

The second language you'll need to learn as a web developer is cascading stylesheets CSS. It allows you to change the appearance of the HTML elements. One way to accomplish that is with an Inline style. Using the style attribute on an element the style itself contains a collection of properties and values that change the appearance of the element. We might make the background color black and the text color red.

What we've created here is an inline style that will only be applied to this one element however CSS Cascades which means it can be applied to multiple elements at the same time providing better code re-usability.

Another option is to move our code into a Style tag. But to make the code work, we'll first need to define a selector, so it knows which elements to target. A Selector for example can target all of the paragraph elements on the page, but that's too broad. We can be more granular by defining a Class. That style can then be applied to one or more elements with the class attribute.

What's interesting though is that we now have classes that apply different styles to the same element. CSS contains a bunch of Specificity rules that determine which styles are relevant to an element in a way that's self-evident and elegant.

Most often though, we don't use style tags but instead use a External style sheet that is linked to the webpage and the head of the document. When it comes to CSS, by far the most difficult thing to learn is layout and positioning. Think of every element as a Box Model. The outside of that box is wrapped with a padding border and margin.

The boxes then take up space on the page from top to bottom. Some elements like headings have a display of Block by default, which means they take up all available horizontal space other elements like image are displayed Inline, which means they can line up horizontally side by side.

The problem is that the default position is usually not desirable it can be changed by customizing the position property on an element. Relative positioning allows an element to move a certain number of pixels from its normal position.

Absolute positioning is similar but the position values are relative to its nearest ancestor, and then we have Fixed positioning which will keep an element on the screen even as the user scrolls away from it because it's fixed to the entire viewport.

Changing the position of an element is one thing but one of the biggest challenges web developers face is creating Responsive layouts. Users can access your web page from all kinds of different screens and it should look good on all of them. CSS provides a bunch of different tools to help make this happen.

One of which is media queries. A Media Query allows you to get information about the device that's rendering the web page and apply different styles accordingly, but more importantly, it provides layout tools like Flexbox.

Applying display flex allows the parent to control the flow of the children to easily create rows and columns. For more complex layouts, Display Grid can be used to control multiple rows and columns at the same time.

CSS is usually not considered a complete programming language on its own, however, it does have mechanisms like CALC to perform mathematical operations and Custom Properties , which are like variables that you can reuse in multiple places.

Vanilla CSS is rarely enough though, and many developers choose to extend it with tools like SAAS, which adds additional programmatic features on top of it, that brings us to the third language you'll need to know as a web developer, Javascript.

Technically you don't need Javascript to build a website, however, most developers choose to use it to make the user interface more interactive. To run Javascript code on a web page, open up a Script tag then write some Javascript code inside of it. The browser interprets the HTML from top to bottom and runs this code when it encounters it in the DOM.

In most cases, Javascript is written in a separate file. Then referenced as the source on the script tag. Usually, it's preferred that this code runs after the DOM content has loaded, which can be accomplished with the Defer attribute.

JavaScript is a big complicated programming language that is more formally known as ECMAScript and is standardized in all major browsers.

There are several different ways to declare a variable. A variable that might be reassigned in the future uses the LET keyword while a variable that can't be reassigned uses CONST. The const is a Dynamically typed language which means no type annotations are necessary.

That's not always ideal, so many developers choose Typescript as an alternative, to add static typing on top of javascript. One of the most common reasons you would use JavaScript in the first place is to handle Events whenever the user does something on a web page.

The browser emits an event that you can listen to like a click, mouse move, form input change, and so on. We can tap into these events using Browser APIs like Document, which in this case provides a method called query selector that allows us to grab an element with a CSS selector. Once we have that element set as a variable, we can then assign a Event listener to it.

An event listener is a function that will be called or re-executed anytime the button is clicked. The language has a variety of built-in data structures like an Array, to represent a collection of values but the most fundamental data structure is the Object, commonly called a dictionary or hashmap.

Anything that's not a Primitive type like a string or number inherits its base functionality from the object class. It relies on a technique called prototypal inheritance where an object can be cloned multiple times to create a chain of ancestors, where the child inherits the properties and methods of its ancestors.

This is different from class-based inheritance which is kind of confusing because Javascript also supports Classes. However, these classes are just syntactic sugar for prototypal inheritance but now we're getting a little too low level, most developers don't ever want to have to touch the word prototype so what we do instead is use a Front-end framework like React, Vue, Svelte, Angular, and so on.

All of these frameworks do the same thing in a slightly different way, which is to represent the UI as a tree of Components. A component can encapsulate HTML, CSS, and Javascript into a format that looks like its own custom HTML element.

Most importantly frameworks produce Declarative code that describes exactly what the UI does and that's much easier to work with than Imperative code that you would normally get with just plain vanilla javascript.

At this point, we've taken a look at the front-end stack, but now we need to switch gears to the backend.

Starting with NodeJs which is a server-side runtime based on Javascript. You can run server-side code for web applications in all kinds of different languages but Node is the most popular because it relies on the same language as the browser.

It's also based on the same V8 Engine that powers the Chromium browser to run code in a single-threaded non-blocking Event loop that allows Node to handle many simultaneous connections quickly and efficiently.

In addition, it allows developers to share work remotely thanks to the Node package manager. A package is also called a module which is just a file that contains some code with a Export statement so it can be used in another file. A file can consume a module with a Import statement.

Now we need to think about how to deliver the actual website from the server to the client. The classic option is Server-Side Rendering. In this approach, the client will make a GET request for a certain URL. Every request has an HTTP method and GET means you want to retrieve data from a server as opposed to methods like POST and PATCH where the intent is to modify data.

The server receives the request and then generates all the HTML on the server and sends it back to the client as a response. The response contains a Status code like 200 for success or levels 400 and 500 for errors. For example, if the web page doesn't exist the server will return a 404 status code which you've likely seen before as a web user. SSR is extremely popular but in some cases, it may not be fast enough.

Another approach is the Single-Page Application (SPA). With this approach, the server only renders a shell for the root URL, then Javascript handles the rendering for all other pages on the website. The HTML is generated almost entirely client-side in the browser making the website feel more like a native iOS or Android app.

When the app needs more data, it still makes an HTTP request but only requests a minimal amount of data as JSON, which is called a data interchange format that can be understood by any programming language this can result in a great user experience.

However, it can be very difficult for bots like search engines and social media link previews to understand the content on the page. This led to another rendering strategy called Static Site Generation (SSG). In this case, every webpage on the site is uploaded to a server in advance, allowing bots to get the information they need. A front-end JavaScript framework usually takes over to Hydrate the HTML to make it fully interactive and behave like a single-page application.

Performance is extremely important and you'll want to use tools like Lighthouse to optimize metrics like First Contentful Paint and Time to Interactive. Now, to implement one of these patterns most developers will use a Full stack framework like Next.js, Ruby on Rails, Laravel, and so on.

They abstract away many of the more tedious things developers don't want to deal with. One of which is Module bundlers which are tools like Webpack and Vite that take all of your Javascript, CSS, and HTML and package it in a way that can work in a browser. They might also provide a Linter like Eslint to warn you when your code doesn't follow the proper style guidelines.

Oh, I almost forgot you are going to need a Database to build a full-stack web application. You need somewhere to store your data, like data about your users. But to get that data you'll need to give users a way to log in via a process called User Authentication. Now before you deploy your code you'll need to test it with a Web server. There are tools like Nginx and Apache. You create an HTTP server but your framework will likely do this for you by serving the files on localhost , which makes your IP address behave like a remote web server.

When it comes time to deploy, you'll likely use a big Cloud provider like AWS. Most apps are Containerized with docker making them easy to scale up and down based on the amount of traffic that they receive. There are many tools out there that function as a Platform as a service (PaaS) to manage this infrastructure for you in exchange for your money, or if you don't want to get locked in with a giant tech corporation you might host your app on a decentralized blockchain with WEB3.

Conclusion

And that's about one percent of what you'll need to know to call yourself a full-stack web developer. If that seems overwhelming don't worry too much. Almost nobody knows what the hell they're doing and we all just use Google to figure things out on the fly.