diff --git a/docs/week02/lecture-2-CSS.md b/docs/week02/lecture-2-CSS.md new file mode 100644 index 0000000..cb58fa5 --- /dev/null +++ b/docs/week02/lecture-2-CSS.md @@ -0,0 +1,67 @@ +# WebEngineering Module, CSS + +## Goals +### Abilities +- Styling of HTML pages wrt appearance and layout +- Being able to use CSS rules creatively +- Avoiding duplication in style information +- Separating "what" from "how" +- Writing maintainable web documents + +### Knowledge +- Basic selectors: element, class, id +- Selector combinations: collection, descendant, child +- Sourcing: inline, style element, link element +- Basic knowledge of cascading and specificity +- CSS box model +- Basic knowledge of CSS units +- Knowing the limits of our knowledge + +## Assignment 1 +- Change Storybook.html document +- Include the storybook.txt by in an HTML table +- put a style element in the header +- improve some element styles (e.g. h1, h2, section, article) to make them look nicer +- make ABBR and DFN elements indicating in the same way that they both have popup-info + +## Assignment 2: +- In the table introduce style classes to make the holidays less prominent +- In the table introduce style classes to make the exercise-related dates more prominent + +## Challenge +- make sure that your result from assignment 2 is visible through the github-pages feature +- email a link to the html page to dierk.koenig@fhnw.ch. +- The best result wins a prize! + +## Training for aspiring professionals 1: + +If you are not yet confident with using basic HTML and CSS +consider working through http://www.codecademy.com or other online resources. + +## Training for aspiring professionals 2: + +Take your personal solution from lecture-1-HTML and style it with CSS. + +## Training for aspiring professionals 3: + +- Use divs with different background-color to create the rectangles below. +- Use only CSS (and no external dependencies) to create the following layout + + +-----------------------------------------------+ + | | | | | Header, 1/4, 1/4, 1/4, 1/4 + +-----------------------------------------------+ + | | | Content, Golden Ratio + | | | ~ 61.8, 38.2 + | | | + | | | + | | | + | | | + +-----------------------------------------------+ + | | | | Footer, 1/4, 2/4, 1/4 + | | | | + | | | | + +-----------------------------------------------+ + +- Can you make it so that it fills the full browser page? +- Can you make it so that the proportions remain when the browser resizes? +- Can you do it with css grid layout?