How to Code a Website in 6 Easy Steps

Read how to start coding your website. We cover HTML, CSS, site responsiveness, and site interactivity (including JavaScript) in this guided tutorial.

Tech Mar 20, 2022 0 739 Add to Reading List

Whether you're looking for dining recommendations, ordering groceries, reading your favorite blog, or shopping for holiday gifts, the internet is the first place we turn to for information and convenience. Naturally, the best companies are positioned to catch a potential customer's attention well before they ever walk through the door with a professional and seamless website.

It's easy to talk about having a website, but if you're a small business owner or fledgling entrepreneur, it's hard to know where to start. Fortunately, we've broken down the process of how to code a website into a few simple steps.

Download Now: Free Intro Guide to HTML & CSS

Before we dive in, I wanted to take a moment to answer two common questions that many first-time website builders have.

Frequently Asked Questions About Coding a Website

1. How long does it take to code a website?

Answer: it depends on the complexity of your website. For example, it will take a lot less time to launch a basic homepage with your business's address, contact information, and links to social media accounts than it will build an online ordering portal that collects users' shipping information and processes payments.

However, just because you save time, in the beginning, doesn't mean that more advanced features aren't worthwhile. It depends on your business. If you are only trying to get foot traffic to your store, then online ordering doesn't make sense.

That said, you may miss out on customers that may not feel like driving to a physical location but would purchase through your website. If you don't have the bandwidth to ship items to your customers, then that's another good reason to pass on creating an e-commerce website.

2. Do I need to code my website?

Simple answer: no. While everyone was manually coding their sites in the early days of the internet, many websites are now built with a content management system (CMS). A CMS removes the need to code by offering a visual interface to build web pages and structure your site. Many CMSs offer drag-and-drop capabilities so that you can easily position elements (e.g. a button) where you want them on the page.

Our team has compiled a list of the best CMSs that I recommend reading if you'd rather avoid the custom coding route. If you're ready to learn some code, let’s walk through this process together.

How to Code a Website

Pick your code editor.
Write your HTML.
Create your CSS stylesheet.
Put your HTML and CSS together.
Code a responsive website or a static website.
Code a simple website or an interactive website.

1. Pick your code editor.

Code editors are a great tool for new developers because they offer many features that make our lives easier. For example, Visual Studio Code (my choice) will offer syntax suggestions so you can avoid simple typos that cause issues in your code. On top of that, it will autocomplete closing tags for HTML and add visual markers to your files so that you can easily tell different pieces of code apart.

You can see the difference between a regular text editor and a code editor below. The code works the same in both documents, but one is much easier to understand at a glance than the other.

Notepad UI versus VS Code UI

As I said before, Visual Studio Code is my preferred tool, but there are many free code editors out there for you to choose from. Visual Studio Code has extensions that add additional functions to the editor (like switching from dark to light mode) and a dedicated user base that is constantly creating more, but the most important thing is that you have a code editor for these next steps. The brand is not critical.

Note: I will be sharing screenshots from Visual Studio Code, so it will be easy to follow along in this tool as we dive into coding in the next step.

2. Write your HTML.

HTML stands for Hypertext Markup Language. If that doesn't make sense right now, don't worry. Focus less on the definition and more on this picture: we're building a house. The most natural place to start is with the foundation, walls, and roof because every house needs these before you worry about interior decorating or painting.

With HTML, we're able to build this structure for our website. This is a metaphor I use when I lead HTML and CSS trainings, so we'll repurpose it for this tutorial as well.

Plain clipart house

Image Source

Now that we have the right tool for the job and understand our goal, it's time to dive into the reason you're here: coding.

Create an HTML doc.

All of our coding will happen in different files that we save to our local machine. The first file that we'll create is our HTML document. To start, make a new folder for your website files. Since I am demoing, I creatively named mine "demo."

Screenshot of file explorer with demo folder

Now open the folder in your code editor. Next, create a file named "index.html" and we now have our very first HTML file ready to go. Note that you do not need to name your file "index" but you do need to match the ".html" file extension. This tells our computer (and later our web browser) that this is an HTML document instead of a JPG, PDF, etc.

VS Code with index.html file

Our file is currently blank, so let's add the HTML document structure. I have laid everything out in the snippet below so you can copy and paste into your file (or write it out).


            <!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

Let's review each of these pieces briefly:

<!DOCTYPE html>: A declaration to the browser that this is an HTML document type which will tell it how to process our code
<html lang="en">: An opening tag to wrap all of our HTML so the browser knows where our code starts and where it ends (note the closing </html> tag)
<head>: An opening tag to contain all the nonvisible information about our web page, also known as metadata — we'll go over this in the next part (note the closing </head> tag)
<body>: An opening tag to contain all the visible content on our web page — we'll add elements to this later in this section (note the closing </body> tag)

Note: If you're not as familiar with HTML syntax, I recommend our HTML guide as a good way to brush up on your skills before continuing.

Add metadata to your head.

Metadata is defined as data about the data. In the scope of our HTML document, think of it as information about the document for the web browser. It is housed under the <head>, which separates our metadata from the <body> where our content will live (keep this in mind for the next section). Let's add some metadata under our <head>.

<!DOCTYPE html>

<head>

<title>Stephen's Website</title>

</head>

<body>

</body>

</html>

The <title> HTML element tells the browser what we'd like our web page to be named. For example, if I launch my file, we'll see "Stephen's Website" in the browser tab:

Chrome tab showing name of web page

Don't worry about understanding the <meta charset="UTF-8"> tag for now. Just know that it is a web development best practice to include it in your <head>.

Add content to your body.

Now that we have our metadata squared away, I've gone ahead and added content to our web page so we (finally) have something to look at. You can see the updated HTML under the <body> on the left and what the user will see on the right.

Let's review each of these new elements briefly:

<h1>: The main title for our web page. HTML has heading levels 1-6 (i.e. <h1>-<h6>). It will display the largest by default since it's given the most weight (we'll learn how to manipulate displays when we get to CSS), and it's a best practice to only have one <h1> on a page.
<p>: A paragraph element.
<img>: An image element. Note that <img> has no closing tag. This is because it has no text to wrap around (which <h1> and <p> do).

Before we continue, I want to take a moment to discuss HTML attributes. We can see two different examples inside the img tag. First, "src" is an attribute for the image source that tells the browser which image to display. Second, "alt" is an attribute for alternate text that tells the browser what text to display if the image can't be rendered. Alt text is also important for accessibility so that screen readers can describe the image to users.

Note: the order of the attributes inside your HTML tag does not matter as long as they are all inside the tag.

Check your work.

If you've made it this far, you're probably excited to see your hard work on the big screen (AKA web browser). The simplest way to do this is to return to your File Explorer and right click your HTML file:

File explorer with index.html file being opened with Google Chrome

Once you've selected your web browser of choice (I recommend Chrome, but any will work), you should see your HTML file displaying like it's a live web page. Don't worry, only you can see it for now.

Demo web page with H1, paragraph, and smiley face

Note: If you make additional changes, you will need to save your file and then refresh the page to see them take effect in the browser. This will be more relevant as we review how to change the aesthetics of our page in the next section.

3. Create your CSS stylesheet.

Let's return to the metaphor from the last section. We now have our house's structure. But you may have noticed that — like the clipart house graphic — our HTML is uniform and lacks color. We can see all of it, but clearly there's a lot more that can be done with HTML than its default display. We'll turn to CSS to give our "house" some flair.

Suburban home

Image Source

CSS stands for Cascading Style Sheets. If you're unfamiliar with CSS, I recommend starting with our CSS guide to review the finer points of properties, syntax, selectors, and specificity. We'll run through how to implement CSS below.

Create the CSS doc.

Just as we created our "index.html" file, we'll now create our "style.css" file to store our CSS rules. Again, the name of the file does not matter, but you must include the ".css" extension.

VS Code with style.css file

Add a CSS rule.

For now, we'll focus on adding one rule to our CSS file. In this case, I want all paragraphs to display as red text.


            p {


                color: red;
            
            
            }

The selector "p" is telling the CSS we want to target all paragraphs within our HTML and apply the properties listed within the brackets ({}). In this case, we have one property "color" that we have set to the value "red," but we can add as many properties under a rule as we want.

You may notice that nothing happens on the page after you've added this CSS rule to your file. That's because we need to link our HTML and CSS together, which we'll show in the next section.

4. Put your HTML and CSS together.

For our CSS to affect our HTML, we need to tell the browser to apply the CSS. The process to do this is straightforward. We simply need to add a <link> element to our <head>.


            <link rel="stylesheet" href="style.css">

Once again, we see HTML attributes in action. Adding the <link> tag without the "rel" and "href" attributes would produce no results since the browser would not know the link type (stylesheet) and where to link to (style.css). Note that if you have named your CSS file differently, then the value for the href attribute within the quotes (" ") should be updated to match your file name. Otherwise, the browser will not be able to find your stylesheet.

More CSS Rules

Now that our HTML and CSS are linked, I will add more rules to make our page look a bit less vanilla.

Let's review each of our new rules:

Body rule: Transforms the background color of our body (AKA the visible page) from white to light gray
H1 rule: Reduces font size for our main page title
Text class rule: Changes color of any element I tag with the "class" attribute to green (overriding paragraph rule above it)
Smiley id rule: Changes the width of my smiley face image to 300px and sets the height to automatically scale

Note: Any class or id rules that you write in your HTML also means that you must tag the specific elements that you want to target in your HTML with the corresponding "class" or "id" attribute plus the name as written in our CSS.

5. Code a responsive website or a static website.

To understand web responsiveness, we will turn once again to a metaphor. On one hand, we have a pond. The water inside the pond is always the same shape because the edges of the pond never change. On the other hand, we have a stream. The edges of the stream are always changing as it flows, and the water is always expanding and narrowing to fit that shape.

Pond versus stream

We can think of static and responsive websites in the same way. The static website does not react to a change in the browser's size. Its contents will always be the same shape. Meanwhile, the responsive website constantly adapts to different browsers and screen sizes.

Why does responsiveness matter? In 2021, mobile traffic now makes up more than 55% of all traffic on the internet, according to StatCounter. If your website can’t accommodate traffic on small phone screens up to smart TVs, then you are losing potential customers. Additionally, Google ranks mobile-friendliness as part of its decision to show pages in search results, so you can lose organic traffic as well.

Until now, we have created a static website. The text elements will resize by default, but other elements will keep their original shape and size no matter how the display changes. Below, we can see our smiley face's right side is cut off because the viewport is now narrower than its fixed width of 300 pixels (note that our paragraph has wrapped its text to fit).

Web page sized below 300 pixels to show smiley face cut off

Meta Viewport Tag

Before we continue, there's another tag we'll want to add to our <head> that is very important:


            <<meta name="viewport" content="width=device-width, initial-scale=1">

The meta tag tells all browsers and devices to treat pixel measurements the same. In other words, mobile devices and browsers will shrink your page to the same scale as it would display on a desktop, which we can see below.

Mobile screen showing webpage scaled to display at desktop proportions

Obviously, this content is much too small for a phone screen, and the user will have to zoom in to view it. So, adding the meta viewport tag to our <head> will standardize scaling across all browsers and devices.

Mobile screen showing content scaled to display proportionally

This is already looking better, and now we can be sure our page will behave consistently across devices and screen sizes, which will save us a lot of frustration. We can now optimize our web page for mobile using media queries and fluid design practices.

Media Queries

A media query is a CSS rule that instructs the CSS to behave differently based on the width of the viewport (AKA the screen/browser width the web page is displaying in). You define that width and how the CSS changes.

For example, I've increased our smiley face's width to 400 pixels so that it has more presence on larger screens. However, I want to make sure it's not cut off on smaller screens. So, I wrote a media query that states that once the screen is 400 pixels wide or smaller, reduce the smiley face's width to 300 pixels.

@media only screen and (max-width: 400px) {

#smiley {

width: 300px;

}

I've added the media query to the end of our CSS stylesheet. Make sure they always come after your regular CSS rules and group them sequentially. For example, a 500 pixel-media query comes before a 400-pixel media query.

Fluid Design

Media queries work best if we want to keep our elements at fixed widths. As you saw above, I wanted my smiley face to display as 400 pixels wide and then scale back to 300 pixels. However, what happens when the screen reaches a 300-pixel width? I would need another media query to reduce its size again.

An alternative approach is fluid design, which is based on the use of relative units. Until now, we've been using an absolute unit: the pixel. No matter what happens on the screen, a pixel is always the same exact unit of measurement. To give you a sense of what that means, 96 pixels is equivalent to one inch, 192 pixels is equivalent to two inches, etc.

Relative units are relative to the environment they're in. In our code, the environment for the smiley face image element is the body, which is a container that spans the entire page. The relative unit we'll use is the percentage to set my smiley face equal to that proportion of the body's width. For example, if the body is 400 pixels wide and the smiley face is set to 50% of the container's width, then it is 200 pixels wide.

Now I no longer need a media query; the smiley face will always scale to fill the container to the amount specified. In other words, it's fluid. However, don't write media queries off just yet.

Using Media Queries and Fluid Design

Though they may seem like opposites, media queries and fluid design pair well to achieve responsiveness. A favorite trick of mine is to use the CSS property "max-width" set to a maximum pixel count along with a "width" set to a percentage. Take the example below.

I have my smiley face initially at a fixed width of 400 pixels. Then I scale it back to 300 pixels when the viewport reaches 400 pixels. Then I set it to a maximum width of 300 pixels but to scale down to always be 100% of the available width of the container for any screens smaller than 300 pixels.

6. Code a simple website or an interactive website.

We will (you guessed it) bring back our friend the metaphor for this section. Imagine you're standing on a street reading a flier for guitar lessons on a brick wall. You're interested, and the flier says to call a number to sign up.

This is what we'd consider a simple website. It displays information about something, it may even ask you to take an action, but reading is the extent of what you (the user) can do on the site. Remember, you need to call the number it gives you on your phone.

We're back at the brick wall. Now, there's a sign talking about guitar lessons and a door to enter the studio to sign up if you're interested. The wall is still displaying information, but now you can interact with it to take the next step. This is what we'd consider an interactive website. See where the name comes from?

Sign on wall versus door in wall

A Brief History Lesson on JavaScript

Until now, we've been building a simple website. We are displaying information to our users, but that's the extent of what the site does. At one point, the early internet was the same way. You could access information from various websites, but there wasn't much more a website could do.

JavaScript was invented in 1995 to add interactivity to web pages. JavaScript is the third foundational language for web development combined with HTML and CSS. Both these languages we've learned so far are markup languages, but JavaScript is a programming language. Programming is the process by which a computer executes actions based on predefined logic.

For example, let’s say a user clicks on our smiley face. The web page then prints a greeting when it registers that the face has been clicked. The page knows to do this because we have told it to watch for this interaction and react in a specific manner.

Your First JavaScript Program

Unfortunately, it is outside of the scope of this lesson to dive into the syntax and mechanics of JavaScript. Instead, I will provide a pre-written program so that we can focus on implementing it within our website.

// Identifying our image

const smiley = document.querySelector("#smiley");

// Adding reaction when image is clicked

smiley.addEventListener("click", () => {

alert(`Smiley says "Welcome!"`);

});

To summarize what's going on, we first tell our program to identify the smiley face HTML element. Then, we attach an event listener that "listens" (looks for) a click from the user on the image. Once that happens, it executes the action we've defined, which is known as the event listener function (or the reaction). In this case, the program prints a welcome message to the screen from our smiley face.

Now let's see it in action.

Adding JavaScript to Your Page

The main method for adding JavaScript to our page is with the script tag which wraps around our program. This tells the browser that we are adding JavaScript to our page so our script isn't treated like more HTML. You can see this implemented below.

It is a best practice to add the <script> element after all other content on the page. The easiest way to do this is to add it right before the closing body tag. This ensures that the content we are targeting (the smiley face) will be rendered before our program looks for it. Otherwise, the smiley face would not be found and our program would not work.

Next Steps in Building Your Website

If you have made it this far, then take a moment to congratulate yourself. You have gone from perhaps never coding before to having the foundation of a website that is both responsive and interactive. We've covered a lot of ground between different concepts in HTML and CSS and even touched on programming. This is a major first step in your web development journey.

Of course there's still much to learn. I've outlined a few areas to focus on as you continue building your web development toolbox.

Keep learning HTML and CSS.

HTML and CSS have more complexity than what we've covered today. These languages form the visible face of your website and are critical to your users' experience. I've relinked the foundational guides to HTML and CSS below as well as added some links to more advanced CSS topics.

Foundational Guides:

Ultimate Guide to HTML: a one-stop shop for everything you need to know to write HTML like a pro
Ultimate Guide to CSS: a one-stop shop to start using CSS to make your website wow your visitors

Advanced CSS Topics:

Float: a simplified method for arranging HTML elements to the left, right, or center of a page
Grid: a rigid layout system for arranging content on a page in rows and columns that offers more customization than flexbox
Flexbox: a fluid layout system for arranging content in rows or columns that is simpler to implement than grid but offers less control over contents' positions
Animations: a method for adding flair to your page by animating HTML elements for different motions or visual effects

Learn JavaScript.

HTML and CSS slightly outrank JavaScript in importance since there is no visible web page without them. But JavaScript is crucial on its own. Without it, we would only be able to look at websites; there would be no online banking, social media, food delivery services, and all the other ways we have adapted the internet to meet our needs. JavaScript allows us to implement programming tactics and add whole new layers of interactivity to an otherwise static site.

Learn Git and GitHub.

Git is the most popular version control system in the industry. Version control enables you to branch your code to test out changes while keeping the original code (AKA source code) unchanged until you confirm your changes are good to deploy. Think of it as making a copy of a Word file so you still have the original content if something goes wrong. As your website grows in complexity, version control will become more and more useful.

GitHub is the most popular code repository built around Git. It allows you to back up your code to a cloud-hosted environment the same way you would back up your photos to iCloud or Google Drive. Git and GitHub are also valuable tools to help you collaborate on your code with others without overwriting each other's work.

As you can see, your learning has only just begun, but you now have a solid foundation to better appreciate all that is to come. Stay curious, stay patient, and practice your coding, and you will be amazed how quickly you grow to become a full web developer. In less than three years, I went from knowing basic HTML to writing this tutorial, so never doubt yourself. We can't wait to see what you do next.