Video 8-1 : Module Introduction and website layout

Video 8-2: flexbox, flex direction justify content align items

CSS Flex:

Justify Content space between

Justify Content flex start

Justify Content flex end

Justify Content: center

Justify Content: space-around

align-items: flex-end

align-items: flex-start

align-items: center

Video 8-3 Create Login Form And Flexible Nav Using Flexbox

Please Login

Video 8-4 CSS Grid layout template columns grid gap

Video 8-5 Create calendar using css grid and flex box

Video : 8-6 Explore Responsiveness using Media query

item1

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Hic iure facilis labore quasi omnis modi mollitia veritatis, repellat tempore. Vero aperiam, suscipit magni porro nemo sint vel excepturi sunt corrupti.

item2

Ut, excepturi pariatur tenetur non laudantium voluptatum officia odit minima quasi sit itaque repudiandae natus delectus eveniet quaerat reprehenderit ipsa illo omnis illum quos? Dolores eligendi quia quisquam necessitatibus vitae?

item3

Accusantium maxime rerum voluptas eos nulla in soluta impedit mollitia sit quo tempora iusto, saepe pariatur laborum quam exercitationem! Unde esse deleniti voluptatem quibusdam magni ipsa laborum perferendis corrupti magnam?

item4

Vero, in suscipit explicabo dolore natus perspiciatis. Excepturi explicabo veniam quis laborum reprehenderit amet enim. Voluptate minus optio laboriosam deserunt dicta. Aliquid facilis quaerat laudantium at illo aut totam exercitationem.

item5

Enim quos similique officiis nisi, molestiae placeat hic distinctio illum? Illum quo, mollitia reprehenderit minima vero quis aspernatur nostrum odio sed laboriosam? Perferendis consequuntur quidem, aliquid eos molestias ducimus ad?

item6

Doloremque atque inventore aliquid quam quaerat, eos amet consectetur nihil quod asperiores consequuntur debitis a blanditiis sapiente explicabo? Laborum perspiciatis tempore, aut voluptatibus debitis eius expedita voluptate veniam impedit dicta.

item7

Odit, reprehenderit iste nesciunt voluptates eaque excepturi maiores quod delectus alias animi molestias consequuntur voluptatibus recusandae vero? Minima similique unde perspiciatis earum voluptas exercitationem quo perferendis assumenda a, blanditiis architecto!

item8

Nesciunt, maiores laborum sapiente quidem enim rerum deleniti dignissimos autem corporis labore optio veniam distinctio non, maxime at aut possimus placeat dolore adipisci consectetur est facilis iste impedit. Eaque, facere.

item9

Aut iure quidem, voluptas, dolores accusantium ex earum minus non quaerat aspernatur quae delectus necessitatibus nesciunt nemo esse ut? Dolores aperiam corrupti maxime voluptatum consequuntur error illo deserunt modi quae.

item10

Qui maxime perspiciatis aliquam numquam! Reiciendis debitis fugiat delectus commodi assumenda, quos minus voluptatibus corrupti repellat modi inventore. At quo tempora est quod eos inventore veritatis autem suscipit? Molestias, quaerat.

item11

Eum, tenetur, minus error illo suscipit sequi dignissimos recusandae distinctio consequuntur reprehenderit alias culpa. Enim rerum quia perferendis, nostrum facere doloribus cum corrupti assumenda iusto accusamus distinctio modi commodi nemo!

item12

Non officia in similique perferendis reprehenderit hic inventore, accusantium voluptatem modi possimus nemo minima, autem temporibus fugit debitis repellendus praesentium, impedit rerum est veritatis dignissimos obcaecati voluptatibus? Velit, et eaque.

Video 8-7: Seven things you need to do to make a website responsive

1. viewport meta tag

2. CSS relative unit

3. Responsive image( Fluid image)

4. body max with and margin auto

5. Responsive split screen using flex=⇒ flex-direction: column-reverse(2 clm section)

6. grid resposive(multi column)

7. Responsive menu (Bootstrap responsive)

Video 8-7: 8-8 (Recap) Responsive overview and multi column responsive

8-9 All CSS properties, everything you need to know about css

Video 8-10 Responsive CSS Layout Summary

Difference between greed and flex

Conseptual Section: Aligning & positioning elements with CSS

Quize

Q1: What are the main differences between flexbox and grid layout?

Ans: Flexbox is designed for one-dimensional layouts and grid is designed for two-dimensional layouts.

Q2: How do you center flex items vertically?

Ans: align-items: center;

Q3: Flex is a ___________ layout ?

Ans: one dimensional

Q4: Which of the following is the correct form to create Grid Template rows?

Ans: grid-template-rows: 80px 200px;

Q5: What does 1fr mean in the following code? grid-template-columns: 150px 150px 1fr 1fr;

Ans: The third and fourth columns are 1 fraction unit of the remaining space in the grid

Q6: Which line of code sets a grid with 6 columns of equal size?

Ans: grid-template-columns: repeat(6, 100px);

Q7: Which one is multi dimensional layout ?

Ans: grid

Q8: What do media queries allow us to do?

Ans: Do responsive design

Q9: Which of the following is a flex-direction property values?

Ans: column