Responsive-Design

Objective: Analize and make a clone of the-next-web page, using responsive design identifying the breakpoints for devices transition and responsive behavior.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

• About the Project
  • Built With
• Usage
• Roadmap
• Contact
• Acknowledgements

About The Project

(Click in the image to see our static version of the webpage https://thenextweb.com/)

Skills to use and requirements:

Identify the breakpoint points used in the original page, align elements with float or flex and grids, use background images, gradients and elements positioning.

MUST: use of linterns, follow CSS best practices, use of CSS Reset, use W3c validation services, use Github flow guidelines to collaborate, double check devices compatibility.

Built With

The project was developed using the following technologies:

• HTML
• CSS
• JAVASCRIPT

Usage

• Click on the image at the top to see our static version or on the following link
• You can resize the window to see the responsive behaviors for 3 different screen sizes
• You can hover the mouse over the different items as links and images to see the different effects

Here is an example of the size seen in mobile version:

Roadmap

See the open issues for a list of proposed features (and known issues).

Contact

Project Link: https://github.com/kitpao/Responsive-Design

Kitzia Paola Vidal Marroquin - Github user: kitpao

[email protected]   | Portfolio   | LinkedIn   | Twitter

Leonardo Mezu - Github user: leonmezu1

[email protected]   | Portfolio   | LinkedIn   | Twitter

Acknowledgements

• Microverse curriculum Html & CSS section
• The Odin project: Building with responsive design