Module 1: Introduction and Documentation
What Will Be Done
In this guide, we will recreate a simplified version of the Netflix homepage using HTML and CSS. This process includes:
- Setting up the basic HTML structure.
- Applying CSS styles to achieve a similar look and feel to Netflix.
- Utilizing free external image sources for placeholders.
Documentation
- HTML Structure: We will create a header, a hero section, and several content sections to mimic the layout of the Netflix homepage.
- CSS Styling: We will apply styles to achieve a Netflix-like theme, including fonts, colors, and layout.
- External Images: We will use placeholders from free image sources such as Unsplash or Pexels.
Module 2: HTML Code
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Below is the HTML code to set up the structure of our simplified Netflix homepage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Netflix Clone</title>
<link rel="stylesheet" href="styles.css"> <!-- Link to external CSS file -->
</head>
<body>
<!-- Header section -->
<header>
<div class="logo">
<img src="https://via.placeholder.com/150x50" alt="Netflix Logo"> <!-- Placeholder for logo -->
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">TV Shows</a></li>
<li><a href="#">Movies</a></li>
<li><a href="#">New & Popular</a></li>
<li><a href="#">My List</a></li>
</ul>
</nav>
<div class="sign-in">
<a href="#">Sign In</a> <!-- Sign in link -->
</div>
</header>
<!-- Hero section -->
<section class="hero">
<img src="https://via.placeholder.com/1200x400" alt="Hero Image"> <!-- Placeholder for hero image -->
<div class="hero-text">
<h1>Unlimited movies, TV shows, and more.</h1> <!-- Hero title -->
<p>Watch anywhere. Cancel anytime.</p> <!-- Hero subtitle -->
<a href="#" class="cta">Get Started</a> <!-- Call to action button -->
</div>
</section>
<!-- Content section -->
<section class="content">
<h2>Popular on Netflix</h2> <!-- Content title -->
<div class="gallery">
<img src="https://via.placeholder.com/300x200" alt="Popular Show 1"> <!-- Placeholder for popular show -->
<img src="https://via.placeholder.com/300x200" alt="Popular Show 2"> <!-- Placeholder for popular show -->
<img src="https://via.placeholder.com/300x200" alt="Popular Show 3"> <!-- Placeholder for popular show -->
<img src="https://via.placeholder.com/300x200" alt="Popular Show 4"> <!-- Placeholder for popular show -->
</div>
</section>
<!-- Footer section -->
<footer>
<p>© 2024 Netflix, Inc.</p> <!-- Footer text -->
</footer>
</body>
</html>
Explanation:
- The HTML document starts with the
<!DOCTYPE html>declaration, defining the document type. - The
<head>section includes meta tags for character set and viewport settings, a title, and a link to the external CSS file. - The
<body>section is structured into the header, hero, content, and footer sections, each with its own HTML elements and placeholders for images.
Module 3: CSS
Here is the CSS code to style the HTML structure and give it a Netflix-like appearance:
/* styles.css */
/* Basic page styling */
body {
font-family: Arial, sans-serif; /* Sets font for the page */
margin: 0; /* Removes default margin */
background-color: #141414; /* Sets background color */
color: #ffffff; /* Sets text color */
}
/* Header styling */
header {
display: flex; /* Uses flexbox for layout */
justify-content: space-between; /* Distributes space evenly */
align-items: center; /* Aligns items vertically */
padding: 20px; /* Adds padding */
background-color: #141414; /* Sets background color */
}
header .logo img {
height: 50px; /* Sets logo height */
}
header nav ul {
list-style: none; /* Removes bullet points */
display: flex; /* Uses flexbox for layout */
gap: 20px; /* Adds space between items */
}
header nav ul li a {
color: #ffffff; /* Sets text color */
text-decoration: none; /* Removes underline */
}
header .sign-in a {
color: #e50914; /* Sets text color */
text-decoration: none; /* Removes underline */
font-weight: bold; /* Makes text bold */
}
/* Hero section styling */
.hero {
position: relative; /* Allows absolute positioning */
text-align: center; /* Centers text */
}
.hero img {
width: 100%; /* Sets image width */
height: auto; /* Maintains aspect ratio */
}
.hero .hero-text {
position: absolute; /* Positions text over image */
top: 50%; /* Centers text vertically */
left: 50%; /* Centers text horizontally */
transform: translate(-50%, -50%); /* Corrects centering */
}
.hero .hero-text h1 {
font-size: 3rem; /* Sets font size */
margin: 0; /* Removes default margin */
}
.hero .hero-text p {
font-size: 1.5rem; /* Sets font size */
}
.hero .cta {
display: inline-block; /* Makes element inline-block */
margin-top: 20px; /* Adds top margin */
padding: 10px 20px; /* Adds padding */
background-color: #e50914; /* Sets background color */
color: #ffffff; /* Sets text color */
text-decoration: none; /* Removes underline */
font-size: 1.2rem; /* Sets font size */
border-radius: 5px; /* Rounds corners */
}
/* Content section styling */
.content {
padding: 20px; /* Adds padding */
}
.content h2 {
font-size: 2rem; /* Sets font size */
}
.gallery {
display: flex; /* Uses flexbox for layout */
gap: 20px; /* Adds space between items */
}
.gallery img {
width: 300px; /* Sets image width */
height: 200px; /* Sets image height */
object-fit: cover; /* Maintains aspect ratio */
border-radius: 10px; /* Rounds corners */
}
/* Footer styling */
footer {
text-align: center; /* Centers text */
padding: 20px; /* Adds padding */
background-color: #141414; /* Sets background color */
}
Explanation:
- Basic page styles are defined for the body, including font, margins, background color, and text color.
- The header is styled using flexbox for layout, with specific styles for the logo, navigation links, and sign-in link.
- The hero section includes styles for positioning and centering the text over the hero image.
- Content section styles include padding and styles for the gallery images.
- The footer is centered and styled with padding and a background color.
In this article, we provided a basic guide on how to recreate a simplified version of the Netflix homepage using HTML and CSS. By following these steps, you can practice your front-end development skills and understand how to structure and style a modern web page. Feel free to expand on this foundation by adding more features and improving the design.
