Teaching this lesson?
Read the Mentors Notes here
What will we learn today?
Learning objectives for this lesson can be found here
A design framework is a collection of re-usable code snippets which you can use to build a website. It is sometimes called a "design system", "style guide", or "pattern library", and will usually consist of three things:
- Brand guidelines define the appropriate typography, colors and logos to use.
- Components define re-usable code snippets for common requirements, like navigation menus.
- Helpers define additional code tools to construct the site, like layout grids.
The main goals of a design framework are to ensure design consistency and avoid writing the same code twice.
Exercise: Perform a group exercise exploring the git workspace. Then create a branch, commit your new page, and issue a pull request. Once all the pull requests are merged, switch back to the
masterbranch and update your copy.
Over the last two weeks, you've been building personal websites as part of your homework. Now we want you to take those websites and apply the knowledge you've learned to make them as good as you can. Some ideas:
- Add Bootstrap 4 to your site and use some of the components.
- Use re-usable class names to reduce your CSS code.
- Validate your HTML code to find and fix problems.
- Add a second page and link to it from your first page.
- Try to style the first article differently so that it stands out from the rest.
By the end, you should have created a repository for your site on GitHub with all the commits you've made.
At the end of each module, we'll have a retrospective. What went right? What went wrong? What can we do better to help you learn? Let's discuss the HTML/CSS module.
- HTML Forms at Marksheet.io
- Building Forms at ShayHowe.com
- Bootstrap 4 Documentation
- Introduction and Naming with BEM Syntax for Reusable CSS
You can find the homework for this week here
Prepare for the next class