Project: Using Bootstrap (v1)

Introduction

In this project, you’ll get a chance to try out Twitter’s Bootstrap framework by building a site that actually uses it — Newsweek.

Assignment

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 and have a look around.

  2. Set up a private Github repository for this project.

  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. Use the examples on that page as templates for how to organize your page.

  6. 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.

  7. Set up the top title and navigation bar.

  8. Work your way down the page by filling in and positioning the additional sections.

  9. Try resizing the browser to see if it mimics the behavior of the real Newsweek homepage.

  10. Push your solution to Github and submit the repo’s URL.

Additional Resources

  • Suggest some in the comments below!
LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

UPDATED: 02.11.2020