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

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.

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

• margin

• text-align

• background-color

• border-radius

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

What display property allows anchor tags to have adjustable width?

• block

• flex

• inline

• inline-block

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

• display: block

• font-weight: bold

• text-align: center

• text-decoration: none

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

• Flex layout

• Grid layout

• Inline layout

• Block layout

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

• padding

• width

• margin

• border

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

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