fbpx
Menu Close

A Complete Guide to Web Development for Absolute Beginners

You most likely visit websites almost every day, whether to interact with friends on social media, to shop, to do work, or thousands of other activities. But, how are websites made? This post will take you from beginner to creating a website that anyone on the web can visit!

How the Browser App Works?

If you’re reading this article, you’re probably on any of these browsers; Google Chrome, Mozilla Firefox, Microsoft Edge, or Apple Safari which gives you to access this article.

First, a user chooses a URL they want to go to – for example, they could type “https://www.facebook.com” into the URL bar and press enter, or they could click a link somewhere else on the net or on their app. This action makes a request to a server.

A server is a computer that can process these requests and return data back to the browser. This data is referred to as the response. That response frequently contains an HTML page that the browser can display to the user. This is referred to as the request-response cycle.

An Example: Facebook

Let’s go a little deeper with an example. First, the user makes a request to Facebook by typing “https://www.facebook.com” in the URL bar. Then, a Facebook server decides what data should be returned to the requester/user.

Let’s review the URL a little more: “https://www.facebook.com” returns the home feed page. If the user navigates to “https://www.facebook.com/WSIAxon/” instead, they’d expect to see a page and posts instead. The server is responsible for collecting the appropriate information or data based on the user’s request. The website data, such as Facebook posts and users, are stored in a database.
The server queries that database for the appropriate data for the page and performs other logic to exploit that data.
Finally, the server responds with an HTML page with the correct data plugged into it.

Frontend vs. Backend Development

Let’s take a look at some of the technologies that are used in web development. We usually divide development into two parts: frontend and backend. Frontend developers work on the user interface side of websites, which includes how the page looks, how the content is displayed, and how the user interacts with the site. Backend developers work on the server side, writing the logic that determines which data is sent to the user.

Frontend developers commonly use HTML, CSS, and JavaScript — which we will discuss more in this post. Backend developers have a lot more languages to choose from such as Python, PHP, Java, Ruby, Golang and C#.

To get started, let’s write a frontend website.

Frontend Technologies

Three primary languages go into websites: HTML, CSS, and JavaScript.

HTML is responsible for describing the content or structure of web pages — things like text, images, videos, and headings are controlled by HTML.

CSS is for styling websites, so fonts, colors, and the positioning of elements. We can use CSS to style the content we create with HTML.

Finally, JavaScript makes web pages interactive. It allows us to add dynamic behavior to the webpage and add special effects to the webpage. On websites, it is mainly used for validation purposes. JavaScript helps us to execute complex actions and also enables the interaction of websites with visitors.

Let’s learn the basics of these frontend languages, and build an “about lorem” site with HTML and CSS.

Creating a basic Website

The first step to creating a website is by downloading a text editor, which will allow us to write code. There are varieties of text editors to use, but my personal favorite is Visual Studio Code. Go ahead and download it on your computer.

Once it’s been downloaded, open the application. Create a folder anywhere in your Windows File Explorer. Name the folder “tuts” or whatever your preference is.

Now, navigate back to VS Code. Click on the Open folder then, select the folder you just created.

create a folder


We’ll create two files; index.html and style.css. You can do this in VS Code by clicking on the icon that looks like two pieces of paper on the left-hand bar.

Then click on the new file button next to the name of the folder. You may need to hover over the explorer section on the left that opened when you clicked the two pieces of paper button. Then enter the name of the file and press the enter key.

HTML

We write HTML using elements that describe what type of content is between them. For example:

<h1>The Box</h1>

<h1> is the open tag, it denotes that Hello World, our content, is a first level header. </h1> is the close tag, which ends the header.

Let’s go ahead and add code to our website.

In Virtual Studio code, click on the index.html file you created to open it.

It is important to note that all html codes begins with a DOCTYPE declaration; which informs the web browser which version of HTML you’re using, and should appear at the very top of every code.

In the file, add the following code:

<html></html>

The means that anything between them is HTML — this may be obvious to us, but it’s good practice to tell the browser that too.

Now, let’s add a <head> and <body> tag inside of the <html> tags:

<html>
  <head></head>
  <body></body>
</html>

The head tag will define the head portion of the page which contains information related to the document. The body tags will contain all the page content which is what will show up to the user.

Inside the head tags, we’ll add a title tag and inside the body tag we’ll add a h1 tag.

<html>
  <head>
    <title>About Lorem</title>
  </head>
  <body>
    <h1>The Box</h1>
  </body>
</html>

Now, save the file. You can do this using the shortcut ctrl + s or by clicking file > save on the menu bar of your computer.

Let’s open up this website on your computer. In your file explorer locate where you saved the folder, then double click the file to open it with your default browser. Your browser should open up with a web page.

The Hello World comes from your h1 tag, and the text on the tab comes from the title tag. Let’s add some more information!

<!DOCTYPE html>
<html>
  <head>
    <title>About Lorem</title>
  </head>
  <body>
    <h1>The Box</h1>
    <p>
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos omnis at eum. Odit, omnis repudiandae, et cumque, qui hic corporis cupiditate aut magnam dolores ullam! Ipsum possimus temporibus perferendis impedit?
    </p>
    <img src="https://www.multimediaxp.com/images/article_190508124638.1557333998.jpg">
  </body>
</html>

Save your file again, and then refresh your HTML page in the browser! New information!

Let’s discuss the two new tags. The p tag is for paragraphs. The img tag is a little different. First, it’s a self-closing tag which means that we don’t need a close tag for it. It also has an attribute. Attributes are additional information that we can add to tags. The src attribute holds the URL for an image. You can pick any image on the web!

Let’s add a second attribute to our img tag — alt.

<img src=”https://www.multimediaxp.com/images/article_190508124638.1557333998.jpg” alt=”What is Lorem ipsum”>

Alt-text is what will be read to users utilizing screen readers, it’s really important to focus on making your HTML accessible by using tools like alt text.

This is just a small sampling of the things we can do with HTML, here is a list of more resources you can explore.

CSS

Our web page works, but it isn’t very pretty yet — it’s just black text on a white background. Let’s add some CSS to style our page!

First, we need to link our style sheet to our HTML page. We will do that inside of our head tag:

<head>
  <title>About Lorem</title>
  <link rel="stylesheet" href="style.css">
</head>

This links our CSS sheet to our HTML page, so we can now write some code to style our page. Save your HTML file and then open up the style.css file in VS Code.

With CSS, we select elements from our HTML and add styling to them. Let’s make our image a little smaller:

h1 {
    color: red;
}
img {
  height: 200px;
}

Let’s also add a background color to our page:

body {
  background-color: lightpink;
}

You should note that h1 is a selector for the h1 element in your index.html file, color is the property and blue is the value. Save your current style.css file and go back to your browser to refresh to see the changes. You can play around with adding some more styles — color and font may be good to try!

You should have something like image below at the end of this guide;

css

Conclusion

Web development is a fantastic career path with a lot of learning opportunities. Hopefully, this tutorial piqued your interest and piqued your desire to learn more! Here’s two resources to help you get started.

W3Schools

FreeCodeCamp

Leave a Reply

Your email address will not be published. Required fields are marked *