T3.C3.L2 CSS Hero Image and Media Queries

​Go to this link: joinmyquiz.com

​https://www.canva.com/design/DAGgiZOKKBg/xBy6RBsgW95jrdFQ78nzdw/edit?utm_content=DAGgiZOKKBg&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

Multiple Choice

What is the correct sequence in making the CSS Hero Image in HTML?

​​https://codepen.io/Ms-Jaji/pen/QwWbYdd

​https://bit.ly/PC_C3-4

Drag and Drop

Drag and drop the correct CSS Media Queries Syntax.

​ ​

Placeholder

​ ​

Placeholder

and (min-width: 768px) and (max-width: 1024px) {

Drag these tiles and drop them in the correct blank above

@media

screen

@mediatype

source

Match

Match the correct breakpoint for each screen devices

• @media screen and (min-width: 1024px)

• @media screen and (min-width: 768px) and (max-width: 1024px)

• @media screen and (min-width: 320px) and (max-width: 480px)

Desktop/Laptop

IPad/Tablet

Smartphone

• Desktop/Laptop

• IPad/Tablet

• Smartphone

Open Ended

Why is CSS Hero Image and CSS Media Queries essential for effective web design?

​https://forms.gle/28DsNa4PhxAXbSG67