before week 2

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 [email protected].
+- 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?