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

Module 07 Practice


Video 01: 7-0 What matters in this milestone

Video 7-1: Optimize images, types of images, svg, png, jpg, Sprite.

Image

Nizam

Use photopea.com and tinypng.com for image optimization. you can change color in svg image. sprite image isuse more icon.



7-2 CSS Overflow visible, hidden, scroll, text-overflow, ellipsis

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, mollitia. Fugit repudiandae atque, quia illo minus asperiores reiciendis facilis nam placeat voluptatum sint libero obcaecati architecto illum facere? Debitis eaque soluta dicta sint molestias illo iste inventore odit, adipisci, temporibus dolores voluptatibus repudiandae, accusamus nesciunt eveniet asperiores qui laboriosam sunt maxime totam non nam. Corporis, perspiciatis veritatis culpa in tempore voluptatibus iusto dignissimos nesciunt hic officia vitae qui ab obcaecati quos? Molestiae suscipit dolorem ex voluptas veniam voluptate illo inventore neque commodi distinctio nobis illum dolore impedit rem perferendis repudiandae, obcaecati iusto doloremque, nihil sit nam. Sit, reprehenderit inventore fugit obcaecati numquam, illo ducimus aut magnam accusantium sequi, esse fugiat deserunt animi? Dolorem numquam perferendis dolores ex necessitatibus doloribus, ea ad corporis officiis unde quia, harum nihil esse ullam sed voluptate optio at adipisci assumenda? Error corrupti, quis, illo aut officiis vitae dolor enim pariatur nobis ab obcaecati, qui laudantium sequi cum esse excepturi quam? Quasi rem quisquam magnam nemo excepturi ab praesentium asperiores debitis veniam animi. Ipsa esse quod iure ratione quis voluptatem harum fugit ea assumenda. Incidunt debitis id officia labore impedit, quos veniam dolor, cupiditate sunt optio laborum adipisci consectetur natus! Mollitia cupiditate minima molestias, aut officia quam temporibus, numquam optio at eum esse ducimus repellendus corrupti aperiam alias culpa expedita labore minus! Doloremque dignissimos nemo praesentium! Quaerat illo ab in? Quae dicta, voluptas nobis, quam fugiat mollitia vitae inventore magni ducimus adipisci deleniti dolorem distinctio vel consequatur sint temporibus? Iure obcaecati non excepturi similique est earum odit dignissimos fugit, odio corporis quia alias modi voluptatibus ipsam facilis at cumque temporibus accusamus voluptate nihil consequatur optio ipsum provident? Harum dolorum, beatae doloremque ipsam sequi corporis alias iste cum eos placeat eius adipisci eaque reprehenderit! Cupiditate omnis rem ipsa! Illum magnam repellat vero porro modi laboriosam reprehenderit quia!

Mini mini short text: If you want to get more money send me bkash

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus possimus nisi velit voluptates ducimus provident blanditiis esse, alias impedit omnis. Neque, laboriosam nam deserunt enim eaque quasi tempore atque esse tempora sapiente architecto, velit earum? Totam maiores aspernatur libero unde iure magnam, nihil debitis asperiores quo officia! Tempora sit, veritatis iure laborum perferendis id delectus, qui ducimus cupiditate accusamus corrupti corporis quo quos molestias eum numquam consequatur sequi eaque mollitia vel quia est ex dolores fugiat. Quidem adipisci illum vero repudiandae ut rem, beatae et ullam atque, pariatur dicta aperiam perferendis placeat laboriosam culpa minus nisi ad, officia odio. Ab distinctio quaerat aspernatur voluptas quidem magni dolor magnam nisi id nemo? Odio quaerat inventore suscipit incidunt dolore rem totam quas. Dicta dolorem vitae quae explicabo quia debitis? Asperiores cupiditate facere assumenda minus nam odio explicabo voluptatem obcaecati neque natus maxime cum, impedit excepturi ex rerum numquam deserunt vitae, vel temporibus quae eius? Quos, fuga libero tempore fugit ab nisi voluptas in numquam aperiam facere sequi consequuntur magni ad enim ipsum eaque dolore id explicabo praesentium. Incidunt ipsa nostrum, iusto obcaecati, excepturi sequi adipisci, dicta porro inventore tempore at. Quod molestias, sint aliquam vel minus fuga neque ducimus animi unde reiciendis.

Video 7-3 : Transform element using rotate scale translate

translate() CSS function repositions an elemer in the horizontal and/or vertical directions

box-1
box-2
box-3 Scale means zoom


Video 7-4 : Introduction to CSS animation Transition


Transition
Transition
Transition







Video 7-5: Cricket match animation using transition and transform

ease-in= start, ease-out= slodown, translate positive value goes in lower site,






Video 7-6 : (optional) Css animation and bounce effect with balls


Lets explore animation


Video 7-7: CSS Custom property and use var, calc, visibility hidden vs display none


1

2

3

4



Visibility hiden dokolder na display none dokolder, calc= calculate width or height




Video 7-8: CSS specificity, style priority and !important



my speciality

my speciality

my speciality

my speciality

Priority : tag>class>id>>inline css>!important, == search google css specificity


Video 7-9 : Explore Devtool Element tab for Style Debugging

7-10 Module Summary

Quize>

Q1: Which one is not an overflow value?
Ans: Invisible

Q1: Which one is not a transform value among all these options?
Ans: reverse

Q1: Which one is not a transition property? (if needed google it)
Ans: transition-framing-function.

Q1: Which of the following CSS properties is used to define a delay before an animation starts?
Ans: Animation delay.

Q1: Which transform value will change both the height and width of an HTML element?(think about it. Change height and weight. Feel free to google it.)
Ans: scal(x,y).

Q1: Which shorthand property is incorrect for applying transitions to multiple property values of an element at a time?
Ans: Both 2& 3.

Q1: Which of the following properties defines the length of time that a transition takes?
Ans: transition-duration.

Q1: Which CSS property is used to hide items?
Ans: display: none;