Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Building a Complete Website with HTML | Advanced HTML
HTML Essentials

book
Building a Complete Website with HTML

We have covered all the essential HTML topics and are now ready to build a complete website from scratch. Let's create a one-page portfolio website to showcase your projects and skills.

You can either work on it independently or follow the guide below, where we will provide you with step-by-step instructions and code related to each step.

Step-by-Step Guide

1. Website structure plan

Our website will comprise several key sections:

  1. Header: This section will prominently display the portfolio owner's name and facilitate navigation throughout the website;

  2. About: Here, visitors will find relevant information about the website owner, providing insights into their background and expertise;

  3. Portfolio: This section will showcase various projects, each featuring project images, titles, descriptions, and the technologies utilized;

  4. Contact: We will incorporate a form to gather visitor information;

  5. Footer: The footer will be the concluding section, featuring copyright information and links to social media profiles, phone contact, and email address.

2. Structure content with semantic HTML

Let's create a new index.html file and set up the basic HTML document structure.

index.html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Julia's Website</title>
<meta charset="UTF-8" />
</head>
<body>
</body>
</html>

3. Header section

Let's build the header with the website owner name and navigation links.

index.html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Julia's Website</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<h1>Julia Botsford</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>

4. About section

Section devoted to the brief introduction and information about owner.

index.html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Julia's Website</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<h1>Julia Botsford</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>
Welcome to my portfolio website. I'm a web developer with a passion for
creating amazing websites.
</p>
</section>
</body>
</html>

5. Portfolio section

In the portfolio section we focus on the projects with descriptions and images.

index.html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Julia's Website</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<h1>Julia Botsford</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>
Welcome to my portfolio website. I'm a web developer with a passion for
creating amazing websites.
</p>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<ul>
<li>
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/392f24ac-0126-4c34-a28a-f2f26d12196b/section-5/techtrack.png"
width="100"
alt="TechTrek App"
/>
<h3>TechTrek App</h3>
<p>Explore Tech Trends</p>
</li>
<li>
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/392f24ac-0126-4c34-a28a-f2f26d12196b/section-5/ecocraft.png"
width="100"
alt="EcoCraft Website"
/>
<h3>EcoCraft Website</h3>
<p>Promote Sustainable Living</p>
</li>
<!-- Add more project entries as needed -->
</ul>
</section>
</body>
</html>

6. Contact section

Let's build the contact form to get in touch with the owner.

index.html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Julia's Website</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<h1>Julia Botsford</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>
Welcome to my portfolio website. I'm a web developer with a passion for
creating amazing websites.
</p>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<ul>
<li>
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/392f24ac-0126-4c34-a28a-f2f26d12196b/section-5/techtrack.png"
width="100"
alt="TechTrek App"
/>
<h3>TechTrek App</h3>
<p>Explore Tech Trends</p>
</li>
<li>
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/392f24ac-0126-4c34-a28a-f2f26d12196b/section-5/ecocraft.png"
width="100"
alt="EcoCraft Website"
/>
<h3>EcoCraft Website</h3>
<p>Promote Sustainable Living</p>
</li>
</ul>
</section>
<section id="contact">
<h2>Contact Me</h2>
<form onsubmit="return false">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<label for="message">Message:</label>
<input type="text" id="message" name="message" required />
<button type="submit">Send</button>
</form>
</section>
</body>
</html>

7. Footer section

Finally, let's add copyright information and links to social media.

index.html

index.html

copy
<!DOCTYPE html>
<html>
<head>
<title>Julia's Website</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<h1>Julia Botsford</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>
Welcome to my portfolio website. I'm a web developer with a passion for
creating amazing websites.
</p>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<ul>
<li>
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/392f24ac-0126-4c34-a28a-f2f26d12196b/section-5/techtrack.png"
width="100"
alt="TechTrek App"
/>
<h3>TechTrek App</h3>
<p>Explore Tech Trends</p>
</li>
<li>
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/392f24ac-0126-4c34-a28a-f2f26d12196b/section-5/ecocraft.png"
width="100"
alt="EcoCraft Website"
/>
<h3>EcoCraft Website</h3>
<p>Promote Sustainable Living</p>
</li>
</ul>
</section>
<section id="contact">
<h2>Contact Me</h2>
<form onsubmit="return false">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<label for="message">Message:</label>
<input type="text" id="message" name="message" required />
<button type="submit">Send</button>
</form>
</section>
<footer>
<p>&copy; 2024 My Portfolio. All Rights Reserved.</p>
<ul>
<li><a href="https://www.linkedin.com/">LinkedIn</a></li>
<li><a href="https://github.com/">GitHub</a></li>
<li><a href="tel:+442038851801">+44 20 3885 1801</a></li>
<li><a href="mailto:julia188@mail.com">julia188@mail.com</a></li>
<!-- Add more social media links as needed -->
</ul>
</footer>
</body>
</html>

Bonus

Let's enhance the appearance of our website not only for search engines but also for users. We can achieve this with the help of CSS, which stands for Cascading Style Sheets. Although we didn't cover CSS in this course, it's an important aspect of website design.

CSS is a style sheet language that allows us to specify the presentation and styling of a document written in a markup language like HTML. It can be the next step after learning HTML — more on this in the next chapter. For now, let's observe how CSS improves HTML.

index.html

index.html

index.css

index.css

copy
<!DOCTYPE html>
<html>
<head>
<title>Julia's Website</title>
<meta charset="UTF-8" />
<!-- Link to the external CSS file -->
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>
<h1>Julia Botsford</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>
Welcome to my portfolio website. I'm a web developer with a passion for
creating amazing websites.
</p>
</section>
<section id="portfolio">
<h2>Portfolio</h2>
<ul>
<li>
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/392f24ac-0126-4c34-a28a-f2f26d12196b/section-5/techtrack.png"
width="100"
alt="TechTrek App"
/>
<h3>TechTrek App</h3>
<p>Explore Tech Trends</p>
</li>
<li>
<img
src="https://codefinity-content-media-v2.s3.eu-west-1.amazonaws.com/courses/392f24ac-0126-4c34-a28a-f2f26d12196b/section-5/ecocraft.png"
width="100"
alt="EcoCraft Website"
/>
<h3>EcoCraft Website</h3>
<p>Promote Sustainable Living</p>
</li>
</ul>
</section>
<section id="contact">
<h2>Contact Me</h2>
<form onsubmit="return false">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<label for="message">Message:</label>
<input type="text" id="message" name="message" required />
<button type="submit">Send</button>
</form>
</section>
<footer>
<p>&copy; 2024 My Portfolio. All Rights Reserved.</p>
<ul>
<li><a href="https://www.linkedin.com/">LinkedIn</a></li>
<li><a href="https://github.com/">GitHub</a></li>
<li><a href="tel:+442038851801">+44 20 3885 1801</a></li>
<li><a href="mailto:julia188@mail.com">julia188@mail.com</a></li>
</ul>
</footer>
</body>
</html>

Video Tutorial

Here is the link to the complete website that was built in this chapter: Julia's Website

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 5. Luku 4

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

We use cookies to make your experience better!
some-alt