- Presentations of students website remakes
- Repeat topics of last two weeks:
- Understand why/ how to use which language
- Media-queries
- DOM
- File structure, external links
- How to find information on the web
- Task: find some info about a certain topic in groups of 2, present to each other
- Choose one of the following subjects, look up how it works and implement it in a webpage
- CSS transitions
- CSS animations with keyframes
- SVG
- Dropdown menu in CSS
- flex-box
- Choose one of the following subjects, look up how it works and implement it in a webpage
-
Grids exercise
- Download the html and images in the folder Homework3
- You are going to write the css for this page
- You are not allowed to change the html
- The page contains two grids: the first one should work using floats, the second using flexbox. Be careful not to mix the two!
- We want the grid to look as follows:
- On mobile phones: a two column grid, with the exception that the first item spans the full width
- On tablets: a three column grid, with the exception that the first two items span the full width together (so first we have two columns, then afther the first two items we have three columns)
- On desktops: a four column grid, with the exception that the first item spans two columns.
- There should be some space between the grid items
- Make the page look beautiful by adding some more css! Some tips:
- How about some nice colors, fonts, hover styles?
- According to the grid specification, some products are bigger than others. Maybe these are "highlighted" products, so the rest of the styling could also be different.
-
Make a page including:
- An animation using CSS keyframes
- An SVG
- BEFORE you hand it in, read the Style guide again and check your files