The Art of Doing - Web Development for Beginners - Final Project Part 3 University Video

The Art of Doing - Web Development for Beginners - Final Project Part 3

Interactive Video

•

Information Technology (IT), Architecture

•

University

•

Hard

Wayground Content

FREE Resource

This video tutorial covers styling a webpage using CSS and setting up an HTML design tool. It begins with styling a navigation bar, including setting background colors, border radii, and hover effects. The tutorial then moves on to styling a new products section using a flex layout. Finally, it demonstrates setting up an HTML structure for a shirt design tool, incorporating forms, radio buttons, and color inputs, preparing for JavaScript functionality.

10 questions

Show all answers

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

What CSS property is used to set the background color of the navigation bar?

margin

text-align

background-color

border-radius

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

How can you ensure that text within a navigation bar is centered?

Use text-align: center

Use text-align: right

Use text-align: justify

Use text-align: left

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

What display property allows anchor tags to have adjustable width?

block

flex

inline

inline-block

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

Which CSS property is used to remove the underline from links?

display: block

font-weight: bold

text-align: center

text-decoration: none

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

What layout is used for the 'new products' section?

Flex layout

Grid layout

Inline layout

Block layout

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

Which CSS property is used to add space between elements in the 'new products' section?

padding

width

margin

border

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

What is the main axis alignment used for the 'content item' division?

justify-content: space-between

justify-content: center

justify-content: end

justify-content: start

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

What HTML element is used to create a dropdown menu in the design tool?

</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto cursor-pointer justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-wds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-w-content-base font-normal text-wrap" color="dark.primary"><div><p><button></p></div></div></div></div></div></div></div></div><div class="relative box-border w-full h-full bg-wds-light-500 p-4 rounded-none border-t border-wds-light-200 group hidden" data-v-51e82f2a><div class="flex gap-4 justify-start items-stretch flex-col flex-nowrap" data-v-51e82f2a><div class="flex justify-between items-center flex-row flex-nowrap"><div class="flex justify-start items-stretch flex-row flex-nowrap"><div class="border-wds-light-200 p-0 bg-transparent rounded-full w-full h-6"><div class="flex gap-1 justify-start items-center h-full flex-row flex-nowrap" data-testid="qt-indicator-inner"><p class="text-wds-dark-200 text-w-content-small font-normal">9. </p><div class="bg-transparent p-0 rounded-full w-auto h-auto relative"><div class="flex justify-center items-center w-full h-full flex-row flex-nowrap"></div></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="qt-indicator-text">MULTIPLE CHOICE QUESTION</p></div></div></div><div class="flex group-hover:hidden gap-2 justify-start items-stretch flex-row flex-nowrap"><p class="text-wds-dark-200 text-w-content-small font-normal">30 sec • 1 pt</p></div><div class="hidden group-hover:block w-auto h-auto"><div class="flex gap-1 justify-start items-stretch flex-row flex-nowrap"><button type="button" aria-label="Preview" class="bg-transparent hover:bg-wds-dark-500-10 active:bg-wds-dark-500-20 py-1 px-3 border-wds-light-200 rounded-w-admin-lg min-w-20 border disabled:my-px bg-clip-padding group min-w-20 rounded-lg flex items-center justify-center focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 shrink-0 focus-visible:outline-ds-lilac-500-40 cursor-pointer"><div class="visible"><div class="flex gap-1 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center h-3 text-[9px] text-wds-dark-500 flex-shrink-0" data-testid><i class="fas fa-eye"></i></div><p class="text-wds-dark-500 none underline-offset-4 select-none text-w-control-small font-semibold text-nowrap" data-testid="button-text">Preview</p></div></div></button><div class=""><button type="button" aria-label="Edit" class="bg-wds-light-500 hover:bg-wds-magenta-200 active:bg-wds-magenta-300 py-1 px-3 border-wds-magenta-500 rounded-w-admin-lg min-w-20 border disabled:my-px bg-clip-padding group min-w-20 rounded-lg flex items-center justify-center focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 shrink-0 focus-visible:outline-ds-lilac-500-40 cursor-pointer"><div class="visible"><div class="flex gap-1 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center h-3 text-[9px] text-wds-magenta-600 flex-shrink-0" data-testid><i class="fas fa-pen"></i></div><p class="text-wds-magenta-600 none underline-offset-4 select-none text-w-control-small font-semibold text-nowrap" data-testid="button-text">Edit</p></div></div></button></div></div></div></div><div class="flex gap-1 justify-start items-stretch flex-col flex-nowrap" data-v-51e82f2a><div class="flex gap-2 justify-start items-start flex-row flex-nowrap"><div class="text-w-content-base font-semibold"><div><p>Which input type is used for selecting colors in the design tool?</p></div></div></div></div><div class="grid w-full gap-2" style="grid-template-rows:repeat(undefined, minmax(0, max-content));grid-template-columns:repeat(2, minmax(0, 1fr));" data-v-51e82f2a><div class="flex gap-0.5 overflow-auto cursor-pointer justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-wds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-w-content-base font-normal text-wrap" color="dark.primary"><div><p>text</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto cursor-pointer justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-wds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-w-content-base font-normal text-wrap" color="dark.primary"><div><p>color</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto cursor-pointer justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-wds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-w-content-base font-normal text-wrap" color="dark.primary"><div><p>checkbox</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto cursor-pointer justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-wds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-w-content-base font-normal text-wrap" color="dark.primary"><div><p>radio</p></div></div></div></div></div></div></div></div><div class="relative box-border w-full h-full bg-wds-light-500 p-4 rounded-none border-t border-wds-light-200 group hidden" data-v-51e82f2a><div class="flex gap-4 justify-start items-stretch flex-col flex-nowrap" data-v-51e82f2a><div class="flex justify-between items-center flex-row flex-nowrap"><div class="flex justify-start items-stretch flex-row flex-nowrap"><div class="border-wds-light-200 p-0 bg-transparent rounded-full w-full h-6"><div class="flex gap-1 justify-start items-center h-full flex-row flex-nowrap" data-testid="qt-indicator-inner"><p class="text-wds-dark-200 text-w-content-small font-normal">10. </p><div class="bg-transparent p-0 rounded-full w-auto h-auto relative"><div class="flex justify-center items-center w-full h-full flex-row flex-nowrap"></div></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="qt-indicator-text">MULTIPLE CHOICE QUESTION</p></div></div></div><div class="flex group-hover:hidden gap-2 justify-start items-stretch flex-row flex-nowrap"><p class="text-wds-dark-200 text-w-content-small font-normal">30 sec • 1 pt</p></div><div class="hidden group-hover:block w-auto h-auto"><div class="flex gap-1 justify-start items-stretch flex-row flex-nowrap"><button type="button" aria-label="Preview" class="bg-transparent hover:bg-wds-dark-500-10 active:bg-wds-dark-500-20 py-1 px-3 border-wds-light-200 rounded-w-admin-lg min-w-20 border disabled:my-px bg-clip-padding group min-w-20 rounded-lg flex items-center justify-center focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 shrink-0 focus-visible:outline-ds-lilac-500-40 cursor-pointer"><div class="visible"><div class="flex gap-1 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center h-3 text-[9px] text-wds-dark-500 flex-shrink-0" data-testid><i class="fas fa-eye"></i></div><p class="text-wds-dark-500 none underline-offset-4 select-none text-w-control-small font-semibold text-nowrap" data-testid="button-text">Preview</p></div></div></button><div class=""><button type="button" aria-label="Edit" class="bg-wds-light-500 hover:bg-wds-magenta-200 active:bg-wds-magenta-300 py-1 px-3 border-wds-magenta-500 rounded-w-admin-lg min-w-20 border disabled:my-px bg-clip-padding group min-w-20 rounded-lg flex items-center justify-center focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 shrink-0 focus-visible:outline-ds-lilac-500-40 cursor-pointer"><div class="visible"><div class="flex gap-1 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center h-3 text-[9px] text-wds-magenta-600 flex-shrink-0" data-testid><i class="fas fa-pen"></i></div><p class="text-wds-magenta-600 none underline-offset-4 select-none text-w-control-small font-semibold text-nowrap" data-testid="button-text">Edit</p></div></div></button></div></div></div></div><div class="flex gap-1 justify-start items-stretch flex-col flex-nowrap" data-v-51e82f2a><div class="flex gap-2 justify-start items-start flex-row flex-nowrap"><div class="text-w-content-base font-semibold"><div><p>What is the purpose of the 'tool_values' division in the design tool?</p></div></div></div></div><div class="grid w-full gap-2" style="grid-template-rows:repeat(undefined, minmax(0, max-content));grid-template-columns:repeat(2, minmax(0, 1fr));" data-v-51e82f2a><div class="flex gap-0.5 overflow-auto cursor-pointer justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-wds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-w-content-base font-normal text-wrap" color="dark.primary"><div><p>To style the navigation bar</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto cursor-pointer justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-wds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-w-content-base font-normal text-wrap" color="dark.primary"><div><p>To display the calculated results</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto cursor-pointer justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-wds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-w-content-base font-normal text-wrap" color="dark.primary"><div><p>To input user data</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto cursor-pointer justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-wds-dark-100 flex-shrink-0" data-testid><i class="far fa-circle"></i></div><div class="py-0.5 px-0"><div class=""><div class="text-w-content-base font-normal text-wrap" color="dark.primary"><div><p>To store CSS styles</p></div></div></div></div></div></div></div></div></div><div class="bottom-0 right-0 left-0 absolute" data-testid="content-blocker" data-v-fde55780><div class="w-full h-155 content-blocker" data-v-fde55780><div class="flex gap-2 justify-center items-center w-full h-full flex-col flex-nowrap" data-v-fde55780><div class="bg-wds-light-500 rounded-w-admin-lg shadow-w-md w-120 h-auto" data-v-fde55780><div class="flex justify-center items-center flex-row flex-nowrap w-full" data-v-fde55780><div class="flex gap-0 justify-center items-start flex-col flex-nowrap w-full" data-v-fde55780><div class="flex justify-start items-stretch w-full h-full flex-col flex-nowrap" data-v-fde55780><div class="flex p-10 justify-start items-stretch w-full flex-col flex-nowrap"><section><h1 class="text-lg md:text-xl text-dark-2 font-semibold text-center" data-testid="auth-modal-welcome-title">Create a free account and access millions of resources</h1><p class="text-sm md:text-base text-dark-4"><span></span></p><div class="flex justify-between mt-2"><div class="flex items-center gap-1"><i class="fas fa-circle-check text-green text-xs"></i><span class="text-dark-4 text-xs">Create resources</span></div><div class="flex items-center gap-1"><i class="fas fa-circle-check text-green text-xs"></i><span class="text-dark-4 text-xs">Host any resource</span></div><div class="flex items-center gap-1"><i class="fas fa-circle-check text-green text-xs"></i><span class="text-dark-4 text-xs">Get auto-graded reports</span></div></div></section><section class="flex flex-col space-y-3 mt-4 w-full"><button role="button" class="text-sm md:text-base rounded w-full flex justify-between items-center py-2 px-4 shadow-sm border border-light-1 hover:shadow-md" data-testid="continue-with-Google"><span class="flex items-center space-x-4 md:justify-start"><img src="https://cf.quizizz.com/img/logos/google-logo-1.png" alt="Google" class="w-4 h-4 object-contain" loading="lazy" data-testid="continue-with-Google-logo"><span class="text-base font-semibold btn-label">Continue with Google</span></span><i class="fas fa-arrow-right text-dark-5 font-normal hover:text-lilac"></i></button><button role="button" class="text-sm md:text-base rounded w-full flex justify-between items-center py-2 px-4 shadow-sm border border-light-1 hover:shadow-md" data-testid="continue-with-Email"><span class="flex items-center space-x-4 md:justify-start"><img src="https://cf.quizizz.com/image/envelope-regular.png" alt="Email" class="w-4 h-4 object-contain" loading="lazy" data-testid="continue-with-Email-logo"><span class="text-base font-semibold btn-label">Continue with Email</span></span><i class="fas fa-arrow-right text-dark-5 font-normal hover:text-lilac"></i></button><button role="button" class="text-sm md:text-base rounded w-full flex justify-between items-center py-2 px-4 shadow-sm border border-light-1 hover:shadow-md" data-testid="continue-with-Classlink"><span class="flex items-center space-x-4 md:justify-start"><img src="https://cf.quizizz.com/img/logos/classlink-logo.png" alt="Classlink" class="w-4 h-4 object-contain" loading="lazy" data-testid="continue-with-Classlink-logo"><span class="text-base font-semibold btn-label">Continue with Classlink</span></span><i class="fas fa-arrow-right text-dark-5 font-normal hover:text-lilac"></i></button><button role="button" class="text-sm md:text-base rounded w-full flex justify-between items-center py-2 px-4 shadow-sm border border-light-1 hover:shadow-md" data-testid="continue-with-Clever"><span class="flex items-center space-x-4 md:justify-start"><img src="https://cf.quizizz.com/image/clever-logo.png" alt="Clever" class="w-4 h-4 object-contain" loading="lazy" data-testid="continue-with-Clever-logo"><span class="text-base font-semibold btn-label">Continue with Clever</span></span><i class="fas fa-arrow-right text-dark-5 font-normal hover:text-lilac"></i></button></section><span class="mt-4 text-dark-4 text-sm flex justify-center">or continue with</span><section class="flex flex-row justify-center mt-4 gap-4"><div class="flex flex-col items-center"><button role="button" class="w-10 h-10 flex items-center justify-center shadow-md rounded-sm cursor-pointer" style="background-color:inherit;" data-testid="continue-with-Microsoft"><img class="object-contain w-6 h-6" src="https://cf.quizizz.com/img/logos/ms-logo.png"></button><span class="text-dark-2 text-[10px] mt-1">Microsoft</span></div><div class="flex flex-col items-center"><button role="button" class="w-10 h-10 flex items-center justify-center shadow-md rounded-sm cursor-pointer" style="background-color:#222;" data-testid="continue-with-Apple"><img class="object-contain w-6 h-6" src="https://cf.quizizz.com/image/Apple.png"></button><span class="text-dark-2 text-[10px] mt-1">Apple</span></div><div class="flex flex-col items-center"><button role="button" class="w-10 h-10 flex items-center justify-center shadow-md rounded-sm cursor-pointer" style="background-color:#8854C0;" data-testid="continue-with-Others"><img class="object-contain w-6 h-6" src="https://cf.quizizz.com/image/shield-halved.png"></button><span class="text-dark-2 text-[10px] mt-1">Others</span></div></section></div><section class="mt-auto w-full"><section class="justify-center text-xs text-center text-dark-5 md:flex px-10 mb-4"><span>By signing up, you agree to our <a href='/tos' style='text-decoration: underline;'>Terms of Service</a> & <a href='/privacy' style='text-decoration: underline;'>Privacy Policy</a></span></section><section role="nudge" class="text-dark-2 py-4 flex items-center justify-center space-x-1 text-xs rounded-b-lg bg-light-6"><span class="xs-hidden">Already have an account?</span><button class="bg-lilac-faded rounded px-3 py-1 text-ds-lilac-600 text-xs font-semibold ml-2" type="button" data-testid="login-button-in-signup">Log in</button></section></section></div></div></div></div><button type="link" aria-label="Let me read it first" class="bg-transparent hover:bg-wds-dark-500-10 active:bg-wds-dark-500-20 py-2 px-4 border-transparent rounded-w-admin-lg min-w-20 border disabled:my-px bg-clip-padding group min-w-20 rounded-lg flex items-center justify-center focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 shrink-0 focus-visible:outline-ds-lilac-500-40 cursor-pointer w-fit mx-auto mt-2 bg-none bg-transparent" data-testid="restrict-content-bypass-btn" data-v-fde55780><div class="visible"><div class="flex gap-1 justify-center items-center flex-row flex-nowrap"><p class="text-wds-dark-500 none underline-offset-4 select-none text-w-control-small font-semibold text-nowrap" data-testid="button-text">Let me read it first</p></div></div></button></div></div></div></div></div></div><div class="flex bg-wds-light-500 gap-4 p-8 rounded-w-admin-xl border border-wds-light-200 justify-start items-stretch flex-row flex-nowrap"><div class="flex gap-3 max-w-40 justify-start items-start flex-col flex-nowrap" data-testid="similar-resources-identifier"><div class="flex min-h-16 min-w-16 max-w-16 rounded-full bg-wds-info-100 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center w-10 h-10 text-3xl text-wds-info-600 flex-shrink-0" data-testid><i class="fas fa-calculator-simple"></i></div></div><h2 class="text-w-header-base font-semibold">Similar Resources on Wayground</h2><button type="button" aria-label="View all" class="bg-transparent hover:bg-wds-dark-500-10 active:bg-wds-dark-500-20 py-2 px-4 border-wds-light-200 rounded-w-admin-lg min-w-20 border disabled:my-px bg-clip-padding group min-w-20 rounded-lg flex items-center justify-center focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 shrink-0 focus-visible:outline-ds-lilac-500-40 cursor-pointer" data-testid="recommendations-see-more-button"><div class="visible"><div class="flex gap-1 justify-center items-center flex-row flex-nowrap"><p class="text-wds-dark-500 none underline-offset-4 select-none text-w-control-small font-semibold text-nowrap" data-testid="button-text">View all</p><div class="flex justify-center items-center h-4 text-xs text-wds-dark-500 flex-shrink-0" data-testid><i class="fas fa-arrow-right"></i></div></div></div></button></div><div class="overflow-hidden w-auto h-auto flex-grow flex-shrink basis-full relative" data-testid="recommendation-container" data-v-4c33f125><div class="h-full relative" data-v-17c94643 data-v-4c33f125><div class="scroll-container w-auto h-full" style="height:;max-height:70vh;" data-v-17c94643><div class="content h-full" data-v-17c94643><div class="flex gap-4 justify-start items-stretch flex-row flex-nowrap"><a href="/admin/video-quiz/67b7818daf69450be3ffcdc7/the-art-of-doing-web-development-for-beginners-final-project-part-3" data-testid="activity-recommendation-card-67b7818daf69450be3ffcdc7" data-v-1d12f0eb><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-1d12f0eb><div class="flex cursor-pointer bg-wds-light-500 rounded-w-admin-lg border border-wds-light-200 transition-all hover:border-wds-magenta-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-1d12f0eb><div class="relative box-border w-full h-full bg-wds-light-400 relative" data-v-1d12f0eb><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-1d12f0eb><img src="https://cf.quizizz.com/image/image-loader.svg" alt="The Art of Doing - Web Development for Beginners - Final Project Part 3" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-1d12f0eb></div><div class="bottom-2 left-2 absolute" data-v-1d12f0eb><div class="" data-v-1d12f0eb><div class="bg-wds-light-500 py-1 px-3 border max-w-max border-wds-light-200 rounded-full" data-testid="activity-display-card-stats"><p class="text-wds-dark-500 text-w-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 5 questions</span></p></div></div></div></div><div class="border-t border-wds-light-200 w-60 h-auto" data-v-1d12f0eb><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-1d12f0eb><div data-v-1d12f0eb><div aria-describedby="tooltip-0.8c9vj4loea7" class="contents"><p class="text-w-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none" tooltipposition="top">The Art of Doing - Web Development for Beginners - Final Project Part 3</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/video-quiz_solid_circle.png" alt="interactive video" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="activity-type-text">Interactive video</p></div><p class="text-wds-dark-100 text-w-content-base font-semibold" data-v-1d12f0eb> • </p><p class="text-wds-dark-200 text-w-content-small font-semibold" data-testid="activity-display-card-grade" data-v-1d12f0eb>University</p></div></div></div></div></div></a><a href="/admin/video-quiz/67adf5a5a9503a0a5e9fa64c/nextjs-from-development-to-deployment-layout-component" data-testid="activity-recommendation-card-67adf5a5a9503a0a5e9fa64c" data-v-1d12f0eb><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-1d12f0eb><div class="flex cursor-pointer bg-wds-light-500 rounded-w-admin-lg border border-wds-light-200 transition-all hover:border-wds-magenta-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-1d12f0eb><div class="relative box-border w-full h-full bg-wds-light-400 relative" data-v-1d12f0eb><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-1d12f0eb><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Next.js from Development to Deployment - Layout Component" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-1d12f0eb></div><div class="bottom-2 left-2 absolute" data-v-1d12f0eb><div class="" data-v-1d12f0eb><div class="bg-wds-light-500 py-1 px-3 border max-w-max border-wds-light-200 rounded-full" data-testid="activity-display-card-stats"><p class="text-wds-dark-500 text-w-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 8 questions</span></p></div></div></div></div><div class="border-t border-wds-light-200 w-60 h-auto" data-v-1d12f0eb><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-1d12f0eb><div data-v-1d12f0eb><div aria-describedby="tooltip-0.hrgu8x1hky6" class="contents"><p class="text-w-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none" tooltipposition="top">Next.js from Development to Deployment - Layout Component</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/video-quiz_solid_circle.png" alt="interactive video" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="activity-type-text">Interactive video</p></div><p class="text-wds-dark-100 text-w-content-base font-semibold" data-v-1d12f0eb> • </p><p class="text-wds-dark-200 text-w-content-small font-semibold" data-testid="activity-display-card-grade" data-v-1d12f0eb>University</p></div></div></div></div></div></a><a href="/admin/video-quiz/67ae46c3d198df18b4cb1252/modern-web-design-with-html5-css3-and-javascript-sidebar-nav-website-project" data-testid="activity-recommendation-card-67ae46c3d198df18b4cb1252" data-v-1d12f0eb><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-1d12f0eb><div class="flex cursor-pointer bg-wds-light-500 rounded-w-admin-lg border border-wds-light-200 transition-all hover:border-wds-magenta-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-1d12f0eb><div class="relative box-border w-full h-full bg-wds-light-400 relative" data-v-1d12f0eb><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-1d12f0eb><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Modern Web Design with HTML5, CSS3, and JavaScript - Sidebar Nav Website Project" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-1d12f0eb></div><div class="bottom-2 left-2 absolute" data-v-1d12f0eb><div class="" data-v-1d12f0eb><div class="bg-wds-light-500 py-1 px-3 border max-w-max border-wds-light-200 rounded-full" data-testid="activity-display-card-stats"><p class="text-wds-dark-500 text-w-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 11 questions</span></p></div></div></div></div><div class="border-t border-wds-light-200 w-60 h-auto" data-v-1d12f0eb><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-1d12f0eb><div data-v-1d12f0eb><div aria-describedby="tooltip-0.mz61vi5b4kr" class="contents"><p class="text-w-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none" tooltipposition="top">Modern Web Design with HTML5, CSS3, and JavaScript - Sidebar Nav Website Project</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/video-quiz_solid_circle.png" alt="interactive video" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="activity-type-text">Interactive video</p></div><p class="text-wds-dark-100 text-w-content-base font-semibold" data-v-1d12f0eb> • </p><p class="text-wds-dark-200 text-w-content-small font-semibold" data-testid="activity-display-card-grade" data-v-1d12f0eb>University</p></div></div></div></div></div></a><a href="/admin/video-quiz/67adf5a69534d0ccc00606bc/nextjs-from-development-to-deployment-custom-404-page" data-testid="activity-recommendation-card-67adf5a69534d0ccc00606bc" data-v-1d12f0eb><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-1d12f0eb><div class="flex cursor-pointer bg-wds-light-500 rounded-w-admin-lg border border-wds-light-200 transition-all hover:border-wds-magenta-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-1d12f0eb><div class="relative box-border w-full h-full bg-wds-light-400 relative" data-v-1d12f0eb><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-1d12f0eb><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Next.js from Development to Deployment - Custom 404 Page" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-1d12f0eb></div><div class="bottom-2 left-2 absolute" data-v-1d12f0eb><div class="" data-v-1d12f0eb><div class="bg-wds-light-500 py-1 px-3 border max-w-max border-wds-light-200 rounded-full" data-testid="activity-display-card-stats"><p class="text-wds-dark-500 text-w-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 6 questions</span></p></div></div></div></div><div class="border-t border-wds-light-200 w-60 h-auto" data-v-1d12f0eb><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-1d12f0eb><div data-v-1d12f0eb><div aria-describedby="tooltip-0.dxgsr8liqcc" class="contents"><p class="text-w-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none" tooltipposition="top">Next.js from Development to Deployment - Custom 404 Page</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/video-quiz_solid_circle.png" alt="interactive video" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="activity-type-text">Interactive video</p></div><p class="text-wds-dark-100 text-w-content-base font-semibold" data-v-1d12f0eb> • </p><p class="text-wds-dark-200 text-w-content-small font-semibold" data-testid="activity-display-card-grade" data-v-1d12f0eb>University</p></div></div></div></div></div></a><a href="/admin/video-quiz/67b04c98fdd4db836f1dfbda/modern-web-design-with-html5-css3-and-javascript-creating-a-header-and-footer-using-cascading-style-sheets-css" data-testid="activity-recommendation-card-67b04c98fdd4db836f1dfbda" data-v-1d12f0eb><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-1d12f0eb><div class="flex cursor-pointer bg-wds-light-500 rounded-w-admin-lg border border-wds-light-200 transition-all hover:border-wds-magenta-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-1d12f0eb><div class="relative box-border w-full h-full bg-wds-light-400 relative" data-v-1d12f0eb><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-1d12f0eb><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Modern Web Design with HTML5, CSS3, and JavaScript - Creating a Header and Footer Using Cascading Style Sheets (CSS)" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-1d12f0eb></div><div class="bottom-2 left-2 absolute" data-v-1d12f0eb><div class="" data-v-1d12f0eb><div class="bg-wds-light-500 py-1 px-3 border max-w-max border-wds-light-200 rounded-full" data-testid="activity-display-card-stats"><p class="text-wds-dark-500 text-w-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 6 questions</span></p></div></div></div></div><div class="border-t border-wds-light-200 w-60 h-auto" data-v-1d12f0eb><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-1d12f0eb><div data-v-1d12f0eb><div aria-describedby="tooltip-0.bxdhcf8c06" class="contents"><p class="text-w-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none" tooltipposition="top">Modern Web Design with HTML5, CSS3, and JavaScript - Creating a Header and Footer Using Cascading Style Sheets (CSS)</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/video-quiz_solid_circle.png" alt="interactive video" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="activity-type-text">Interactive video</p></div><p class="text-wds-dark-100 text-w-content-base font-semibold" data-v-1d12f0eb> • </p><p class="text-wds-dark-200 text-w-content-small font-semibold" data-testid="activity-display-card-grade" data-v-1d12f0eb>University</p></div></div></div></div></div></a><a href="/admin/video-quiz/67ae4684b2ba77bad7f1dc00/modern-web-design-with-html5-css3-and-javascript-conclusion-cascading-style-sheets-css-grid" data-testid="activity-recommendation-card-67ae4684b2ba77bad7f1dc00" data-v-1d12f0eb><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-1d12f0eb><div class="flex cursor-pointer bg-wds-light-500 rounded-w-admin-lg border border-wds-light-200 transition-all hover:border-wds-magenta-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-1d12f0eb><div class="relative box-border w-full h-full bg-wds-light-400 relative" data-v-1d12f0eb><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-1d12f0eb><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Modern Web Design with HTML5, CSS3, and JavaScript - Conclusion – Cascading Style Sheets (CSS) Grid" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-1d12f0eb></div><div class="bottom-2 left-2 absolute" data-v-1d12f0eb><div class="" data-v-1d12f0eb><div class="bg-wds-light-500 py-1 px-3 border max-w-max border-wds-light-200 rounded-full" data-testid="activity-display-card-stats"><p class="text-wds-dark-500 text-w-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 8 questions</span></p></div></div></div></div><div class="border-t border-wds-light-200 w-60 h-auto" data-v-1d12f0eb><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-1d12f0eb><div data-v-1d12f0eb><div aria-describedby="tooltip-0.dchptx9pjqv" class="contents"><p class="text-w-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none" tooltipposition="top">Modern Web Design with HTML5, CSS3, and JavaScript - Conclusion – Cascading Style Sheets (CSS) Grid</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/video-quiz_solid_circle.png" alt="interactive video" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="activity-type-text">Interactive video</p></div><p class="text-wds-dark-100 text-w-content-base font-semibold" data-v-1d12f0eb> • </p><p class="text-wds-dark-200 text-w-content-small font-semibold" data-testid="activity-display-card-grade" data-v-1d12f0eb>University</p></div></div></div></div></div></a><a href="/admin/video-quiz/67ae2684958922c6a672d825/modern-html-and-css-from-the-beginning-including-sass-widescreen-tablet-view" data-testid="activity-recommendation-card-67ae2684958922c6a672d825" data-v-1d12f0eb><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-1d12f0eb><div class="flex cursor-pointer bg-wds-light-500 rounded-w-admin-lg border border-wds-light-200 transition-all hover:border-wds-magenta-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-1d12f0eb><div class="relative box-border w-full h-full bg-wds-light-400 relative" data-v-1d12f0eb><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-1d12f0eb><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Modern HTML and CSS from the Beginning (Including Sass) - Widescreen & Tablet View" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-1d12f0eb></div><div class="bottom-2 left-2 absolute" data-v-1d12f0eb><div class="" data-v-1d12f0eb><div class="bg-wds-light-500 py-1 px-3 border max-w-max border-wds-light-200 rounded-full" data-testid="activity-display-card-stats"><p class="text-wds-dark-500 text-w-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 8 questions</span></p></div></div></div></div><div class="border-t border-wds-light-200 w-60 h-auto" data-v-1d12f0eb><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-1d12f0eb><div data-v-1d12f0eb><div aria-describedby="tooltip-0.oxdb99kl6f" class="contents"><p class="text-w-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none" tooltipposition="top">Modern HTML and CSS from the Beginning (Including Sass) - Widescreen & Tablet View</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/video-quiz_solid_circle.png" alt="interactive video" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="activity-type-text">Interactive video</p></div><p class="text-wds-dark-100 text-w-content-base font-semibold" data-v-1d12f0eb> • </p><p class="text-wds-dark-200 text-w-content-small font-semibold" data-testid="activity-display-card-grade" data-v-1d12f0eb>University</p></div></div></div></div></div></a><a href="/admin/video-quiz/67ae045bbc43aa4fa6fab032/css-bootcamp-master-css-including-css-gridflexbox-bestselling-furniture-style" data-testid="activity-recommendation-card-67ae045bbc43aa4fa6fab032" data-v-1d12f0eb><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-1d12f0eb><div class="flex cursor-pointer bg-wds-light-500 rounded-w-admin-lg border border-wds-light-200 transition-all hover:border-wds-magenta-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-1d12f0eb><div class="relative box-border w-full h-full bg-wds-light-400 relative" data-v-1d12f0eb><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-1d12f0eb><img src="https://cf.quizizz.com/image/image-loader.svg" alt="CSS Bootcamp: Master CSS (Including CSS Grid/Flexbox) - Bestselling Furniture-Style" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-1d12f0eb></div><div class="bottom-2 left-2 absolute" data-v-1d12f0eb><div class="" data-v-1d12f0eb><div class="bg-wds-light-500 py-1 px-3 border max-w-max border-wds-light-200 rounded-full" data-testid="activity-display-card-stats"><p class="text-wds-dark-500 text-w-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 8 questions</span></p></div></div></div></div><div class="border-t border-wds-light-200 w-60 h-auto" data-v-1d12f0eb><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-1d12f0eb><div data-v-1d12f0eb><div aria-describedby="tooltip-0.n1a0ft0ljuh" class="contents"><p class="text-w-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none" tooltipposition="top">CSS Bootcamp: Master CSS (Including CSS Grid/Flexbox) - Bestselling Furniture-Style</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/video-quiz_solid_circle.png" alt="interactive video" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="activity-type-text">Interactive video</p></div><p class="text-wds-dark-100 text-w-content-base font-semibold" data-v-1d12f0eb> • </p><p class="text-wds-dark-200 text-w-content-small font-semibold" data-testid="activity-display-card-grade" data-v-1d12f0eb>University</p></div></div></div></div></div></a></div></div></div><div class="left-0 bottom-0 absolute w-full" data-v-17c94643><div class="bg-wds-dark-500-50 border border-wds-light-500-20 rounded-w-admin-lg w-auto h-2 x-thumb relative cursor-grab" style="width:0%;left:0%;opacity:0;" data-v-17c94643></div></div></div><div class="right-0 top-0 bottom-0 absolute gradient-right" data-v-4c33f125><div class="flex p-2 justify-start items-center w-full h-full flex-row flex-nowrap" data-v-4c33f125><button type="button" aria-label="chevron-right" class="bg-wds-light-500 hover:bg-wds-light-300 active:bg-wds-light-200 w-8 h-8 border-wds-light-200 border rounded-w-admin-lg border bg-clip-padding relative rounded flex items-center justify-center cursor-pointer focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 focus-visible:outline-ds-lilac-500-40 shrink-0" data-testid="carousel-right-button" data-v-4c33f125><div class="flex visible justify-center items-center h-full flex-row flex-nowrap"><div class="flex justify-center items-center w-5 h-5 text-sm text-wds-dark-500 flex-shrink-0" data-testid><i class="fas fa-chevron-right"></i></div></div></button></div></div></div></div><div class="flex bg-wds-light-500 gap-4 p-8 rounded-w-admin-xl border border-wds-light-200 justify-start items-stretch flex-row flex-nowrap"><div class="flex gap-3 max-w-40 justify-start items-start flex-col flex-nowrap" data-testid="popular-resources-identifier"><div class="flex min-h-16 min-w-16 max-w-16 rounded-full bg-wds-super-100 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center w-10 h-10 text-3xl text-wds-super-600 flex-shrink-0" data-testid><i class="fas fa-star"></i></div></div><h2 class="text-w-header-base font-semibold">Popular Resources on Wayground</h2></div><div class="overflow-hidden w-auto h-auto flex-grow flex-shrink basis-full relative" data-testid="recommendation-container" data-v-4c33f125><div class="h-full relative" data-v-17c94643 data-v-4c33f125><div class="scroll-container w-auto h-full" style="height:;max-height:70vh;" data-v-17c94643><div class="content h-full" data-v-17c94643><div class="flex gap-4 justify-start items-stretch flex-row flex-nowrap"><a href="/admin/quiz/57db979dfebedb18e033f82c/video-games" data-testid="activity-popular-resource-card-57db979dfebedb18e033f82c" data-v-1d12f0eb><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-1d12f0eb><div class="flex cursor-pointer bg-wds-light-500 rounded-w-admin-lg border border-wds-light-200 transition-all hover:border-wds-magenta-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-1d12f0eb><div class="relative box-border w-full h-full bg-wds-light-400 relative" data-v-1d12f0eb><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-1d12f0eb><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Video Games" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-1d12f0eb></div><div class="bottom-2 left-2 absolute" data-v-1d12f0eb><div class="" data-v-1d12f0eb><div class="bg-wds-light-500 py-1 px-3 border max-w-max border-wds-light-200 rounded-full" data-testid="activity-display-card-stats"><p class="text-wds-dark-500 text-w-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 10 questions</span></p></div></div></div></div><div class="border-t border-wds-light-200 w-60 h-auto" data-v-1d12f0eb><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-1d12f0eb><div data-v-1d12f0eb><div aria-describedby="tooltip-0.b7fyspsxtje" class="contents"><p class="text-w-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none" tooltipposition="top">Video Games</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/quiz_solid_circle.png" alt="quiz" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="activity-type-text">Quiz</p></div><p class="text-wds-dark-100 text-w-content-base font-semibold" data-v-1d12f0eb> • </p><p class="text-wds-dark-200 text-w-content-small font-semibold" data-testid="activity-display-card-grade" data-v-1d12f0eb>6th - 12th Grade</p></div></div></div></div></div></a><a href="/admin/quiz/60cb6c61c29fe6001b8bd5d3/brand-labels" data-testid="activity-popular-resource-card-60cb6c61c29fe6001b8bd5d3" data-v-1d12f0eb><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-1d12f0eb><div class="flex cursor-pointer bg-wds-light-500 rounded-w-admin-lg border border-wds-light-200 transition-all hover:border-wds-magenta-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-1d12f0eb><div class="relative box-border w-full h-full bg-wds-light-400 relative" data-v-1d12f0eb><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-1d12f0eb><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Brand Labels" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-1d12f0eb></div><div class="bottom-2 left-2 absolute" data-v-1d12f0eb><div class="" data-v-1d12f0eb><div class="bg-wds-light-500 py-1 px-3 border max-w-max border-wds-light-200 rounded-full" data-testid="activity-display-card-stats"><p class="text-wds-dark-500 text-w-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 20 questions</span></p></div></div></div></div><div class="border-t border-wds-light-200 w-60 h-auto" data-v-1d12f0eb><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-1d12f0eb><div data-v-1d12f0eb><div aria-describedby="tooltip-0.x0y8j15es0r" class="contents"><p class="text-w-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none" tooltipposition="top">Brand Labels</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/quiz_solid_circle.png" alt="quiz" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="activity-type-text">Quiz</p></div><p class="text-wds-dark-100 text-w-content-base font-semibold" data-v-1d12f0eb> • </p><p class="text-wds-dark-200 text-w-content-small font-semibold" data-testid="activity-display-card-grade" data-v-1d12f0eb>5th - 12th Grade</p></div></div></div></div></div></a><a href="/admin/quiz/68d564f266d638114702d3b3/core-4-of-customer-service-student-edition" data-testid="activity-popular-resource-card-68d564f266d638114702d3b3" data-v-1d12f0eb><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-1d12f0eb><div class="flex cursor-pointer bg-wds-light-500 rounded-w-admin-lg border border-wds-light-200 transition-all hover:border-wds-magenta-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-1d12f0eb><div class="relative box-border w-full h-full bg-wds-light-400 relative" data-v-1d12f0eb><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-1d12f0eb><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Core 4 of Customer Service - Student Edition" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-1d12f0eb></div><div class="bottom-2 left-2 absolute" data-v-1d12f0eb><div class="" data-v-1d12f0eb><div class="bg-wds-light-500 py-1 px-3 border max-w-max border-wds-light-200 rounded-full" data-testid="activity-display-card-stats"><p class="text-wds-dark-500 text-w-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 15 questions</span></p></div></div></div></div><div class="border-t border-wds-light-200 w-60 h-auto" data-v-1d12f0eb><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-1d12f0eb><div data-v-1d12f0eb><div aria-describedby="tooltip-0.j60kuneb81" class="contents"><p class="text-w-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none" tooltipposition="top">Core 4 of Customer Service - Student Edition</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/quiz_solid_circle.png" alt="quiz" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="activity-type-text">Quiz</p></div><p class="text-wds-dark-100 text-w-content-base font-semibold" data-v-1d12f0eb> • </p><p class="text-wds-dark-200 text-w-content-small font-semibold" data-testid="activity-display-card-grade" data-v-1d12f0eb>6th - 8th Grade</p></div></div></div></div></div></a><a href="/admin/presentation/68cda0f2d5fb650a2d7b2c69/what-is-bullying-bullying-lesson-series-6-12" data-testid="activity-popular-resource-card-68cda0f2d5fb650a2d7b2c69" data-v-1d12f0eb><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-1d12f0eb><div class="flex cursor-pointer bg-wds-light-500 rounded-w-admin-lg border border-wds-light-200 transition-all hover:border-wds-magenta-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-1d12f0eb><div class="relative box-border w-full h-full bg-wds-light-400 relative" data-v-1d12f0eb><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-1d12f0eb><img src="https://cf.quizizz.com/image/image-loader.svg" alt="What is Bullying?- Bullying Lesson Series 6-12" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-1d12f0eb></div><div class="bottom-2 left-2 absolute" data-v-1d12f0eb><div class="" data-v-1d12f0eb><div class="bg-wds-light-500 py-1 px-3 border max-w-max border-wds-light-200 rounded-full" data-testid="activity-display-card-stats"><p class="text-wds-dark-500 text-w-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 15 questions</span></p></div></div></div></div><div class="border-t border-wds-light-200 w-60 h-auto" data-v-1d12f0eb><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-1d12f0eb><div data-v-1d12f0eb><div aria-describedby="tooltip-0.opcfxwymi3h" class="contents"><p class="text-w-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none" tooltipposition="top">What is Bullying?- Bullying Lesson Series 6-12</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/presentation_solid_circle.png" alt="lesson" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="activity-type-text">Lesson</p></div><p class="text-wds-dark-100 text-w-content-base font-semibold" data-v-1d12f0eb> • </p><p class="text-wds-dark-200 text-w-content-small font-semibold" data-testid="activity-display-card-grade" data-v-1d12f0eb>11th Grade</p></div></div></div></div></div></a><a href="/admin/quiz/5c389a492f1851001b880bd4/multiplication-facts" data-testid="activity-popular-resource-card-5c389a492f1851001b880bd4" data-v-1d12f0eb><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-1d12f0eb><div class="flex cursor-pointer bg-wds-light-500 rounded-w-admin-lg border border-wds-light-200 transition-all hover:border-wds-magenta-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-1d12f0eb><div class="relative box-border w-full h-full bg-wds-light-400 relative" data-v-1d12f0eb><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-1d12f0eb><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Multiplication Facts" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-1d12f0eb></div><div class="bottom-2 left-2 absolute" data-v-1d12f0eb><div class="" data-v-1d12f0eb><div class="bg-wds-light-500 py-1 px-3 border max-w-max border-wds-light-200 rounded-full" data-testid="activity-display-card-stats"><p class="text-wds-dark-500 text-w-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 25 questions</span></p></div></div></div></div><div class="border-t border-wds-light-200 w-60 h-auto" data-v-1d12f0eb><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-1d12f0eb><div data-v-1d12f0eb><div aria-describedby="tooltip-0.9mqlprza0qg" class="contents"><p class="text-w-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none" tooltipposition="top">Multiplication Facts</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/quiz_solid_circle.png" alt="quiz" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="activity-type-text">Quiz</p></div><p class="text-wds-dark-100 text-w-content-base font-semibold" data-v-1d12f0eb> • </p><p class="text-wds-dark-200 text-w-content-small font-semibold" data-testid="activity-display-card-grade" data-v-1d12f0eb>5th Grade</p></div></div></div></div></div></a><a href="/admin/quiz/5da88ffcfec3ff001ce68888/subtracting-integers" data-testid="activity-popular-resource-card-5da88ffcfec3ff001ce68888" data-v-1d12f0eb><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-1d12f0eb><div class="flex cursor-pointer bg-wds-light-500 rounded-w-admin-lg border border-wds-light-200 transition-all hover:border-wds-magenta-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-1d12f0eb><div class="relative box-border w-full h-full bg-wds-light-400 relative" data-v-1d12f0eb><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-1d12f0eb><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Subtracting Integers" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-1d12f0eb></div><div class="bottom-2 left-2 absolute" data-v-1d12f0eb><div class="" data-v-1d12f0eb><div class="bg-wds-light-500 py-1 px-3 border max-w-max border-wds-light-200 rounded-full" data-testid="activity-display-card-stats"><p class="text-wds-dark-500 text-w-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 15 questions</span></p></div></div></div></div><div class="border-t border-wds-light-200 w-60 h-auto" data-v-1d12f0eb><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-1d12f0eb><div data-v-1d12f0eb><div aria-describedby="tooltip-0.uzgzcynvyyf" class="contents"><p class="text-w-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none" tooltipposition="top">Subtracting Integers</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/quiz_solid_circle.png" alt="quiz" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="activity-type-text">Quiz</p></div><p class="text-wds-dark-100 text-w-content-base font-semibold" data-v-1d12f0eb> • </p><p class="text-wds-dark-200 text-w-content-small font-semibold" data-testid="activity-display-card-grade" data-v-1d12f0eb>7th Grade</p></div></div></div></div></div></a><a href="/admin/quiz/5efd0a3bd81107001b1430c2/adding-integers" data-testid="activity-popular-resource-card-5efd0a3bd81107001b1430c2" data-v-1d12f0eb><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-1d12f0eb><div class="flex cursor-pointer bg-wds-light-500 rounded-w-admin-lg border border-wds-light-200 transition-all hover:border-wds-magenta-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-1d12f0eb><div class="relative box-border w-full h-full bg-wds-light-400 relative" data-v-1d12f0eb><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-1d12f0eb><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Adding Integers" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-1d12f0eb></div><div class="bottom-2 left-2 absolute" data-v-1d12f0eb><div class="" data-v-1d12f0eb><div class="bg-wds-light-500 py-1 px-3 border max-w-max border-wds-light-200 rounded-full" data-testid="activity-display-card-stats"><p class="text-wds-dark-500 text-w-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 22 questions</span></p></div></div></div></div><div class="border-t border-wds-light-200 w-60 h-auto" data-v-1d12f0eb><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-1d12f0eb><div data-v-1d12f0eb><div aria-describedby="tooltip-0.lyrx3ojbq9e" class="contents"><p class="text-w-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none" tooltipposition="top">Adding Integers</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/quiz_solid_circle.png" alt="quiz" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="activity-type-text">Quiz</p></div><p class="text-wds-dark-100 text-w-content-base font-semibold" data-v-1d12f0eb> • </p><p class="text-wds-dark-200 text-w-content-small font-semibold" data-testid="activity-display-card-grade" data-v-1d12f0eb>6th Grade</p></div></div></div></div></div></a><a href="/admin/video-quiz/66e972146a6efd0f8e6d9932/exploring-digital-citizenship-essentials" data-testid="activity-popular-resource-card-66e972146a6efd0f8e6d9932" data-v-1d12f0eb><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-1d12f0eb><div class="flex cursor-pointer bg-wds-light-500 rounded-w-admin-lg border border-wds-light-200 transition-all hover:border-wds-magenta-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-1d12f0eb><div class="relative box-border w-full h-full bg-wds-light-400 relative" data-v-1d12f0eb><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-1d12f0eb><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Exploring Digital Citizenship Essentials" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-1d12f0eb></div><div class="bottom-2 left-2 absolute" data-v-1d12f0eb><div class="" data-v-1d12f0eb><div class="bg-wds-light-500 py-1 px-3 border max-w-max border-wds-light-200 rounded-full" data-testid="activity-display-card-stats"><p class="text-wds-dark-500 text-w-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 10 questions</span></p></div></div></div></div><div class="border-t border-wds-light-200 w-60 h-auto" data-v-1d12f0eb><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-1d12f0eb><div data-v-1d12f0eb><div aria-describedby="tooltip-0.u11h3smj5b" class="contents"><p class="text-w-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none" tooltipposition="top">Exploring Digital Citizenship Essentials</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/video-quiz_solid_circle.png" alt="interactive video" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="activity-type-text">Interactive video</p></div><p class="text-wds-dark-100 text-w-content-base font-semibold" data-v-1d12f0eb> • </p><p class="text-wds-dark-200 text-w-content-small font-semibold" data-testid="activity-display-card-grade" data-v-1d12f0eb>6th - 10th Grade</p></div></div></div></div></div></a></div></div></div><div class="left-0 bottom-0 absolute w-full" data-v-17c94643><div class="bg-wds-dark-500-50 border border-wds-light-500-20 rounded-w-admin-lg w-auto h-2 x-thumb relative cursor-grab" style="width:0%;left:0%;opacity:0;" data-v-17c94643></div></div></div><div class="right-0 top-0 bottom-0 absolute gradient-right" data-v-4c33f125><div class="flex p-2 justify-start items-center w-full h-full flex-row flex-nowrap" data-v-4c33f125><button type="button" aria-label="chevron-right" class="bg-wds-light-500 hover:bg-wds-light-300 active:bg-wds-light-200 w-8 h-8 border-wds-light-200 border rounded-w-admin-lg border bg-clip-padding relative rounded flex items-center justify-center cursor-pointer focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 focus-visible:outline-ds-lilac-500-40 shrink-0" data-testid="carousel-right-button" data-v-4c33f125><div class="flex visible justify-center items-center h-full flex-row flex-nowrap"><div class="flex justify-center items-center w-5 h-5 text-sm text-wds-dark-500 flex-shrink-0" data-testid><i class="fas fa-chevron-right"></i></div></div></button></div></div></div></div><div class="flex bg-wds-light-500 gap-4 p-8 rounded-w-admin-xl border border-wds-light-200 justify-start items-stretch flex-row flex-nowrap"><div class="flex gap-3 max-w-40 justify-start items-start flex-col flex-nowrap" data-testid="subject-resources-identifier"><div class="flex min-h-16 min-w-16 max-w-16 rounded-full bg-wds-success-100 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center w-10 h-10 text-3xl text-wds-success-600 flex-shrink-0" data-testid><i class="fas fa-compass"></i></div></div><h2 class="text-w-header-base font-semibold">Discover more resources for Information Technology (IT)</h2></div><div class="overflow-hidden w-auto h-auto flex-grow flex-shrink basis-full relative" data-testid="recommendation-container" data-v-4c33f125><div class="h-full relative" data-v-17c94643 data-v-4c33f125><div class="scroll-container w-auto h-full" style="height:;max-height:70vh;" data-v-17c94643><div class="content h-full" data-v-17c94643><div class="flex gap-4 justify-start items-stretch flex-row flex-nowrap"><a href="/admin/quiz/5bc39aa4930ccd001b4eda02/definite-and-indefinite-articles-in-spanish-avancemos" data-testid="activity-subject-resource-card-5bc39aa4930ccd001b4eda02" data-v-1d12f0eb><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-1d12f0eb><div class="flex cursor-pointer bg-wds-light-500 rounded-w-admin-lg border border-wds-light-200 transition-all hover:border-wds-magenta-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-1d12f0eb><div class="relative box-border w-full h-full bg-wds-light-400 relative" data-v-1d12f0eb><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-1d12f0eb><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Definite and Indefinite Articles in Spanish (Avancemos)" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-1d12f0eb></div><div class="bottom-2 left-2 absolute" data-v-1d12f0eb><div class="" data-v-1d12f0eb><div class="bg-wds-light-500 py-1 px-3 border max-w-max border-wds-light-200 rounded-full" data-testid="activity-display-card-stats"><p class="text-wds-dark-500 text-w-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 20 questions</span></p></div></div></div></div><div class="border-t border-wds-light-200 w-60 h-auto" data-v-1d12f0eb><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-1d12f0eb><div data-v-1d12f0eb><div aria-describedby="tooltip-0.mu3ph4bjhyg" class="contents"><p class="text-w-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none" tooltipposition="top">Definite and Indefinite Articles in Spanish (Avancemos)</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/quiz_solid_circle.png" alt="quiz" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="activity-type-text">Quiz</p></div><p class="text-wds-dark-100 text-w-content-base font-semibold" data-v-1d12f0eb> • </p><p class="text-wds-dark-200 text-w-content-small font-semibold" data-testid="activity-display-card-grade" data-v-1d12f0eb>8th Grade - University</p></div></div></div></div></div></a><a href="/admin/video-quiz/67760edf53c5d92a02a15a4f/force-and-motion" data-testid="activity-subject-resource-card-67760edf53c5d92a02a15a4f" data-v-1d12f0eb><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-1d12f0eb><div class="flex cursor-pointer bg-wds-light-500 rounded-w-admin-lg border border-wds-light-200 transition-all hover:border-wds-magenta-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-1d12f0eb><div class="relative box-border w-full h-full bg-wds-light-400 relative" data-v-1d12f0eb><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-1d12f0eb><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Force and Motion" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-1d12f0eb></div><div class="bottom-2 left-2 absolute" data-v-1d12f0eb><div class="" data-v-1d12f0eb><div class="bg-wds-light-500 py-1 px-3 border max-w-max border-wds-light-200 rounded-full" data-testid="activity-display-card-stats"><p class="text-wds-dark-500 text-w-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 7 questions</span></p></div></div></div></div><div class="border-t border-wds-light-200 w-60 h-auto" data-v-1d12f0eb><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-1d12f0eb><div data-v-1d12f0eb><div aria-describedby="tooltip-0.crybd156sf" class="contents"><p class="text-w-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none" tooltipposition="top">Force and Motion</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/video-quiz_solid_circle.png" alt="interactive video" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="activity-type-text">Interactive video</p></div><p class="text-wds-dark-100 text-w-content-base font-semibold" data-v-1d12f0eb> • </p><p class="text-wds-dark-200 text-w-content-small font-semibold" data-testid="activity-display-card-grade" data-v-1d12f0eb>4th Grade - University</p></div></div></div></div></div></a><a href="/admin/quiz/633d91074d509b001da41b83/unit-5-key-terms" data-testid="activity-subject-resource-card-633d91074d509b001da41b83" data-v-1d12f0eb><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-1d12f0eb><div class="flex cursor-pointer bg-wds-light-500 rounded-w-admin-lg border border-wds-light-200 transition-all hover:border-wds-magenta-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-1d12f0eb><div class="relative box-border w-full h-full bg-wds-light-400 relative" data-v-1d12f0eb><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-1d12f0eb><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Unit 5 Key Terms" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-1d12f0eb></div><div class="bottom-2 left-2 absolute" data-v-1d12f0eb><div class="" data-v-1d12f0eb><div class="bg-wds-light-500 py-1 px-3 border max-w-max border-wds-light-200 rounded-full" data-testid="activity-display-card-stats"><p class="text-wds-dark-500 text-w-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 36 questions</span></p></div></div></div></div><div class="border-t border-wds-light-200 w-60 h-auto" data-v-1d12f0eb><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-1d12f0eb><div data-v-1d12f0eb><div aria-describedby="tooltip-0.snq7cglw1g8" class="contents"><p class="text-w-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none" tooltipposition="top">Unit 5 Key Terms</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/quiz_solid_circle.png" alt="quiz" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="activity-type-text">Quiz</p></div><p class="text-wds-dark-100 text-w-content-base font-semibold" data-v-1d12f0eb> • </p><p class="text-wds-dark-200 text-w-content-small font-semibold" data-testid="activity-display-card-grade" data-v-1d12f0eb>11th Grade - University</p></div></div></div></div></div></a><a href="/admin/video-quiz/67ae7721bb876e907d86c651/figurative-language-idioms-similes-and-metaphors" data-testid="activity-subject-resource-card-67ae7721bb876e907d86c651" data-v-1d12f0eb><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-1d12f0eb><div class="flex cursor-pointer bg-wds-light-500 rounded-w-admin-lg border border-wds-light-200 transition-all hover:border-wds-magenta-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-1d12f0eb><div class="relative box-border w-full h-full bg-wds-light-400 relative" data-v-1d12f0eb><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-1d12f0eb><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Figurative Language: Idioms, Similes, and Metaphors" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-1d12f0eb></div><div class="bottom-2 left-2 absolute" data-v-1d12f0eb><div class="" data-v-1d12f0eb><div class="bg-wds-light-500 py-1 px-3 border max-w-max border-wds-light-200 rounded-full" data-testid="activity-display-card-stats"><p class="text-wds-dark-500 text-w-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 7 questions</span></p></div></div></div></div><div class="border-t border-wds-light-200 w-60 h-auto" data-v-1d12f0eb><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-1d12f0eb><div data-v-1d12f0eb><div aria-describedby="tooltip-0.3wvomxea29n" class="contents"><p class="text-w-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none" tooltipposition="top">Figurative Language: Idioms, Similes, and Metaphors</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/video-quiz_solid_circle.png" alt="interactive video" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="activity-type-text">Interactive video</p></div><p class="text-wds-dark-100 text-w-content-base font-semibold" data-v-1d12f0eb> • </p><p class="text-wds-dark-200 text-w-content-small font-semibold" data-testid="activity-display-card-grade" data-v-1d12f0eb>4th Grade - University</p></div></div></div></div></div></a><a href="/admin/quiz/5d92112e53b4f6001a11b4a4/properties-of-equality" data-testid="activity-subject-resource-card-5d92112e53b4f6001a11b4a4" data-v-1d12f0eb><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-1d12f0eb><div class="flex cursor-pointer bg-wds-light-500 rounded-w-admin-lg border border-wds-light-200 transition-all hover:border-wds-magenta-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-1d12f0eb><div class="relative box-border w-full h-full bg-wds-light-400 relative" data-v-1d12f0eb><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-1d12f0eb><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Properties of Equality" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-1d12f0eb></div><div class="bottom-2 left-2 absolute" data-v-1d12f0eb><div class="" data-v-1d12f0eb><div class="bg-wds-light-500 py-1 px-3 border max-w-max border-wds-light-200 rounded-full" data-testid="activity-display-card-stats"><p class="text-wds-dark-500 text-w-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 15 questions</span></p></div></div></div></div><div class="border-t border-wds-light-200 w-60 h-auto" data-v-1d12f0eb><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-1d12f0eb><div data-v-1d12f0eb><div aria-describedby="tooltip-0.gjz734mynvc" class="contents"><p class="text-w-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none" tooltipposition="top">Properties of Equality</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/quiz_solid_circle.png" alt="quiz" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="activity-type-text">Quiz</p></div><p class="text-wds-dark-100 text-w-content-base font-semibold" data-v-1d12f0eb> • </p><p class="text-wds-dark-200 text-w-content-small font-semibold" data-testid="activity-display-card-grade" data-v-1d12f0eb>8th Grade - University</p></div></div></div></div></div></a><a href="/admin/quiz/59edebcddc9498110015203e/wh-unit-3-exam-review" data-testid="activity-subject-resource-card-59edebcddc9498110015203e" data-v-1d12f0eb><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-1d12f0eb><div class="flex cursor-pointer bg-wds-light-500 rounded-w-admin-lg border border-wds-light-200 transition-all hover:border-wds-magenta-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-1d12f0eb><div class="relative box-border w-full h-full bg-wds-light-400 relative" data-v-1d12f0eb><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-1d12f0eb><img src="https://cf.quizizz.com/image/image-loader.svg" alt="WH - Unit 3 Exam Review*" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-1d12f0eb></div><div class="bottom-2 left-2 absolute" data-v-1d12f0eb><div class="" data-v-1d12f0eb><div class="bg-wds-light-500 py-1 px-3 border max-w-max border-wds-light-200 rounded-full" data-testid="activity-display-card-stats"><p class="text-wds-dark-500 text-w-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 38 questions</span></p></div></div></div></div><div class="border-t border-wds-light-200 w-60 h-auto" data-v-1d12f0eb><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-1d12f0eb><div data-v-1d12f0eb><div aria-describedby="tooltip-0.tl72dhedzw" class="contents"><p class="text-w-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none" tooltipposition="top">WH - Unit 3 Exam Review*</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/quiz_solid_circle.png" alt="quiz" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="activity-type-text">Quiz</p></div><p class="text-wds-dark-100 text-w-content-base font-semibold" data-v-1d12f0eb> • </p><p class="text-wds-dark-200 text-w-content-small font-semibold" data-testid="activity-display-card-grade" data-v-1d12f0eb>10th Grade - University</p></div></div></div></div></div></a><a href="/admin/quiz/68d69440c551c7b79c627bc6/advise-vs-advice" data-testid="activity-subject-resource-card-68d69440c551c7b79c627bc6" data-v-1d12f0eb><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-1d12f0eb><div class="flex cursor-pointer bg-wds-light-500 rounded-w-admin-lg border border-wds-light-200 transition-all hover:border-wds-magenta-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-1d12f0eb><div class="relative box-border w-full h-full bg-wds-light-400 relative" data-v-1d12f0eb><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-1d12f0eb><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Advise vs. Advice" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-1d12f0eb></div><div class="bottom-2 left-2 absolute" data-v-1d12f0eb><div class="" data-v-1d12f0eb><div class="bg-wds-light-500 py-1 px-3 border max-w-max border-wds-light-200 rounded-full" data-testid="activity-display-card-stats"><p class="text-wds-dark-500 text-w-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 21 questions</span></p></div></div></div></div><div class="border-t border-wds-light-200 w-60 h-auto" data-v-1d12f0eb><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-1d12f0eb><div data-v-1d12f0eb><div aria-describedby="tooltip-0.h4mu4im0axn" class="contents"><p class="text-w-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none" tooltipposition="top">Advise vs. Advice</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/quiz_solid_circle.png" alt="quiz" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="activity-type-text">Quiz</p></div><p class="text-wds-dark-100 text-w-content-base font-semibold" data-v-1d12f0eb> • </p><p class="text-wds-dark-200 text-w-content-small font-semibold" data-testid="activity-display-card-grade" data-v-1d12f0eb>6th Grade - University</p></div></div></div></div></div></a><a href="/admin/quiz/5f5b8b1c0d84d5001b46f017/reading-a-ruler" data-testid="activity-subject-resource-card-5f5b8b1c0d84d5001b46f017" data-v-1d12f0eb><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-1d12f0eb><div class="flex cursor-pointer bg-wds-light-500 rounded-w-admin-lg border border-wds-light-200 transition-all hover:border-wds-magenta-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-1d12f0eb><div class="relative box-border w-full h-full bg-wds-light-400 relative" data-v-1d12f0eb><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-1d12f0eb><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Reading a ruler!" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-1d12f0eb></div><div class="bottom-2 left-2 absolute" data-v-1d12f0eb><div class="" data-v-1d12f0eb><div class="bg-wds-light-500 py-1 px-3 border max-w-max border-wds-light-200 rounded-full" data-testid="activity-display-card-stats"><p class="text-wds-dark-500 text-w-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 12 questions</span></p></div></div></div></div><div class="border-t border-wds-light-200 w-60 h-auto" data-v-1d12f0eb><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-1d12f0eb><div data-v-1d12f0eb><div aria-describedby="tooltip-0.e1sl38npi7s" class="contents"><p class="text-w-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none" tooltipposition="top">Reading a ruler!</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-1d12f0eb><div class="overflow-hidden w-4 h-4 flex-shrink-0 relative group"><img src="https://cf.quizizz.com/image/icons/quiz_solid_circle.png" alt="quiz" class="w-full h-full" data-testid="activity-type-image"></div><p class="text-wds-dark-200 text-w-content-small font-normal" data-testid="activity-type-text">Quiz</p></div><p class="text-wds-dark-100 text-w-content-base font-semibold" data-v-1d12f0eb> • </p><p class="text-wds-dark-200 text-w-content-small font-semibold" data-testid="activity-display-card-grade" data-v-1d12f0eb>9th Grade - University</p></div></div></div></div></div></a></div></div></div><div class="left-0 bottom-0 absolute w-full" data-v-17c94643><div class="bg-wds-dark-500-50 border border-wds-light-500-20 rounded-w-admin-lg w-auto h-2 x-thumb relative cursor-grab" style="width:0%;left:0%;opacity:0;" data-v-17c94643></div></div></div><div class="right-0 top-0 bottom-0 absolute gradient-right" data-v-4c33f125><div class="flex p-2 justify-start items-center w-full h-full flex-row flex-nowrap" data-v-4c33f125><button type="button" aria-label="chevron-right" class="bg-wds-light-500 hover:bg-wds-light-300 active:bg-wds-light-200 w-8 h-8 border-wds-light-200 border rounded-w-admin-lg border bg-clip-padding relative rounded flex items-center justify-center cursor-pointer focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 focus-visible:outline-ds-lilac-500-40 shrink-0" data-testid="carousel-right-button" data-v-4c33f125><div class="flex visible justify-center items-center h-full flex-row flex-nowrap"><div class="flex justify-center items-center w-5 h-5 text-sm text-wds-dark-500 flex-shrink-0" data-testid><i class="fas fa-chevron-right"></i></div></div></button></div></div></div></div><div class="overflow-hidden w-auto h-auto flex-grow flex-shrink basis-full relative" data-testid="recommendation-container" data-v-4c33f125><div class="h-full relative" data-v-17c94643 data-v-4c33f125><div class="scroll-container w-auto h-full" style="height:;max-height:70vh;" data-v-17c94643><div class="content h-full" data-v-17c94643><div class="flex gap-4 justify-start items-stretch flex-row flex-nowrap"><div class="flex-shrink-0"><a href="/library/social-studies/economics/contemporary-economic-challenges/economic-inequality/causes-and-consequences" target="_blank"><div class="flex gap-1 py-1 px-3 border border-wds-light-200 rounded-full bg-wds-light-500 hover:bg-wds-light-300 active:bg-wds-light-200 active:border-wds-light-100 cursor-pointer justify-center items-center flex-row flex-nowrap group focus-within:ring-offset-2 focus-within:ring-4 focus-within:ring-ds-lilac-500-40" data-testid="category-page-qualifier-chip-0"><div class="flex justify-center items-center h-5 text-sm text-wds-dark-500 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-wds-dark-500 select-none text-w-control-base font-semibold">Causes and Consequences</span><div class="sr-only"><input type="checkbox" aria-labelledby="Causes and Consequences-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/math/functions/functions-linear/linear-function-concepts/understanding-linear-functions/distinguishing-between-linear-and-non-linear-functions" target="_blank"><div class="flex gap-1 py-1 px-3 border border-wds-light-200 rounded-full bg-wds-light-500 hover:bg-wds-light-300 active:bg-wds-light-200 active:border-wds-light-100 cursor-pointer justify-center items-center flex-row flex-nowrap group focus-within:ring-offset-2 focus-within:ring-4 focus-within:ring-ds-lilac-500-40" data-testid="category-page-qualifier-chip-1"><div class="flex justify-center items-center h-5 text-sm text-wds-dark-500 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-wds-dark-500 select-none text-w-control-base font-semibold">Distinguishing between linear and non-linear functions</span><div class="sr-only"><input type="checkbox" aria-labelledby="Distinguishing between linear and non-linear functions-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/science/life-science/structure-and-function/animals/seasonal-behaviors/seasonal-adaptations" target="_blank"><div class="flex gap-1 py-1 px-3 border border-wds-light-200 rounded-full bg-wds-light-500 hover:bg-wds-light-300 active:bg-wds-light-200 active:border-wds-light-100 cursor-pointer justify-center items-center flex-row flex-nowrap group focus-within:ring-offset-2 focus-within:ring-4 focus-within:ring-ds-lilac-500-40" data-testid="category-page-qualifier-chip-2"><div class="flex justify-center items-center h-5 text-sm text-wds-dark-500 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-wds-dark-500 select-none text-w-control-base font-semibold">Seasonal adaptations</span><div class="sr-only"><input type="checkbox" aria-labelledby="Seasonal adaptations-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/ela/foundational-reading-skills/phonics/long-vowels/vowel-team-patterns" target="_blank"><div class="flex gap-1 py-1 px-3 border border-wds-light-200 rounded-full bg-wds-light-500 hover:bg-wds-light-300 active:bg-wds-light-200 active:border-wds-light-100 cursor-pointer justify-center items-center flex-row flex-nowrap group focus-within:ring-offset-2 focus-within:ring-4 focus-within:ring-ds-lilac-500-40" data-testid="category-page-qualifier-chip-3"><div class="flex justify-center items-center h-5 text-sm text-wds-dark-500 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-wds-dark-500 select-none text-w-control-base font-semibold">Vowel team patterns</span><div class="sr-only"><input type="checkbox" aria-labelledby="Vowel team patterns-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/ela/language/conventions/mechanics/punctuation/punctuation-with-quotations/cite-quotations-appropriately" target="_blank"><div class="flex gap-1 py-1 px-3 border border-wds-light-200 rounded-full bg-wds-light-500 hover:bg-wds-light-300 active:bg-wds-light-200 active:border-wds-light-100 cursor-pointer justify-center items-center flex-row flex-nowrap group focus-within:ring-offset-2 focus-within:ring-4 focus-within:ring-ds-lilac-500-40" data-testid="category-page-qualifier-chip-4"><div class="flex justify-center items-center h-5 text-sm text-wds-dark-500 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-wds-dark-500 select-none text-w-control-base font-semibold">Cite quotations appropriately</span><div class="sr-only"><input type="checkbox" aria-labelledby="Cite quotations appropriately-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/ela/writing/strategies" target="_blank"><div class="flex gap-1 py-1 px-3 border border-wds-light-200 rounded-full bg-wds-light-500 hover:bg-wds-light-300 active:bg-wds-light-200 active:border-wds-light-100 cursor-pointer justify-center items-center flex-row flex-nowrap group focus-within:ring-offset-2 focus-within:ring-4 focus-within:ring-ds-lilac-500-40" data-testid="category-page-qualifier-chip-5"><div class="flex justify-center items-center h-5 text-sm text-wds-dark-500 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-wds-dark-500 select-none text-w-control-base font-semibold">Strategies</span><div class="sr-only"><input type="checkbox" aria-labelledby="Strategies-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/ela/writing/writing-craft/writing-organization/conclusion" target="_blank"><div class="flex gap-1 py-1 px-3 border border-wds-light-200 rounded-full bg-wds-light-500 hover:bg-wds-light-300 active:bg-wds-light-200 active:border-wds-light-100 cursor-pointer justify-center items-center flex-row flex-nowrap group focus-within:ring-offset-2 focus-within:ring-4 focus-within:ring-ds-lilac-500-40" data-testid="category-page-qualifier-chip-6"><div class="flex justify-center items-center h-5 text-sm text-wds-dark-500 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-wds-dark-500 select-none text-w-control-base font-semibold">Conclusion</span><div class="sr-only"><input type="checkbox" aria-labelledby="Conclusion-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/math/number-system/operations-and-algebraic-thinking/multiplication-and-division/understanding-division/division-with-remainders" target="_blank"><div class="flex gap-1 py-1 px-3 border border-wds-light-200 rounded-full bg-wds-light-500 hover:bg-wds-light-300 active:bg-wds-light-200 active:border-wds-light-100 cursor-pointer justify-center items-center flex-row flex-nowrap group focus-within:ring-offset-2 focus-within:ring-4 focus-within:ring-ds-lilac-500-40" data-testid="category-page-qualifier-chip-7"><div class="flex justify-center items-center h-5 text-sm text-wds-dark-500 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-wds-dark-500 select-none text-w-control-base font-semibold">Division with remainders</span><div class="sr-only"><input type="checkbox" aria-labelledby="Division with remainders-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/math/number-system/real-numbers/understanding-irrational-numbers/estimating-the-value-of-expressions-involving-irrational-numbers" target="_blank"><div class="flex gap-1 py-1 px-3 border border-wds-light-200 rounded-full bg-wds-light-500 hover:bg-wds-light-300 active:bg-wds-light-200 active:border-wds-light-100 cursor-pointer justify-center items-center flex-row flex-nowrap group focus-within:ring-offset-2 focus-within:ring-4 focus-within:ring-ds-lilac-500-40" data-testid="category-page-qualifier-chip-8"><div class="flex justify-center items-center h-5 text-sm text-wds-dark-500 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-wds-dark-500 select-none text-w-control-base font-semibold">Estimating the value of expressions involving irrational numbers</span><div class="sr-only"><input type="checkbox" aria-labelledby="Estimating the value of expressions involving irrational numbers-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/science/physical-science/energy/light/how-does-light-travel-and-interact-with-matter" target="_blank"><div class="flex gap-1 py-1 px-3 border border-wds-light-200 rounded-full bg-wds-light-500 hover:bg-wds-light-300 active:bg-wds-light-200 active:border-wds-light-100 cursor-pointer justify-center items-center flex-row flex-nowrap group focus-within:ring-offset-2 focus-within:ring-4 focus-within:ring-ds-lilac-500-40" data-testid="category-page-qualifier-chip-9"><div class="flex justify-center items-center h-5 text-sm text-wds-dark-500 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-wds-dark-500 select-none text-w-control-base font-semibold">How does light travel and interact with matter?</span><div class="sr-only"><input type="checkbox" aria-labelledby="How does light travel and interact with matter?-label"></div></div></a></div></div></div></div><div class="left-0 bottom-0 absolute w-full" data-v-17c94643><div class="bg-wds-dark-500-50 border border-wds-light-500-20 rounded-w-admin-lg w-auto h-2 x-thumb relative cursor-grab" style="width:0%;left:0%;opacity:0;" data-v-17c94643></div></div></div><div class="right-0 top-0 bottom-0 absolute gradient-right" data-v-4c33f125><div class="flex p-2 justify-start items-center w-full h-full flex-row flex-nowrap" data-v-4c33f125><button type="button" aria-label="chevron-right" class="bg-wds-light-500 hover:bg-wds-light-300 active:bg-wds-light-200 w-8 h-8 border-wds-light-200 border rounded-w-admin-lg border bg-clip-padding relative rounded flex items-center justify-center cursor-pointer focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 focus-visible:outline-ds-lilac-500-40 shrink-0" data-testid="carousel-right-button" data-v-4c33f125><div class="flex visible justify-center items-center h-full flex-row flex-nowrap"><div class="flex justify-center items-center w-5 h-5 text-sm text-wds-dark-500 flex-shrink-0" data-testid><i class="fas fa-chevron-right"></i></div></div></button></div></div></div></div></div></div><footer class="w-full py-8 mt-auto footer-container bg-light-3" data-v-32684c53><div class="px-4 mx-auto footer-inner-wrapper max-w-320 md:px-10" data-v-32684c53><div class="flex flex-col justify-between w-full" data-v-32684c53><div class="flex flex-col md:flex-row" data-v-32684c53><div class="grid justify-between w-full footer-links-container grow md:grid-rows-1" data-v-32684c53></div></div><div class="flex flex-col-reverse items-center justify-center w-full mb-10 md:mb-0 md:flex-row md:justify-between md:items-end" data-v-32684c53><div class="flex flex-col items-center space-y-4 md:items-start md:mt-5" data-v-32684c53><div class="flex flex-row items-center space-x-4 footer-bottom-container" data-v-32684c53><p class="text-sm font-semibold copyright text-dark-4" data-v-32684c53> © 2025 Quizizz Inc. (DBA Wayground) </p><div class="social-links" data-v-32684c53><a href="https://twitter.com/quizizz" rel="noopener noreferrer" target="_blank" aria-label="Twitter" data-v-32684c53><i class="social-icon fab fa-twitter" data-v-32684c53></i></a><a href="https://facebook.com/quizizz" rel="noopener noreferrer" target="_blank" aria-label="Facebook" data-v-32684c53><i class="social-icon fab fa-facebook" data-v-32684c53></i></a><a href="https://instagram.com/quizizz" rel="noopener noreferrer" target="_blank" aria-label="Instagram" data-v-32684c53><i class="social-icon fab fa-instagram" data-v-32684c53></i></a><span class="block w-px h-5 bg-dark-5" data-v-32684c53></span><a href="/practice/sitemaps" rel="noopenner noreferrer" target="_blank" data-v-32684c53><span class="text-sm text-dark-3 hover:underline" data-v-32684c53><span data-v-32684c53>Sitemap</span></span></a></div></div></div><div class="flex items-center col-span-2 mt-12 mb-6 space-x-4 md:mb-0 md:mt-4 md:col-span-1" data-v-32684c53><label class="text-sm font-bold text-center text-dark-3 hidden md:block" data-v-32684c53><span data-v-32684c53>Get our app</span></label><div class="flex space-x-2" data-v-32684c53><a href="https://share.quizizz.com/nz4P08MhCM" rel="noopener noreferrer" class="transition-all hover:scale-105" target="_blank" aria-label="App Store" data-v-32684c53><img class="m-auto duration-100 ease-linear w-28 app-store app-link" alt="apple store" src="https://cf.quizizz.com/img/landing/apple%20app%20store.png" label="" height="34" width="112" loading="lazy" aria-hidden="true" data-v-32684c53></a><a href="https://share.quizizz.com/EBAH8OlhCM" rel="noopener noreferrer" class="transition-all hover:scale-105" target="_blank" aria-label="Google Store" data-v-32684c53><img class="m-auto duration-100 ease-linear w-28 play-store app-link" alt="google playstore" src="https://cf.quizizz.com/img/landing/google%20play.png" label="" loading="lazy" height="34" width="112" aria-hidden="true" data-v-32684c53></a></div></div></div></div></div></footer></main></div><div id="overlay-layer-1" class="z-1 absolute top-0 left-0"></div><div id="modal-layer-2" class="z-5 absolute top-0 left-0"></div><div id="modal-overlay-layer-3" class="z-10 absolute top-0 left-0"></div><div id="third-party-layer-4" class="z-20 absolute top-0 left-0"></div><div id="layer-1" class="z-1 absolute top-0 left-0"></div><div id="layer-2" class="z-5 absolute top-0 left-0"></div><div id="layer-3" class="z-10 absolute top-0 left-0"></div><div id="layer-4" class="z-20 absolute top-0 left-0"></div><div id="layer-5" class="z-50 absolute top-0 left-0"></div></div><div id="teleports"></div><script type="application/json" data-nuxt-data="nuxt-app" data-ssr="true" id="__NUXT_DATA__">[["ShallowReactive",1],{"data":2,"state":2825,"once":2827,"_errors":2828,"serverRendered":5,"path":2830,"country":91,"region":2831,"nuxtSsrFeatureFlags":2832},["ShallowReactive",3],{"FeYxOIojFe":4,"vES8Fb3HLl":76,"Vq71iodBHb":2623,"QoNUILXciQ":2685},{"success":5,"data":6,"time":75},true,{"quizzes":7,"total":71,"timeTaken":72,"experiment":73,"source":74},[8,19,27,35,43,50,57,64],{"id":9,"isSuper":10,"type":11,"info":12,"shouldIndex":10,"stats":17},"67b7818daf69450be3ffcdc7",false,"video-quiz",{"grade":13,"name":15,"slug":15,"image":16},[14,14],"13","The Art of Doing - Web Development for Beginners - Final Project Part 3","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/0fa1a6a5-8c8e-41b1-ba08-ec273d08f64a-v2",{"totalQuestions":18},5,{"id":20,"isSuper":10,"type":11,"info":21,"shouldIndex":10,"stats":25},"67adf5a5a9503a0a5e9fa64c",{"grade":22,"name":23,"slug":23,"image":24},[14,14],"Next.js from Development to Deployment - Layout Component","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/fab1076a-52eb-43b3-8ca2-bde670bd5791-v2",{"totalQuestions":26},8,{"id":28,"isSuper":10,"type":11,"info":29,"shouldIndex":10,"stats":33},"67ae46c3d198df18b4cb1252",{"grade":30,"name":31,"slug":31,"image":32},[14,14],"Modern Web Design with HTML5, CSS3, and JavaScript - Sidebar Nav Website Project","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/d0381032-8775-460a-a32d-2b79fb9225c3-v2",{"totalQuestions":34},11,{"id":36,"isSuper":10,"type":11,"info":37,"shouldIndex":10,"stats":41},"67adf5a69534d0ccc00606bc",{"grade":38,"name":39,"slug":39,"image":40},[14,14],"Next.js from Development to Deployment - Custom 404 Page","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/5b2d2115-887e-4c04-84f0-8a8b80e77fcc-v2",{"totalQuestions":42},6,{"id":44,"isSuper":10,"type":11,"info":45,"shouldIndex":10,"stats":49},"67b04c98fdd4db836f1dfbda",{"grade":46,"name":47,"slug":47,"image":48},[14,14],"Modern Web Design with HTML5, CSS3, and JavaScript - Creating a Header and Footer Using Cascading Style Sheets (CSS)","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/f62a77c0-2101-4628-9a37-9d953f55d32e-v2",{"totalQuestions":42},{"id":51,"isSuper":10,"type":11,"info":52,"shouldIndex":10,"stats":56},"67ae4684b2ba77bad7f1dc00",{"grade":53,"name":54,"slug":54,"image":55},[14,14],"Modern Web Design with HTML5, CSS3, and JavaScript - Conclusion – Cascading Style Sheets (CSS) Grid","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/e55ebaf9-f8bc-40d5-837c-828f54569c7c-v2",{"totalQuestions":26},{"id":58,"isSuper":10,"type":11,"info":59,"shouldIndex":10,"stats":63},"67ae2684958922c6a672d825",{"grade":60,"name":61,"slug":61,"image":62},[14,14],"Modern HTML and CSS from the Beginning (Including Sass) - Widescreen & Tablet View","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/90e16106-e3bd-4a50-9748-5620a8199eaa-v2",{"totalQuestions":26},{"id":65,"isSuper":10,"type":11,"info":66,"shouldIndex":10,"stats":70},"67ae045bbc43aa4fa6fab032",{"grade":67,"name":68,"slug":68,"image":69},[14,14],"CSS Bootcamp: Master CSS (Including CSS Grid/Flexbox) - Bestselling Furniture-Style","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/e39d9542-91ac-47fd-8102-c7aa0fe92d15-v2",{"totalQuestions":26},3117,28,"quizPageRecoPublicSearch","recommended_search","2025-10-07T08:02:30.72083262Z",{"success":5,"message":77,"data":78,"time":2619,"meta":2620},"Ok",{"quiz":79,"draft":83},{"isTagged":10,"isLoved":10,"tagIds":80,"stats":81,"love":82,"cloned":10,"parentDetail":83,"deleted":10,"archived":10,"lifetimeAccess":10,"draftVersion":83,"publishedVersion":84,"isShared":10,"type":11,"_id":85,"createdBy":86,"info":103,"paidOrganization":2616,"createdAt":620,"updated":2617,"premiumUse":2618,"shouldIndex":5,"hasDraftVersion":10,"hasPublishedVersion":5,"gameChangerBadge":83,"lock":83},[],{"played":82,"totalPlayers":82,"totalCorrect":82,"totalQuestions":82},0,null,"67ae7efb10a2f1d14cec7b1a","67ae7efb10a2f1d14cec7b19",{"_id":87,"firstName":88,"lastName":89,"occupation":90,"country":91,"preferences":92,"grades":94,"subject_tags":98,"media":102},"65cf12f6e8a17f8c0da51a59","Wayground","Content","teacher","US",{"lang":93},"en",[42,95,26,96,97],7,9,10,[99,100,101],"Mathematics","English","Science","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/users/769a0bdf-3976-4a39-8f73-f4a2a4b2c767-v2",{"lang":93,"aiGenerated":10,"qm":104,"visibility":5,"subjects":118,"topics":121,"subtopics":122,"grade":123,"gradeLevel":83,"deleted":10,"pref":124,"traits":125,"standardIds":127,"__v":18,"meta":128,"_id":84,"name":15,"image":130,"aiCreateMeta":83,"questions":131,"questionDrafts":619,"standards":83,"courses":83,"createdAt":620,"updated":621,"interactiveVideoProps":622,"isProfane":10,"whitelisted":5,"slug":15},{"67ae7f1ebc43aa4fa6fb2969":105,"67ae7f1ebc43aa4fa6fb296a":107,"67ae7f1ebc43aa4fa6fb296b":109,"67ae7f1ebc43aa4fa6fb296c":110,"67ae7f1ebc43aa4fa6fb296d":111,"67ae7f1ebc43aa4fa6fb296e":112,"67ae7f1ebc43aa4fa6fb296f":113,"67ae7f1ebc43aa4fa6fb2970":114,"67ae7f1ebc43aa4fa6fb2971":115,"67ae7f1ebc43aa4fa6fb2972":116,"67ae7f1ebc43aa4fa6fb2973":117},{"time":106},900000,{"time":108},30000,{"time":108},{"time":108},{"time":108},{"time":108},{"time":108},{"time":108},{"time":108},{"time":108},{"time":108},[119,120],"Information Technology (IT)","Architecture",[],[],[14,14],{"time":83},{"isQuizWithoutCorrectAnswer":10,"totalSlides":82,"totalComprehensionQuestions":126,"nonAnswerableQuestions":126},1,[],{"slot":26,"experiment":129},"main_main","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/44610c7a-07e1-4035-9ce9-82af8f7b1f9d-v2",[132,192,238,280,323,365,408,449,492,535,577],{"structure":133,"standards":173,"topics":174,"isSuperParent":10,"standardIds":175,"aiGenerated":10,"__v":176,"teleportFrom":83,"cloned":83,"ver":177,"parent":83,"_id":178,"time":106,"published":5,"aiCreateMeta":83,"type":134,"comprehensionQuestionIds":179,"createdAt":190,"updated":191},{"kind":134,"answer":135,"settings":136,"marks":138,"query":139,"options":154,"explain":155,"theme":159,"graphs":168,"hints":169,"order":170,"hasMath":10,"media":171,"elements":172},"COMPREHENSION_VIDEO",[],{"hasCorrectAnswer":10,"fibDataType":137,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},"string",{"correct":82,"incorrect":82},{"answerTime":140,"math":141,"type":83,"hasMath":10,"media":143,"text":152,"_id":153},-1,{"latex":142,"template":83},[],[144],{"type":145,"meta":146},"video",{"duration":147,"endTime":147,"startTime":82,"videoId":148,"src":149,"thumbnail":150,"filmstrip":151},1339,"6687fdb3049a2c6bb2860eb8","boclips","https://cdnapisec.kaltura.com/p/1776261/thumbnail/entry_id/1_eek4iuku/width/{thumbnailWidth}/vid_slices/3/vid_slice/1","https://cdnapisec.kaltura.com/p/1776261/thumbnail/entry_id/1_eek4iuku/width/{thumbnailWidth}/vid_slices/{thumbnailCount}","","67ae7f1e2eee9ea8c9469601",[],{"math":156,"type":152,"hasMath":10,"media":158,"text":152},{"latex":157,"template":83},[],[],{"titleFontFamily":160,"fontFamily":160,"fontColor":161,"background":163,"shape":165},"Quicksand",{"text":162},"#5D2057",{"color":164,"image":152,"video":152},"#FFFFFF",{"largeShapeColor":166,"smallShapeColor":167},"#F2F2F2","#9A4292",[],[],"asc",[],[],[],[],[],2,3,"67ae7f1ebc43aa4fa6fb2969",[180,181,182,183,184,185,186,187,188,189],"67ae7f1ebc43aa4fa6fb296a","67ae7f1ebc43aa4fa6fb296b","67ae7f1ebc43aa4fa6fb296c","67ae7f1ebc43aa4fa6fb296d","67ae7f1ebc43aa4fa6fb296e","67ae7f1ebc43aa4fa6fb296f","67ae7f1ebc43aa4fa6fb2970","67ae7f1ebc43aa4fa6fb2971","67ae7f1ebc43aa4fa6fb2972","67ae7f1ebc43aa4fa6fb2973","2025-02-13T23:24:14.253Z","2025-02-13T23:24:14.519Z",{"structure":193,"standards":233,"topics":234,"isSuperParent":10,"standardIds":235,"aiGenerated":5,"__v":126,"teleportFrom":83,"cloned":83,"ver":176,"parent":83,"_id":180,"time":108,"published":5,"aiCreateMeta":83,"type":231,"comprehensionQuestionId":178,"comprehensionTimestamp":236,"createdAt":237,"updated":191},{"settings":194,"hasMath":10,"query":195,"options":201,"explain":226,"hints":230,"kind":231,"marks":232,"answer":176},{"hasCorrectAnswer":5,"fibDataType":137,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":196,"hasMath":10,"math":197,"answerTime":140,"text":199,"media":200},"text",{"latex":198,"template":83},[],"\u003Cp>What CSS property is used to set the background color of the navigation bar?\u003C/p>",[],[202,208,214,220],{"type":196,"hasMath":10,"math":203,"answerTime":82,"id":205,"text":206,"media":207,"_id":205},{"latex":204,"template":83},[],"67ae7f1ee84a3b8e975419d4","\u003Cp>margin\u003C/p>",[],{"type":196,"hasMath":10,"math":209,"answerTime":82,"id":211,"text":212,"media":213,"_id":211},{"latex":210,"template":83},[],"67ae7f1ee84a3b46c85419d5","\u003Cp>text-align\u003C/p>",[],{"type":196,"hasMath":10,"math":215,"answerTime":82,"id":217,"text":218,"media":219,"_id":217},{"latex":216,"template":83},[],"67ae7f1ee84a3b60e85419d6","\u003Cp>background-color\u003C/p>",[],{"type":196,"hasMath":10,"math":221,"answerTime":82,"id":223,"text":224,"media":225,"_id":223},{"latex":222,"template":83},[],"67ae7f1ee84a3b79f05419d7","\u003Cp>border-radius\u003C/p>",[],{"type":196,"text":152,"media":227,"hasMath":10,"math":228,"answerTime":82},[],{"template":83,"latex":229},[],[],"MCQ",{"correct":126,"incorrect":82},[],[],[],418,"2025-02-13T23:24:14.263Z",{"structure":239,"standards":277,"topics":278,"isSuperParent":10,"standardIds":279,"aiGenerated":5,"__v":126,"teleportFrom":83,"cloned":83,"ver":176,"parent":83,"_id":181,"time":108,"published":5,"aiCreateMeta":83,"type":231,"comprehensionQuestionId":178,"comprehensionTimestamp":236,"createdAt":237,"updated":191},{"settings":240,"hasMath":10,"query":241,"options":246,"explain":271,"hints":275,"kind":231,"marks":276,"answer":82},{"hasCorrectAnswer":5,"fibDataType":137,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":196,"hasMath":10,"math":242,"answerTime":140,"text":244,"media":245},{"latex":243,"template":83},[],"\u003Cp>How can you ensure that text within a navigation bar is centered?\u003C/p>",[],[247,253,259,265],{"type":196,"hasMath":10,"math":248,"answerTime":82,"id":250,"text":251,"media":252,"_id":250},{"latex":249,"template":83},[],"67ae7f1ee84a3b01915419db","\u003Cp>Use text-align: center\u003C/p>",[],{"type":196,"hasMath":10,"math":254,"answerTime":82,"id":256,"text":257,"media":258,"_id":256},{"latex":255,"template":83},[],"67ae7f1ee84a3b3f915419dc","\u003Cp>Use text-align: right\u003C/p>",[],{"type":196,"hasMath":10,"math":260,"answerTime":82,"id":262,"text":263,"media":264,"_id":262},{"latex":261,"template":83},[],"67ae7f1ee84a3b6a8c5419dd","\u003Cp>Use text-align: justify\u003C/p>",[],{"type":196,"hasMath":10,"math":266,"answerTime":82,"id":268,"text":269,"media":270,"_id":268},{"latex":267,"template":83},[],"67ae7f1ee84a3b48cc5419de","\u003Cp>Use text-align: left\u003C/p>",[],{"type":196,"text":152,"media":272,"hasMath":10,"math":273,"answerTime":82},[],{"template":83,"latex":274},[],[],{"correct":126,"incorrect":82},[],[],[],{"structure":281,"standards":319,"topics":320,"isSuperParent":10,"standardIds":321,"aiGenerated":5,"__v":126,"teleportFrom":83,"cloned":83,"ver":176,"parent":83,"_id":182,"time":108,"published":5,"aiCreateMeta":83,"type":231,"comprehensionQuestionId":178,"comprehensionTimestamp":322,"createdAt":237,"updated":191},{"settings":282,"hasMath":10,"query":283,"options":288,"explain":313,"hints":317,"kind":231,"marks":318,"answer":177},{"hasCorrectAnswer":5,"fibDataType":137,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":196,"hasMath":10,"math":284,"answerTime":140,"text":286,"media":287},{"latex":285,"template":83},[],"\u003Cp>What display property allows anchor tags to have adjustable width?\u003C/p>",[],[289,295,301,307],{"type":196,"hasMath":10,"math":290,"answerTime":82,"id":292,"text":293,"media":294,"_id":292},{"latex":291,"template":83},[],"67ae7f1ee84a3b7bcb5419e2","\u003Cp>block\u003C/p>",[],{"type":196,"hasMath":10,"math":296,"answerTime":82,"id":298,"text":299,"media":300,"_id":298},{"latex":297,"template":83},[],"67ae7f1ee84a3b6da75419e3","\u003Cp>flex\u003C/p>",[],{"type":196,"hasMath":10,"math":302,"answerTime":82,"id":304,"text":305,"media":306,"_id":304},{"latex":303,"template":83},[],"67ae7f1ee84a3b50265419e4","\u003Cp>inline\u003C/p>",[],{"type":196,"hasMath":10,"math":308,"answerTime":82,"id":310,"text":311,"media":312,"_id":310},{"latex":309,"template":83},[],"67ae7f1ee84a3b06cd5419e5","\u003Cp>inline-block\u003C/p>",[],{"type":196,"text":152,"media":314,"hasMath":10,"math":315,"answerTime":82},[],{"template":83,"latex":316},[],[],{"correct":126,"incorrect":82},[],[],[],540,{"structure":324,"standards":362,"topics":363,"isSuperParent":10,"standardIds":364,"aiGenerated":5,"__v":126,"teleportFrom":83,"cloned":83,"ver":176,"parent":83,"_id":183,"time":108,"published":5,"aiCreateMeta":83,"type":231,"comprehensionQuestionId":178,"comprehensionTimestamp":322,"createdAt":237,"updated":191},{"settings":325,"hasMath":10,"query":326,"options":331,"explain":356,"hints":360,"kind":231,"marks":361,"answer":177},{"hasCorrectAnswer":5,"fibDataType":137,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":196,"hasMath":10,"math":327,"answerTime":140,"text":329,"media":330},{"latex":328,"template":83},[],"\u003Cp>Which CSS property is used to remove the underline from links?\u003C/p>",[],[332,338,344,350],{"type":196,"hasMath":10,"math":333,"answerTime":82,"id":335,"text":336,"media":337,"_id":335},{"latex":334,"template":83},[],"67ae7f1ee84a3b62a45419e9","\u003Cp>display: block\u003C/p>",[],{"type":196,"hasMath":10,"math":339,"answerTime":82,"id":341,"text":342,"media":343,"_id":341},{"latex":340,"template":83},[],"67ae7f1ee84a3bd6d35419ea","\u003Cp>font-weight: bold\u003C/p>",[],{"type":196,"hasMath":10,"math":345,"answerTime":82,"id":347,"text":348,"media":349,"_id":347},{"latex":346,"template":83},[],"67ae7f1ee84a3b4efb5419eb","\u003Cp>text-align: center\u003C/p>",[],{"type":196,"hasMath":10,"math":351,"answerTime":82,"id":353,"text":354,"media":355,"_id":353},{"latex":352,"template":83},[],"67ae7f1ee84a3bd2e85419ec","\u003Cp>text-decoration: none\u003C/p>",[],{"type":196,"text":152,"media":357,"hasMath":10,"math":358,"answerTime":82},[],{"template":83,"latex":359},[],[],{"correct":126,"incorrect":82},[],[],[],{"structure":366,"standards":404,"topics":405,"isSuperParent":10,"standardIds":406,"aiGenerated":5,"__v":126,"teleportFrom":83,"cloned":83,"ver":176,"parent":83,"_id":184,"time":108,"published":5,"aiCreateMeta":83,"type":231,"comprehensionQuestionId":178,"comprehensionTimestamp":407,"createdAt":237,"updated":191},{"settings":367,"hasMath":10,"query":368,"options":373,"explain":398,"hints":402,"kind":231,"marks":403,"answer":82},{"hasCorrectAnswer":5,"fibDataType":137,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":196,"hasMath":10,"math":369,"answerTime":140,"text":371,"media":372},{"latex":370,"template":83},[],"\u003Cp>What layout is used for the 'new products' section?\u003C/p>",[],[374,380,386,392],{"type":196,"hasMath":10,"math":375,"answerTime":82,"id":377,"text":378,"media":379,"_id":377},{"latex":376,"template":83},[],"67ae7f1ee84a3b7c105419f0","\u003Cp>Flex layout\u003C/p>",[],{"type":196,"hasMath":10,"math":381,"answerTime":82,"id":383,"text":384,"media":385,"_id":383},{"latex":382,"template":83},[],"67ae7f1ee84a3b576f5419f1","\u003Cp>Grid layout\u003C/p>",[],{"type":196,"hasMath":10,"math":387,"answerTime":82,"id":389,"text":390,"media":391,"_id":389},{"latex":388,"template":83},[],"67ae7f1ee84a3b4f655419f2","\u003Cp>Inline layout\u003C/p>",[],{"type":196,"hasMath":10,"math":393,"answerTime":82,"id":395,"text":396,"media":397,"_id":395},{"latex":394,"template":83},[],"67ae7f1ee84a3b73a75419f3","\u003Cp>Block layout\u003C/p>",[],{"type":196,"text":152,"media":399,"hasMath":10,"math":400,"answerTime":82},[],{"template":83,"latex":401},[],[],{"correct":126,"incorrect":82},[],[],[],759,{"structure":409,"standards":446,"topics":447,"isSuperParent":10,"standardIds":448,"aiGenerated":5,"__v":126,"teleportFrom":83,"cloned":83,"ver":176,"parent":83,"_id":185,"time":108,"published":5,"aiCreateMeta":83,"type":231,"comprehensionQuestionId":178,"comprehensionTimestamp":407,"createdAt":237,"updated":191},{"settings":410,"hasMath":10,"query":411,"options":416,"explain":440,"hints":444,"kind":231,"marks":445,"answer":176},{"hasCorrectAnswer":5,"fibDataType":137,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":196,"hasMath":10,"math":412,"answerTime":140,"text":414,"media":415},{"latex":413,"template":83},[],"\u003Cp>Which CSS property is used to add space between elements in the 'new products' section?\u003C/p>",[],[417,423,429,434],{"type":196,"hasMath":10,"math":418,"answerTime":82,"id":420,"text":421,"media":422,"_id":420},{"latex":419,"template":83},[],"67ae7f1ee84a3bac4b5419f7","\u003Cp>padding\u003C/p>",[],{"type":196,"hasMath":10,"math":424,"answerTime":82,"id":426,"text":427,"media":428,"_id":426},{"latex":425,"template":83},[],"67ae7f1ee84a3b4bd75419f8","\u003Cp>width\u003C/p>",[],{"type":196,"hasMath":10,"math":430,"answerTime":82,"id":432,"text":206,"media":433,"_id":432},{"latex":431,"template":83},[],"67ae7f1ee84a3b8c535419f9",[],{"type":196,"hasMath":10,"math":435,"answerTime":82,"id":437,"text":438,"media":439,"_id":437},{"latex":436,"template":83},[],"67ae7f1ee84a3b9cbe5419fa","\u003Cp>border\u003C/p>",[],{"type":196,"text":152,"media":441,"hasMath":10,"math":442,"answerTime":82},[],{"template":83,"latex":443},[],[],{"correct":126,"incorrect":82},[],[],[],{"structure":450,"standards":488,"topics":489,"isSuperParent":10,"standardIds":490,"aiGenerated":5,"__v":126,"teleportFrom":83,"cloned":83,"ver":176,"parent":83,"_id":186,"time":108,"published":5,"aiCreateMeta":83,"type":231,"comprehensionQuestionId":178,"comprehensionTimestamp":491,"createdAt":237,"updated":191},{"settings":451,"hasMath":10,"query":452,"options":457,"explain":482,"hints":486,"kind":231,"marks":487,"answer":126},{"hasCorrectAnswer":5,"fibDataType":137,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":196,"hasMath":10,"math":453,"answerTime":140,"text":455,"media":456},{"latex":454,"template":83},[],"\u003Cp>What is the main axis alignment used for the 'content item' division?\u003C/p>",[],[458,464,470,476],{"type":196,"hasMath":10,"math":459,"answerTime":82,"id":461,"text":462,"media":463,"_id":461},{"latex":460,"template":83},[],"67ae7f1ee84a3b480e5419fe","\u003Cp>justify-content: space-between\u003C/p>",[],{"type":196,"hasMath":10,"math":465,"answerTime":82,"id":467,"text":468,"media":469,"_id":467},{"latex":466,"template":83},[],"67ae7f1ee84a3b3db65419ff","\u003Cp>justify-content: center\u003C/p>",[],{"type":196,"hasMath":10,"math":471,"answerTime":82,"id":473,"text":474,"media":475,"_id":473},{"latex":472,"template":83},[],"67ae7f1ee84a3be7a8541a00","\u003Cp>justify-content: end\u003C/p>",[],{"type":196,"hasMath":10,"math":477,"answerTime":82,"id":479,"text":480,"media":481,"_id":479},{"latex":478,"template":83},[],"67ae7f1ee84a3b8fb4541a01","\u003Cp>justify-content: start\u003C/p>",[],{"type":196,"text":152,"media":483,"hasMath":10,"math":484,"answerTime":82},[],{"template":83,"latex":485},[],[],{"correct":126,"incorrect":82},[],[],[],834,{"structure":493,"standards":531,"topics":532,"isSuperParent":10,"standardIds":533,"aiGenerated":5,"__v":126,"teleportFrom":83,"cloned":83,"ver":176,"parent":83,"_id":187,"time":108,"published":5,"aiCreateMeta":83,"type":231,"comprehensionQuestionId":178,"comprehensionTimestamp":534,"createdAt":237,"updated":191},{"settings":494,"hasMath":10,"query":495,"options":500,"explain":525,"hints":529,"kind":231,"marks":530,"answer":126},{"hasCorrectAnswer":5,"fibDataType":137,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":196,"hasMath":10,"math":496,"answerTime":140,"text":498,"media":499},{"latex":497,"template":83},[],"\u003Cp>What HTML element is used to create a dropdown menu in the design tool?\u003C/p>",[],[501,507,513,519],{"type":196,"hasMath":10,"math":502,"answerTime":82,"id":504,"text":505,"media":506,"_id":504},{"latex":503,"template":83},[],"67ae7f1ee84a3bb52c541a05","\u003Cp>\u003Cinput>\u003C/p>",[],{"type":196,"hasMath":10,"math":508,"answerTime":82,"id":510,"text":511,"media":512,"_id":510},{"latex":509,"template":83},[],"67ae7f1ee84a3bbea7541a06","\u003Cp>\u003Cselect>\u003C/p>",[],{"type":196,"hasMath":10,"math":514,"answerTime":82,"id":516,"text":517,"media":518,"_id":516},{"latex":515,"template":83},[],"67ae7f1ee84a3b47f9541a07","\u003Cp>\u003Ctextarea>\u003C/p>",[],{"type":196,"hasMath":10,"math":520,"answerTime":82,"id":522,"text":523,"media":524,"_id":522},{"latex":521,"template":83},[],"67ae7f1ee84a3b60d6541a08","\u003Cp>\u003Cbutton>\u003C/p>",[],{"type":196,"text":152,"media":526,"hasMath":10,"math":527,"answerTime":82},[],{"template":83,"latex":528},[],[],{"correct":126,"incorrect":82},[],[],[],1337,{"structure":536,"standards":574,"topics":575,"isSuperParent":10,"standardIds":576,"aiGenerated":5,"__v":126,"teleportFrom":83,"cloned":83,"ver":176,"parent":83,"_id":188,"time":108,"published":5,"aiCreateMeta":83,"type":231,"comprehensionQuestionId":178,"comprehensionTimestamp":534,"createdAt":237,"updated":191},{"settings":537,"hasMath":10,"query":538,"options":543,"explain":568,"hints":572,"kind":231,"marks":573,"answer":126},{"hasCorrectAnswer":5,"fibDataType":137,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":196,"hasMath":10,"math":539,"answerTime":140,"text":541,"media":542},{"latex":540,"template":83},[],"\u003Cp>Which input type is used for selecting colors in the design tool?\u003C/p>",[],[544,550,556,562],{"type":196,"hasMath":10,"math":545,"answerTime":82,"id":547,"text":548,"media":549,"_id":547},{"latex":546,"template":83},[],"67ae7f1ee84a3b41ff541a0c","\u003Cp>text\u003C/p>",[],{"type":196,"hasMath":10,"math":551,"answerTime":82,"id":553,"text":554,"media":555,"_id":553},{"latex":552,"template":83},[],"67ae7f1ee84a3b3121541a0d","\u003Cp>color\u003C/p>",[],{"type":196,"hasMath":10,"math":557,"answerTime":82,"id":559,"text":560,"media":561,"_id":559},{"latex":558,"template":83},[],"67ae7f1ee84a3b6a5a541a0e","\u003Cp>checkbox\u003C/p>",[],{"type":196,"hasMath":10,"math":563,"answerTime":82,"id":565,"text":566,"media":567,"_id":565},{"latex":564,"template":83},[],"67ae7f1ee84a3baddb541a0f","\u003Cp>radio\u003C/p>",[],{"type":196,"text":152,"media":569,"hasMath":10,"math":570,"answerTime":82},[],{"template":83,"latex":571},[],[],{"correct":126,"incorrect":82},[],[],[],{"structure":578,"standards":616,"topics":617,"isSuperParent":10,"standardIds":618,"aiGenerated":5,"__v":126,"teleportFrom":83,"cloned":83,"ver":176,"parent":83,"_id":189,"time":108,"published":5,"aiCreateMeta":83,"type":231,"comprehensionQuestionId":178,"comprehensionTimestamp":534,"createdAt":237,"updated":191},{"settings":579,"hasMath":10,"query":580,"options":585,"explain":610,"hints":614,"kind":231,"marks":615,"answer":126},{"hasCorrectAnswer":5,"fibDataType":137,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":196,"hasMath":10,"math":581,"answerTime":140,"text":583,"media":584},{"latex":582,"template":83},[],"\u003Cp>What is the purpose of the 'tool_values' division in the design tool?\u003C/p>",[],[586,592,598,604],{"type":196,"hasMath":10,"math":587,"answerTime":82,"id":589,"text":590,"media":591,"_id":589},{"latex":588,"template":83},[],"67ae7f1ee84a3bc1cb541a13","\u003Cp>To style the navigation bar\u003C/p>",[],{"type":196,"hasMath":10,"math":593,"answerTime":82,"id":595,"text":596,"media":597,"_id":595},{"latex":594,"template":83},[],"67ae7f1ee84a3bd4cc541a14","\u003Cp>To display the calculated results\u003C/p>",[],{"type":196,"hasMath":10,"math":599,"answerTime":82,"id":601,"text":602,"media":603,"_id":601},{"latex":600,"template":83},[],"67ae7f1ee84a3b5117541a15","\u003Cp>To input user data\u003C/p>",[],{"type":196,"hasMath":10,"math":605,"answerTime":82,"id":607,"text":608,"media":609,"_id":607},{"latex":606,"template":83},[],"67ae7f1ee84a3b6b7c541a16","\u003Cp>To store CSS styles\u003C/p>",[],{"type":196,"text":152,"media":611,"hasMath":10,"math":612,"answerTime":82},[],{"template":83,"latex":613},[],[],{"correct":126,"incorrect":82},[],[],[],[],"2025-02-13T23:23:39.909Z","2025-02-14T16:42:38.696Z",{"videoMeta":623,"aiMeta":2555},{"videoId":148,"videoTitle":15,"channelTitle":624,"duration":147,"videoProvider":149,"videoType":625,"videoSubTypes":626,"transcript":628},"Packt - Web Development","INSTRUCTIONAL",[627],"CHALK_AND_TALK_PRESENTATION",[629,633,637,641,645,649,653,657,661,665,669,673,677,681,685,689,693,697,701,705,709,713,717,721,725,728,732,736,740,744,748,752,756,760,764,768,772,776,780,784,788,792,796,800,804,808,812,816,820,824,828,832,836,840,844,847,851,855,859,863,867,871,875,879,883,887,891,895,899,903,907,911,915,919,922,926,930,934,938,942,946,950,954,958,962,966,970,974,978,982,986,989,993,997,1000,1004,1007,1011,1015,1019,1023,1027,1031,1035,1038,1042,1046,1049,1052,1056,1060,1063,1067,1071,1075,1079,1083,1087,1091,1095,1099,1103,1107,1111,1115,1119,1123,1127,1131,1135,1139,1143,1147,1151,1155,1159,1163,1167,1171,1175,1179,1182,1185,1189,1193,1197,1201,1205,1209,1213,1216,1220,1223,1226,1230,1234,1238,1242,1245,1249,1253,1257,1261,1265,1269,1273,1276,1279,1283,1287,1291,1295,1299,1303,1307,1311,1315,1319,1323,1327,1331,1334,1338,1342,1346,1350,1354,1358,1362,1366,1370,1374,1377,1381,1385,1389,1393,1397,1401,1405,1409,1413,1416,1420,1424,1428,1432,1436,1440,1444,1448,1452,1456,1460,1464,1468,1471,1475,1478,1482,1485,1489,1493,1497,1501,1505,1508,1512,1516,1520,1523,1527,1530,1534,1537,1541,1545,1549,1553,1557,1561,1565,1569,1573,1577,1581,1585,1589,1593,1597,1601,1605,1609,1613,1617,1621,1625,1628,1631,1634,1636,1640,1643,1646,1650,1654,1658,1662,1666,1670,1674,1678,1682,1686,1690,1694,1697,1701,1705,1709,1713,1716,1720,1724,1728,1732,1735,1738,1742,1746,1750,1753,1757,1761,1765,1768,1772,1775,1778,1782,1786,1790,1794,1797,1799,1803,1807,1811,1815,1819,1823,1827,1831,1835,1839,1842,1846,1850,1854,1858,1862,1866,1869,1873,1877,1880,1883,1887,1891,1894,1898,1902,1906,1910,1913,1917,1921,1924,1927,1931,1935,1939,1943,1947,1951,1954,1958,1962,1966,1970,1974,1978,1982,1986,1990,1994,1998,2002,2006,2010,2014,2018,2022,2026,2030,2034,2037,2041,2045,2048,2052,2056,2060,2064,2067,2071,2075,2079,2083,2087,2091,2094,2097,2101,2104,2107,2111,2115,2119,2123,2127,2131,2134,2138,2142,2146,2149,2153,2156,2160,2164,2168,2172,2176,2180,2184,2187,2191,2195,2198,2202,2206,2210,2214,2218,2221,2225,2228,2232,2236,2240,2244,2248,2252,2255,2258,2261,2264,2268,2271,2275,2279,2283,2287,2291,2295,2299,2303,2306,2310,2314,2317,2321,2324,2328,2332,2336,2340,2343,2347,2351,2355,2358,2361,2365,2368,2372,2376,2379,2383,2387,2390,2394,2398,2402,2406,2410,2413,2416,2419,2423,2427,2431,2435,2439,2443,2447,2451,2455,2459,2463,2467,2470,2473,2477,2481,2485,2489,2493,2497,2501,2504,2507,2511,2515,2519,2523,2526,2530,2534,2538,2541,2545,2549,2552],{"text":630,"duration":631,"offset":632},"In our last video, we set up our grid layout",2381,2600,{"text":634,"duration":635,"offset":636},"here for our home page.",1244,5035,{"text":638,"duration":639,"offset":640},"But now what we need to do is we need",1603,6480,{"text":642,"duration":643,"offset":644},"to style, I think, each individual element that sits within",2557,8126,{"text":646,"duration":647,"offset":648},"this grid.",433,10726,{"text":650,"duration":651,"offset":652},"So let's start with our navigation bar.",2040,11440,{"text":654,"duration":655,"offset":656},"So we'll come over here.",1880,13800,{"text":658,"duration":659,"offset":660},"I'm in my style dot CSS and I will simply",3306,15680,{"text":662,"duration":663,"offset":664},"target our NAV tag.",1533,19067,{"text":666,"duration":667,"offset":668},"So we'll target that NAV.",1480,21840,{"text":670,"duration":671,"offset":672},"The first thing that I'm going to do is I'm",3399,23320,{"text":674,"duration":675,"offset":676},"going to set a background, so a background color and",4110,26798,{"text":678,"duration":679,"offset":680},"I'm going to use my brown here of BFA 89",3162,30987,{"text":682,"duration":683,"offset":684},"E, so that will set the color.",2371,34228,{"text":686,"duration":687,"offset":688},"The next thing I'm going to do is I'm going",3612,36880,{"text":690,"duration":691,"offset":692},"to give a a border radius.",2184,40576,{"text":694,"duration":695,"offset":696},"So border radius, Now typically what we do is we",3101,42760,{"text":698,"duration":699,"offset":700},"just set like a border radius of like, I don't",2972,45926,{"text":702,"duration":703,"offset":704},"know, 25 pixels in all directions.",2197,48963,{"text":706,"duration":707,"offset":708},"But if we look at my final sight here, you",3244,51440,{"text":710,"duration":711,"offset":712},"can see that I'm only curving the radius on the",3631,54761,{"text":714,"duration":715,"offset":716},"bottom, OK.",850,58470,{"text":718,"duration":719,"offset":720},"And so the we can also set the border radius",3202,59320,{"text":722,"duration":723,"offset":724},"for each individual corner.",1965,62595,{"text":726,"duration":651,"offset":727},"So we would just have to specify 4 values.",64760,{"text":729,"duration":730,"offset":731},"The first value is this top left corner, then top",2688,66959,{"text":733,"duration":734,"offset":735},"right, then bottom right, and then bottom left.",2578,69702,{"text":737,"duration":738,"offset":739},"So what we'll do is we'll specify 4 values for",2900,72560,{"text":741,"duration":742,"offset":743},"our border radius, but we'll do zero and zero as",3026,75523,{"text":745,"duration":746,"offset":747},"our first two numbers.",1388,78612,{"text":749,"duration":750,"offset":751},"And then I think I have 10 pixels and 10",2335,80000,{"text":753,"duration":754,"offset":755},"pixels as our second two numbers.",1927,82393,{"text":757,"duration":758,"offset":759},"So let's just go and do that right now.",3120,84720,{"text":761,"duration":762,"offset":763},"So 0 pixels, 0 pixels, 10 pixels and 10 pixels.",4640,87880,{"text":765,"duration":766,"offset":767},"Next, if we just simply save this right now, we",2965,93160,{"text":769,"duration":770,"offset":771},"should see that change.",1451,96188,{"text":773,"duration":774,"offset":775},"OK, so that looks pretty good.",1160,97840,{"text":777,"duration":778,"offset":779},"I want our links to sit right in the middle",3205,99360,{"text":781,"duration":782,"offset":783},"of our navigation tag.",1640,102640,{"text":785,"duration":786,"offset":787},"So I'm going to use text align and we'll do",2519,104280,{"text":789,"duration":790,"offset":791},"text align Center for this.",1581,106858,{"text":793,"duration":794,"offset":795},"So text align center.",2400,108720,{"text":797,"duration":798,"offset":799},"And then I want to add some spacing at the",2343,111760,{"text":801,"duration":802,"offset":803},"bottom because right now it, you know, things are pretty",3125,114158,{"text":805,"duration":806,"offset":807},"close to this.",782,117338,{"text":809,"duration":810,"offset":811},"So I'm going to do margin, bottom, margin, bottom of",4608,118120,{"text":813,"duration":814,"offset":815},"say 10 pixels and we'll just refresh this page and",4431,122816,{"text":817,"duration":818,"offset":819},"there we go.",1064,127336,{"text":821,"duration":822,"offset":823},"So those got pushed down a little bit more.",1720,128400,{"text":825,"duration":826,"offset":827},"Those are sitting in there nicely.",1520,130360,{"text":829,"duration":830,"offset":831},"What we now really have to do though is just",2406,132720,{"text":833,"duration":834,"offset":835},"style each individual anchor tag that sits inside of our",3063,135181,{"text":837,"duration":838,"offset":839},"navigation bar.",820,138299,{"text":841,"duration":842,"offset":843},"So let's go do that.",1080,139440,{"text":845,"duration":782,"offset":846},"So we'll use descendant selector.",140800,{"text":848,"duration":849,"offset":850},"So I have my navigation and then we'll target any",3093,142440,{"text":852,"duration":853,"offset":854},"anchor that sits inside of there.",2083,145596,{"text":856,"duration":857,"offset":858},"The first thing that I'm going to do is take",2854,148080,{"text":860,"duration":861,"offset":862},"on, let's see, first thing that we'll do is we'll",3179,150999,{"text":864,"duration":865,"offset":866},"say anchor tags, I believe are inline elements and an",3438,154243,{"text":868,"duration":869,"offset":870},"inline element.",973,157746,{"text":872,"duration":873,"offset":874},"I can't adjust the width.",1200,158720,{"text":876,"duration":877,"offset":878},"So like if I wanted to make these larger, say",3284,159919,{"text":880,"duration":881,"offset":882},"make them 75, just 7575 pixels right wide, if I",3429,163276,{"text":884,"duration":885,"offset":886},"save this, is this going to make any difference?",3501,166778,{"text":888,"duration":889,"offset":890},"It it doesn't because these are inline elements, I can't",2593,171040,{"text":892,"duration":893,"offset":894},"adjust their width.",881,173679,{"text":896,"duration":897,"offset":898},"So the first thing that I'm going to do is",2121,174880,{"text":900,"duration":901,"offset":902},"I'm going to change the display here to be inline",2475,177051,{"text":904,"duration":905,"offset":906},"block.",304,179576,{"text":908,"duration":909,"offset":910},"So these are now inline block elements, which means I",2422,180280,{"text":912,"duration":913,"offset":914},"should be able to adjust their width.",1692,182748,{"text":916,"duration":917,"offset":918},"So we'll get to that.",1040,184640,{"text":920,"duration":782,"offset":921},"Let's do some other stylings first.",185680,{"text":923,"duration":924,"offset":925},"Let's give them a text color of our mint green",5125,187320,{"text":927,"duration":928,"offset":929},"EBF 5 EE.",1003,192557,{"text":931,"duration":932,"offset":933},"We'll text align the the text of the link to",3103,194520,{"text":935,"duration":936,"offset":937},"be center.",705,197694,{"text":939,"duration":940,"offset":941},"So as we change the width, the text will still",1868,198400,{"text":943,"duration":944,"offset":945},"set in the center.",732,200308,{"text":947,"duration":948,"offset":949},"I'm gonna get rid of the underline, so I'll do",3431,201360,{"text":951,"duration":952,"offset":953},"text decoration none, none.",2015,204865,{"text":955,"duration":956,"offset":957},"There we go, text decoration, none.",2120,206880,{"text":959,"duration":960,"offset":961},"And now let's do some of our box models.",3000,209280,{"text":963,"duration":964,"offset":965},"So I'm gonna give it a border border, and the",3723,212280,{"text":967,"duration":968,"offset":969},"border will be two pixels solid and it will be",3806,216085,{"text":971,"duration":972,"offset":973},"our mint green EBF 5 EE.",1985,219974,{"text":975,"duration":976,"offset":977},"We'll set the width.",1240,222920,{"text":979,"duration":980,"offset":981},"So we'll say the width is going to be 75",2366,224160,{"text":983,"duration":984,"offset":985},"pixels.",415,226585,{"text":987,"duration":976,"offset":988},"And so I'm just going to stop it here.",227240,{"text":990,"duration":991,"offset":992},"Let's see if we now actually have adjusted the width.",2880,228480,{"text":994,"duration":995,"offset":996},"And we did.",920,232120,{"text":998,"duration":873,"offset":999},"So that looks pretty good.",233040,{"text":1001,"duration":1002,"offset":1003},"Perfect.",600,234560,{"text":1005,"duration":774,"offset":1006},"Coming along nicely.",235440,{"text":1008,"duration":1009,"offset":1010},"We have the width.",840,236920,{"text":1012,"duration":1013,"offset":1014},"Let's do some outside spacing of margin.",2960,237960,{"text":1016,"duration":1017,"offset":1018},"So margin, I'm going to do 7 pixels in the",3961,240920,{"text":1020,"duration":1021,"offset":1022},"vertical direction and 0 pixels in the XY direction.",4904,244975,{"text":1024,"duration":1025,"offset":1026},"And then I'm going to do some internal spacing of",3057,250800,{"text":1028,"duration":1029,"offset":1030},"padding, 10 pixels in the vertical direction, 30 pixels in",3620,253919,{"text":1032,"duration":1033,"offset":1034},"the X direction.",999,257601,{"text":1036,"duration":699,"offset":1037},"And then we'll do a font size of just 1.0",259000,{"text":1039,"duration":1040,"offset":1041},"R.E.M.",435,262044,{"text":1043,"duration":1044,"offset":1045},"And let's check this styling out.",2680,262840,{"text":1047,"duration":826,"offset":1048},"All right, so there we have it.",267160,{"text":1050,"duration":976,"offset":1051},"Those look pretty nice.",268680,{"text":1053,"duration":1054,"offset":1055},"And that makes our NAV bar fill out a little",2501,270360,{"text":1057,"duration":1058,"offset":1059},"bit in size.",683,272917,{"text":1061,"duration":976,"offset":1062},"And I'm a lot happier with it.",273600,{"text":1064,"duration":1065,"offset":1066},"Now I'd like to whenever I hover over these, I",3031,275400,{"text":1068,"duration":1069,"offset":1070},"want to maybe transition, do a little bit of of,",3164,278497,{"text":1072,"duration":1073,"offset":1074},"of transition so that they move and it gives a",3032,281727,{"text":1076,"duration":1077,"offset":1078},"little bit of motion to our site.",2175,284824,{"text":1080,"duration":1081,"offset":1082},"So let's set the transition property for one of these",2925,287200,{"text":1084,"duration":1085,"offset":1086},"anchor tags that sit inside of our navigation.",2540,290180,{"text":1088,"duration":1089,"offset":1090},"So we'll say transition.",1280,293080,{"text":1092,"duration":1093,"offset":1094},"I'm going to give a transition of a box shadow.",2480,295200,{"text":1096,"duration":1097,"offset":1098},"So we'll give a small, you know, glow underneath and",4779,297880,{"text":1100,"duration":1101,"offset":1102},"that no, no: here, 0.5 seconds.",2849,302750,{"text":1104,"duration":1105,"offset":1106},"And then I'm also going to do a transform in",2933,305920,{"text":1108,"duration":1109,"offset":1110},"0.5 seconds.",800,308919,{"text":1112,"duration":1113,"offset":1114},"So I'm going to shift them up in the vertical",2637,309880,{"text":1116,"duration":1117,"offset":1118},"Y direction.",704,312576,{"text":1120,"duration":1121,"offset":1122},"So with the transition property set, let's use one of",2567,313880,{"text":1124,"duration":1125,"offset":1126},"our pseudo classes on these anchors.",1744,316495,{"text":1128,"duration":1129,"offset":1130},"So I'll target them using the descendant selector NAV space",3730,318400,{"text":1132,"duration":1133,"offset":1134},"A.",126,322193,{"text":1136,"duration":1137,"offset":1138},"And now we'll do: hover.",2360,322720,{"text":1140,"duration":1141,"offset":1142},"So when we hover, I want to change a box",2533,325480,{"text":1144,"duration":1145,"offset":1146},"shadow.",444,328076,{"text":1148,"duration":1149,"offset":1150},"So I'll do box shadow and I'm going to do",4324,328520,{"text":1152,"duration":1153,"offset":1154},"0 pixels in the X10 pixels in the Y, I'm",4219,332950,{"text":1156,"duration":1157,"offset":1158},"going to do a blur of 10 pixels and I",3903,337274,{"text":1160,"duration":1161,"offset":1162},"will do a a spread of say -5 pixels.",3797,341282,{"text":1164,"duration":1165,"offset":1166},"We talked about the spread that 4th value before I",3129,345440,{"text":1168,"duration":1169,"offset":1170},"believe, and I'm going to give it a color of",2754,348631,{"text":1172,"duration":1173,"offset":1174},"this, this brown right here.",1753,351447,{"text":1176,"duration":1177,"offset":1178},"So I'm going to save this.",1120,353520,{"text":1180,"duration":651,"offset":1181},"Let's refresh and let's see if we get.",354840,{"text":1183,"duration":995,"offset":1184},"Oh yeah, there we go.",357800,{"text":1186,"duration":1187,"offset":1188},"It's just just noticeable.",2080,359000,{"text":1190,"duration":1191,"offset":1192},"It's very subtle, but I like it.",1680,361080,{"text":1194,"duration":1195,"offset":1196},"OK, so that looks great.",1320,363280,{"text":1198,"duration":1199,"offset":1200},"And let's also move the box up a little bit",2968,364960,{"text":1202,"duration":1203,"offset":1204},"so it'll raise up.",1242,367997,{"text":1206,"duration":1207,"offset":1208},"So that is what our transform property is going to",2272,369480,{"text":1210,"duration":1211,"offset":1212},"allow us to do.",682,371798,{"text":1214,"duration":873,"offset":1215},"So we'll say transform.",372480,{"text":1217,"duration":1218,"offset":1219},"We are going to to move as to translate and",2580,373880,{"text":1221,"duration":794,"offset":1222},"we want to translate just on the Y axis.",376520,{"text":1224,"duration":1177,"offset":1225},"And I'm going to go up.",379200,{"text":1227,"duration":1228,"offset":1229},"So -5 pixels, remember up is, is in the negative",3390,380640,{"text":1231,"duration":1232,"offset":1233},"direction here.",1060,384100,{"text":1235,"duration":1236,"offset":1237},"And while we're at it, when we hover, these aren't",2509,385680,{"text":1239,"duration":1240,"offset":1241},"going to be transitions, but we will simply take our",2610,388239,{"text":1243,"duration":1240,"offset":1244},"text decoration and change it to be underlined so it",390899,{"text":1246,"duration":1247,"offset":1248},"emulates that this is something that should be clicked.",2761,393559,{"text":1250,"duration":1251,"offset":1252},"And we can also emulate that this is something that",2328,396640,{"text":1254,"duration":1255,"offset":1256},"should be clicked by changing our cursor to a pointer.",2466,399014,{"text":1258,"duration":1259,"offset":1260},"All right, so I'll refresh the page.",1600,403080,{"text":1262,"duration":1263,"offset":1264},"I guess our cursor was already being changed to a",1691,405400,{"text":1266,"duration":1267,"offset":1268},"pointer, but that's OK.",793,407126,{"text":1270,"duration":1271,"offset":1272},"All right.",1000,407920,{"text":1274,"duration":960,"offset":1275},"So I think that looks pretty nice.",408920,{"text":1277,"duration":1187,"offset":1278},"Maybe we could go even higher, but I think 5",412360,{"text":1280,"duration":1281,"offset":1282},"pixels is good for the for the movement up.",2033,414487,{"text":1284,"duration":1285,"offset":1286},"OK, so I think our NAV bar is styled nicely.",2800,417240,{"text":1288,"duration":1289,"offset":1290},"Why don't we now work on styling our new products",3176,420040,{"text":1292,"duration":1293,"offset":1294},"section?",518,423281,{"text":1296,"duration":1297,"offset":1298},"So let's just refresh.",2320,425320,{"text":1300,"duration":1301,"offset":1302},"Looking at our HTML, we have a section with an",3735,427680,{"text":1304,"duration":1305,"offset":1306},"ID of new products.",1543,431496,{"text":1308,"duration":1309,"offset":1310},"And then inside of the section, we have dibs with",3975,433040,{"text":1312,"duration":1313,"offset":1314},"a class new products.",1704,437096,{"text":1316,"duration":1317,"offset":1318},"So we'll style the section and then we'll style each",3140,439000,{"text":1320,"duration":1321,"offset":1322},"individual product here that sits inside of it.",2839,442201,{"text":1324,"duration":1325,"offset":1326},"So we'll start by targeting our section new products.",3960,447640,{"text":1328,"duration":1329,"offset":1330},"And what do we want here?",1400,452240,{"text":1332,"duration":1081,"offset":1333},"Well, the first thing that I think we really need",453960,{"text":1335,"duration":1336,"offset":1337},"to do is we need to give a flex layout",2269,456945,{"text":1339,"duration":1340,"offset":1341},"and I'm going to make it a column based layout.",2807,459273,{"text":1343,"duration":1344,"offset":1345},"So I'll say display is flex and then the flex",3272,462080,{"text":1347,"duration":1348,"offset":1349},"direction, I just have to change it to be a",3127,465425,{"text":1351,"duration":1352,"offset":1353},"column based layout.",1454,468625,{"text":1355,"duration":1356,"offset":1357},"Now that that's set, my main axis is the vertical",3385,470640,{"text":1359,"duration":1360,"offset":1361},"axis.",345,474094,{"text":1363,"duration":1364,"offset":1365},"I can align things on that main axis if I",3173,474480,{"text":1367,"duration":1368,"offset":1369},"choose to, and I'm going to, I'm going to say",3483,477730,{"text":1371,"duration":1372,"offset":1373},"justify content and I'm going to do space between.",3870,481290,{"text":1375,"duration":1297,"offset":1376},"So there's equal space between these elements.",485360,{"text":1378,"duration":1379,"offset":1380},"Now any text that sits inside of there, any items,",3027,488280,{"text":1382,"duration":1383,"offset":1384},"I want their text align to be centered within their",3088,491367,{"text":1386,"duration":1387,"offset":1388},"element.",485,494515,{"text":1390,"duration":1391,"offset":1392},"And I'm going to give a background color.",2440,495440,{"text":1394,"duration":1395,"offset":1396},"So the background here is going to be my darker",4561,497880,{"text":1398,"duration":1399,"offset":1400},"brown 8B786D.",1262,502538,{"text":1402,"duration":1403,"offset":1404},"I'm going to give some margin on the right side.",4080,505120,{"text":1406,"duration":1407,"offset":1408},"So if we look here the right here, I want",2644,509200,{"text":1410,"duration":1411,"offset":1412},"some spacing on the outside over here.",2450,511909,{"text":1414,"duration":1089,"offset":1415},"So just some margin, right.",514360,{"text":1417,"duration":1418,"offset":1419},"So I'll do margin tack right of say 10 pixels.",5720,517200,{"text":1421,"duration":1422,"offset":1423},"I'm going to give some internal spacing in all direction",4101,523360,{"text":1425,"duration":1426,"offset":1427},"of padding of five pixels and I'll give a border",3516,527534,{"text":1429,"duration":1430,"offset":1431},"radius of say 10 pixels in all directions.",3077,531123,{"text":1433,"duration":1434,"offset":1435},"So let's see what this looks like now that we've",3200,534920,{"text":1437,"duration":1438,"offset":1439},"styled that section.",1334,538186,{"text":1441,"duration":1442,"offset":1443},"So if we refresh the page, there is our new",2920,539520,{"text":1445,"duration":1446,"offset":1447},"products.",612,542508,{"text":1449,"duration":1450,"offset":1451},"We've got that nice little gap here because we put",2652,543120,{"text":1453,"duration":1454,"offset":1455},"some margin bottom on our navigation bar.",2174,545825,{"text":1457,"duration":1458,"offset":1459},"I think that looks really good and the the border",3018,548000,{"text":1461,"duration":1462,"offset":1463},"radius and all direction works really nicely here.",3080,551079,{"text":1465,"duration":1466,"offset":1467},"OK, so now what I really want to do is",2375,555440,{"text":1469,"duration":834,"offset":1470},"I want to look at these individual items that are",557877,{"text":1472,"duration":1473,"offset":1474},"sitting inside of here.",1438,561002,{"text":1476,"duration":1259,"offset":1477},"So let's let's just go take a look.",562440,{"text":1479,"duration":1480,"offset":1481},"So we got new product, new products.",3440,566240,{"text":1483,"duration":774,"offset":1484},"So these are our divisions.",569680,{"text":1486,"duration":1487,"offset":1488},"You know, I don't even know if I need to",1521,571080,{"text":1490,"duration":1491,"offset":1492},"style anything here.",760,572639,{"text":1494,"duration":1495,"offset":1496},"I think they look pretty good.",960,573400,{"text":1498,"duration":1499,"offset":1500},"I could target my new product division if I wanted",4199,574360,{"text":1502,"duration":1503,"offset":1504},"to, but if we look at the site, I'm pretty",3528,578643,{"text":1506,"duration":691,"offset":1507},"happy with how this looks.",582255,{"text":1509,"duration":1510,"offset":1511},"Maybe if I wanted to give a, a different background",2165,584720,{"text":1513,"duration":1514,"offset":1515},"color to each one of these items, but I don't",1911,586927,{"text":1517,"duration":1518,"offset":1519},"want to do that.",679,588880,{"text":1521,"duration":794,"offset":1522},"I'm I'm actually pretty happy.",589560,{"text":1524,"duration":1525,"offset":1526},"So I'm not going to target that division.",2280,591960,{"text":1528,"duration":758,"offset":1529},"So now let's look at what we have next.",594520,{"text":1531,"duration":1532,"offset":1533},"We have our section News and our section community, which",4678,598360,{"text":1535,"duration":758,"offset":1536},"are sitting pretty nicely in our page.",603120,{"text":1538,"duration":1539,"offset":1540},"But we did say that we do want to have",2321,606240,{"text":1542,"duration":1543,"offset":1544},"our pictures sort of be in line with our paragraphs.",3178,608622,{"text":1546,"duration":1547,"offset":1548},"So where are our paragraph and pictures currently located within",3667,612040,{"text":1550,"duration":1551,"offset":1552},"our HTML?",515,615764,{"text":1554,"duration":1555,"offset":1556},"They're located inside of a division called content Item.",3240,616800,{"text":1558,"duration":1559,"offset":1560},"So what we should style next is our division Content",3765,620440,{"text":1562,"duration":1563,"offset":1564},"Item.",363,624277,{"text":1566,"duration":1567,"offset":1568},"So that is a class because I have multiple of",2682,626800,{"text":1570,"duration":1571,"offset":1572},"them.",298,629541,{"text":1574,"duration":1575,"offset":1576},"So I'll say that content item.",1760,629840,{"text":1578,"duration":1579,"offset":1580},"And I want both things that sit inside of this",2150,632320,{"text":1582,"duration":1583,"offset":1584},"division to be in a row.",1123,634517,{"text":1586,"duration":1587,"offset":1588},"So I'm just going to give a flex display and",2956,635640,{"text":1590,"duration":1591,"offset":1592},"we'll keep it at the default alignment of a row",3159,638663,{"text":1594,"duration":1595,"offset":1596},"layout.",470,641889,{"text":1598,"duration":1599,"offset":1600},"So to align on that main axis, I'll use justify",2819,642360,{"text":1602,"duration":1603,"offset":1604},"content and we will center it.",1800,645239,{"text":1606,"duration":1607,"offset":1608},"And then I'll just Simply put some padding of say",3316,647400,{"text":1610,"duration":1611,"offset":1612},"10 pixels in all directions.",1895,650784,{"text":1614,"duration":1615,"offset":1616},"So if I refresh the page there we have it",3886,653040,{"text":1618,"duration":1619,"offset":1620},"all right, so I think that looks pretty good, Pretty",4930,657021,{"text":1622,"duration":1623,"offset":1624},"good.",474,662045,{"text":1626,"duration":774,"offset":1627},"I'm pretty happy with this.",662520,{"text":1270,"duration":1629,"offset":1630},640,665840,{"text":1632,"duration":1259,"offset":1633},"Our layout looks nice here.",666480,{"text":1632,"duration":1259,"offset":1635},668080,{"text":1637,"duration":1638,"offset":1639},"There's a little bit more spacing than I want.",2840,670360,{"text":1641,"duration":1271,"offset":1642},"I think I have less.",673200,{"text":1644,"duration":889,"offset":1645},"So what I'm gonna do here on the original 1:00,",674200,{"text":1647,"duration":1648,"offset":1649},"I definitely had less Lorem ipsum text over here under",2979,676848,{"text":1651,"duration":1652,"offset":1653},"new products.",718,679882,{"text":1655,"duration":1656,"offset":1657},"So let's just go clean that up really quickly under",3642,680760,{"text":1659,"duration":1660,"offset":1661},"home New products.",1285,684474,{"text":1663,"duration":1664,"offset":1665},"This whole line I'm just going to quickly delete and",4353,686240,{"text":1667,"duration":1668,"offset":1669},"I'll do something like a paragraph of say, Lorem 35,",4354,690676,{"text":1671,"duration":1672,"offset":1673},"and then we'll do something similar to this paragraph under",4940,695113,{"text":1675,"duration":1676,"offset":1677},"New product here.",1424,700136,{"text":1679,"duration":1680,"offset":1681},"We'll just put another paragraph and I'll do something like",3967,702520,{"text":1683,"duration":1684,"offset":1685},"Lorem 40.",605,706554,{"text":1687,"duration":1688,"offset":1689},"We'll save this and let's just see how that affects",2558,707840,{"text":1691,"duration":1692,"offset":1693},"things.",352,710448,{"text":1695,"duration":683,"offset":1696},"I think that looks a lot better, a little bit",712240,{"text":1698,"duration":1699,"offset":1700},"more concise, so I'm really happy here.",2055,714664,{"text":1702,"duration":1703,"offset":1704},"The last thing that I think we just need to",2587,716880,{"text":1706,"duration":1707,"offset":1708},"do is style this poor little footer that's all by",2949,719527,{"text":1710,"duration":1711,"offset":1712},"itself down here.",1023,722536,{"text":1714,"duration":774,"offset":1715},"So let's style that footer.",724080,{"text":1717,"duration":1718,"offset":1719},"OK, we'll target the footer tag and I am going",3713,727880,{"text":1721,"duration":1722,"offset":1723},"to just simply take the footer, which is a block",3875,731674,{"text":1725,"duration":1726,"offset":1727},"level element.",1130,735629,{"text":1729,"duration":1730,"offset":1731},"So it's taking up the whole width of that line.",1960,736760,{"text":1733,"duration":826,"offset":1734},"And I'm just going to center the text in it.",739000,{"text":1736,"duration":1575,"offset":1737},"So our paragraph will be centered.",740520,{"text":1739,"duration":1740,"offset":1741},"And then the font weight, I'm going to change the",2623,742600,{"text":1743,"duration":1744,"offset":1745},"font weight.",642,745277,{"text":1747,"duration":1748,"offset":1749},"We can set numbers or we could use keywords.",2720,746120,{"text":1751,"duration":1009,"offset":1752},"I'm going to use a keyword.",748840,{"text":1754,"duration":1755,"offset":1756},"I'll say it's I want it to be bolder, so",2486,749679,{"text":1758,"duration":1759,"offset":1760},"I'll just save that and that should center our text",3170,752227,{"text":1762,"duration":1763,"offset":1764},"and make it bolder.",1180,755459,{"text":1766,"duration":1629,"offset":1767},"Awesome.",757240,{"text":1769,"duration":1770,"offset":1771},"So I think our home page is complete here.",3040,758080,{"text":1773,"duration":1495,"offset":1774},"This looks pretty good.",761120,{"text":1776,"duration":1271,"offset":1777},"Pretty happy with that.",762360,{"text":1779,"duration":1780,"offset":1781},"So now let's go begin talking about some of our",3377,763480,{"text":1783,"duration":1784,"offset":1785},"HTML tools.",791,766929,{"text":1787,"duration":1788,"offset":1789},"We have a design tool, a pricing tool, sizing and",2258,767720,{"text":1791,"duration":1792,"offset":1793},"contacts.",414,770025,{"text":1795,"duration":1434,"offset":1796},"Let's work on the design tool next.",770720,{"text":654,"duration":655,"offset":1798},774880,{"text":1800,"duration":1801,"offset":1802},"I'm just going to keep moving my CSS down the",2668,777120,{"text":1804,"duration":1805,"offset":1806},"line and we'll look at our design tool.",2312,779847,{"text":1808,"duration":1809,"offset":1810},"Now what I'm going to do is simply copy this",3741,782480,{"text":1812,"duration":1813,"offset":1814},"page and we'll paste it into our design tool because",4422,786306,{"text":1816,"duration":1817,"offset":1818},"much of this is going to be the same.",3147,790813,{"text":1820,"duration":1821,"offset":1822},"And let's work through and just change a few things",1968,794200,{"text":1824,"duration":1825,"offset":1826},"here.",193,796207,{"text":1828,"duration":1829,"offset":1830},"In my head, I'm still going to be using all",2546,796600,{"text":1832,"duration":1833,"offset":1834},"of these things, but I also now need to bring",2665,799205,{"text":1836,"duration":1837,"offset":1838},"in a script.",710,801929,{"text":1840,"duration":1555,"offset":1841},"So I'll say script, and we'll say defer.",803120,{"text":1843,"duration":1844,"offset":1845},"And the source of the script is going to be",5066,806559,{"text":1847,"duration":1848,"offset":1849},"design, design script dot JS.",3416,811743,{"text":1851,"duration":1852,"offset":1853},"So we're only going to bring in the specific script",2998,815360,{"text":1855,"duration":1856,"offset":1857},"for this page.",823,818416,{"text":1859,"duration":1860,"offset":1861},"Our header will be the same, our NAV bar will",2575,819800,{"text":1863,"duration":1864,"offset":1865},"be the same.",686,822433,{"text":1867,"duration":897,"offset":1868},"But now we are going to just empty out the",823360,{"text":1870,"duration":1871,"offset":1872},"rest of this main so we don't have these new",2223,825531,{"text":1874,"duration":1875,"offset":1876},"products or news or community.",1516,827804,{"text":1878,"duration":976,"offset":1879},"So let's empty that out.",829720,{"text":1881,"duration":1089,"offset":1882},"Our footer will be the same though.",831440,{"text":1884,"duration":1885,"offset":1886},"And so now let's talk about the tool that we're",3229,833240,{"text":1888,"duration":1889,"offset":1890},"going to use for designing our shirt.",2542,836537,{"text":1892,"duration":632,"offset":1893},"So I'll come over here to our finished page.",839880,{"text":1895,"duration":1896,"offset":1897},"If we look at our tool, it looks like I've",2944,842640,{"text":1899,"duration":1900,"offset":1901},"got a section up here with some radio buttons.",3225,845654,{"text":1903,"duration":1904,"offset":1905},"I've got a a drop down, a select tag, I've",2989,849320,{"text":1907,"duration":1908,"offset":1909},"got a color selection, and then I've got another section",3986,852380,{"text":1911,"duration":719,"offset":1912},"here where I can essentially see the results.",856437,{"text":1914,"duration":1915,"offset":1916},"So I'm going to have two separate divisions and then",2260,859640,{"text":1918,"duration":1919,"offset":1920},"in each division I'm going to have some some different",2348,861944,{"text":1691,"duration":1922,"offset":1923},305,864335,{"text":1925,"duration":1297,"offset":1926},"OK, so we'll come over to our HTML.",865840,{"text":1928,"duration":1929,"offset":1930},"Let's design our First Division, but maybe I'll put a",3798,868160,{"text":1932,"duration":1933,"offset":1934},"header, a heading first, so an H2, and I'll say",3368,872030,{"text":1936,"duration":1937,"offset":1938},"design your shirt.",1290,875470,{"text":1940,"duration":1941,"offset":1942},"And so now I'm going to make a division and",2062,878760,{"text":1944,"duration":1945,"offset":1946},"I'm going to be very vague with the names, the",2206,880870,{"text":1948,"duration":1949,"offset":1950},"IDs that I give because I want the IDs to",1967,883124,{"text":1952,"duration":1941,"offset":1953},"be the same across all of our tools so that",885139,{"text":1955,"duration":1956,"offset":1957},"I can style them all once in a consistent manner.",2350,887249,{"text":1959,"duration":1960,"offset":1961},"So I'm going to give this ID of tool_calc because",3407,889600,{"text":1963,"duration":1964,"offset":1965},"this is going to be where the tool is doing",2991,893077,{"text":1967,"duration":1968,"offset":1969},"its calculations.",1183,896137,{"text":1971,"duration":1972,"offset":1973},"And then I'll make another division down here later on.",4760,897320,{"text":1975,"duration":1976,"offset":1977},"And I'm going to give it an ID of tool_values",3136,902080,{"text":1979,"duration":1980,"offset":1981},"because this is where the tool will maybe output some",3694,905285,{"text":1983,"duration":1984,"offset":1985},"values or give some feedback of you, know based, off",3623,909049,{"text":1987,"duration":1988,"offset":1989},"of the calculation that they just did OK.",2858,912742,{"text":1991,"duration":1992,"offset":1993},"SO, in the tool calc Division I, WILL first do",5139,915600,{"text":1995,"duration":1996,"offset":1997},"an H3 AND I'll Say select your size and.",4468,920851,{"text":1999,"duration":2000,"offset":2001},"So now I'm Going to have a collection of radio",3590,925320,{"text":2003,"duration":2004,"offset":2005},"buttons and, I'm Going to put those radio buttons let's.",4372,928988,{"text":2007,"duration":2008,"offset":2009},"See real quick, OK, so I'm going to put those",3175,933360,{"text":2011,"duration":2012,"offset":2013},"radio buttons that we're going to use inside of a",3457,936606,{"text":2015,"duration":2016,"offset":2017},"form here.",706,940134,{"text":2019,"duration":2020,"offset":2021},"And the reason why is because I'm going to then",2872,940840,{"text":2023,"duration":2024,"offset":2025},"put an event listener on the form itself.",2506,943773,{"text":2027,"duration":2028,"offset":2029},"So when any value of the form changes, we'll use",3750,946280,{"text":2031,"duration":2032,"offset":2033},"a change event.",1172,950108,{"text":2035,"duration":1044,"offset":2036},"I'm going to have some function run.",951280,{"text":2038,"duration":2039,"offset":2040},"So we'll we'll create the form all right, and I'm",4081,953960,{"text":2042,"duration":2043,"offset":2044},"going to give it an ID.",1915,958124,{"text":2046,"duration":1093,"offset":2047},"This is going to be my size_form.",960040,{"text":2049,"duration":2050,"offset":2051},"And in here we'll we'll create an input and it",4254,962880,{"text":2053,"duration":2054,"offset":2055},"will be of type radio, so a radio button and",4069,967226,{"text":2057,"duration":2058,"offset":2059},"its ID will be small and its value will be",3884,971388,{"text":2061,"duration":2062,"offset":2063},"small.",554,975365,{"text":2065,"duration":1555,"offset":2066},"And the name I will give is just size.",976520,{"text":2068,"duration":2069,"offset":2070},"And now I'll create a label for this and it'll",5228,980480,{"text":2072,"duration":2073,"offset":2074},"be for small and it will say small.",3979,985821,{"text":2076,"duration":2077,"offset":2078},"Alright, so that's going to be our small, but then",1855,990480,{"text":2080,"duration":2081,"offset":2082},"I want to offer medium, large and extra large.",1708,992372,{"text":2084,"duration":2085,"offset":2086},"So I'm going to copy this and paste it three",3469,994080,{"text":2088,"duration":2089,"offset":2090},"times 123, and we'll just simply change the word small",4258,997628,{"text":1824,"duration":2092,"offset":2093},395,1001965,{"text":2095,"duration":632,"offset":2096},"So I'm going to use alt to multi click.",1002360,{"text":2098,"duration":2099,"offset":2100},"We'll change this alt to medium.",3360,1005560,{"text":2102,"duration":1575,"offset":2103},"And I just got to change my M here.",1010240,{"text":2105,"duration":1089,"offset":2106},"We'll do the next one.",1012520,{"text":2108,"duration":2109,"offset":2110},"I'll alt Click to have my multi cursor and I'm",4131,1013800,{"text":2112,"duration":2113,"offset":2114},"going to change everything to large and I'll change my",4850,1018020,{"text":2116,"duration":2117,"offset":2118},"L and then I will multi click one last time",3861,1022960,{"text":2120,"duration":2121,"offset":2122},"for our last radio button and I will change this",4311,1026911,{"text":2124,"duration":2125,"offset":2126},"to extra and I will change my actual label to",4041,1031312,{"text":2128,"duration":2129,"offset":2130},"say extra large.",1436,1035443,{"text":2132,"duration":842,"offset":2133},"OK, so this is perfect.",1037920,{"text":2135,"duration":2136,"offset":2137},"So now we're we're putting inside the form, right?",2640,1039000,{"text":2139,"duration":2140,"offset":2141},"And so we'll put the event listener on the form",2216,1041640,{"text":2143,"duration":2144,"offset":2145},"for a change event.",897,1043903,{"text":2147,"duration":1065,"offset":2148},"So as I click different buttons, the form will change",1044800,{"text":2150,"duration":2151,"offset":2152},"and we will automatically run some JavaScript.",2631,1047888,{"text":2154,"duration":826,"offset":2155},"All right, So I think that's going to work nicely.",1050880,{"text":2157,"duration":2158,"offset":2159},"Let's do something similar.",1440,1052400,{"text":2161,"duration":2162,"offset":2163},"Now for the style of shirt because if you recall,",3408,1053840,{"text":2165,"duration":2166,"offset":2167},"we have wonder where is our starter files?",2921,1057318,{"text":2169,"duration":2170,"offset":2171},"We got a bunch of different pictures that we can",2548,1060240,{"text":2173,"duration":2174,"offset":2175},"use for our shirts, like my dress shirt, my cruise",2655,1062841,{"text":2177,"duration":2178,"offset":2179},"shirt, jersey, polo, just a regular old T-shirt, those sorts",3186,1065549,{"text":2181,"duration":2182,"offset":2183},"of things.",531,1068789,{"text":2185,"duration":1187,"offset":2186},"So we're going to allow people to select their style.",1069320,{"text":2188,"duration":2189,"offset":2190},"So I have another H3 and I'll say select your",5226,1071400,{"text":2192,"duration":2193,"offset":2194},"style.",696,1076743,{"text":2196,"duration":956,"offset":2197},"And in here I'm going to create a division.",1077440,{"text":2199,"duration":2200,"offset":2201},"So this will all sit inside of a division and",4686,1079560,{"text":2203,"duration":2204,"offset":2205},"we'll create a label and the label will say choose",5207,1084350,{"text":2207,"duration":2208,"offset":2209},"a shirt style.",1458,1089661,{"text":2211,"duration":2212,"offset":2213},"And that's label will be for something with an ID",4485,1091119,{"text":2215,"duration":2216,"offset":2217},"of style.",824,1095696,{"text":2219,"duration":2158,"offset":2220},"And what's going to have an ID of style?",1096520,{"text":2222,"duration":2223,"offset":2224},"It's going to be a select tag or drop down",2904,1097960,{"text":2226,"duration":1360,"offset":2227},"menu.",1100934,{"text":2229,"duration":2230,"offset":2231},"So I'll give this an ID of style.",2240,1101280,{"text":2233,"duration":2234,"offset":2235},"I'll give it a name shirt_style and we'll make sure",5732,1103520,{"text":2237,"duration":2238,"offset":2239},"that this is required required, and, so now we'll set",5957,1109364,{"text":2241,"duration":2242,"offset":2243},"our options so.",1685,1115434,{"text":2245,"duration":2246,"offset":2247},"We'll do option short sleeve of a short sleeve option",5990,1117119,{"text":2249,"duration":2250,"offset":2251},"with a value of short and.",2938,1123222,{"text":2253,"duration":1313,"offset":2254},"I'm Just going to copy this line now because we're",1126160,{"text":2256,"duration":1399,"offset":2257},"going to have multiple options we're.",1127898,{"text":2259,"duration":1259,"offset":2260},"Going to give another 123.",1129160,{"text":2262,"duration":960,"offset":2263},"Another four options, so 1234.",1130760,{"text":2265,"duration":2266,"offset":2267},"The next one will have a value of crew and",3625,1134520,{"text":2269,"duration":1101,"offset":2270},"its drop down menu will say Crew.",1138231,{"text":2272,"duration":2273,"offset":2274},"Our next option will have a value of Polo and",2993,1141920,{"text":2276,"duration":2277,"offset":2278},"it will have a drop down option of Polo.",2661,1144979,{"text":2280,"duration":2281,"offset":2282},"Our next option will say Dress and it will have",3858,1148200,{"text":2284,"duration":2285,"offset":2286},"a drop down option of dress.",2299,1152141,{"text":2288,"duration":2289,"offset":2290},"And our next option will say Jersey and it will",3646,1154960,{"text":2292,"duration":2293,"offset":2294},"have a drop down option of, you guessed it, Jersey.",3956,1158683,{"text":2296,"duration":2297,"offset":2298},"All right, so we can we can let them select",2814,1164160,{"text":2300,"duration":2301,"offset":2302},"their size.",720,1167040,{"text":2304,"duration":956,"offset":2305},"We can let them select their style.",1168040,{"text":2307,"duration":2308,"offset":2309},"The last thing that I want to do within our",2207,1170359,{"text":2311,"duration":2312,"offset":2313},"tool calculating division is allow them to select their color.",3181,1172618,{"text":2315,"duration":2136,"offset":2316},"So let's get into them outside of the right division.",1176240,{"text":2318,"duration":2319,"offset":2320},"I'll set an H3 and I'll say select your color.",3320,1179200,{"text":2322,"duration":655,"offset":2323},"And now I'll do another division.",1184440,{"text":2325,"duration":2326,"offset":2327},"And inside of this division, I'm going to put an",3413,1187680,{"text":2329,"duration":2330,"offset":2331},"input field and it will simply be of type color",3342,1191164,{"text":2333,"duration":2334,"offset":2335},"with an ID of color.",1423,1194577,{"text":2337,"duration":2338,"offset":2339},"And we'll make it.",880,1196040,{"text":2341,"duration":774,"offset":2342},"I'm sure we can make it required.",1197360,{"text":2344,"duration":2345,"offset":2346},"Why not?",400,1198520,{"text":2348,"duration":2349,"offset":2350},"All right, so those are actually, I don't think we",2102,1200359,{"text":2352,"duration":2353,"offset":2354},"need to make these required.",1176,1202503,{"text":2356,"duration":2099,"offset":2357},"We can get rid of the required attribute.",1203680,{"text":2359,"duration":1195,"offset":2360},"There's no need to do that here.",1207120,{"text":2362,"duration":2363,"offset":2364},"So that is our tool calculator.",2560,1208720,{"text":2366,"duration":1434,"offset":2367},"We're going to get size, style and color.",1211280,{"text":2369,"duration":2370,"offset":2371},"And then what are we going to do in our",3060,1214480,{"text":2373,"duration":2374,"offset":2375},"tool values?",942,1217618,{"text":2377,"duration":1603,"offset":2378},"Where did my tool values division go?",1219240,{"text":2380,"duration":2381,"offset":2382},"I thought I'd.",440,1221040,{"text":2384,"duration":2385,"offset":2386},"Oh, I did all of that inside of tool values.",2200,1222920,{"text":2388,"duration":995,"offset":2389},"I'm sorry, everybody.",1225120,{"text":2391,"duration":2392,"offset":2393},"All of this should be inside of our tool calc",2683,1226280,{"text":2395,"duration":2396,"offset":2397},"division.",537,1229023,{"text":2399,"duration":2400,"offset":2401},"So I'm going to simply come down here and just",2685,1229840,{"text":2403,"duration":2404,"offset":2405},"cut everything out that I made that mistake that shouldn't",3386,1232584,{"text":2407,"duration":2408,"offset":2409},"be in tool values.",1050,1236029,{"text":2411,"duration":667,"offset":2412},"That is our tool calculator.",1237280,{"text":2414,"duration":2136,"offset":2415},"So I'll put that inside of our tool calculator division.",1239040,{"text":2417,"duration":1191,"offset":2418},"So here's our division tool calculator.",1241680,{"text":2420,"duration":2421,"offset":2422},"We're going to get their size, we're going to get",2132,1243640,{"text":2424,"duration":2425,"offset":2426},"their style, we're going to get their color and we'll",2306,1245816,{"text":2428,"duration":2429,"offset":2430},"do some calculations or you know, JavaScript with that.",2394,1248166,{"text":2432,"duration":2433,"offset":2434},"And now in our tool values division, we're going to",3163,1250560,{"text":2436,"duration":2437,"offset":2438},"give some output.",1054,1253785,{"text":2440,"duration":2441,"offset":2442},"So I'll put an H3 here and I'll say here",3636,1254840,{"text":2444,"duration":2445,"offset":2446},"is your shirt.",1272,1258567,{"text":2448,"duration":2449,"offset":2450},"I'm going to capitalize these.",3640,1259840,{"text":2452,"duration":2453,"offset":2454},"All right, so here is your shirt and the shirt",3107,1263480,{"text":2456,"duration":2457,"offset":2458},"we will show is simply just going to be an",2837,1266654,{"text":2460,"duration":2461,"offset":2462},"image and we'll give it an ID of shirt_image and",3242,1269559,{"text":2464,"duration":2465,"offset":2466},"we'll give a default source.",1891,1272868,{"text":2468,"duration":2461,"offset":2469},"Our first option up here is the short sleeve shirt",1275080,{"text":2471,"duration":794,"offset":2472},"and that is going to be if we look it",1278387,{"text":2474,"duration":2475,"offset":2476},"is our short sleeve shirt is right here shirt icon.",3307,1280852,{"text":2478,"duration":2479,"offset":2480},"So that'll just be the default image shirt_icon dot PNG.",7480,1284160,{"text":2482,"duration":2483,"offset":2484},"And I will give a class to start of small",2767,1291960,{"text":2486,"duration":2487,"offset":2488},"image.",405,1294795,{"text":2490,"duration":2491,"offset":2492},"And what we'll do is as we change our sizes",2296,1295720,{"text":2494,"duration":2495,"offset":2496},"from small, medium, large and extra large, we will change",3044,1298069,{"text":2498,"duration":2499,"offset":2500},"the class of our image from a small image to",2349,1301167,{"text":2502,"duration":1956,"offset":2503},"a medium to a large or an extra large image.",1303570,{"text":2505,"duration":2266,"offset":2506},"All right, I think the HTML is done for this",1306760,{"text":2508,"duration":2509,"offset":2510},"page.",412,1310468,{"text":2512,"duration":2513,"offset":2514},"I think everything looks pretty good here.",2160,1311400,{"text":2516,"duration":2517,"offset":2518},"I'm going to save this and let's just reload the",2426,1313800,{"text":2520,"duration":2521,"offset":2522},"page and see if that content is appearing.",2123,1316276,{"text":2524,"duration":1495,"offset":2525},"OK, so here it is.",1318760,{"text":2527,"duration":2528,"offset":2529},"So it's here, it's we can click all right, our",3121,1319920,{"text":2531,"duration":2532,"offset":2533},"drop Down's working, I can select my color, but we've",3597,1323109,{"text":2535,"duration":2536,"offset":2537},"got a lot to do here.",1425,1326774,{"text":2539,"duration":2513,"offset":2540},"We still need to style this a little bit better.",1328200,{"text":2542,"duration":2543,"offset":2544},"And then we got to add some functionality using some",2496,1330600,{"text":2546,"duration":2547,"offset":2548},"of our JavaScript, which is what we will do in",2208,1333144,{"text":2550,"duration":2301,"offset":2551},"our next video.",1335400,{"text":2553,"duration":1629,"offset":2554},"So I'll see you then.",1336200,{"summary":2556,"sections":2557,"learningObjectives":2594,"keyConcepts":2603,"videoTags":2609},"This video tutorial covers styling a webpage using CSS and setting up an HTML design tool. It begins with styling a navigation bar, including setting background colors, border radii, and hover effects. The tutorial then moves on to styling a new products section using a flex layout. Finally, it demonstrates setting up an HTML structure for a shirt design tool, incorporating forms, radio buttons, and color inputs, preparing for JavaScript functionality.",[2558,2573,2580],{"title":2559,"start":632,"end":1286,"description":2560,"tags":2561},"Styling the Navigation Bar","Learn to style the navigation bar using CSS.",[2562,2563,2564,2565,2566,2567,2568,2569,2570,2571,2572],"CSS","navigation bar","styling","background color","border radius","text alignment","margin","padding","hover effects","box shadow","transform",{"title":2574,"start":1290,"end":1771,"description":2575,"tags":2576},"Styling the New Products Section","Apply flex layout and style the new products section.",[2562,2577,2578,2565,2568,2569,2566,2579],"flex layout","new products","content alignment",{"title":2581,"start":1781,"end":2554,"description":2582,"tags":2583},"Design Tool HTML Setup","Set up HTML for a shirt design tool with forms and inputs.",[2584,2585,2586,2587,2588,2589,2590,2591,2592,2593],"HTML","design tool","forms","radio buttons","select tag","color input","JavaScript","event listener","ID","class",[2595,2596,2597,2598,2599,2600,2601,2602],"Style navigation bar","Use CSS flex layout","Create HTML forms","Add hover effects","Align content","Set background color","Use border radius","Implement JavaScript",[2604,2605,2606,2607,2608],"CSS styling","Flexbox layout","HTML structure","Form elements","JavaScript integration",{"keyTags":2610,"pedagogicalTags":2613},[2562,2584,2611,2590,2612],"Web Design","Frontend Development",[2614,2615],"Project-based learning","Hands-on practice","60919f6b27f749001c9a4bd7","2025-02-14T16:42:38.694Z","ENABLED","2025-10-07T08:02:30.721Z",{"service":2621,"version":2622},"quizserver","f1cc09c2fc7cdc6451344cae9a93fa17bb331b29",{"success":5,"data":2624,"time":2684},{"quizzes":2625,"total":2682,"timeTaken":2683,"experiment":73,"source":74},[2626,2633,2640,2647,2654,2661,2668,2675],{"id":2627,"isSuper":10,"type":11,"info":2628,"shouldIndex":10,"stats":2632},"67751a99a5d02e0253600d2f",{"grade":2629,"name":2630,"slug":2630,"image":2631},[14,14],"Next.js from Development to Deployment - Display Single Blog Post","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/45533d04-a580-4b11-9d11-cab820b629d1-v2",{"totalQuestions":26},{"id":2634,"isSuper":10,"type":11,"info":2635,"shouldIndex":10,"stats":2639},"6774495a807791bfcd056691",{"grade":2636,"name":2637,"slug":2637,"image":2638},[14,14],"The Full Stack Web Development - New Elements - Project on New Elements","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/d34bd9c0-0b44-4e7b-a569-2174f3dcebed-v2",{"totalQuestions":26},{"id":2641,"isSuper":10,"type":11,"info":2642,"shouldIndex":10,"stats":2646},"67ac87f816a7d9f326846f3e",{"grade":2643,"name":2644,"slug":2644,"image":2645},[14,14],"Building a Responsive Application with Bootstrap (Video 9)","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/5503a999-2f3e-44b1-921e-82e1d3ed1afa-v2",{"totalQuestions":26},{"id":2648,"isSuper":10,"type":11,"info":2649,"shouldIndex":10,"stats":2653},"67b1f37a7dcc059558f708f0",{"grade":2650,"name":2651,"slug":2651,"image":2652},[14,14],"Modern Web Design with HTML5, CSS3, and JavaScript - Setting the Value of the Cascading Style Sheets (CSS) Display Prope","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/60ddea03-eb00-45c8-823e-88f390d6f203-v2",{"totalQuestions":26},{"id":2655,"isSuper":10,"type":11,"info":2656,"shouldIndex":10,"stats":2660},"67b71134e10366aa76bd7bda",{"grade":2657,"name":2658,"slug":2658,"image":2659},[14,14],"Practical CSS3 Mastery Course - Before After Pseudo Selector","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/55b5180c-fa16-4b14-a282-83541f9b7bdf-v2",{"totalQuestions":34},{"id":2662,"isSuper":10,"type":11,"info":2663,"shouldIndex":10,"stats":2667},"67757313b672251ae17ca39f",{"grade":2664,"name":2665,"slug":2665,"image":2666},[14,14],"Frontend Web Development Bootcamp - Build a Twitter Clone - Styling of Posts","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/38c5b751-c762-4076-bd3f-c2fe272ae47d-v2",{"totalQuestions":26},{"id":2669,"isSuper":10,"type":11,"info":2670,"shouldIndex":10,"stats":2674},"6775e769ece1855b67584900",{"grade":2671,"name":2672,"slug":2672,"image":2673},[14,14],"Modern Web Design with HTML5, CSS3, and JavaScript - Creating an HTML Page Structure","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/98b66815-2b7e-4857-84a9-89c0da32f2f9-v2",{"totalQuestions":26},{"id":2676,"isSuper":10,"type":11,"info":2677,"shouldIndex":10,"stats":2681},"67ae2685f0927aea35b88bac",{"grade":2678,"name":2679,"slug":2679,"image":2680},[14,14],"Modern HTML and CSS from the Beginning (Including Sass) - Project Intro - EdgeLedger Website (Flexbox)","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/bcb4e57b-8196-4843-88f5-cdd10a8f0c14-v2",{"totalQuestions":42},2290,35,"2025-10-07T08:02:30.814544693Z",{"success":5,"data":2686,"time":2824},{"countryBasedRecommendations":2687,"subjectBasedRecommendations":2739,"subjectBasedQualifiers":2793},[2688,2696,2702,2710,2716,2722,2727,2733],{"id":2689,"quizId":2690,"country":91,"lowerGrade":42,"upperGrade":2691,"quizRank":176,"subject":2692,"quizImage":2693,"quizName":2694,"quizType":2695,"noOfQuestions":97,"noOfSlides":82},"68d3cf4372c83868769de521","57db979dfebedb18e033f82c",12,"Fun","https://quizizz.com/media/resource/gs/quizizz-media/quizzes/c0e6ac99-130e-4eb7-a684-3f59302c9731","Video Games","quiz",{"id":2697,"quizId":2698,"country":91,"lowerGrade":18,"upperGrade":2691,"quizRank":176,"subject":2692,"quizImage":2699,"quizName":2700,"quizType":2695,"noOfQuestions":2701,"noOfSlides":82},"68dd09c313ac207b4c1aad8a","60cb6c61c29fe6001b8bd5d3","https://quizizz.com/media/resource/gs/quizizz-media/quizzes/8b91c8f2-9778-4f06-86f5-5cfdef5a24b1","Brand Labels",20,{"id":2703,"quizId":2704,"country":91,"lowerGrade":42,"upperGrade":26,"quizRank":2705,"subject":2706,"quizImage":2707,"quizName":2708,"quizType":2695,"noOfQuestions":2709,"noOfSlides":82},"68dd09c313ac207b4c1aae96","68d564f266d638114702d3b3",4,"Other","https://quizizz.com/media/resource/gs/quizizz-media/quizzes/c30806d0-e177-4a74-8de1-01d598170e4b","Core 4 of Customer Service - Student Edition",15,{"id":2711,"quizId":2712,"country":91,"lowerGrade":34,"upperGrade":34,"quizRank":18,"subject":2713,"quizImage":152,"quizName":2714,"quizType":2715,"noOfQuestions":2709,"noOfSlides":18},"68dd09c313ac207b4c1ab2fb","68cda0f2d5fb650a2d7b2c69","World Languages","What is Bullying?- Bullying Lesson Series 6-12","presentation",{"id":2717,"quizId":2718,"country":91,"lowerGrade":18,"upperGrade":18,"quizRank":95,"subject":99,"quizImage":2719,"quizName":2720,"quizType":2695,"noOfQuestions":2721,"noOfSlides":82},"689335b96cc7c0498fa6bf4b","5c389a492f1851001b880bd4","https://quizizz.com/media/resource/gs/quizizz-media/quizzes/fdde5817-bde0-4859-aaa7-86378fbc69f0","Multiplication Facts",25,{"id":2723,"quizId":2724,"country":91,"lowerGrade":95,"upperGrade":95,"quizRank":97,"subject":99,"quizImage":2725,"quizName":2726,"quizType":2695,"noOfQuestions":2709,"noOfSlides":82},"68b81fc14405f0499b37e8a7","5da88ffcfec3ff001ce68888","https://quizizz.com/media/resource/gs/quizizz-media/quizzes/03023c5b-9aac-4b06-91d5-d9505d184182","Subtracting Integers",{"id":2728,"quizId":2729,"country":91,"lowerGrade":42,"upperGrade":42,"quizRank":97,"subject":99,"quizImage":2730,"quizName":2731,"quizType":2695,"noOfQuestions":2732,"noOfSlides":82},"68c15a42f7398f49e3878940","5efd0a3bd81107001b1430c2","https://quizizz.com/media/resource/gs/quizizz-media/quizzes/904870db-7988-4901-a564-99b441db8324","Adding Integers",22,{"id":2734,"quizId":2735,"country":91,"lowerGrade":42,"upperGrade":97,"quizRank":34,"subject":2736,"quizImage":2737,"quizName":2738,"quizType":11,"noOfQuestions":97,"noOfSlides":82},"68a5aabba690fb0b8e8ada5d","66e972146a6efd0f8e6d9932","Computers","https://i3.ytimg.com/vi/f4B0q2oOLbs/default.jpg","Exploring Digital Citizenship Essentials",[2740,2747,2754,2761,2767,2773,2781,2788],{"id":2741,"quizId":2742,"country":91,"lowerGrade":26,"upperGrade":2743,"quizRank":2744,"subject":2713,"quizImage":2745,"quizName":2746,"quizType":2695,"noOfQuestions":2701,"noOfSlides":82},"68d3cf4372c83868769de4cb","5bc39aa4930ccd001b4eda02",13,430,"https://quizizz.com/media/resource/gs/quizizz-media/quizzes/bb4d6fe1-bcd4-4cda-96e0-8fa1e601924a","Definite and Indefinite Articles in Spanish (Avancemos)",{"id":2748,"quizId":2749,"country":91,"lowerGrade":2705,"upperGrade":2743,"quizRank":2750,"subject":2751,"quizImage":2752,"quizName":2753,"quizType":11,"noOfQuestions":95,"noOfSlides":82},"68d3cf4372c83868769de4c2","67760edf53c5d92a02a15a4f",469,"Multiple Subjects","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/b06558d7-3ca0-4cdf-a86f-239b08485db6-v2","Force and Motion",{"id":2755,"quizId":2756,"country":91,"lowerGrade":34,"upperGrade":2743,"quizRank":2757,"subject":2758,"quizImage":152,"quizName":2759,"quizType":2695,"noOfQuestions":2760,"noOfSlides":82},"68dd09c313ac207b4c1ab2f4","633d91074d509b001da41b83",547,"Social Studies","Unit 5 Key Terms",36,{"id":2762,"quizId":2763,"country":91,"lowerGrade":2705,"upperGrade":2743,"quizRank":2764,"subject":2751,"quizImage":2765,"quizName":2766,"quizType":11,"noOfQuestions":95,"noOfSlides":82},"68d3cf4372c83868769de4c0","67ae7721bb876e907d86c651",624,"https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/7f2e30e5-e7d1-4584-b6b9-6aa43a501ac1-v2","Figurative Language: Idioms, Similes, and Metaphors",{"id":2768,"quizId":2769,"country":91,"lowerGrade":26,"upperGrade":2743,"quizRank":2770,"subject":99,"quizImage":2771,"quizName":2772,"quizType":2695,"noOfQuestions":2709,"noOfSlides":82},"68dd09c313ac207b4c1ab07a","5d92112e53b4f6001a11b4a4",691,"https://quizizz.com/media/resource/gs/quizizz-media/quizzes/5800feef-155c-488f-9b8d-a8e17bffb077","Properties of Equality",{"id":2774,"quizId":2775,"country":91,"lowerGrade":97,"upperGrade":2743,"quizRank":2776,"subject":2777,"quizImage":2778,"quizName":2779,"quizType":2695,"noOfQuestions":2780,"noOfSlides":82},"68dd09c313ac207b4c1ab266","59edebcddc9498110015203e",699,"History","https://quizizz.com/media/resource/gs/quizizz-media/quizzes/L2FwcGhvc3RpbmdfcHJvZC9ibG9icy9BRW5CMlVvc1lEYnB1V2R1TWE5cEdPcFJKa05NMXkybl9adktVM1gxZkdiRFZSU0laM0hzMXVlUllEVjh0R25XRWlMMHkwUFA5YTVhWEpuVHM2VEJnRXFTcmhHYUxRbnRYQS56SnYzXzlhTGYtNmdBblV3","WH - Unit 3 Exam Review*",38,{"id":2782,"quizId":2783,"country":91,"lowerGrade":42,"upperGrade":2743,"quizRank":2784,"subject":100,"quizImage":2785,"quizName":2786,"quizType":2695,"noOfQuestions":2787,"noOfSlides":82},"68dd09c313ac207b4c1aae56","68d69440c551c7b79c627bc6",768,"https://quizizz.com/media/resource/gs/quizizz-media/quizzes/b495598c-7a7d-49ce-aba0-e2b7abab5a11","Advise vs. Advice",21,{"id":2789,"quizId":2790,"country":91,"lowerGrade":96,"upperGrade":2743,"quizRank":806,"subject":2751,"quizImage":2791,"quizName":2792,"quizType":2695,"noOfQuestions":2691,"noOfSlides":82},"68dd09c313ac207b4c1ab185","5f5b8b1c0d84d5001b46f017","https://quizizz.com/media/resource/gs/quizizz-media/quizzes/46196f61-40e8-4576-b4e5-b8de9d2538cc","Reading a ruler!",[2794,2797,2800,2803,2806,2809,2812,2815,2818,2821],{"path":2795,"display":2796},"/social-studies/economics/contemporary-economic-challenges/economic-inequality/causes-and-consequences","Causes and Consequences",{"path":2798,"display":2799},"/math/functions/functions-linear/linear-function-concepts/understanding-linear-functions/distinguishing-between-linear-and-non-linear-functions","Distinguishing between linear and non-linear functions",{"path":2801,"display":2802},"/science/life-science/structure-and-function/animals/seasonal-behaviors/seasonal-adaptations","Seasonal adaptations",{"path":2804,"display":2805},"/ela/foundational-reading-skills/phonics/long-vowels/vowel-team-patterns","Vowel team patterns",{"path":2807,"display":2808},"/ela/language/conventions/mechanics/punctuation/punctuation-with-quotations/cite-quotations-appropriately","Cite quotations appropriately",{"path":2810,"display":2811},"/ela/writing/strategies","Strategies",{"path":2813,"display":2814},"/ela/writing/writing-craft/writing-organization/conclusion","Conclusion",{"path":2816,"display":2817},"/math/number-system/operations-and-algebraic-thinking/multiplication-and-division/understanding-division/division-with-remainders","Division with remainders",{"path":2819,"display":2820},"/math/number-system/real-numbers/understanding-irrational-numbers/estimating-the-value-of-expressions-involving-irrational-numbers","Estimating the value of expressions involving irrational numbers",{"path":2822,"display":2823},"/science/physical-science/energy/light/how-does-light-travel-and-interact-with-matter","How does light travel and interact with matter?","2025-10-07T08:02:30.820961948Z",["Reactive",2826],{},["Set"],["ShallowReactive",2829],{"FeYxOIojFe":83,"Vq71iodBHb":83,"vES8Fb3HLl":83,"QoNUILXciQ":83},"/admin/video-quiz/67ae7efb10a2f1d14cec7b19/the-art-of-doing-web-development-for-beginners-final-project-part-3","none",{"ssr_adp-v2":2833},"var-1"]</script> <script>window.__NUXT__={};window.__NUXT__.config={public:{disableS3Cache:false,appEnv:"production",enablePseudoLocale:false,apiBase:"",sentry:{dsn:"https://f45858ca79fd48fe019ce67e6c560868@o984659.ingest.us.sentry.io/4508357912363008",enabled:false},gtag:{id:"G-NYFWYHHSPY"},gtm:{devtools:true,id:"GTM-N3RKJ8L",debug:true,enabled:true,defer:true},app_type:"worker",port:"8080",worker_page_type:"quizPage",i18n:{baseUrl:"https://cf.quizizz.com/translationsV2/nuxtssr",locales:{en:{domain:""},es:{domain:""},fr:{domain:""},pl:{domain:""},ru:{domain:""},id:{domain:""},ms:{domain:""},tl:{domain:""},de:{domain:""},vi:{domain:""},th:{domain:""},az:{domain:""},"pt-br":{domain:""},"zh-CN":{domain:""},"zh-TW":{domain:""},tr:{domain:""},it:{domain:""},ja:{domain:""},kk:{domain:""},ko:{domain:""},nl:{domain:""},et:{domain:""},lt:{domain:""},hu:{domain:""},lv:{domain:""},sv:{domain:""},cs:{domain:""},hi:{domain:""},ro:{domain:""},af:{domain:""}}},device:{defaultUserAgent:"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.39 Safari/537.36",enabled:true,refreshOnResize:false}},app:{baseURL:"/",buildId:"6b3fb8cc-d034-4e6c-a6d3-30b3282a9012",buildAssetsDir:"nuxtssr",cdnURL:"https://cf.quizizz.com"}}</script></body></html>