mekinus / newsweek-clone

NEWSWEEK CLONE PROJECT

About the project

This project is part of the HTML and CSS module of Microverse technical curriculum, the objective of this web-page is to clone some main specs of the News Week home page.

Built With

• HTML5
• CSS3
• Bootstrap

Installation

1. Clone the repo

git clone https://github.com/mekinus/newsweek-clone/

Usage

It's just a static website displaying my version for the Newsweek home page.

Roadmap

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

Contributing

Contributions are very welcome, and any issues you have, you can open an issue in the remote repository.

1. Fork the Project
2. Create your Feature Branch (git checkout -b developer/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin developer/AmazingFeature)
5. Open a Pull Request

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Leonardo Couto - @Leonard83911553 - [email protected]

Live preview - (https://mekinus.github.io/newsweek-clone/)

Reference site used

Newsweek - (https://www.newsweek.com/)

newsweek-clone's Issues

Peer-to-peer Code Review

Hello, @mekinus (Leonardo Rocha Couto). I would like to provide some insight that might help you get this project approved, so I have opened this issue with my review of your code.

• There are things that can be easily fixed. If you wrap the navigator header of the website (line 15 to line 40) in a div that uses the bootstrap classes d-none (display: none) and d-lg-block (> 1024px, then display: block), you'll hide what needs to be hidden on screens that are smaller than the large profile.

14: <div class="d-none d-lg-block">
15: <div class="jumbotron d-flex justify-content-around header bg-orange p-3 mb-1">
...
40: </nav>
41: </div>

Second, remember to abide to bootstrap rules. The twelve-column bootstrap grid should have this hierarchy: container -> row -> column. You must not place container neither container-fluid inside elements of class col-* or col-*-*, because those containers might overflow the columns and break the layout. You are doing that at lines 47, 54, 61...
Reference link: Bootstrap layout grid

You are using container-fluid everywhere (which is an invitation for breaking the layout). If you use only one container for the whole page, all of the layout breaks will be gone.

You can have a look at my own project, if you want to. I have only used one container-fluid for the entire page. Only one.
Newsweek Clone

I can share more insight with you, if you want to. Contact me if you want to have a more lengthy conversation with me.