HYF - Class 02 - HTML And CSS
- 1. FooCoding Hack Your Future Class 2 05-05-2019
- 2. CSS3
- 3. Introduction of Mentors 3 Software Developer Garima Framework Developer And a really bad Painter Ishaan Puniani Work Ex.: 5 years Work Ex.: 10 years
- 4. Agenda 4 Responsive Web Design CSS Units CSS Position CSS Float CSS Clear Media Queries Inspector
- 7. CSS Units 7 em rem font-size:1rem % Px vh height:100vh vw
- 9. CSS Position 9 The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.
- 10. #Values 10 Static Relative Absolute Fixed
- 11. static 11 Every element has a static position by default, so the element will stick to the normal page flow. If there is a left/right/top/bottom/z- index set then there will be no effect on that element.
- 12. relative 12 An element’s original position remains in the flow of the document, just like the static value. But now left/right/top/bottom/z-index will work.
- 13. absolute 13 It is positioned relative to the parent element. If it doesn’t have any parent elements, then the initial document <html> will be its parent.
- 14. fixed 14 fixed positioned elements are always relative to the document, not any particular parent, and are unaffected by scrolling The left/right/top/bottom/z-index properties are used to position the element.
- 15. Float 15
- 16. Clear 16 Cear property specifies what elements can float beside the cleared element and on which side. #values • none – floating element both side • left – no floating element on left side • right - no floating element on left side • both - no floating element on either left or right side
- 18. Responsive 18
- 19. Syntax 19 @media <media-type> and (expression) { /* your css rules ..... ................ */ } • <media-type> screen ,print ,projection , all • expression min-width/max-width, width, height,orientation, hover
- 20. Example 20
- 22. Week 2 Homework 22 Visit Week 2 Homework: foocoding/HTML-CSS Find Class2 demonstration here: https://github.com/ishaan-puniani/hyf- foocafe/tree/master/week02-class
- 23. 23