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
- 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:
- Reverse engineer a set of components from the Bootstrap framework.
- Modify your components with your own styles, fonts, and colors to make a unique set of design elements.
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.
- 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.
- Styles include replicas of Bootstrap's typography:
- Styles include replicas of Bootstrap's buttons
- Components include replicas of Bootstrap's:
- 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/)
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.
- Demo page for stylized components is published as a GitHub Pages site
- Site includes instructions for how to include and use your framework
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
Guides
- Shay Howe: Learn to Code HTML & CSS
- MDN: How CSS works
- MDN: CSS Layout
- MDN: Styling Text
- MDN: Styling Boxes
Tools