#PROJECT NUMBER 93 TEAM NAME AUTOMATIC-QUOLL

automatic-quoll-buildBS

Build Your Own Bootstrap

Challenge Rating

This goal will likely be within your ZPD if you...

• Can build basic web sites with HTML & CSS
• Are familiar with HTML/CSS frameworks like Bootstrap
• Are interested in strengthening your HTML & CSS skills
• Are interested in how HTML/CSS frameworks actually work
• Are interested in user interface (UI) design

Description

• Tired of bootstrap templates 👎 that are so overused it makes the entire world wide web look the same?
• Passionate about front end development?
• Ever dreamt of designing web elements like carousels, navbars, jumbotrons, and grids based on your design aesthetic?
• Have you already built your own web elements in your previous LG projects?

Then this is the project for you! 🎉

You will build your own web elements for the front end and publish that code so it can be later used by anyone to build their own site. Here is an example of a Bootstrap type site that was built by 4 college kids!

This project has two stages:

1. Reverse engineer a set of components from the Bootstrap framework.
2. Modify your components with your own styles, fonts, and colors to make a unique set of design elements.

Context

The first stage of the project will help you solidify your understanding of design elements on the web and how they work. You will get to know CSS and HTML inside and out.

In the second stage, you will get a better understanding of design and user experience. Tap into your creative side on the front end.

As you work through the project, make use of your browser's developer tools to fine-tune your design. Remember to keep your feedback loops small, fast, and specific! When you make changes to the HTML & CSS, don't just blindly guess-and-check: make hypotheses, test them, and then learn from your mistakes!

Read and reference good resources on the web to build your conceptual understanding of HTML, CSS, and how the browser uses them to build a styled web page. Start with the resources section below.

Specifications

Required

• Artifact is a GitHub repository (if you're looking for a name, why not "shoelace" ;)
• All CSS files are in a css/ directory.
• Main page is called demo.html and includes an example of each component.
• No external CSS libraries/modules are used. Everything is written from scratch.
• The artifact produced is properly licensed, preferably with the MIT license.

Stage 1: Reverse Engineer Bootstrap Components

• Styles include replicas of Bootstrap's typography:
  • Headings
  • Body copy
  • Addresses
  • Blockquotes
• Styles include replicas of Bootstrap's buttons
• Components include replicas of Bootstrap's:
  • Button Groups: Toolbar
  • Breadcrumbs
  • Pagination
  • Labels
  • Badges
  • Jumbotron
  • Page Header
  • Thumbnails
  • Alerts
  • List Group
  • Panels
  • Wells
• Each component is featured on the demo HTML page demo.html under its own header along with the code used to generate it (for a simple example of what this could look like, see https://purecss.io/buttons/)

Stage 2: Modify the Styles

Now it's time to make it look good 😎. Make changes to the CSS (not the HTML) to apply your own styles to the design.

• Demo page demo.html shows components/elements with customized styles, including (but not limited to):
  • A different typeface (take a look at Google Fonts for inspiration)
  • A unique and different color palette (take a look at Adobe Color CC for inspiration)
• Style should be cohesive, connecting the elements as a whole. For example, a similar color palette is chosen.

Stretch

• Demo page for stylized components is published as a GitHub Pages site
• Site includes instructions for how to include and use your framework

Quality Rubric

Good code style

• HTML and CSS files are well formatted with proper spacing and indentation. [50 points]
• Descriptive, well-named functions, variables, files, CSS classes, etc. [50 points]

Good project management

• Commit messages are concise and descriptive. [25 points]
• All features are added via pull requests. [25 points]
• Every pull request has a description summarizing the changes made. [25 points]
• Every pull request has been reviewed by at least one other person. [25 points]

Resources

Courses & tutorials

• Frontend Masters: Intro to Web Development tutorial
• Code School: Frontend Formations tutorial
• Code School: Cracking the Case with Flexbox
• CSS Tricks: HTML & Flexbox

Games

• Flexbox Defense
• Flexbox Froggy
• CSS Diner

Guides

• Shay Howe: Learn to Code HTML & CSS
• MDN: How CSS works
• MDN: CSS Layout
• MDN: Styling Text
• MDN: Styling Boxes

Tools

• Google Fonts
• Adobe Color CC