- Build pages with a grid system
- Work on your portfolio
- Solve layout problems
- Find and solve design issues
| Time | Activity | Description | ||
|---|---|---|---|---|
| 1 | 5 min | 5 | TT | Grid Systems in CSS |
| 2 | 50 min | 55 | Work | Work on your portfolio or other site |
| 3 | 10 min | 65 | Beak | Take a Break |
| 4 | 50 min | 105 | Work | Continue working on your portfolio |
CSS Grid systems collect related CSS together for layout. Your best designs, and most common layout will involve dividing a page into columns with widths in the following ratios:
- 100%
- 75%
- 66%
- 50%
- 33%
- 25%
With a little bit of planning you can write CSS rules to cover all of these.
Look at the examples here:
These examples were built based on the article here:
Work on your portfolio. Start by thinking about layout and planning the structure of your page. If you are having trouble getting started follow the sequence from class:
- HTML - mark up your content
- Use the appropriate tags
- use div tags to block in columns
- Add class names to elements
- CSS - style your markup
- Set the base font styles on the body tag
- JavaScript - add interactive features with JS
Study up and look for ideas to help you with design: Read up on grid based design http://www.creativebloq.com/design/grid-based-web-design-beginners-guide-9107116
Read up on CSS and Typography http://learn.shayhowe.com/html-css/working-with-typography/ https://wdexplorer.com/20-examples-beautiful-css-typography-design/ http://devinhunt.github.io/typebase.css/
Color Schemes http://www.awwwards.com/trendy-web-color-palettes-and-material-design-color-schemes-tools.html http://clrs.cc https://designschool.canva.com/blog/website-color-schemes/
Post your work to the web.
Post a link to your web sites on Slack.