Skip to main content

✏️ Optional Practice: Recreate a Site with Bootstrap

Goal: Practice everything we've learned so far by re-creating a real website using block and inline HTML elements, custom CSS, and Bootstrap. Keep an eye out for correct indentation, and descriptive Git commit messages in the correct tense.

Warm Up​

  • What is the difference between a CSS class and id? When do we use one over another?
  • How do we ensure our stylesheet takes precedence over Bootstrap's? Where does this occur?

Code​

Wikipedia Rebuild​

Now let's use Bootstrap to rebuild the Wikipedia homepage. Use divs, spans, classes, floats, etc to style the page exactly as it appears in your browser. Feel free to use placeholder text and images in your project.

Wikipedia homepage

The goal of this exercise is to rebuild how the site looks not how it behaves, so your links don't need to link anywhere. To make a dummy link, use the # as the value of the href attribute on your link. For example: <a href=”#”>.

A secondary goal is to take the time to explore Bootstrap documentation and implement a new tool that we did not explicitly go over in class. For example, you might explore how to use nav tabs or learn how to make a vertical navigation menu. Or, you might learn how to create a grid with Bootstrap and how to align content within the grid.

Make sure you are committing your changes appropriately and pushing to a remote repository on GitHub. Don’t rush through this. Being able to accurately rebuild a site is a great skill to have and will really help in understanding how CSS works to style your pages.

Finally, include a detailed README with author names, project name, a description, setup instructions, and copyright information.

Further Exploration​

  • If you finish early, go back to projects you worked on previously this section and add in Bootstrap. Try implementing other new elements we haven't explicitly covered here in our curriculum.

Peer Code Review​

  • Does the site utilize divs, spans, floats, etc.?
  • Are styles applied with ids and classes? Are each used correctly?
  • Are Bootstrap classes used to style the page?
  • Is the code indented properly throughout?
  • Are commits made regularly with clear, descriptive messages that complete the phrase "It will..."?
  • Is there a complete README?