Putting All of the Skills Learned in the Course into Practice

Yasin Cakal

Welcome to the final lesson of the “Learn HTML” course! Up to this point, you’ve learned the fundamentals of HTML and have gained the skills needed to create your own web pages and websites. In this lesson, we’ll put all of these skills into practice by building a complete HTML website from scratch.

Before we begin, it’s important to have a clear plan in place. This should include an outline of the content and structure of your website, as well as any design elements you want to include. It’s also a good idea to sketch out a wireframe or create a mockup to visualize the layout of your website.

Example Project Outline

For this example project, we’ll create a simple website for a fictional restaurant called “The Hungry Giraffe.” The website will include information about the restaurant’s menu, location, and hours, as well as a contact form for customers to make reservations.

First, we’ll set up our development environment by installing a text editor and setting up a local server. Then, we’ll create the basic HTML structure of the website, including the <html>, <head>, and <body> elements.

Next, we’ll add content and structure to the website using HTML tags and attributes. This might include headings, paragraphs, lists, and images to provide information about the restaurant and its offerings.

We’ll then use CSS to add style to the website, including colors, fonts, and layout elements to create a visually appealing and cohesive design.

Before publishing the website, we’ll test and debug our code to ensure that everything is functioning properly and looks as intended on different browsers and devices.

Finally, we’ll publish the website using a web hosting service or cloud platform like GitHub Pages.

HTML Code for the Project

Here is an example of the HTML code for the website:

<!DOCTYPE html>
<html>
<head>
	<title>The Hungry Giraffe</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<header>
		<h1>The Hungry Giraffe</h1>
	</header>
	<nav>
		<ul>
			<li><a href="#menu">Menu</a></li>
			<li><a href="#location">Location</a></li>
			<li><a href="#hours">Hours</a></li>
			<li><a href="#contact">Contact</a></li>
		</ul>
	</nav>
	<main>
		<section id="menu">
			<h2>Menu</h2>
			<p>We offer a wide variety of delicious dishes, including sandwiches, salads, and entrees. Check out our full menu below:</p>
			<ul>
				<li>Grilled Cheese Sandwich</li>
				<li>BLT Sandwich</li>
				<li>Grilled Chicken Salad</li>
				<li>Spaghetti Bolognese</li>
			</ul>
		</section>
		<section id="location">
			<h2>Location</h2>
			<p>The Hungry Giraffe is located at 123 Main Street in Anytown, USA. We are open 7 days a week for lunch and dinner.</p>
			<img src="map.jpg" alt="Map of The Hungry Giraffe's location">
		</section>
		<section id="hours">
			<h2>Hours</h2>
			<table>
				<tr>
					<th>Day</th>
					<th>Hours</th>
				</tr>
				<tr>
					<td>Monday</td>
					<td>11:00am - 9:00pm</
		<section id="contact">
			<h2>Contact</h2>
			<p>Need to make a reservation or have a question about our menu? Contact us using the form below:</p>
			<form>
				<label for="name">Name:</label><br>
				<input type="text" id="name" name="name"><br>
				<label for="email">Email:</label><br>
				<input type="text" id="email" name="email"><br>
				<label for="message">Message:</label><br>
				<textarea id="message" name="message"></textarea><br>
				<input type="submit" value="Submit">
			</form> 
		</section>
	</main>
	<footer>
		<p>Copyright 2021 The Hungry Giraffe</p>
	</footer>
</body>
</html>

This is just a basic example of the structure and content that could be included in a complete HTML website for a restaurant. With the skills learned in this course, you can use your creativity and knowledge of HTML to build more complex and customized websites for any purpose.

CSS Code for the Project

To add style to the website using CSS, we can create a separate stylesheet file called “style.css” and link to it in the <head> of our HTML file using the <link> element.

Here is an example of how we could use CSS to style the elements of our website:

body {
	font-family: Arial, sans-serif;
	background-color: #f5f5f5;
	color: #333;
	margin: 0;
	padding: 0;
}

header {
	background-color: #fcba03;
	padding: 20px;
	text-align: center;
}

h1 {
	color: white;
	font-size: 2em;
	margin: 0;
}

nav {
	background-color: #333;
	color: white;
	display: flex;
	justify-content: space-between;
	padding: 20px;
}

nav ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

nav li {
	margin: 0 10px;
}

a {
	color: white;
	text-decoration: none;
}

a:hover {
	color: #fcba03;
}

main {
	margin: 0 auto;
	max-width: 960px;
	padding: 20px;
}

section {
	margin-bottom: 20px;
}

h2 {
	color: #fcba03;
	font-size: 1.5em;
	margin-bottom: 10px;
}

img {
	max-width: 100%;
	height: auto;
}

table {
	border-collapse: collapse;
	width: 100%;
}

th, td {
	border: 1px solid #ccc;
	padding: 8px;
	text-align: left;
}

tr:nth-child(even) {
	background-color: #f2f2f2;
}

form {
	margin-bottom: 20px;
}

label {
	display: block;
	font-size: 1.1em;
	margin-bottom: 5px;
}

input[type="text"], textarea {
	border: 1px solid #ccc;
	font-size: 1em;
	padding: 8px;
	width: 100%;
}

input[type="submit"] {
	background-color: #fcba03;
	border: none;
	color: white;
	cursor: pointer;
	font-size: 1em;
	padding: 10px;
	width: 100%;
}

input[type="submit"]:hover {
	background-color: #e3a800;
}

footer {
	background-color: #333;
	color: white;
	padding: 20px;
	text-align: center;
}

With these styles in place, our website should have a cohesive and visually appealing design.

Wrapping It Up

Before publishing the website, we’ll want to test and debug our code to ensure that everything is functioning properly and looks as intended on different browsers and devices. This can be done by using a variety of tools such as browser developer consoles, online testing platforms, and responsive design testing tools.

We can also use a version control system like Git to track changes to our code and easily roll back any issues that may arise during the testing and debugging process.

Once we are confident that our website is ready to go live, we can publish it using a web hosting service or cloud platform like GitHub Pages. This will make our website accessible to the public via a unique URL.

Before publishing, it’s also a good idea to optimize our website for search engines by including relevant keywords in the content and tags, and by making sure all of our links are working properly.

With these steps complete, our HTML website is ready for the world to see!

Learn HTML

Participants 676