Introduction: The Goal for Part 1

Before we can build complex components like forms or footers, we must first create a solid and reliable foundation for our web page. The goal of this first section is to understand the critical setup steps that every modern, responsive webpage requires.

We will analyze the initial HTML boilerplate, including the document type declaration and the metadata within the <head> tag. We will also examine the very first rules in our CSS file, which are designed to "reset" inconsistent browser defaults and establish a consistent, predictable visual baseline for typography and colors across the entire application.

Our approach is "mobile-first," which means we'll start by styling for the smallest screen and then add complexity for larger screens. This is a best practice that leads to cleaner code and better performance.

The Foundational HTML: `login-page.html` (Head Section)

The first part of our HTML file doesn't contain any visible elements. Instead, it's composed of metadata that provides essential instructions to the browser.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login • Instagram</title>
    <!-- Link to the external CSS file -->
    <link rel="stylesheet" href="styles.css" />
    <!-- Link to Font Awesome for the Facebook icon -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
    />
  </head>

The Foundational CSS: `styles.css` (Resets and Defaults)

The first rules in a stylesheet are typically "resets" or "normalizers." They create a consistent starting point across all browsers, which all have slightly different default styles for elements.

/* General Body and Reset Styles */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  background-color: #fafafa;
  color: #262626;
  margin: 0;
  font-size: 14px;
  line-height: 18px;
}

a {
  text-decoration: none;
  color: #00376b;
}

Live Demonstration (Part 1)

Below is a live render of the code we've discussed in this section. Notice that there are no visible elements yet. However, the foundational styles are active. The page has a light grey background, and if there were any text or links, they would adopt the default font and colors we defined in the CSS. This is our blank canvas.

Introduction: The Goal for Part 2

With our foundational styles in place, we can now build the main structural skeleton of our page. The goal of this section is to understand how the highest-level containers in the HTML work together with CSS Flexbox to create a perfectly centered layout.

We will analyze the <main> element, which acts as our primary layout controller. We will also introduce the two direct children of this container: one for the phone image and one for the form area. Understanding this parent-child structure is key to grasping the responsive strategy, as we will be manipulating these children at different screen sizes.

The Main Structural HTML: `login-page.html` (Body and Main Containers)

This block of HTML represents the highest-level visible structure of our page. It defines the main content area and its immediate children.

<body>
  <main class="main-container">
    <!-- This container holds the phone image, which is only visible on desktop -->
    <div class="phones-container">
      <img
        class="phones-img"
        src="./assets/images/app-demo.png"
        alt="Two phones showing Instagram profiles"
      />
    </div>

    <!-- This container holds all the form-related content (to be documented next) -->
    <!-- ... -->
  </main>
</body>

The Layout CSS: `styles.css` (Main Container and Phone)

These CSS rules directly correspond to the HTML structure we just defined. They use Flexbox to create the centered layout and implement the mobile-first strategy by hiding the phone image by default.

/* Main container for the entire page content */
.main-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  padding: 20px 0;
  box-sizing: border-box;
}

/* Container for the phone image (hidden on mobile/tablet) */
.phones-container {
  display: none; /* Hidden by default */
  margin-right: 32px;
  flex-shrink: 0; /* Prevents the image from shrinking */
}

.phones-img {
  height: 580px;
}

Live Demonstration (Part 2)

Below is a live render of the code we've discussed. To help you visualize the layout, the .phones-container has been made visible for this demo (by overriding display: none with display: block). You can see how the .main-container's Flexbox properties perfectly center the phone image both vertically and horizontally within the available space. This centering behavior is the foundation upon which the rest of our page will be built.

Introduction: The Goal for Part 3

Now that we have our main page container, our goal is to build the primary interactive area of the page. This section focuses on the containers that create the distinct white boxes, or "cards," for logging in, signing up, and getting the app.

We will analyze the form-area-container, which acts as a wrapper for all these boxes. Then, we'll dive into the first and most important box, the login-box. We will examine how it's structured to hold the Instagram logo and the main login form, and how its corresponding CSS creates the visual appearance of a self-contained card.

The Form Area HTML: `login-page.html` (Containers and Logo)

This block of HTML is nested inside the main-container. It defines the wrapper for all form-related content and the structure of the first box, which contains the logo and the form itself.

<!-- This container holds all the form-related content -->
<div class="form-area-container">
  <!-- The main login form box -->
  <div class="form-box login-box">
    <div class="logo-container">
      <img
        class="instagram-logo"
        src="assets/images/Instagram_logo.png"
      />
    </div>

    <form class="login-form">
      <!-- Form inputs will be documented next -->
    </form>

    <!-- ... Rest of the login box content -->
  </div>
  <!-- ... Other form boxes -->
</div>

The Form Area CSS: `styles.css` (Container and Box Styling)

These CSS rules define the layout of the form area and create the visual appearance of the login box card.

/* Container for the form elements */
.form-area-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 350px;
  width: 100%;
}

/* Shared styles for the login and signup boxes */
.form-box {
  background-color: #ffffff;
  text-align: center;
  padding: 10px 0;
  margin-bottom: 10px;
}

.logo-container {
  margin: 22px auto 12px;
}

.logo {
  height: 51px;
  width: 175px;
}

/* Form input and button styling */
.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 40px;
}

Live Demonstration (Part 3)

Below is a live render of the code we've discussed. You can now see the form-area-container, which is constrained to a maximum width of 350px and is centered on the page. Inside it, the white form-box is visible, containing the centered Instagram logo. This structure forms the main card element of our login page, ready for us to add the input fields.

Introduction: The Goal for Part 4

With the main structure of our login card in place, our goal is now to populate it with the essential interactive elements that allow a user to log in. This is the heart of the form's functionality.

In this section, we will dissect the HTML for the username and password input fields, as well as the "Log in" button. We will pay close attention to the attributes used for accessibility and browser behavior. In the CSS, we will analyze how these elements are styled to be visually appealing, user-friendly, and consistent with Instagram's design, including their appearance during user interaction (the :focus state).

The Form Inputs HTML: `login-page.html` (Inputs and Button)

This block of HTML is nested inside the <form class="login-form"> element. It defines the two text fields and the primary submission button.

<div class="input-wrapper">
  <input
    type="text"
    id="username"
    name="username"
    aria-label="Phone number, username, or email"
    placeholder="Phone number, username, or email"
    required
  />
</div>
<div class="input-wrapper">
  <input
    type="password"
    id="password"
    name="password"
    aria-label="Password"
    placeholder="Password"
    required
  />
</div>
<button type="submit" class="login-button">Log in</button>

The Form Inputs CSS: `styles.css` (Input and Button Styling)

These CSS rules give the inputs and button their distinctive Instagram look and feel, including interactive states.

.input-wrapper {
  width: 100%;
  margin-bottom: 6px;
}

.login-form input {
  width: 100%;
  padding: 9px 8px 7px;
  background-color: #fafafa;
  border: 1px solid #dbdbdb;
  border-radius: 3px;
  box-sizing: border-box;
  font-size: 12px;
}

.login-form input:focus {
  outline: none;
  border-color: #a8a8a8;
}

.login-button {
  width: 100%;
  padding: 8px;
  margin: 8px 0;
  background-color: #0095f6;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
}

.login-button:disabled {
  background-color: #b2dffc;
  cursor: default;
}

Live Demonstration (Part 4)

Below is a live render of our progress. The login card now contains the fully styled username and password fields, along with the vibrant blue "Log in" button. You can click into the input fields to see the :focus style in action, where the border becomes slightly darker. This represents the core interactive component of our page.

Introduction: The Goal for Part 5

After establishing the primary login method, modern user interfaces often provide alternative options. The goal of this section is to understand how to create the visual elements that separate the main form from these secondary actions.

We will first dissect the "OR" separator, a common UI pattern that visually divides content sections. We'll focus on the clever use of CSS Flexbox to create the responsive lines on either side of the text. Following that, we will analyze the "Log in with Facebook" button and the "Forgot password?" link, examining how they are structured in HTML and styled with CSS to be clear, accessible, and distinct calls to action.

The Separator and Social Login HTML: `login-page.html`

This block of HTML is located inside the .login-box, immediately following the <form> element. It defines the visual separator and the alternative action links.

<div class="separator">
  <div class="line"></div>
  <div class="or-text">OR</div>
  <div class="line"></div>
</div>

<div class="social-login">
  <button class="facebook-login">
    <i class="fab fa-facebook-square"></i>
    <span>Log in with Facebook</span>
  </button>
</div>

<a href="#" class="forgot-password">Forgot password?</a>

The Separator and Social Login CSS: `styles.css`

These CSS rules are responsible for the clever layout of the "OR" separator and the distinct styling of the social login options.

/* "OR" separator styling */
.separator {
  display: flex;
  align-items: center;
  margin: 10px 40px 18px;
  color: #8e8e8e;
  font-weight: 600;
  font-size: 13px;
}

.line {
  flex-grow: 1;
  height: 1px;
  background-color: #dbdbdb;
}

.or-text {
  margin: 0 18px;
}

/* Social login and other links */
.social-login {
  margin-bottom: 10px;
}

.facebook-login {
  background: none;
  border: none;
  color: #385185;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}

.facebook-login i {
  font-size: 16px;
  margin-right: 8px;
}

.forgot-password {
  font-size: 12px;
  color: #00376b;
  margin-top: 12px;
  display: inline-block;
}

Live Demonstration (Part 5)

Below is a live render of the components discussed. You can see the "OR" separator, which will responsively stretch to fill the width of its container. Below it are the distinctly styled "Log in with Facebook" button and the "Forgot password?" link, providing clear secondary actions for the user.

Introduction: The Goal for Part 6

Beyond the primary login functionality, a successful login page often includes secondary calls to action designed to onboard new users or drive engagement with other platforms. The goal of this section is to analyze these crucial marketing and user-acquisition components.

We will dissect the "Sign up" box, which provides a clear pathway for new users. We'll focus on how it reuses existing CSS classes for consistency. We will then examine the "Get the app" section, analyzing how it presents download links for mobile app stores and how Flexbox is used to create a clean, centered layout for the store badges.

The Secondary Actions HTML: `login-page.html`

This block of HTML is located inside the .form-area-container, immediately following the main .login-box. It defines the next two visual blocks in our vertical column.

<!-- The box for signing up -->
<div class="form-box signup-box">
  <p>
    Don't have an account? <a href="#" class="signup-link">Sign up</a>
  </p>
</div>

<!-- The section for app download links -->
<div class="get-the-app">
  <p>Get the app.</p>
  <div class="app-store-links">
    <a href="#">
      <img
        src="https://static.cdninstagram.com/rsrc.php/v3/yz/r/c5Rp7Ym-Klz.png"
        alt="Download on the App Store"
      />
    </a>
    <a href="#">
      <img
        src="https://static.cdninstagram.com/rsrc.php/v3/yu/r/EHY6QnZYdNX.png"
        alt="Get it on Google Play"
      />
    </a>
  </div>
</div>

The Secondary Actions CSS: `styles.css`

These CSS rules style the signup link and create the centered layout for the app store badges.

/* Signup box styling */
.signup-box p {
  margin: 15px;
}

.signup-link {
  font-weight: 600;
  color: #0095f6;
}

/* "Get the app" section styling */
.get-the-app {
  text-align: center;
}

.get-the-app p {
  margin: 20px 0;
}

.app-store-links {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.app-store-links img {
  height: 40px;
}

Live Demonstration (Part 6)

Below is a live render of the components discussed in this section. You can see the "Sign up" box, which is visually consistent with the login box from previous sections. Below that is the "Get the app" section, featuring the centered app store badges with a clean gap between them.

Introduction: The Goal for Part 7

While the main content of a page gets the most attention, a well-structured footer is essential for providing users with important secondary navigation, legal information, and other resources. The goal of this section is to understand how to build a clean, multi-part, and responsive footer.

We will dissect the HTML structure of the entire <footer> element, including the container for the main list of links and the separate container for the language selector and copyright notice. In the CSS, we will focus on how Flexbox is used with the flex-wrap property to allow the list of links to adapt gracefully to different screen sizes, preventing overflow and maintaining readability.

The Footer HTML: `login-page.html`

This block of HTML is the last major element in the <body>. It defines the entire footer section of the page.

<footer class="page-footer">
  <div class="footer-container">
    <div class="footer-links">
      <a href="#">Meta</a>
      <a href="#">About</a>
      <a href="#">Blog</a>
      <a href="#">Jobs</a>
      <a href="#">Help</a>
      <a href="#">API</a>
      <a href="#">Privacy</a>
      <a href="#">Terms</a>
      <a href="#">Locations</a>
      <a href="#">Instagram Lite</a>
      <a href="#">Threads</a>
      <a href="#">Contact Uploading & Non-Users</a>
      <a href="#">Meta Verified</a>
    </div>
    <div class="footer-bottom">
      <div class="language-select">
        <span>English</span>
        <i class="fas fa-chevron-down"></i>
      </div>
      <div class="copyright">&copy; 2024 Instagram from Meta</div>
    </div>
  </div>
</footer>

The Footer CSS: `styles.css`

These CSS rules handle the layout and appearance of the footer, with a key focus on the responsive behavior of the link list.

/* Footer styling */
.page-footer {
  padding: 0 16px;
  text-align: center;
  color: #8e8e8e;
  font-size: 12px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  margin-bottom: 12px;
}

.footer-links a {
  color: #8e8e8e;
}

.footer-bottom {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 52px;
}

.language-select {
  cursor: pointer;
}

.language-select i {
  font-size: 10px;
  margin-left: 4px;
}

Live Demonstration (Part 7)

Below is a live render of the complete footer component. Try resizing the window or the preview pane. You will see the list of links automatically "wrap" onto multiple lines as the available width decreases. This is the power of the flex-wrap: wrap property in action, creating a fully responsive component with very little code.

Introduction: The Goal for Part 8

Up to this point, all our styles have been "mobile-first," meaning they apply to all screen sizes. Now, we introduce our first responsive change. The goal of this section is to understand how to use a CSS media query to apply specific styles only when the screen reaches a certain minimum width, effectively creating a distinct "tablet" layout.

We will analyze the @media (min-width: 450px) rule, which acts as a conditional wrapper for our tablet styles. The key visual change we'll implement is adding a border to the form "cards," making them stand out against the page background, which is more appropriate for larger screens. We'll also examine how spacing and positioning are adjusted to better suit a wider viewport.

The HTML: No Changes Needed

For this part of our documentation, there are no changes to the login-page.html file. This is a critical concept to understand: media queries do not change the HTML structure. Instead, they selectively apply different CSS rules to the *existing* HTML based on the viewport's characteristics. Our well-structured HTML from the previous parts is already prepared to handle these new styles.

The Tablet CSS: `styles.css` (The First Media Query)

This block of CSS is our first foray into responsive design. The @media rule tells the browser to only apply the styles inside it if the viewport width is 450 pixels or greater.

/* -------------------- MEDIA QUERIES -------------------- */

/* Tablet Styles (and above) */
@media (min-width: 450px) {
  body {
    background-color: #fafafa; /* Ensures background is consistent */
  }

  .main-container {
    padding: 40px; /* Add some padding */
  }

  .form-box {
    border: 1px solid #dbdbdb;
    border-radius: 1px;
  }

  .form-area-container {
    /* On tablet, the form area is centered horizontally */
    margin: 0 auto;
  }

  .footer-container {
    position: absolute;
    bottom: -140px;
  }

  .page-footer {
    width: 100%;
    position: relative;
    padding-bottom: 20px;
  }
}

Live Demonstration (Part 8)

Below is a live render of our page with the tablet media query applied. The preview pane is resizable. Drag its right edge to change the width.

• When the width is less than 450px, you will see the mobile layout: no borders on the white boxes.
• When you drag the width to be greater than 450px, you will see the media query activate in real-time. A thin border will appear around the form and signup boxes, creating the "card" effect for the tablet layout.

Introduction: The Goal for Part 9

This is the final and most dramatic step in our responsive journey. The goal of this section is to understand how the second media query, targeting desktop screens, transforms our single-column layout into the iconic two-column Instagram login page.

We will analyze the @media (min-width: 875px) rule. The primary focus will be on the single most important line of code in our responsive strategy: the rule that changes the display property of the phone container from none to block. We'll explore in detail how this "magic switch" interacts with our existing Flexbox setup to bring the hidden phone image into view and create the final desktop design. We will also cover the minor layout adjustments that polish this final view.

The HTML: No Changes Needed

Once again, no changes are needed for the login-page.html file. The power of our mobile-first approach and well-structured HTML is that the same document structure can support all three layouts (mobile, tablet, and desktop) without any modification. The transformation is handled entirely by the CSS.

The Desktop CSS: `styles.css` (The Final Media Query)

This block of CSS activates only on screens 875px or wider. It contains the rules that override our mobile and tablet styles to create the final desktop layout.

/* Desktop Styles */
@media (min-width: 875px) {
  .main-container {
    /* Re-center content for two-column layout */
    justify-content: center;
    align-items: center;
    min-height: 90vh;
    padding-top: 20px; /* Reset padding */
  }

  .phones-container {
    display: block; /* Show the phone image */
  }

  .form-area-container {
    margin: 0; /* Reset margin */
  }

  .footer-container {
    position: static;
  }

  .page-footer {
    max-width: 935px;
    margin: 0 auto;
  }
}

Live Demonstration (Part 9)

Below is a live render of the complete, fully responsive page. The preview pane is resizable. Drag its right edge to see all three layouts in action.

• Less than 450px: The mobile layout.
• Between 450px and 874px: The tablet layout with bordered cards.
• Greater than 875px: The desktop layout. You will see the phone image appear on the left, creating the final two-column design. This demonstrates the power of our completed mobile-first responsive strategy.