A Complete Beginner's Guide to Web Development

A Complete Beginner's Guide to Web Development. The Beginner's Guide to Website Development.

You probably visit websites almost every day to interact with friends on social media, shop, work, or do thousands of other activities. But, how are websites created? This post will walk you through creating a website from scratch that anyone on the web can see!

If you are brand new to programming, you might want to read this post!

How the browser works

If you're reading this article, you used a web browser before browsers like Google Chrome, Mozilla Firefox, Microsoft Edge, and Apple Safari allowed you to access the Internet.

First, a user chooses a URL they want to go to - for example, they can type "https://twitter.com" into the URL bar and press enter, or they can click a link somewhere else online. It makes a request to a server.

A server is a computer that can handle these requests and then return the information to the browser. This data is called response. Often, that response contains an HTML page that the browser can display to that user.

This process is called the request-response cycle.

An example: Twitter

A Complete Beginner's Guide to Web Development, Let's go a little deeper with an example. First, the user makes a request to Twitter by typing "https://twitter.com" in the URL bar. Then, a Twitter server decides what information should be returned to the requester.

Let's talk more about the URL: "https://twitter.com" returns the home feed page. If the user navigates to "https://twitter.com/aspittel" instead, they will see my profile and tweets instead. The server is responsible for getting the appropriate information based on the user's request.

Website data, such as tweets and users, is stored in a database. The server searches the database for the appropriate data for the page and performs other logic to manipulate that data.

Finally, the server responds with the response, which will be an HTML page with the correct data plugged in.

What I wish I knew before I learned to code ebook covers

Want more advice on learning to code?

Download my free ebook!

Frontend vs Backend Development

Let's talk a little about the technologies that go into web development. We generally divide development into frontend and backend. Frontend developers work on the user interface side of websites, so how the page looks, displays content, and how users interact with the site. Backend developers work on the server-side -- they write the logic that determines what data to send to the user.

Frontend developers typically use HTML, CSS, and JavaScript -- which we'll discuss further in this post. Backend developers have many other languages to choose from such as Python, PHP, Java and C#.

To begin, let's write a frontend website.

Frontend Technologies

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

HTML is responsible for the content of web pages -- text, images, videos, and headings are controlled by HTML

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

Finally, JavaScript makes web pages interactive. Some examples would be popups and data that changes. You can use JavaScript to write or update HTML, so some websites are now written entirely in JavaScript!

Let's learn the basics of this frontend language and create an "About Me" site with HTML and CSS.

Let's create a website

The first thing we need to do is download a text editor, which will allow us to write the code. There are many options to use but my favorite is Visual Studio Code. Go ahead and download it to your computer.

Once it is downloaded, open the application. Also, create a folder on your computer. On a Mac, you can open the Finder application and then click File > New Folder. On a Windows computer, you can do the same with the File Explorer app. Call my folder or whoever you want to call!

Now, back to VS Code. Click Open folder under the Start... link. Then, select your created folder.

Open the folder under Start

A Complete Beginner's Guide to Web Development, Now, we will create two files, index.html and style.css. You can do this in VS Code by clicking the icon that looks like two pieces of paper in the left hand bar.

Then click the New File button next to the folder name. Open by clicking the two scrolling paper buttons in the Explorer section on the left. Then enter the file name and press enter key.

If you're more comfortable with this, you can create files in your Finder or File Explorer!

HTML

We write HTML using tags that describe what kind of content they contain. For example:

<h1>Hello World</h1>

<h1> is the open tag, meaning hello world, our content is a first-level heading. </h1> is the close tag, which ends the header.

Let's go ahead and add the code to our website.

In VS Code, click to open the index.html file you created.

In the file, add the following code:

These tags say that anything inside them is HTML -- this may be obvious to us, but it's good practice to tell the browser as well.

Let's go ahead and add a <head> and a <body> tag inside the <html> tag:

<html>

</html>

Body tags will contain all the content of our page -- which will be displayed to the user Head tags will contain configuration information about the page

Inside the head tag, we'll add a title tag and inside the body tag we'll add an h1 tag.

<html>

<head>

<title>About Me</title>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

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

Now, open this website on your computer. In your Finder, right-click the file and click > Open with Chrome or your preferred browser. On a Mac, you can double-click the file.

Open a web page with your browser:

Hello world comes from your h1 tag and tab text comes from title tag. Let's add some more information!

<html>

<head>

<title>About Blair</title>

</head>

<body>

<h1>About Blair</h1>

<p>

Blair is a very sweet mini double doodle.
He likes to chase balls and eat peanut butter.
He also likes to sleep on his mother's lap while he works.

</p>

</body>

</html>

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

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

Let's add a second attribute to our img tag -- alt.

Even if users read the alt-text using a screen reader, it's really important to pay attention to making your HTML accessible using tools like alt text.

This is just a small sample of what we can do with HTML, here's a list of more resources you can explore.

CSS

Our web page works, but it's still not very pretty -- it's just black text on a white background. Let's add some CSS to style our page!

First, we need to link the style sheet to our HTML page. We'll do this inside our head tag:

<head>

<title>About Blair</title>

</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 the style.css file in VS Code

With CSS, we select elements from our HTML and add styles to them. Let's shrink our image a bit:

img {

height: 200px;

}

img says we're adding styling to our <img> tag. Everything inside {} will apply to imgs. then, height: 200px; As a rule of thumb in this case, we're saying that our image will be 200 pixels tall.

CSS selector image

Let's add a background color to our page:

body {

background-color: lightpink;

}

Play around with adding some more styles -- colors and fonts might be good to try!

I also wrote this complete guide to CSS if you want to go deeper into it.

Establishment

A Complete Beginner's Guide to Web Development, Now we have a website, but we can only access it on our computer. We need to use a server to make it available to other users on the web. Managing our own servers would be quite a bit of work and quite expensive. We will use a cloud-based server through AWS instead. This means that you can just upload your files and AWS will host them for you, free for the first year after which the price will look like this.

First create an AWS account. Then, navigate to the AWS Amplify console. Click the Connect App button, then select Deploy without Git Provider (last option) on the next page.

We need to zip the file. In your Finder or File Explorer, right-click the About-Me folder and click Compress Folder. Then, drag the generated zip file to AWS.

Finally, click the Save and Deploy button. On the next page, you may have to wait a few seconds for your site to finish building. Once it's done, you'll see a URL that you can send to anyone! Here is mine.

Conclusion

Web development is a great career path, and you can learn a lot in it. Hopefully, this tutorial inspired you to learn more! Here are some of my favorite resources to get you started.

Be the first to know about my posts

A Complete Beginner's Guide to Web Development, The Beginner's Guide to Website Development

A Complete Beginner's Guide to Web Development