Sarah DyeWhen I ended the Skillcrush 101 series a few years ago, I showed you how to build a couple of projects with HTML & CSS. I walked you through the steps of taking a design comp and translating it into a website. Both of these projects were web pages.
While one web page site will work well if you are just starting, websites today are made of multiple pages. So this lesson is something you'll be using in the future to make websites. Today I'm heading back to Skillcrush 101.
It has been a while since I've written all the posts on the Skillcrush 101 lessons but I'm returning to this series to cover the latest addition to the course. Skillcrush constantly updating its courses and a new section was added to Skillcrush 101 since I wrapped up all the lessons. The new section is about adding more pages to a website.
In this post, I'll review the ways you can add another web page to a website. I'll show you the structure Skillcrush recommends students use to add pages to a website as we add two new pages to a basic website.
Today's Challenge
Skillcrush challenges their students to add a new web page to their sites. In this post, I'm going to take a basic web page and add another page to the website. You can follow along with this guide to creating the project. If you need any help setting up your project, you can also use the Workspace Setup page in the navigation to help you.
Creating A Simple Web Page Site
First, open your text editor and add my boilerplate code. Inside your head tag, add a title tag with the name of your site. Underneath the title tag, add a link tag with a link to your style sheet.
Now let's turn to the body tag. Let's start by creating a simple navigation menu. First, add nav tags underneath your opening body tag.
Inside the nav tags, add a set of ul tags with three sets of li tags inside. In each li tag, add a link tag with a href attribute. Keep the href attribute empty for now because we'll be filling in the links later on his this challenge.
Between the opening and closing link tags put in your page names. I'll be using Home, About, and Work for my page names so it will be easier to follow with this guide. Once your navigation is complete, let's add some tags to your page.
Next, I'm going to add main tags underneath the closing nav tag. In between your main tags, you will need to add the following tags. Feel free to use any text and links you'd like for these tags.
- h1
- p
- image
Finally, I'm going to add some text and an image to this page. Underneath the closing nav tag, I'm going to add main tags. Inside the main tags, I'm going to add h1 tags with some text.
Underneath the h1 tags, I put some p tags. The last thing I'm adding to this page is an image. I use an image tag with the src set to a link to any picture I want.
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Work</a>
</li>
</ul>
</nav>
<main>
<h1>This is the home page of my website!</h1>
<p>This file is in my root folder.</p>
<img src="https://m.media-amazon.com/images/M/MV5BYjRlODA0NTEtYmM1YS00NGUzLWFiZjktZmE5YWUzOGU0NmZmXkEyXkFqcGdeQXVyNDcwNjMzMTY@._V1_.jpg" alt="Live action Mulan">
</main>
Save your code file when you are done. In this tutorial, I'm going to save my project as landing.html in my root folder.
Creating the Style Sheet
Let's create a brand new file for our style sheet. Inside your text editor, create a new file. Inside this new file, you can add as many CSS styles as you like.
I'm going to keep things relatively simple for this website and just add a little bit of CSS to the navigation. Below is the code I'm going to add to my style sheet.
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 1px;
}
This code will allow my list items to be side by side with a little bit of space in between them. Your website should look like this.
Creating the Work Page
Now that we have a one-page website, it is time to start adding the pages. I'm going to start with the work page. Create another new file in your text editor.
Copy-paste your boilerplate code into your new file. Inside the head tag, copy your code from the head tag in the landing.html file and paste it into your new file. Change the text in your title tag name to your brand new page.
Now let's copy your code inside your body tags on your landing.html file. Paste this code in between the body tags of your new code file. Change your text to your h1, p, and img tags if you like.
Once you are satisfied with your code, save this code file as work.html in your root folder. If you would like to double-check your code, I've provided my code below for the work page.
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Work</a>
</li>
</ul>
</nav>
<main>
<h1>This is the home page of my website!</h1>
<p>This file is in my root folder.</p>
<img src="https://m.media-amazon.com/images/M/MV5BY2U4OTQ5NzMtMWI5NC00YzM4LWIwZWUtYWJjMWRhYzU5NjU0XkEyXkFqcGdeQXVyNDcwNjMzMTY@._V1_.jpg" alt="Live action Xian Lang">
</main>
Creating the About Page
Staying organized is very important when it comes to coding so file structure is something all developers need to pay attention to as they add more pages to a site. There are a few ways of doing it other than the method I used for the work.html file. However, Skillcrush encourages students to use a better method so the link will look like www.example.com/pagename.
First, create a brand new folder inside your project folder. Name this folder about since this is where all our files for the about page will live. Make sure your files and folders are lowercase.
Now open your text editor. Before you start adding code to your new code file, save your new code file so it is your new about folder. Click File then Save As. Save your file inside the about folder as index.html.
Now we are ready to start adding the code.
Paste your boilerplate code inside your new index.html file. Change the title tag text. Copy your code inside the body tags of your work page and paste it inside the index.html file.
Change the text for your tags and your link for your image tag. Once you are satisfied with your code, save your code. You might test your website in your browser at this point and see that your styles aren't appearing on your website.
When it comes to the style sheet, you will need to change up your link to your style sheet. The about and css folders are in different places in the project folder. If I opened my about file in the browser, none of my styles would appear on the site. So when the computer is trying to run my site, it can't find the file.
The style sheet links you are using for your landing and work pages are examples of relative links.
Relative links are links that tell the computer to look for files within the same folder as the file you are currently in. So the links in these files tell the computer the style sheet is in the css folder within the main root project directory. Since the index.html file is in a different folder from the css folder, the computer needs to go back to the main project directory to look for the css folder.
To do this, you need to change the link in your about page's index.html file to the link below. The two dots and the slash tell the computer to go back to one directory first then look for the css folder to find the style sheet. Save your code file then open your about page in your browser.
Your styles should now appear on your site. You can also see this same link in the image below of my code for the about page.
<link href="../css/main.css" rel="stylesheet" type="text/css">
Filling in Website Navigation
The last thing we need to do is fill in the navigation links for each page. Go back to your landing page. You are going to now fill in the href attributes for all the link tags in all your pages.
The links you will use for the landing and work pages will be very similar. These files are in the root directory of the project folder so we will be using relative links. The code below is what your href attributes will look like in both your landing and work files.
<ul>
<li><a href="landing.html">Home</a></li>
<li><a href="about/index.html">About</a></li>
<li><a href="work.html">Work</a></li>
</ul>
Now it is time to update the links for the about page. Remember the about.html is in a different place from the landing and work files. So you will need to use the dots and dash to tell the computer where to find your files.
Your navigation code for the index.html file should look like this below. Save all your web page files. Now, double-check and validate all your web pages in your browser to make sure all your navigation links work.
<ul>
<li><a href="../landing.html">Home</a></li>
<li><a href="index.html">About</a></li>
<li><a href="../work.html">Work</a></li>
</ul>
You will not only want to click the links but type out the full links to see if everything is working correctly. When you check the about page, make sure you use the full link about/index.html to see it in your browser. On web servers, you will be able to find the new page by just writing about. But when we are working locally on a website, you need to write the name of your file to see it in your browser.
Conclusion
Congratulations! You have just created a website with multiple pages and learned about two ways to add pages to a website. Now you can add as many pages as you would like to a website.
If you like, you can even log into your FTP and upload all your code files so your site is live on the web. Which method do you like? Share your thoughts on these methods in the comments. If you have been adding pages to your website, feel free to share links to your website.
This post was originally published on February 29, 2020 on the blog BritishPandaChick Codes. I made minor changes to the original post to work here on DEV.
