Introduction

If you're a beginner eager to dive into web development, creating a simple movie recommendation website using HTML is an excellent starting point. In this comprehensive guide, we'll walk you through the entire process, from setting up your development environment to creating a visually appealing web page that showcases your top movie picks. Don't worry if you're new to coding; we'll explain each step in detail, making it easy to follow along. You can go through my previous article for a run-through of HTML.

Prerequisites

Before we begin, make sure you have the following tools installed on your computer:

Visual Studio Code (VS Code): A beginner-friendly code editor that offers a comfortable environment for web development.
- Download it from: https://code.visualstudio.com/
Live Server Extension: This handy extension allows you to preview your HTML web page in real-time as you make changes.
- Install it from the VS Code Extensions marketplace within VS Code.

Getting Started

Setting Up the HTML Structure

Create a new folder on your computer and name it "movie-recommendations." Open VS Code, and navigate to this folder by selecting "File" -> "Open Folder" and choosing the "movie-recommendations" folder.

Create the HTML File

Right-click inside the folder, and select "New File." Name the file "index.html." This will be our main HTML file.

HTML Skeleton

Let's set up the basic HTML structure for our website.

<!DOCTYPE html>
<html lang="en">
</html>

<!DOCTYPE html>: This declaration defines the document type and version of HTML being used. In this case, it's HTML5.
<html lang="en">: This is the root element of the HTML document. The lang attribute specifies the language of the document, which is set to English in this case.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Favorite Movies</title>
</head>

<head>: This element contains meta-information about the HTML document, such as character encoding, viewport settings, and the page title.
<meta charset="UTF-8">: This meta tag sets the character encoding to UTF-8, which supports a wide range of characters from different languages.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag sets the viewport properties, ensuring the web page adapts well to different screen sizes and devices.
<title>My Favorite Movies</title>: This is the title of the web page, which will be displayed in the browser's title bar or tab.

<body>
   <h1>Top Movies of All Time</h1>
    <h2>My Best Three Movies</h2>
    <hr>

    <!-- Movie List -->
    <!-- Movie: The Shawshank Redemption -->
    <section>
        <h3>The Shawshank Redemption</h3>
        <!-- Movie Descriptions -->
        <p>The Shawshank Redemption is a timeless classic, with a captivating storyline that keeps me hooked every time I watch it.</p>
    </section>

    <!-- Movie: Inception -->
    <section>
        <h3>Inception</h3>
        <!-- Movie Descriptions -->
        <p>Inception's mind-bending plot and stunning visuals make it a must-watch for any movie enthusiast.</p>
    </section>

    <!-- Movie: Forrest Gump -->
    <section>
        <h3>Forrest Gump</h3>
    <!-- Movie Descriptions -->
        <p>Forrest Gump's heartwarming tale of life's unpredictability and Tom Hanks' exceptional performance make it one of my all-time favorites.</p>
    </section>
</body>

<body>: This is the body element, which contains the visible content of the web page.
<h1>My Favorite Movies</h1>: This is a top-level heading (H1) that serves as the main title of the website, displaying "My Favorite Movies."
<h2>Top Picks of the Year</h2>: This is a subheading (H2) indicating "Top Picks of the Year," providing additional context to the user.
<hr>: This is a horizontal rule, a self-closing void element, which creates a horizontal line to visually separate content sections.

Next, we have the movie list and their descriptions:

<section>: This is a semantic element that defines a section within the web page. It is used to group related content, in this case, each movie.
<h3>The Shawshank Redemption</h3>: This is a level 3 heading (H3) displaying the title of the movie, In this case, "The Shawshank Redemption."
<p>: This is a paragraph element, which contains the descriptions of each movie, for the first movie, <p>The Shawshank Redemption is a timeless classic, with a captivating storyline that keeps me hooked every time I watch it.</p>. This paragraph describes why "The Shawshank Redemption" is a favorite movie, highlighting its captivating storyline.
 : is an HTML comment. Comments in HTML are used to add notes or explanations that are not visible on the rendered webpage but can be helpful for developers to understand the purpose or context of certain elements.

Overall, the above groups of HTML code create a simple web page to track favorite movies. It demonstrates the proper usage of HTML elements to structure content, from headings to paragraphs, and incorporates the "section" element for semantic grouping. The resulting website will display the movie titles, and descriptions in a well-organized manner.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Top Movies of All Time</title>
</head>

<body>
    <h1>Top Movies of All Time</h1>
    <h2>My Best Three Movies</h2>
    <hr>

     <!-- Movie List -->
    <!-- Movie: The Shawshank Redemption -->
    <section>
        <h3>The Shawshank Redemption</h3>
        <!-- Movie Descriptions -->
        <p>The Shawshank Redemption is a timeless classic, with a captivating storyline that keeps me hooked every time I watch it.</p>
    </section>

    <!-- Movie: Inception -->
    <section>
        <h3>Inception</h3>
        <!-- Movie Descriptions -->
        <p>Inception's mind-bending plot and stunning visuals make it a must-watch for any movie enthusiast.</p>
    </section>

    <!-- Movie: Forrest Gump -->
    <section>
        <h3>Forrest Gump</h3>
    <!-- Movie Descriptions -->
        <p>Forrest Gump's heartwarming tale of life's unpredictability and Tom Hanks' exceptional performance make it one of my all-time favorites.</p>
    </section>
</body>

</html>

Preview Your Website

To see your movie recommendation website in real-time, right-click anywhere in the HTML file and select "Open with Live Server." A new browser window should open, displaying your movie recommendation page. If done right, it should look like the image below:

Conclusion

Congratulations! You've successfully built your first movie recommendation website using HTML. By following this beginner-friendly guide, you've learned how to set up your development environment, create HTML elements, and customize your web page content. Feel free to add more movies, descriptions, or even poems about your favorite films to make the website truly your own. Keep exploring and honing your HTML skills to embark on more exciting web development projects. Happy coding!

Building Your First Movie Recommendation Website with HTML

A Beginner's Guide

Table of contents