layzrd / thenextweb

The https://thenextweb.com home page replica project for sharpening our skills in responsive web development

TheNextWeb

The NewNextWeb.com website home page replica based on TheNextWeb.com

BigScreen View

MediumScreen View

MediumSmall View

This web page is developed by HTML5 and CSS only, without using any framework or library.

Built With

• HTML5
• CSS
• Stylelint and stickler for linting purpose
• html-validator-cli for validate HTML

Live Demo

• Live Preview

Getting Started

Install on Your Own Machine. You can skip the linter and HTML validetors setup if you don't want to validate the code

Setup your machine setup

Prerequisites

All the prerequisites are optional

• Git
• HTML validator
• CSS Linters

Setup

• Follow the link below to install git.

  download git

• Follow the link below to setup HTML validator.

  Setup HTML validator

• Follow the link below to setup linter.

  Setup CSS Linter to check code errors

• Clone the repository

  to clone the repository simply run the code below on your computer termial git clone https://github.com/abredi/thenextweb.git

Install

Optional Go to the project directory on your terminal and run npm install to install the HTML validator and CSS linters

Usage

Go to the project directory and run open the index.html file on your browser.

Authors

👤 Abdulaziz Ali

• Github: @abredi
• Twitter: @rediabdulaziz
• Linkedin: linkedin

👤 Adan Fernandez Bonilla

• Github: @balerum03
• Twitter: @balerum03
• Linkedin: linkedin

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

• [Thanks Microverse][https://github.com/microverseinc]

📝 License

This project is MIT licensed.

thenextweb's Issues

Morning session

Congratulations for your great work and team collaboration!
You did a good job but we found some issues that you can fix to improve your website:

-You can use justify-content to align the icons for the medium screen.
-You should add some images to make your website attractive.
-Some boxes are not aligned and have too much space between when the size of the screen changes, you can use percentages widths and fixed units for max-width property.
-The images in the latest-funding section should have fixed units instead of em units.
-You can join short CSS files.