Video 10-1 Module Introduction and Project resources
Video 10-2 Use grid and flex layout to align the players
Video 10-3 Extract style information from figma and apply to players
Video 10-4 Style debug to fix style, add horizontal line break
Top Players
Top Player-1
Top Player-2
Top Player-3
Top Player-4
Top Player-5
Top Player-6
Video 10-5 Create one blog using flex layout and style adjustment
Video 10-6 Add multiple blogs and use grid layout to get two columns
Top Blogs
13 of my Favourite UI/UX Goodies
13 of my Favourite UI/UX Goodies
13 of my Favourite UI/UX Goodies
Video 10-7 Create Single course and use font awesome ratings
Video 10-8 Add all courses and set grid layout for three columns
Latest Cources
React - The Complete Guide 2022
React - The Complete Guide 2022
React - The Complete Guide 2022
Video 10-9 Set Media query to display blog in mobile devices
Video 10-10 Plain HTML5 and CSS3 website Module summary
QUIZ
Question 01: The CSS display: flex; sets the flexbox as _____ element. Ans: A Block level element
Question 02: What is true for block and inline elements?
Ans: By default, block elements span the entire width of their container; inline elements are the same height and width as the content contained
Question 03: 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;
Question 04: Which of these properties can control the size of flex items? Ans: flex
Question 05: Which one is not a grid property? (feel free to google it) Ans: None of the above
Question 06:What are breakpoints in CSS3 Media queries and explain their use? (Feel free to google it)
Ans: There are strategically placed breakpoints which are the standard markings for changing the layout design at specific value respectively
Question 07: Which structure is true in terms of using Media Query?
Ans: @media only screen and(max-width:992px){
.class{grid-template-columns:repeat(2, 1fr);}
}
Question 08: Which of the following is the default flex-direction property values? Ans: row
Question 09: What is the purpose of @import in css? (Please google it) Ans: Import stylesheet into another style sheet
Question 10:Which properties does flexbox share with the CSS grid? Ans: justify-content
Video 10_5-1 Practice Responsive Influencer Gear
CSS Grid practice
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10