rloterh / newsweekclone

The NewsWeek Clone - Using Bootstrap (Microverse HTML/ CSS Module)

Description

The rubric of this project is to demonstrate the use of Twitter Booststrap and media queries to design fully responsive (adapting to different device screen sizes) web pages. The News Week is the model for this project. The specification for this project is a part of The Odin Project.

Library Directory 📙

Contents
Live Demo
App Screenshot
Built With
Getting Started
Testing
Authors
License

Live Demo

NewsWeekClone live demo

App Screenshot

Built With

• HTML
• CSS
• Bootstrap v4.5

Getting Started

1. • Copy the git link https://github.com/rloterh/NewsWeekClone.git of this project
2. • In your terminal run the command git clone https://github.com/rloterh/NewsWeekClone.git
3. • Navigate to the cloned project directory
4. • Within the project root directory launch index.html in a web browser

Testing

This project was tested using W3C Validator and Stylelint

Validating HTML Syntax

1. • Go to The W3C Markup Validation Service
2. • Upload the file named index.html from the project directory
3. • Click on the check button to validate
4. • All test cases should pass, when no error message is shown

Validating CSS Syntax

1. • Run the command npm -v to ensure node package manager is installed
2. • Go to npmjs.com to install node package manager, if not installed
3. • Go to the terminal, and navigate to project directory
4. • Run the command npm install
5. • Validate the css syntax and code standard by running the command npx stylelint "**/*.{css,scss}"
6. • All test cases passes, when no error message is shown in the terminal

Authors

👨‍💻 Robert Loterh

👨‍💻 Ershadul Hakim Rayhan

🤝 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

• Twitter Bootstrap
• The Next Web
• The Odin Project
• Microverse

License

newsweekclone's Issues

Peer to peer code review by team 125 The Elmos

There is some room for improvement in the project.

• Add a dot to image src. i.e. src="./image/filename.png" . This will solve all the issues with image processing.

• Open a pull request at the beginning of your work in the project. This will help you to reduce your time fixing linter errors.

• Order the top story section at the top of the mobile view.

• Use builtin bootstrap classes wherever you can in this project.

• Use links for clickable elements. e.g. images, titles.