In this project, you'll get a chance to try out Twitter's Bootstrap framework by building a site that actually uses it -- Newsweek.
Note: As usual, ignore any ads, icons, and interactive elements (which use Javascript). If you really want to grab icons, try taking a screenshot of them and making an image file out of that.
1. Go to [newsweek.com](http://www.newsweek.com) and have a look around.
2. Follow the instructions atop the [Google Homepage project](/courses/web-development-101/lessons/html-css) to set up a Github repository for this project (of course you'll need to change the title).
3. Create a new HTML document.
4. Think about all the elements on the page and how they are grouped together.
5. Add Bootstrap to your project by following the instructions at [GetBootstrap.com](http://getbootstrap.com/getting-started/). Use the examples on that page as templates for how to organize your page.
5. Lay out the basic structure of the page using empty semantic HTML elements that are appropriately sized and which are positioned by using the appropriate Bootstrap classes.
6. Set up the top title and navigation bar.
6. Work your way down the page by filling in and positioning the additional sections.
7. Try resizing the browser to see if it mimics the behavior of the real Newsweek homepage.
7. Push your solution to Github.
Submit a link below to this file on The Odin Project's curriculum GitHub repo with your files in it by using a pull request. See the section on Contributing for how.
Show Student Solutions
- Add your solution below this line!
- Bojo's solution - View in Browser
- bcikota's solution - View in Browser
- ARaut9's solution - View in Browser
- Jason McKee's solution - View in Browser
- N00bG1rl's solution - View in browser
- Max Garber's solution - View in Browser
- Chris MacSwan's solution - View in Browser
- Javier Machin's solution - View in Browser
- nmac's solution - Preview
- SarfazAnjum's - View in Browser
- Henry Kirya's - View in Browser
- theghall's solution - View in Browser
- Jonathan Yiv's Solution - View in Browser
- Jmooree30's Solution - View in Browser
- Peter Mester's solution - View in Browser
- Andrew's solution - View in browser
- Flint Mayers' solution' - View in browser
- Marko Nikolajević's solution' - View in browser
- Pawel R's solution - View in browser
- Leonard Labita's solution - View in browser
- Artur Janik's solution - View in browser
- Frank Peelen's solution - View in browser
- AtActionPark's solution - View in browser
- Wayne Ho's solution - View in browswer
- Luke Walker's solution-View in browser
- Miguel Herrera's solution - View in browser
- J-kaizen's solution - View in browser
- Alejandro Corredor's solution - View in browser
- David Chapman's solution (partial content, no JS) - View in browser
- Daunenok's solution - View in browser
- Austin's solution
- Beth Rathbone's solution - View in browser
- husein ghafari's solution - View in browser
- Neil Cudden's solution - View in browser
- Francisco Carlos's solution - View in browser
- aznafro's solution - View in browser
- Areeba's solution - View in browser
- Kelvin Liang's solution - View in browser
- Antonio Marcos's solution - View in browser
- Carlos Del Real's solution - View in Browser
This section contains helpful links to other content. It isn't required, so consider it supplemental for if you need to dive deeper into something.
- Add some!