Day 8 - Session 1:Cloning the Facebook Login Page

#webdev #css #html #programming

Hello Readers!!

Welcome back to my daily front-end development journey!!

In this session, we learned how to build a Facebook login page clone using basic to intermediate HTML and CSS concepts.

Concepts Covered:

1.CSS Grid:

We used CSS Grid to create a structured layout. It helped in aligning sections like login form and background image side-by-side, just like Facebook’s actual layout.

2.Box Model:

Understanding the box model was essential. We explored how margin, border, padding, and content work together to control spacing and alignment.

3.Footer Section:

We designed the footer similar to Facebook, including multiple links, proper spacing, and font sizes. We learned how to keep it fixed at the bottom or let it adapt with the content.

4.Media Queries:

The most useful part was making the layout responsive using media queries. This ensures the design looks perfect on mobile devices, tablets, and desktops.

@media (max-width: 768px) {
      .container{
        display: block;
        height: fit-content;

      }
      .left-box h1 {
        font-size: 36px;
      }

      .left-box p {
        font-size: 18px;
      }

      .login-box input,
      .login-box button {
        font-size: 14px;
        padding: 10px;
      }

      footer .language,
      footer .link {
        flex-wrap: wrap;
        font-size: 12px;
      }

      footer p {
        width: 90%;
      }
      footer .meta{
        text-align: center;
      }
      footer .language{
        text-align: center;
      }
    }

Final Output:

Google Clone Page Completed!!

Apart from the Facebook clone, I also completed my Google homepage clone project which I started yesterday.

Today, I worked mainly on:

Finishing the footer section
Adding responsive styles
Adjusting alignment and spacing with flexbox and grid

Now the Google clone page looks more polished and close to the original layout.

media_query

@media (max-width: 768px) {
            header nav ul {
                justify-content: space-between;
                padding: 0 10px;
                gap: 10px;
            }

            .main-layout img {
                width: 200px;
                height: auto;
            }

            .main-layout .search-box {
                flex-wrap: wrap;
                gap: 10px;
                padding: 10px 15px;
            }

            .main-layout .search-box input {
                width: 100%;
            }

            .main-layout .search {
                flex-direction: column;
                gap: 10px;
                align-items: center;
            }

            footer .link {
                flex-direction: column;
                gap: 15px;
                align-items: center;
            }
        }