/93_Bootstrap

#93 Build Your Own Bootstrap

Primary LanguageHTMLMIT LicenseMIT

Repo: 93_Bootstrap

Project_Name: 93 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

  • 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.
  • Variables, functions, files, etc. have appropriate and meaningful names.
  • HTML, CSS, and JS files are well formatted with proper spacing and indentation.
  • All major features are added via pull requests with a clear description and concise commit messages.
  • Every pull request has been reviewed by at least one other person.
  • The artifact produced is properly licensed, preferably with the MIT license.

Stage 1: Reverse Engineer Bootstrap Components

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

Resources

Courses & tutorials

Games

Guides

Tools