Video: 9-1 Simple layout design with CSS flex, media query
Box-1
Box-2
Box-3
Box-4
Video 9-2: Create Complex Flexbox and gid with media query
Com Com Flex Photo Gallary
Video 9-3 Responsive Flex and Simple CSS grid and media query
Grid Practice
Box-1
Box-2
Box-3
Video 9-4 : Practical Grid area layout and media query
Video 9-5 : (Recap) Media Query and Portfolio Website
Video 9-6 : Make What I do and My Resume section Responsive
Video 9-7 Use Media Query breakpoint for about and contact section
Video 9-8 : Make Header banner section responsive
Video 9-8 : 9-9 Module Summary and Responsive Home work
Quize:
Q1: How do you access Flexbox properties?
Ans: display:flex;
Q2: What is true for block and inline elements?
Ans: Bt default, block elements span the entir width of their container;
inline elements are the same height and width as the content contained between
thire tags.
Q3: Select the most appropriate CSS declaration(s) to set an element to absolute positioning in the top right corner.
Ans: position: absolute; top:0;right: 0;
Q4: Which CSS property is used for unstyled anchor text?
Ans: text-decoration: none;
Q5: Which one is not a grid property? (feel free to google it)
Ans: grid-auto-columns
Q6: What does it mean by inline css?
Ans: Apply css inside the html tag
Q7: Which structure is true in terms of using Media Query?
Ans: @media only screen and(max-width:992px){.class{2. 1fr);}}
Q8: Which of the following is the default flex-direction property values?
Ans: row
Q9: What is the purpose of @import in css? (Please google it)
Ans: Import stylesheet into another style sheet
Q10: To increase icon sizes relative to their container, use the ___?___ classes.
