WElcome to Milstone 2 Practice section. I am Nizam, Student of Programming Hero Course, Batch 07.

Module-10 Practice




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


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