search

TusharKesarwani / Front-End-Projects

This is a Repository where different types of Front - End Projects are present. If you have any front end project then you can contribute to this open source repository.
https://frontendprojects.netlify.app/
MIT License
408 stars 577 forks source link

Adding LinkedIn Landing Home page Clone using HTML and CSS only! #1294

Closed Maheshmali1 closed 1 year ago

Maheshmali1 commented 1 year ago

Description:

LinkedIn Landing Home page Clone using HTML and CSS only!

This project aims to create a LinkedIn clone landing home page using only HTML and CSS. The goal is to replicate the design and layout of the original LinkedIn landing page, providing a similar user experience while using front-end technologies exclusively.

Workflow Steps:

  1. Analysis:

    • Carefully examine the LinkedIn landing home page, noting its overall structure, layout, and design elements.
    • Identify the different components, such as the navigation bar, hero section, features section, and footer.

  2. HTML Structure:

    • Create the basic HTML structure for the landing home page, including the appropriate tags and semantic elements.
    • Start by setting up the overall layout using container elements like <div> or HTML5 semantic elements like <header>, <main>, and <footer>.

  3. Navigation Bar:

    • Implement the navigation bar at the top of the page, ensuring it includes the LinkedIn logo, search bar, and navigation links.
    • Style the navigation bar using CSS to match the design of the original LinkedIn page.

  4. Hero Section:

    • Design and implement the hero section, which typically includes a prominent image or video and a compelling headline.
    • Structure the hero section using appropriate HTML elements and apply CSS styles to achieve the desired appearance.

  5. Features Section:

    • Create the features section, showcasing key features of the LinkedIn platform.
    • Use HTML to structure the content and CSS to style it accordingly, ensuring it aligns with the original LinkedIn design.

  6. Footer:

    • Develop the footer section, which typically contains links to important pages, legal information, and social media icons.
    • Use HTML and CSS to create the footer structure and style it to match the LinkedIn design.

  7. Responsive Design:

    • Ensure that the clone is responsive and displays properly on different screen sizes and devices.
    • Utilize CSS media queries and responsive design techniques to adapt the layout and optimize the user experience.

  8. Documentation:

    • Document the development process, including any challenges faced and solutions implemented.
    • Provide clear instructions on how to run the code and view the LinkedIn clone locally.

By following these workflow steps, I aim to successfully recreate the LinkedIn landing home page using HTML and CSS only, showcasing my proficiency in front-end web development.

Issue Type:

Additional context

@TusharKesarwani @zugzwang03 @harshit-paneri Please review it and assign it to me under SSoC23. This will be my first contribution in the open source. Thanks.

Screenshots

At end It will look like this : image

Maheshmali1 commented 1 year ago

Thanks. I have started working soon after completion I will raise PR.