ChatGPT for Web Design - Create Amazing Websites - Introduction to Web Design: HTML and CSS University Video

ChatGPT for Web Design - Create Amazing Websites - Introduction to Web Design: HTML and CSS

Interactive Video

•

Information Technology (IT), Architecture

•

University

•

Hard

Quizizz Content

FREE Resource

This video tutorial covers the basics of HTML and CSS, essential for web design. It explains the structure and hierarchy of HTML, including tags and metadata, and introduces CSS for styling HTML elements. The tutorial also discusses the use of IDEs, specifically Visual Studio Code, for writing and managing code. Key concepts such as inline and block elements, CSS selectors, and declarations are explored, providing a foundational understanding of web development.

7 questions

Show all answers

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

What is the primary function of an IDE in web development?

To host websites online

To translate human-readable code into machine-readable code

To manage databases

To design graphics for websites

MULTIPLE CHOICE QUESTION

30 sec • 1 pt

Which tag is considered the root node in an HTML document?

</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-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-content-base font-medium text-wrap" color="dark.primary"><div><p><head></p></div></div></div></div></div></div></div></div><div class="relative box-border w-full h-full bg-ds-light-500 p-4 rounded-none border-t border-ds-dark-500-20 group" data-v-e7141832><div class="flex gap-4 justify-start items-stretch flex-col flex-nowrap" data-v-e7141832><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-ds-dark-500-20 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-ds-dark-200 text-content-small font-medium">3. </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-ds-dark-200 text-content-small font-medium" 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-ds-dark-200 text-content-small font-medium">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 aria-label="Preview" class="bg-transparent hover:bg-ds-dark-500-10 active:bg-ds-dark-500-20 py-2 px-3 border-ds-dark-500-20 border h-6 group min-w-20 rounded 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-xtn text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-eye"></i></div><p class="text-ds-dark-500 none underline-offset-4 select-none text-control-small font-semibold text-nowrap" data-testid="button-text">Preview</p></div></div></button><div class=""><button aria-label="Edit" class="bg-ds-lilac-100 hover:bg-ds-lilac-200 active:bg-ds-lilac-300 py-2 px-3 border-ds-lilac-500-40 border h-6 group min-w-20 rounded 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-xtn text-ds-lilac-600 flex-shrink-0" data-testid><i class="fas fa-pen"></i></div><p class="text-ds-lilac-600 none underline-offset-4 select-none text-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-e7141832><div class="flex gap-2 justify-start items-start flex-row flex-nowrap"><div class="text-content-base font-semibold"><div><p>What is the purpose of the <head> tag in an HTML document?</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-e7141832><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-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-content-base font-medium text-wrap" color="dark.primary"><div><p>To link external scripts</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-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-content-base font-medium text-wrap" color="dark.primary"><div><p>To contain the footer of the webpage</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-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-content-base font-medium text-wrap" color="dark.primary"><div><p>To provide metadata and additional information to the browser</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-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-content-base font-medium text-wrap" color="dark.primary"><div><p>To display the main content of the webpage</p></div></div></div></div></div></div></div></div><div class="relative box-border w-full h-full bg-ds-light-500 p-4 rounded-none border-t border-ds-dark-500-20 group" data-v-e7141832><div class="flex gap-4 justify-start items-stretch flex-col flex-nowrap" data-v-e7141832><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-ds-dark-500-20 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-ds-dark-200 text-content-small font-medium">4. </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-ds-dark-200 text-content-small font-medium" 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-ds-dark-200 text-content-small font-medium">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 aria-label="Preview" class="bg-transparent hover:bg-ds-dark-500-10 active:bg-ds-dark-500-20 py-2 px-3 border-ds-dark-500-20 border h-6 group min-w-20 rounded 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-xtn text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-eye"></i></div><p class="text-ds-dark-500 none underline-offset-4 select-none text-control-small font-semibold text-nowrap" data-testid="button-text">Preview</p></div></div></button><div class=""><button aria-label="Edit" class="bg-ds-lilac-100 hover:bg-ds-lilac-200 active:bg-ds-lilac-300 py-2 px-3 border-ds-lilac-500-40 border h-6 group min-w-20 rounded 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-xtn text-ds-lilac-600 flex-shrink-0" data-testid><i class="fas fa-pen"></i></div><p class="text-ds-lilac-600 none underline-offset-4 select-none text-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-e7141832><div class="flex gap-2 justify-start items-start flex-row flex-nowrap"><div class="text-content-base font-semibold"><div><p>Which of the following is a block element in HTML?</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-e7141832><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-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-content-base font-medium text-wrap" color="dark.primary"><div><p><div></p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-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-content-base font-medium text-wrap" color="dark.primary"><div><p><span></p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-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-content-base font-medium text-wrap" color="dark.primary"><div><p><a></p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-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-content-base font-medium text-wrap" color="dark.primary"><div><p><img></p></div></div></div></div></div></div></div></div><div class="relative box-border w-full h-full bg-ds-light-500 p-4 rounded-none border-t border-ds-dark-500-20 group" data-v-e7141832><div class="flex gap-4 justify-start items-stretch flex-col flex-nowrap" data-v-e7141832><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-ds-dark-500-20 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-ds-dark-200 text-content-small font-medium">5. </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-ds-dark-200 text-content-small font-medium" 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-ds-dark-200 text-content-small font-medium">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 aria-label="Preview" class="bg-transparent hover:bg-ds-dark-500-10 active:bg-ds-dark-500-20 py-2 px-3 border-ds-dark-500-20 border h-6 group min-w-20 rounded 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-xtn text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-eye"></i></div><p class="text-ds-dark-500 none underline-offset-4 select-none text-control-small font-semibold text-nowrap" data-testid="button-text">Preview</p></div></div></button><div class=""><button aria-label="Edit" class="bg-ds-lilac-100 hover:bg-ds-lilac-200 active:bg-ds-lilac-300 py-2 px-3 border-ds-lilac-500-40 border h-6 group min-w-20 rounded 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-xtn text-ds-lilac-600 flex-shrink-0" data-testid><i class="fas fa-pen"></i></div><p class="text-ds-lilac-600 none underline-offset-4 select-none text-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-e7141832><div class="flex gap-2 justify-start items-start flex-row flex-nowrap"><div class="text-content-base font-semibold"><div><p>What does CSS stand for?</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-e7141832><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-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-content-base font-medium text-wrap" color="dark.primary"><div><p>Creative Style Syntax</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-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-content-base font-medium text-wrap" color="dark.primary"><div><p>Computer Style System</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-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-content-base font-medium text-wrap" color="dark.primary"><div><p>Coded Style Sheets</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-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-content-base font-medium text-wrap" color="dark.primary"><div><p>Cascading Style Sheets</p></div></div></div></div></div></div></div></div><div class="relative box-border w-full h-full bg-ds-light-500 p-4 rounded-none border-t border-ds-dark-500-20 group" data-v-e7141832><div class="flex gap-4 justify-start items-stretch flex-col flex-nowrap" data-v-e7141832><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-ds-dark-500-20 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-ds-dark-200 text-content-small font-medium">6. </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-ds-dark-200 text-content-small font-medium" 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-ds-dark-200 text-content-small font-medium">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 aria-label="Preview" class="bg-transparent hover:bg-ds-dark-500-10 active:bg-ds-dark-500-20 py-2 px-3 border-ds-dark-500-20 border h-6 group min-w-20 rounded 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-xtn text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-eye"></i></div><p class="text-ds-dark-500 none underline-offset-4 select-none text-control-small font-semibold text-nowrap" data-testid="button-text">Preview</p></div></div></button><div class=""><button aria-label="Edit" class="bg-ds-lilac-100 hover:bg-ds-lilac-200 active:bg-ds-lilac-300 py-2 px-3 border-ds-lilac-500-40 border h-6 group min-w-20 rounded 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-xtn text-ds-lilac-600 flex-shrink-0" data-testid><i class="fas fa-pen"></i></div><p class="text-ds-lilac-600 none underline-offset-4 select-none text-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-e7141832><div class="flex gap-2 justify-start items-start flex-row flex-nowrap"><div class="text-content-base font-semibold"><div><p>How can CSS be applied to HTML elements?</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-e7141832><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-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-content-base font-medium text-wrap" color="dark.primary"><div><p>Only inline styles</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-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-content-base font-medium text-wrap" color="dark.primary"><div><p>Inline, internal, and external styles</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-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-content-base font-medium text-wrap" color="dark.primary"><div><p>Only internal styles</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-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-content-base font-medium text-wrap" color="dark.primary"><div><p>Only external styles</p></div></div></div></div></div></div></div></div><div class="relative box-border w-full h-full bg-ds-light-500 p-4 rounded-none border-t border-ds-dark-500-20 group" data-v-e7141832><div class="flex gap-4 justify-start items-stretch flex-col flex-nowrap" data-v-e7141832><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-ds-dark-500-20 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-ds-dark-200 text-content-small font-medium">7. </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-ds-dark-200 text-content-small font-medium" 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-ds-dark-200 text-content-small font-medium">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 aria-label="Preview" class="bg-transparent hover:bg-ds-dark-500-10 active:bg-ds-dark-500-20 py-2 px-3 border-ds-dark-500-20 border h-6 group min-w-20 rounded 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-xtn text-ds-dark-500 flex-shrink-0" data-testid><i class="fas fa-eye"></i></div><p class="text-ds-dark-500 none underline-offset-4 select-none text-control-small font-semibold text-nowrap" data-testid="button-text">Preview</p></div></div></button><div class=""><button aria-label="Edit" class="bg-ds-lilac-100 hover:bg-ds-lilac-200 active:bg-ds-lilac-300 py-2 px-3 border-ds-lilac-500-40 border h-6 group min-w-20 rounded 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-xtn text-ds-lilac-600 flex-shrink-0" data-testid><i class="fas fa-pen"></i></div><p class="text-ds-lilac-600 none underline-offset-4 select-none text-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-e7141832><div class="flex gap-2 justify-start items-start flex-row flex-nowrap"><div class="text-content-base font-semibold"><div><p>What is the role of a selector in CSS?</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-e7141832><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-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-content-base font-medium text-wrap" color="dark.primary"><div><p>To define the layout of a webpage</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-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-content-base font-medium text-wrap" color="dark.primary"><div><p>To specify which HTML elements the styles apply to</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-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-content-base font-medium text-wrap" color="dark.primary"><div><p>To create animations</p></div></div></div></div></div><div class="flex gap-0.5 overflow-auto justify-start items-start flex-row flex-nowrap"><div class="flex justify-center items-center w-6 h-6 text-base text-ds-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-content-base font-medium text-wrap" color="dark.primary"><div><p>To manage server-side scripts</p></div></div></div></div></div></div></div></div></div></div></div></div><div class="flex bg-ds-light-500 gap-4 p-8 rounded-admin-xl border border-ds-dark-500-20 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-ds-info-100 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center w-10 h-10 text-3xl text-ds-info-600 flex-shrink-0" data-testid><i class="fas fa-calculator-simple"></i></div></div><h2 class="text-header-base font-semibold">Similar Resources on Quizizz</h2><button aria-label="View all" class="bg-transparent hover:bg-ds-dark-500-10 active:bg-ds-dark-500-20 py-2 px-3 border-ds-dark-500-20 border h-8 group min-w-20 rounded 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-ds-dark-500 none underline-offset-4 select-none text-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-ds-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-98f58bf5><div class="h-full relative" data-v-17c94643 data-v-98f58bf5><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/67ae468537286353831068fc/modern-web-design-with-html5-css3-and-javascript-floating-images-to-the-left-of-the-text" data-testid="activity-recommendation-card-67ae468537286353831068fc" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Modern Web Design with HTML5, CSS3, and JavaScript - Floating Images to the Left of the Text" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-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-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.2h5h6t5wcn4" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Modern Web Design with HTML5, CSS3, and JavaScript - Floating Images to the Left of the Text</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><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-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Interactive video</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>University</p></div></div></div></div></div></a><a href="/admin/video-quiz/67775c0fc436227c61c8db7e/learning-css-video-12" data-testid="activity-recommendation-card-67775c0fc436227c61c8db7e" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Learning CSS (Video 12)" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-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-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.5oehke660kc" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Learning CSS (Video 12)</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><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-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Interactive video</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>University</p></div></div></div></div></div></a><a href="/admin/video-quiz/67ae18262d3dee0d577bca7b/frontend-web-development-bootcamp-build-a-twitter-clone-css-selectors" data-testid="activity-recommendation-card-67ae18262d3dee0d577bca7b" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Frontend Web Development Bootcamp - Build a Twitter Clone - CSS Selectors" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-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-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.ukle58cs6n" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Frontend Web Development Bootcamp - Build a Twitter Clone - CSS Selectors</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><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-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Interactive video</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>University</p></div></div></div></div></div></a><a href="/admin/video-quiz/67b76410f8a2750f36afd05e/html-css-and-javascript-for-beginners-a-web-design-course-css-divs-and-spans" data-testid="activity-recommendation-card-67b76410f8a2750f36afd05e" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="HTML CSS and JavaScript for Beginners - A Web Design Course - CSS Divs and Spans" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-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-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.5rvgi69z3eq" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">HTML CSS and JavaScript for Beginners - A Web Design Course - CSS Divs and Spans</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><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-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Interactive video</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>University</p></div></div></div></div></div></a><a href="/admin/video-quiz/67b1f1153c1019e2147eaa59/modern-web-design-with-html5-css3-and-javascript-changing-first-letter-in-pseudo-classes" data-testid="activity-recommendation-card-67b1f1153c1019e2147eaa59" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Modern Web Design with HTML5, CSS3, and JavaScript - Changing First Letter in Pseudo-classes" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 4 questions</span></p></div></div></div></div><div class="border-t border-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.fhqaq9cgbr" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Modern Web Design with HTML5, CSS3, and JavaScript - Changing First Letter in Pseudo-classes</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><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-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Interactive video</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>University</p></div></div></div></div></div></a><a href="/admin/video-quiz/677449a147a55730c6ef07f8/modern-html-and-css-from-the-beginning-including-sass-implementing-css" data-testid="activity-recommendation-card-677449a147a55730c6ef07f8" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Modern HTML and CSS from the Beginning (Including Sass) - Implementing CSS" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-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-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.bbighok0v46" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Modern HTML and CSS from the Beginning (Including Sass) - Implementing CSS</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><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-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Interactive video</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>University</p></div></div></div></div></div></a><a href="/admin/video-quiz/67ae1accf0927aea35b87f43/html-css-and-javascript-for-beginners-a-web-design-course-html-metadata" data-testid="activity-recommendation-card-67ae1accf0927aea35b87f43" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="HTML CSS and JavaScript for Beginners - A Web Design Course - HTML Metadata" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-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-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.ex02f02biap" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">HTML CSS and JavaScript for Beginners - A Web Design Course - HTML Metadata</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><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-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Interactive video</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>University</p></div></div></div></div></div></a><a href="/admin/video-quiz/67b77cbca61802d604ed19de/modern-web-design-with-html5-css3-and-javascript-floating-images-to-the-left-of-the-text" data-testid="activity-recommendation-card-67b77cbca61802d604ed19de" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Modern Web Design with HTML5, CSS3, and JavaScript - Floating Images to the Left of the Text" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 4 questions</span></p></div></div></div></div><div class="border-t border-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.dt8wwrbgsmv" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Modern Web Design with HTML5, CSS3, and JavaScript - Floating Images to the Left of the Text</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><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-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Interactive video</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>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-ds-dark-500-50 border border-ds-light-500-20 rounded-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-98f58bf5><div class="flex p-2 justify-start items-center w-full h-full flex-row flex-nowrap" data-v-98f58bf5><button type="button" aria-label="chevron-right" class="bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 w-8 h-8 border-ds-dark-500-20 border 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-98f58bf5><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-ds-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-ds-light-500 gap-4 p-8 rounded-admin-xl border border-ds-dark-500-20 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-ds-super-100 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center w-10 h-10 text-3xl text-ds-super-600 flex-shrink-0" data-testid><i class="fas fa-star"></i></div></div><h2 class="text-header-base font-semibold">Popular Resources on Quizizz</h2></div><div class="overflow-hidden w-auto h-auto flex-grow flex-shrink basis-full relative" data-testid="recommendation-container" data-v-98f58bf5><div class="h-full relative" data-v-17c94643 data-v-98f58bf5><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/5fd24190446546001b8943eb/character-analysis" data-testid="activity-popular-resource-card-5fd24190446546001b8943eb" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Character Analysis" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-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-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.tuthgrit1gh" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Character Analysis</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><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-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Quiz</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>4th Grade</p></div></div></div></div></div></a><a href="/admin/quiz/663130398706efb7b94eb2bb/chapter-12-doing-the-right-thing" data-testid="activity-popular-resource-card-663130398706efb7b94eb2bb" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Chapter 12 - Doing the Right Thing" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 17 questions</span></p></div></div></div></div><div class="border-t border-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.a2dthuij7oc" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Chapter 12 - Doing the Right Thing</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><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-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Quiz</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>9th - 12th Grade</p></div></div></div></div></div></a><a href="/admin/quiz/5ec40dbb5a8f86001b6020fc/american-flag" data-testid="activity-popular-resource-card-5ec40dbb5a8f86001b6020fc" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="American Flag" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-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-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.ckxntqystk7" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">American Flag</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><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-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Quiz</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>1st - 2nd Grade</p></div></div></div></div></div></a><a href="/admin/quiz/5e94b04b49e5d9001b0b0729/reading-comprehension" data-testid="activity-popular-resource-card-5e94b04b49e5d9001b0b0729" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Reading Comprehension" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-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-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.sqizd1ur94i" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Reading Comprehension</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><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-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Quiz</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>5th Grade</p></div></div></div></div></div></a><a href="/admin/quiz/6470c4b3c1c426001fee1cba/linear-inequalities" data-testid="activity-popular-resource-card-6470c4b3c1c426001fee1cba" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Linear Inequalities" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 30 questions</span></p></div></div></div></div><div class="border-t border-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.wm9g54p3o0i" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Linear Inequalities</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><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-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Quiz</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>9th - 12th Grade</p></div></div></div></div></div></a><a href="/admin/quiz/5a95acd414c10f001bdc5bc1/types-of-credit" data-testid="activity-popular-resource-card-5a95acd414c10f001bdc5bc1" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Types of Credit" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-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-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.btbllsheujt" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Types of Credit</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><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-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Quiz</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>9th - 12th Grade</p></div></div></div></div></div></a><a href="/admin/quiz/6846ffd78770c495bf9afa79/full-steam-ahead-summer-academy-pre-test-24-25" data-testid="activity-popular-resource-card-6846ffd78770c495bf9afa79" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Full S.T.E.A.M. Ahead Summer Academy Pre-Test 24-25" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 18 questions</span></p></div></div></div></div><div class="border-t border-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.sn9zqp7wnwm" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Full S.T.E.A.M. Ahead Summer Academy Pre-Test 24-25</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><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-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Quiz</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>5th Grade</p></div></div></div></div></div></a><a href="/admin/quiz/56b0d2db0e6f4514362d45e9/misplaced-and-dangling-modifiers" data-testid="activity-popular-resource-card-56b0d2db0e6f4514362d45e9" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Misplaced and Dangling Modifiers" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 14 questions</span></p></div></div></div></div><div class="border-t border-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.nsajws6idqs" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Misplaced and Dangling Modifiers</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><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-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Quiz</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>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-ds-dark-500-50 border border-ds-light-500-20 rounded-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-98f58bf5><div class="flex p-2 justify-start items-center w-full h-full flex-row flex-nowrap" data-v-98f58bf5><button type="button" aria-label="chevron-right" class="bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 w-8 h-8 border-ds-dark-500-20 border 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-98f58bf5><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-ds-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-ds-light-500 gap-4 p-8 rounded-admin-xl border border-ds-dark-500-20 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-ds-success-100 justify-center items-center flex-row flex-nowrap"><div class="flex justify-center items-center w-10 h-10 text-3xl text-ds-success-600 flex-shrink-0" data-testid><i class="fas fa-compass"></i></div></div><h2 class="text-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-98f58bf5><div class="h-full relative" data-v-17c94643 data-v-98f58bf5><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/5f7f313ed420ff001b53ce86/identifying-equations" data-testid="activity-subject-resource-card-5f7f313ed420ff001b53ce86" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Identifying equations" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-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-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.32246378hm2" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Identifying equations</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><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-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Quiz</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>KG - University</p></div></div></div></div></div></a><a href="/admin/quiz/6631337b675a2a85e12ac63d/chapter-8-getting-along-with-your-supervisor" data-testid="activity-subject-resource-card-6631337b675a2a85e12ac63d" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Chapter 8 - Getting Along with your Supervisor" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 16 questions</span></p></div></div></div></div><div class="border-t border-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.rs7hbrfvy5" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Chapter 8 - Getting Along with your Supervisor</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><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-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Quiz</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>3rd Grade - Professio...</p></div></div></div></div></div></a><a href="/admin/quiz/5913b7aa8590481000eeefc9/logos" data-testid="activity-subject-resource-card-5913b7aa8590481000eeefc9" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="logos" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-control-small font-semibold" data-testid="pill-text"><span class="flex items-center gap-1"> 44 questions</span></p></div></div></div></div><div class="border-t border-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.ioaekj2hfyn" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">logos</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><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-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Quiz</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>KG - University</p></div></div></div></div></div></a><a href="/admin/quiz/683e638c2ddc4e75d4f35494/railroad-operations-and-classifications-quiz" data-testid="activity-subject-resource-card-683e638c2ddc4e75d4f35494" data-v-bb741a84><div class="w-60 h-auto hover:border-ds-lilac-500" data-v-bb741a84><div class="flex cursor-pointer bg-ds-light-500 rounded-admin-lg border border-ds-dark-500-20 transition-all hover:border-ds-lilac-500 overflow-hidden justify-start items-start flex-col flex-nowrap" data-v-bb741a84><div class="relative box-border w-full h-full bg-ds-light-400 relative" data-v-bb741a84><div class="overflow-hidden w-auto h-40 flex-shrink-0 relative group" data-v-bb741a84><img src="https://cf.quizizz.com/image/image-loader.svg" alt="Railroad Operations and Classifications Quiz" class="w-full h-full object-cover" data-testid="undefined-image-loading"></div><div class="top-2 left-2 absolute" data-v-bb741a84></div><div class="bottom-2 left-2 absolute" data-v-bb741a84><div class="" data-v-bb741a84><div class="bg-ds-light-500 py-1 px-3 border max-w-max border-ds-dark-500-20 rounded-full" data-testid="activity-display-card-stats"><p class="text-ds-dark-500 text-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-ds-dark-500-20 w-60 h-auto" data-v-bb741a84><div class="flex gap-2 py-4 px-2 justify-start items-stretch w-full flex-col flex-nowrap" data-v-bb741a84><div data-v-bb741a84><div aria-describedby="tooltip-0.6pta5gvquxf" class="contents"><p class="text-content-base font-semibold text-clip line-clamp-1 w-auto overflow-none">Railroad Operations and Classifications Quiz</p></div></div><div class="flex gap-1 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><div class="flex gap-2 justify-start items-center flex-row flex-nowrap" data-v-bb741a84><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-ds-dark-200 text-content-small font-medium" data-testid="activity-type-text">Quiz</p></div><p class="text-ds-dark-100 text-content-base font-semibold" data-v-bb741a84> • </p><p class="text-ds-dark-200 text-content-small font-semibold" data-testid="activity-display-card-grade" data-v-bb741a84>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-ds-dark-500-50 border border-ds-light-500-20 rounded-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-98f58bf5><div class="flex p-2 justify-start items-center w-full h-full flex-row flex-nowrap" data-v-98f58bf5><button type="button" aria-label="chevron-right" class="bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 w-8 h-8 border-ds-dark-500-20 border 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-98f58bf5><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-ds-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-98f58bf5><div class="h-full relative" data-v-17c94643 data-v-98f58bf5><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/ela/reading/informational-text/advanced-text-types/historical-documents/world-historical-texts" target="_blank"><div class="flex gap-1 py-1 px-3 border border-ds-dark-500-20 rounded-full bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 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-ds-dark-200 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-ds-dark-200 select-none text-control-base font-semibold">World historical texts</span><div class="sr-only"><input type="checkbox" aria-labelledby="World historical texts-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/math/number-system/quantities-and-measurement/working-with-units/defining-quantities-for-descriptive-modeling" target="_blank"><div class="flex gap-1 py-1 px-3 border border-ds-dark-500-20 rounded-full bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 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-ds-dark-200 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-ds-dark-200 select-none text-control-base font-semibold">Defining Quantities for Descriptive Modeling</span><div class="sr-only"><input type="checkbox" aria-labelledby="Defining Quantities for Descriptive Modeling-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/science/biology/human-physiology/circulatory-system/blood-vessels-and-circulation" target="_blank"><div class="flex gap-1 py-1 px-3 border border-ds-dark-500-20 rounded-full bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 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-ds-dark-200 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-ds-dark-200 select-none text-control-base font-semibold">Blood vessels and circulation</span><div class="sr-only"><input type="checkbox" aria-labelledby="Blood vessels and circulation-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/math/functions/specific-functions/quadratic-functions/graphing-and-analyzing-quadratics/rewriting-quadratic-functions-to-reveal-properties/interpreting-quadratic-graphs-via-factoring" target="_blank"><div class="flex gap-1 py-1 px-3 border border-ds-dark-500-20 rounded-full bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 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-ds-dark-200 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-ds-dark-200 select-none text-control-base font-semibold">Interpreting Quadratic Graphs via Factoring</span><div class="sr-only"><input type="checkbox" aria-labelledby="Interpreting Quadratic Graphs via Factoring-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/math/geometry/transformations/transformation-properties/representing-and-comparing-transformations/comparing-transformations-that-preserve-distance-and-angle-to-those-that-do-not" target="_blank"><div class="flex gap-1 py-1 px-3 border border-ds-dark-500-20 rounded-full bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 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-ds-dark-200 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-ds-dark-200 select-none text-control-base font-semibold">Comparing transformations that preserve distance and angle to those that do not</span><div class="sr-only"><input type="checkbox" aria-labelledby="Comparing transformations that preserve distance and angle to those that do not-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/social-studies/civics-and-government/modern-government/levels-and-branches-of-government" target="_blank"><div class="flex gap-1 py-1 px-3 border border-ds-dark-500-20 rounded-full bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 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-ds-dark-200 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-ds-dark-200 select-none text-control-base font-semibold">Levels and branches of government</span><div class="sr-only"><input type="checkbox" aria-labelledby="Levels and branches of government-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/science/physics/electricity-and-magnetism/electrostatics/electric-field-calculations" target="_blank"><div class="flex gap-1 py-1 px-3 border border-ds-dark-500-20 rounded-full bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 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-ds-dark-200 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-ds-dark-200 select-none text-control-base font-semibold">Electric field calculations</span><div class="sr-only"><input type="checkbox" aria-labelledby="Electric field calculations-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/ela/reading/literature/text-types-and-genres/drama/american-plays" target="_blank"><div class="flex gap-1 py-1 px-3 border border-ds-dark-500-20 rounded-full bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 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-ds-dark-200 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-ds-dark-200 select-none text-control-base font-semibold">American plays</span><div class="sr-only"><input type="checkbox" aria-labelledby="American plays-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/math/functions/specific-functions/exponential-and-logarithmic-functions/logarithmic-functions/evaluating-logarithms-in-exponential-models" target="_blank"><div class="flex gap-1 py-1 px-3 border border-ds-dark-500-20 rounded-full bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 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-ds-dark-200 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-ds-dark-200 select-none text-control-base font-semibold">Evaluating Logarithms in Exponential Models</span><div class="sr-only"><input type="checkbox" aria-labelledby="Evaluating Logarithms in Exponential Models-label"></div></div></a></div><div class="flex-shrink-0"><a href="/library/science/scientific-methods-and-applications/research-ethics-and-integrity/responsible-conduct" target="_blank"><div class="flex gap-1 py-1 px-3 border border-ds-dark-500-20 rounded-full bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 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-ds-dark-200 flex-shrink-0" data-testid><i class="fas fa-search"></i></div><span class="text-ds-dark-200 select-none text-control-base font-semibold">Responsible Conduct</span><div class="sr-only"><input type="checkbox" aria-labelledby="Responsible Conduct-label"></div></div></a></div></div></div></div><div class="left-0 bottom-0 absolute w-full" data-v-17c94643><div class="bg-ds-dark-500-50 border border-ds-light-500-20 rounded-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-98f58bf5><div class="flex p-2 justify-start items-center w-full h-full flex-row flex-nowrap" data-v-98f58bf5><button type="button" aria-label="chevron-right" class="bg-ds-light-500 hover:bg-ds-light-300 active:bg-ds-light-200 w-8 h-8 border-ds-dark-500-20 border 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-98f58bf5><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-ds-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-0b83c168><div class="px-4 mx-auto footer-inner-wrapper max-w-320 md:px-10" data-v-0b83c168><div class="flex flex-col justify-between w-full" data-v-0b83c168><div class="flex flex-col md:flex-row" data-v-0b83c168><div class="grid justify-between w-full footer-links-container grow md:grid-rows-1" data-v-0b83c168></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-0b83c168><div class="flex flex-col items-center space-y-4 md:items-start md:mt-5" data-v-0b83c168><div class="flex flex-row items-center space-x-4 footer-bottom-container" data-v-0b83c168><p class="text-sm font-semibold copyright text-dark-4" data-v-0b83c168> © 2025 Quizizz Inc. </p><div class="social-links" data-v-0b83c168><a href="https://twitter.com/quizizz" rel="noopener noreferrer" target="_blank" aria-label="Twitter" data-v-0b83c168><i class="social-icon fab fa-twitter" data-v-0b83c168></i></a><a href="https://facebook.com/quizizz" rel="noopener noreferrer" target="_blank" aria-label="Facebook" data-v-0b83c168><i class="social-icon fab fa-facebook" data-v-0b83c168></i></a><a href="https://instagram.com/quizizz" rel="noopener noreferrer" target="_blank" aria-label="Instagram" data-v-0b83c168><i class="social-icon fab fa-instagram" data-v-0b83c168></i></a><span class="block w-px h-5 bg-dark-5" data-v-0b83c168></span><a href="/practice/sitemaps" rel="noopenner noreferrer" target="_blank" data-v-0b83c168><span class="text-sm text-dark-3 hover:underline" data-v-0b83c168><span data-v-0b83c168>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-0b83c168><label class="text-sm font-bold text-center text-dark-3 hidden md:block" data-v-0b83c168><span data-v-0b83c168>Get our app</span></label><div class="flex space-x-2" data-v-0b83c168><a href="https://share.quizizz.com/nz4P08MhCM" rel="noopener noreferrer" class="transition-all hover:scale-105" target="_blank" aria-label="App Store" data-v-0b83c168><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-0b83c168></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-0b83c168><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-0b83c168></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":1638,"once":1640,"_errors":1641,"serverRendered":5,"path":1643,"country":90,"region":1644,"nuxtSsrFeatureFlags":1645},["ShallowReactive",3],{"trvETABxpi":4,"NacwkiJcJD":74,"LMMnhrPN3q":1472,"FGoA0jKral":1524},{"success":5,"data":6,"time":73},true,{"quizzes":7,"total":69,"timeTaken":70,"experiment":71,"source":72},[8,19,27,34,41,49,56,63],{"id":9,"isSuper":10,"type":11,"info":12,"shouldIndex":10,"stats":17},"67ae468537286353831068fc",false,"video-quiz",{"grade":13,"name":15,"slug":15,"image":16},[14,14],"13","Modern Web Design with HTML5, CSS3, and JavaScript - Floating Images to the Left of the Text","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/0cf4a631-9324-49ec-b35c-0aee00117537-v2",{"totalQuestions":18},8,{"id":20,"isSuper":10,"type":11,"info":21,"shouldIndex":10,"stats":25},"67775c0fc436227c61c8db7e",{"grade":22,"name":23,"slug":23,"image":24},[14,14],"Learning CSS (Video 12)","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/9fc989ba-097c-4811-bb64-e88613c1d9f2-v2",{"totalQuestions":26},6,{"id":28,"isSuper":10,"type":11,"info":29,"shouldIndex":10,"stats":33},"67ae18262d3dee0d577bca7b",{"grade":30,"name":31,"slug":31,"image":32},[14,14],"Frontend Web Development Bootcamp - Build a Twitter Clone - CSS Selectors","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/b45a7d3c-2086-46e5-9bde-387c96e5d0e1-v2",{"totalQuestions":18},{"id":35,"isSuper":10,"type":11,"info":36,"shouldIndex":10,"stats":40},"67b76410f8a2750f36afd05e",{"grade":37,"name":38,"slug":38,"image":39},[14,14],"HTML CSS and JavaScript for Beginners - A Web Design Course - CSS Divs and Spans","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/4cd3b04b-b7bc-4158-962a-dd3bd87b40dd-v2",{"totalQuestions":26},{"id":42,"isSuper":10,"type":11,"info":43,"shouldIndex":10,"stats":47},"67b1f1153c1019e2147eaa59",{"grade":44,"name":45,"slug":45,"image":46},[14,14],"Modern Web Design with HTML5, CSS3, and JavaScript - Changing First Letter in Pseudo-classes","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/4669812c-32c1-4335-b425-a8963ffcbdb9-v2",{"totalQuestions":48},4,{"id":50,"isSuper":10,"type":11,"info":51,"shouldIndex":10,"stats":55},"677449a147a55730c6ef07f8",{"grade":52,"name":53,"slug":53,"image":54},[14,14],"Modern HTML and CSS from the Beginning (Including Sass) - Implementing CSS","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/f3716e85-7188-4b89-970b-4fd3c43b61db-v2",{"totalQuestions":18},{"id":57,"isSuper":10,"type":11,"info":58,"shouldIndex":10,"stats":62},"67ae1accf0927aea35b87f43",{"grade":59,"name":60,"slug":60,"image":61},[14,14],"HTML CSS and JavaScript for Beginners - A Web Design Course - HTML Metadata","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/a4e8b738-3b18-4726-81ce-4046da740eb5-v2",{"totalQuestions":26},{"id":64,"isSuper":10,"type":11,"info":65,"shouldIndex":10,"stats":68},"67b77cbca61802d604ed19de",{"grade":66,"name":15,"slug":15,"image":67},[14,14],"https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/71093a31-3154-45b2-b2bd-37d3324e90e8-v2",{"totalQuestions":48},2546,35,"quizPageRecoPublicSearch","recommended_search","2025-06-21T12:26:27.213998164Z",{"success":5,"message":75,"data":76,"time":1468,"meta":1469},"Ok",{"quiz":77,"draft":81},{"isTagged":10,"isLoved":10,"tagIds":78,"stats":79,"love":80,"cloned":10,"parentDetail":81,"deleted":10,"archived":10,"lifetimeAccess":10,"draftVersion":81,"publishedVersion":82,"isShared":10,"type":11,"_id":83,"createdBy":84,"info":102,"paidOrganization":1464,"createdAt":1465,"updated":1466,"premiumUse":1467,"shouldIndex":5,"hasDraftVersion":10,"hasPublishedVersion":5,"gameChangerBadge":81,"lock":81},[],{"played":80,"totalPlayers":80,"totalCorrect":80,"totalQuestions":80},0,null,"67ae83a1c0fd75a5db91a313","67ae83a1c0fd75a5db91a312",{"_id":85,"firstName":86,"lastName":87,"email":88,"occupation":89,"country":90,"preferences":91,"grades":93,"subject_tags":97,"media":101},"65cf12f6e8a17f8c0da51a59","Quizizz","Content","contentcatalog@quizizz.com","teacher","US",{"lang":92},"en",[26,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/145bbecb-5aa3-4a13-9f05-393125fb3d1f-v2",{"lang":92,"aiGenerated":10,"qm":103,"visibility":5,"subjects":114,"topics":117,"subtopics":118,"grade":119,"gradeLevel":81,"deleted":10,"pref":120,"traits":121,"standardIds":123,"__v":124,"meta":125,"_id":82,"name":128,"image":129,"aiCreateMeta":81,"questions":130,"questionDrafts":489,"standards":81,"courses":81,"createdAt":490,"updated":491,"interactiveVideoProps":492,"isProfane":10,"whitelisted":5,"slug":128},{"67ae83afa255c1af81cdd00f":104,"67ae83afa255c1af81cdd010":106,"67ae83afa255c1af81cdd011":108,"67ae83afa255c1af81cdd012":109,"67ae83afa255c1af81cdd013":110,"67ae83afa255c1af81cdd014":111,"67ae83afa255c1af81cdd015":112,"67ae83afa255c1af81cdd016":113},{"time":105},900000,{"time":107},30000,{"time":107},{"time":107},{"time":107},{"time":107},{"time":107},{"time":107},[115,116],"Information Technology (IT)","Architecture",[],[],[14,14],{"time":81},{"isQuizWithoutCorrectAnswer":10,"totalSlides":80,"totalComprehensionQuestions":122,"nonAnswerableQuestions":122},1,[],5,{"slot":126,"experiment":127},15,"main_main","ChatGPT for Web Design - Create Amazing Websites - Introduction to Web Design: HTML and CSS","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/4f836c9f-e663-4e3c-b56f-be7508bd3b64-v2",[131,188,234,277,320,363,405,447],{"structure":132,"standards":172,"topics":173,"isSuperParent":10,"standardIds":174,"aiGenerated":10,"__v":175,"teleportFrom":81,"cloned":81,"ver":176,"parent":81,"_id":177,"time":105,"published":5,"aiCreateMeta":81,"type":133,"comprehensionQuestionIds":178,"createdAt":186,"updated":187},{"kind":133,"answer":134,"settings":135,"marks":137,"query":138,"options":153,"explain":154,"theme":158,"graphs":167,"hints":168,"order":169,"hasMath":10,"media":170,"elements":171},"COMPREHENSION_VIDEO",[],{"hasCorrectAnswer":10,"fibDataType":136,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},"string",{"correct":80,"incorrect":80},{"answerTime":139,"math":140,"type":81,"hasMath":10,"media":142,"text":151,"_id":152},-1,{"latex":141,"template":81},[],[143],{"type":144,"meta":145},"video",{"duration":146,"endTime":146,"startTime":80,"videoId":147,"src":148,"thumbnail":149,"filmstrip":150},572,"66941b1d894ef67a76c35c11","boclips","https://cdnapisec.kaltura.com/p/1776261/thumbnail/entry_id/1_nsalt907/width/{thumbnailWidth}/vid_slices/3/vid_slice/1","https://cdnapisec.kaltura.com/p/1776261/thumbnail/entry_id/1_nsalt907/width/{thumbnailWidth}/vid_slices/{thumbnailCount}","","67ae83ae2eee9ea8c946add5",[],{"math":155,"type":151,"hasMath":10,"media":157,"text":151},{"latex":156,"template":81},[],[],{"titleFontFamily":159,"fontFamily":159,"fontColor":160,"background":162,"shape":164},"Quicksand",{"text":161},"#5D2057",{"color":163,"image":151,"video":151},"#FFFFFF",{"largeShapeColor":165,"smallShapeColor":166},"#F2F2F2","#9A4292",[],[],"asc",[],[],[],[],[],2,3,"67ae83afa255c1af81cdd00f",[179,180,181,182,183,184,185],"67ae83afa255c1af81cdd010","67ae83afa255c1af81cdd011","67ae83afa255c1af81cdd012","67ae83afa255c1af81cdd013","67ae83afa255c1af81cdd014","67ae83afa255c1af81cdd015","67ae83afa255c1af81cdd016","2025-02-13T23:43:43.072Z","2025-02-13T23:43:43.329Z",{"structure":189,"standards":229,"topics":230,"isSuperParent":10,"standardIds":231,"aiGenerated":5,"__v":122,"teleportFrom":81,"cloned":81,"ver":175,"parent":81,"_id":179,"time":107,"published":5,"aiCreateMeta":81,"type":227,"comprehensionQuestionId":177,"comprehensionTimestamp":232,"createdAt":233,"updated":187},{"settings":190,"hasMath":10,"query":191,"options":197,"explain":222,"hints":226,"kind":227,"marks":228,"answer":122},{"hasCorrectAnswer":5,"fibDataType":136,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":192,"hasMath":10,"math":193,"answerTime":139,"text":195,"media":196},"text",{"latex":194,"template":81},[],"\u003Cp>What is the primary function of an IDE in web development?\u003C/p>",[],[198,204,210,216],{"type":192,"hasMath":10,"math":199,"answerTime":80,"id":201,"text":202,"media":203,"_id":201},{"latex":200,"template":81},[],"67ae83ae573c0a62c8bc837d","\u003Cp>To host websites online\u003C/p>",[],{"type":192,"hasMath":10,"math":205,"answerTime":80,"id":207,"text":208,"media":209,"_id":207},{"latex":206,"template":81},[],"67ae83ae573c0ab278bc837e","\u003Cp>To translate human-readable code into machine-readable code\u003C/p>",[],{"type":192,"hasMath":10,"math":211,"answerTime":80,"id":213,"text":214,"media":215,"_id":213},{"latex":212,"template":81},[],"67ae83ae573c0afaa9bc837f","\u003Cp>To manage databases\u003C/p>",[],{"type":192,"hasMath":10,"math":217,"answerTime":80,"id":219,"text":220,"media":221,"_id":219},{"latex":218,"template":81},[],"67ae83ae573c0a85e2bc8380","\u003Cp>To design graphics for websites\u003C/p>",[],{"type":192,"text":151,"media":223,"hasMath":10,"math":224,"answerTime":80},[],{"template":81,"latex":225},[],[],"MCQ",{"correct":122,"incorrect":80},[],[],[],63,"2025-02-13T23:43:43.082Z",{"structure":235,"standards":273,"topics":274,"isSuperParent":10,"standardIds":275,"aiGenerated":5,"__v":122,"teleportFrom":81,"cloned":81,"ver":175,"parent":81,"_id":180,"time":107,"published":5,"aiCreateMeta":81,"type":227,"comprehensionQuestionId":177,"comprehensionTimestamp":276,"createdAt":233,"updated":187},{"settings":236,"hasMath":10,"query":237,"options":242,"explain":267,"hints":271,"kind":227,"marks":272,"answer":80},{"hasCorrectAnswer":5,"fibDataType":136,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":192,"hasMath":10,"math":238,"answerTime":139,"text":240,"media":241},{"latex":239,"template":81},[],"\u003Cp>Which tag is considered the root node in an HTML document?\u003C/p>",[],[243,249,255,261],{"type":192,"hasMath":10,"math":244,"answerTime":80,"id":246,"text":247,"media":248,"_id":246},{"latex":245,"template":81},[],"67ae83ae573c0a70e4bc8384","\u003Cp>\u003Chtml>\u003C/p>",[],{"type":192,"hasMath":10,"math":250,"answerTime":80,"id":252,"text":253,"media":254,"_id":252},{"latex":251,"template":81},[],"67ae83ae573c0ad458bc8385","\u003Cp>\u003Cbody>\u003C/p>",[],{"type":192,"hasMath":10,"math":256,"answerTime":80,"id":258,"text":259,"media":260,"_id":258},{"latex":257,"template":81},[],"67ae83ae573c0a3358bc8386","\u003Cp>\u003Ctitle>\u003C/p>",[],{"type":192,"hasMath":10,"math":262,"answerTime":80,"id":264,"text":265,"media":266,"_id":264},{"latex":263,"template":81},[],"67ae83ae573c0ae4ecbc8387","\u003Cp>\u003Chead>\u003C/p>",[],{"type":192,"text":151,"media":268,"hasMath":10,"math":269,"answerTime":80},[],{"template":81,"latex":270},[],[],{"correct":122,"incorrect":80},[],[],[],158,{"structure":278,"standards":316,"topics":317,"isSuperParent":10,"standardIds":318,"aiGenerated":5,"__v":122,"teleportFrom":81,"cloned":81,"ver":175,"parent":81,"_id":181,"time":107,"published":5,"aiCreateMeta":81,"type":227,"comprehensionQuestionId":177,"comprehensionTimestamp":319,"createdAt":233,"updated":187},{"settings":279,"hasMath":10,"query":280,"options":285,"explain":310,"hints":314,"kind":227,"marks":315,"answer":175},{"hasCorrectAnswer":5,"fibDataType":136,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":192,"hasMath":10,"math":281,"answerTime":139,"text":283,"media":284},{"latex":282,"template":81},[],"\u003Cp>What is the purpose of the \u003Chead> tag in an HTML document?\u003C/p>",[],[286,292,298,304],{"type":192,"hasMath":10,"math":287,"answerTime":80,"id":289,"text":290,"media":291,"_id":289},{"latex":288,"template":81},[],"67ae83ae573c0adf08bc838b","\u003Cp>To link external scripts\u003C/p>",[],{"type":192,"hasMath":10,"math":293,"answerTime":80,"id":295,"text":296,"media":297,"_id":295},{"latex":294,"template":81},[],"67ae83ae573c0a41d2bc838c","\u003Cp>To contain the footer of the webpage\u003C/p>",[],{"type":192,"hasMath":10,"math":299,"answerTime":80,"id":301,"text":302,"media":303,"_id":301},{"latex":300,"template":81},[],"67ae83ae573c0a31edbc838d","\u003Cp>To provide metadata and additional information to the browser\u003C/p>",[],{"type":192,"hasMath":10,"math":305,"answerTime":80,"id":307,"text":308,"media":309,"_id":307},{"latex":306,"template":81},[],"67ae83ae573c0a5ae7bc838e","\u003Cp>To display the main content of the webpage\u003C/p>",[],{"type":192,"text":151,"media":311,"hasMath":10,"math":312,"answerTime":80},[],{"template":81,"latex":313},[],[],{"correct":122,"incorrect":80},[],[],[],314,{"structure":321,"standards":359,"topics":360,"isSuperParent":10,"standardIds":361,"aiGenerated":5,"__v":122,"teleportFrom":81,"cloned":81,"ver":175,"parent":81,"_id":182,"time":107,"published":5,"aiCreateMeta":81,"type":227,"comprehensionQuestionId":177,"comprehensionTimestamp":319,"createdAt":233,"updated":362},{"settings":322,"hasMath":10,"query":323,"options":328,"explain":353,"hints":357,"kind":227,"marks":358,"answer":80},{"hasCorrectAnswer":5,"fibDataType":136,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":192,"hasMath":10,"math":324,"answerTime":139,"text":326,"media":327},{"latex":325,"template":81},[],"\u003Cp>Which of the following is a block element in HTML?\u003C/p>",[],[329,335,341,347],{"type":192,"hasMath":10,"math":330,"answerTime":80,"id":332,"text":333,"media":334,"_id":332},{"latex":331,"template":81},[],"67ae83ae573c0ab916bc8392","\u003Cp>\u003Cdiv>\u003C/p>",[],{"type":192,"hasMath":10,"math":336,"answerTime":80,"id":338,"text":339,"media":340,"_id":338},{"latex":337,"template":81},[],"67ae83ae573c0a3319bc8393","\u003Cp>\u003Cspan>\u003C/p>",[],{"type":192,"hasMath":10,"math":342,"answerTime":80,"id":344,"text":345,"media":346,"_id":344},{"latex":343,"template":81},[],"67ae83ae573c0a36fbbc8394","\u003Cp>\u003Ca>\u003C/p>",[],{"type":192,"hasMath":10,"math":348,"answerTime":80,"id":350,"text":351,"media":352,"_id":350},{"latex":349,"template":81},[],"67ae83ae573c0a49a0bc8395","\u003Cp>\u003Cimg>\u003C/p>",[],{"type":192,"text":151,"media":354,"hasMath":10,"math":355,"answerTime":80},[],{"template":81,"latex":356},[],[],{"correct":122,"incorrect":80},[],[],[],"2025-02-13T23:43:43.330Z",{"structure":364,"standards":402,"topics":403,"isSuperParent":10,"standardIds":404,"aiGenerated":5,"__v":122,"teleportFrom":81,"cloned":81,"ver":175,"parent":81,"_id":183,"time":107,"published":5,"aiCreateMeta":81,"type":227,"comprehensionQuestionId":177,"comprehensionTimestamp":146,"createdAt":233,"updated":362},{"settings":365,"hasMath":10,"query":366,"options":371,"explain":396,"hints":400,"kind":227,"marks":401,"answer":176},{"hasCorrectAnswer":5,"fibDataType":136,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":192,"hasMath":10,"math":367,"answerTime":139,"text":369,"media":370},{"latex":368,"template":81},[],"\u003Cp>What does CSS stand for?\u003C/p>",[],[372,378,384,390],{"type":192,"hasMath":10,"math":373,"answerTime":80,"id":375,"text":376,"media":377,"_id":375},{"latex":374,"template":81},[],"67ae83ae573c0a5688bc8399","\u003Cp>Creative Style Syntax\u003C/p>",[],{"type":192,"hasMath":10,"math":379,"answerTime":80,"id":381,"text":382,"media":383,"_id":381},{"latex":380,"template":81},[],"67ae83ae573c0a5b40bc839a","\u003Cp>Computer Style System\u003C/p>",[],{"type":192,"hasMath":10,"math":385,"answerTime":80,"id":387,"text":388,"media":389,"_id":387},{"latex":386,"template":81},[],"67ae83ae573c0a61dbbc839b","\u003Cp>Coded Style Sheets\u003C/p>",[],{"type":192,"hasMath":10,"math":391,"answerTime":80,"id":393,"text":394,"media":395,"_id":393},{"latex":392,"template":81},[],"67ae83ae573c0a7c61bc839c","\u003Cp>Cascading Style Sheets\u003C/p>",[],{"type":192,"text":151,"media":397,"hasMath":10,"math":398,"answerTime":80},[],{"template":81,"latex":399},[],[],{"correct":122,"incorrect":80},[],[],[],{"structure":406,"standards":444,"topics":445,"isSuperParent":10,"standardIds":446,"aiGenerated":5,"__v":122,"teleportFrom":81,"cloned":81,"ver":175,"parent":81,"_id":184,"time":107,"published":5,"aiCreateMeta":81,"type":227,"comprehensionQuestionId":177,"comprehensionTimestamp":146,"createdAt":233,"updated":362},{"settings":407,"hasMath":10,"query":408,"options":413,"explain":438,"hints":442,"kind":227,"marks":443,"answer":122},{"hasCorrectAnswer":5,"fibDataType":136,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":192,"hasMath":10,"math":409,"answerTime":139,"text":411,"media":412},{"latex":410,"template":81},[],"\u003Cp>How can CSS be applied to HTML elements?\u003C/p>",[],[414,420,426,432],{"type":192,"hasMath":10,"math":415,"answerTime":80,"id":417,"text":418,"media":419,"_id":417},{"latex":416,"template":81},[],"67ae83ae573c0a59f4bc83a0","\u003Cp>Only inline styles\u003C/p>",[],{"type":192,"hasMath":10,"math":421,"answerTime":80,"id":423,"text":424,"media":425,"_id":423},{"latex":422,"template":81},[],"67ae83ae573c0a3494bc83a1","\u003Cp>Inline, internal, and external styles\u003C/p>",[],{"type":192,"hasMath":10,"math":427,"answerTime":80,"id":429,"text":430,"media":431,"_id":429},{"latex":428,"template":81},[],"67ae83ae573c0a5896bc83a2","\u003Cp>Only internal styles\u003C/p>",[],{"type":192,"hasMath":10,"math":433,"answerTime":80,"id":435,"text":436,"media":437,"_id":435},{"latex":434,"template":81},[],"67ae83ae573c0a003cbc83a3","\u003Cp>Only external styles\u003C/p>",[],{"type":192,"text":151,"media":439,"hasMath":10,"math":440,"answerTime":80},[],{"template":81,"latex":441},[],[],{"correct":122,"incorrect":80},[],[],[],{"structure":448,"standards":486,"topics":487,"isSuperParent":10,"standardIds":488,"aiGenerated":5,"__v":122,"teleportFrom":81,"cloned":81,"ver":175,"parent":81,"_id":185,"time":107,"published":5,"aiCreateMeta":81,"type":227,"comprehensionQuestionId":177,"comprehensionTimestamp":146,"createdAt":233,"updated":362},{"settings":449,"hasMath":10,"query":450,"options":455,"explain":480,"hints":484,"kind":227,"marks":485,"answer":122},{"hasCorrectAnswer":5,"fibDataType":136,"canSubmitCustomResponse":10,"doesOptionHaveMultipleTargets":10},{"type":192,"hasMath":10,"math":451,"answerTime":139,"text":453,"media":454},{"latex":452,"template":81},[],"\u003Cp>What is the role of a selector in CSS?\u003C/p>",[],[456,462,468,474],{"type":192,"hasMath":10,"math":457,"answerTime":80,"id":459,"text":460,"media":461,"_id":459},{"latex":458,"template":81},[],"67ae83ae573c0af117bc83a7","\u003Cp>To define the layout of a webpage\u003C/p>",[],{"type":192,"hasMath":10,"math":463,"answerTime":80,"id":465,"text":466,"media":467,"_id":465},{"latex":464,"template":81},[],"67ae83ae573c0a26cbbc83a8","\u003Cp>To specify which HTML elements the styles apply to\u003C/p>",[],{"type":192,"hasMath":10,"math":469,"answerTime":80,"id":471,"text":472,"media":473,"_id":471},{"latex":470,"template":81},[],"67ae83ae573c0a1c84bc83a9","\u003Cp>To create animations\u003C/p>",[],{"type":192,"hasMath":10,"math":475,"answerTime":80,"id":477,"text":478,"media":479,"_id":477},{"latex":476,"template":81},[],"67ae83ae573c0a3e4ebc83aa","\u003Cp>To manage server-side scripts\u003C/p>",[],{"type":192,"text":151,"media":481,"hasMath":10,"math":482,"answerTime":80},[],{"template":81,"latex":483},[],[],{"correct":122,"incorrect":80},[],[],[],[],"2025-02-13T23:43:29.379Z","2025-02-14T19:26:00.263Z",{"videoMeta":493,"aiMeta":1402},{"videoId":147,"videoTitle":128,"channelTitle":494,"duration":146,"videoProvider":148,"videoType":495,"videoSubTypes":496,"transcript":498},"Packt - Data","INSTRUCTIONAL",[497],"CHALK_AND_TALK_PRESENTATION",[499,503,507,511,515,519,523,527,531,535,539,543,547,551,555,559,563,567,571,575,579,583,587,591,595,599,603,607,611,615,619,623,627,631,635,639,643,647,651,655,659,663,666,670,674,678,682,686,690,694,698,702,706,710,714,718,722,726,730,734,738,741,744,748,752,756,760,764,768,772,776,780,784,788,792,796,800,804,808,812,816,820,824,828,832,836,840,844,848,852,856,860,864,868,872,876,880,884,887,891,895,899,903,907,911,915,919,923,927,931,935,939,943,946,950,954,958,962,966,970,974,978,982,986,990,994,998,1002,1006,1010,1014,1018,1022,1025,1029,1033,1037,1040,1044,1048,1052,1056,1060,1063,1067,1071,1075,1078,1082,1086,1090,1094,1098,1102,1105,1109,1113,1117,1121,1125,1129,1133,1137,1141,1145,1149,1153,1157,1161,1164,1168,1172,1175,1179,1182,1186,1190,1194,1198,1202,1206,1210,1214,1218,1222,1226,1230,1234,1238,1242,1245,1249,1253,1257,1261,1265,1269,1273,1277,1281,1285,1289,1293,1296,1299,1303,1307,1311,1315,1319,1323,1327,1331,1335,1339,1343,1347,1351,1355,1359,1363,1367,1371,1375,1379,1383,1387,1391,1395,1399],{"text":500,"duration":501,"offset":502},"In this one we will go over the basics of",2611,2200,{"text":504,"duration":505,"offset":506},"HTML and CSS codes, both of which you need to",2866,4874,{"text":508,"duration":509,"offset":510},"go to websites.",956,7804,{"text":512,"duration":513,"offset":514},"So before we go into HTML and CSS, as mentioned",2724,8800,{"text":516,"duration":517,"offset":518},"in the start of this course, one of the problems",2783,11582,{"text":520,"duration":521,"offset":522},"this course wants to address is that now anybody has",3015,14423,{"text":524,"duration":525,"offset":526},"the power to generate codes.",1624,17496,{"text":528,"duration":529,"offset":530},"But where do you put this codes to have it",2004,19360,{"text":532,"duration":533,"offset":534},"actually work?",668,21411,{"text":536,"duration":537,"offset":538},"So to write the code for a website, you need",2725,22280,{"text":540,"duration":541,"offset":542},"an interpreter or integrated development environment or IDE, an IDE",4149,25067,{"text":544,"duration":545,"offset":546},"translator.",682,29278,{"text":548,"duration":549,"offset":550},"It's human readable codes into machine readable codes.",3040,30040,{"text":552,"duration":553,"offset":554},"So that's basically zeros and ones and it does is",2520,33080,{"text":556,"duration":557,"offset":558},"the interface between what you writes and the computer.",2829,35651,{"text":560,"duration":561,"offset":562},"There are many softwares available that can do this, but",2868,38479,{"text":564,"duration":565,"offset":566},"our favorite and the one we will use in this",2253,41399,{"text":568,"duration":569,"offset":570},"course is Visual Studio Codes.",1537,43703,{"text":572,"duration":573,"offset":574},"This is a free, widely used and highly flexible IDE",3088,45320,{"text":576,"duration":577,"offset":578},"or code editor perfect for getting started in web design.",3451,48468,{"text":580,"duration":581,"offset":582},"The examples you will see on screen as we explain",2560,52000,{"text":584,"duration":585,"offset":586},"HTML and CSS will all be written in Visual Studio",2561,54612,{"text":588,"duration":589,"offset":590},"Codes and in the next lesson after this one, we",2456,57225,{"text":592,"duration":593,"offset":594},"will also guide you through downloading and setting up Visual",3188,59733,{"text":596,"duration":597,"offset":598},"Studio Code for yourself.",1306,62973,{"text":600,"duration":601,"offset":602},"So in web design, there are multiple different types of",2920,64280,{"text":604,"duration":605,"offset":606},"codes and these are hierarchically related to each other.",3026,67253,{"text":608,"duration":609,"offset":610},"The bottom fundamental layer of code is HTML.",2840,70320,{"text":612,"duration":613,"offset":614},"This provides the structure of the websites.",2360,73200,{"text":616,"duration":617,"offset":618},"The next layer is CSS.",1560,75560,{"text":620,"duration":621,"offset":622},"CSS describes the appearance or presentation of the HTML elements.",4960,77160,{"text":624,"duration":625,"offset":626},"And finally, the top layer is JavaScript which is used",2989,82120,{"text":628,"duration":629,"offset":630},"to control the behavior of or interaction with the different",3322,85164,{"text":632,"duration":633,"offset":634},"elements.",498,88541,{"text":636,"duration":637,"offset":638},"So JavaScript is used if you want to include movement",3180,89080,{"text":640,"duration":641,"offset":642},"or calculations or interaction on your websites.",2880,92320,{"text":644,"duration":645,"offset":646},"We will look into JavaScript in a future lesson.",2280,95200,{"text":648,"duration":649,"offset":650},"Since we can create a basic website without using JavaScript",3667,97520,{"text":652,"duration":653,"offset":654},"and only using HTML and CSS.",1712,101248,{"text":656,"duration":657,"offset":658},"That's our first look at HTMLHTML stands for a Hypertext",3805,102959,{"text":660,"duration":661,"offset":662},"Markup Language.",1087,106832,{"text":664,"duration":589,"offset":665},"It is not a programming language but more like a",108080,{"text":667,"duration":668,"offset":669},"structure language.",972,110587,{"text":671,"duration":672,"offset":673},"The language describes the structure of the web page by",3608,111640,{"text":675,"duration":676,"offset":677},"means of HTML text.",1247,115313,{"text":679,"duration":680,"offset":681},"Here you can see an example of what an HTML",2149,116560,{"text":683,"duration":684,"offset":685},"code for a website look.",1200,118759,{"text":687,"duration":688,"offset":689},"By the way, I had ChatGPT write this code for",2571,120520,{"text":691,"duration":692,"offset":693},"me.",172,123148,{"text":695,"duration":696,"offset":697},"So as you can see, everything is built up using",2820,123320,{"text":699,"duration":700,"offset":701},"these tags that are in between the smaller than and",3060,126200,{"text":703,"duration":704,"offset":705},"larger than signs.",1080,129320,{"text":707,"duration":708,"offset":709},"These tags show the browser in which way the information",3199,130400,{"text":711,"duration":712,"offset":713},"should be displayed.",1142,133657,{"text":715,"duration":716,"offset":717},"As you can see the tags of a beginning and",2391,135040,{"text":719,"duration":720,"offset":721},"an end, and in between the beginning and the end",2733,137488,{"text":723,"duration":724,"offset":725},"of A tag, the content of that tag is written.",2562,140277,{"text":727,"duration":728,"offset":729},"There are also tags which only have one part, such",2382,143000,{"text":731,"duration":732,"offset":733},"as the image tag.",810,145430,{"text":735,"duration":736,"offset":737},"The tags might all seem quite random right now, but",2662,146480,{"text":739,"duration":736,"offset":740},"there actually is a hierarchy to them, and once you",149194,{"text":742,"duration":736,"offset":743},"understand this, it will be quite easy to see which",151908,{"text":745,"duration":746,"offset":747},"tag refers to which element of the web page.",2296,154623,{"text":749,"duration":750,"offset":751},"So let's look at the hierarchy of HTML.",2240,157040,{"text":753,"duration":754,"offset":755},"So at the top of the hierarchy is the doc",2355,159280,{"text":757,"duration":758,"offset":759},"type HTML tag, which lets the browser know that there's",3160,161692,{"text":761,"duration":762,"offset":763},"an HTML document and should be interpreted as such.",2929,164910,{"text":765,"duration":766,"offset":767},"This tag does not have an int that goes with",2273,167960,{"text":769,"duration":770,"offset":771},"it.",155,170285,{"text":773,"duration":774,"offset":775},"Next there is the HTML tag which is called the",2916,170600,{"text":777,"duration":778,"offset":779},"root notes because all of the HTML codes of that",3044,173579,{"text":781,"duration":782,"offset":783},"page is written within that tag and tags always have",3297,176686,{"text":785,"duration":786,"offset":787},"a/ after the smaller than sign as you can see",2853,180046,{"text":789,"duration":790,"offset":791},"here.",317,182963,{"text":793,"duration":794,"offset":795},"Then there are two different texts, the heads tag and",3227,183360,{"text":797,"duration":798,"offset":799},"the body tag.",791,186648,{"text":801,"duration":802,"offset":803},"Only the information that is written inside the body tag",2918,187600,{"text":805,"duration":806,"offset":807},"is rendered and displayed to the web page.",2190,190570,{"text":809,"duration":810,"offset":811},"The head tag only serves the purpose of giving more",2950,192760,{"text":813,"duration":814,"offset":815},"information to the browser on, for example, the type of",3181,195768,{"text":817,"duration":818,"offset":819},"language that is used and this information in the head",3124,199007,{"text":821,"duration":822,"offset":823},"tag is called metadata.",1331,202189,{"text":825,"duration":826,"offset":827},"Metadata is not displayed on the web page, but provides",2886,203560,{"text":829,"duration":830,"offset":831},"context for the browser on how the browser can interpret",2939,206499,{"text":833,"duration":834,"offset":835},"the content of the web page.",1469,209490,{"text":837,"duration":838,"offset":839},"The head tag also contains the title tag displaying the",3243,210960,{"text":841,"duration":842,"offset":843},"title of the web page.",1298,214262,{"text":845,"duration":846,"offset":847},"Don't be mistaken by this tag because it does not",2679,215560,{"text":849,"duration":850,"offset":851},"show up inside your web page.",1586,218294,{"text":853,"duration":854,"offset":855},"The place where this title is presented is in the",2550,219920,{"text":857,"duration":858,"offset":859},"tab bar of the browser as you can see here.",2238,222522,{"text":861,"duration":862,"offset":863},"Now all the actual content of the websites is placed",2828,224920,{"text":865,"duration":866,"offset":867},"in the body tag, as you can see here in",2121,227802,{"text":869,"duration":870,"offset":871},"the example web page, there's also a hierarchy in the",2882,229978,{"text":873,"duration":874,"offset":875},"body tag as well.",925,232915,{"text":877,"duration":878,"offset":879},"First off, there are multiple parts of the body.",2120,233840,{"text":881,"duration":882,"offset":883},"Most often there is a header, some sort of navigation,",3240,235960,{"text":885,"duration":700,"offset":886},"the main section and the footer and within the main",239260,{"text":888,"duration":889,"offset":890},"section often there are separate sections contained in the section",3960,242380,{"text":892,"duration":893,"offset":894},"tag or the division tag.",1440,246400,{"text":896,"duration":897,"offset":898},"In these sections you can then place the actual content",3512,247840,{"text":900,"duration":901,"offset":902},"such as titles, paragraphs, images, videos, contact forms, etcetera.",4343,251416,{"text":904,"duration":905,"offset":906},"There are two ways to display an element in HTML,",3422,255760,{"text":908,"duration":909,"offset":910},"inline and block.",1188,259252,{"text":912,"duration":913,"offset":914},"The block elements always start on a Of codes and always",3856,260440,{"text":916,"duration":917,"offset":918},"stretch the full page and a small margin is added",3374,264365,{"text":920,"duration":921,"offset":922},"at both and underneath the block elements examples.",3511,267808,{"text":924,"duration":925,"offset":926},"Of these block elements are the paragraph and division tech",3412,271320,{"text":928,"duration":929,"offset":930},"this.",289,274790,{"text":932,"duration":933,"offset":934},"Is an example of a block elements in HTML CODES",2708,275080,{"text":936,"duration":937,"offset":938},"and now it is then displayed on the web page",2536,277845,{"text":940,"duration":941,"offset":942},"and these are all the block elements in HTML NEXT.",2881,280438,{"text":944,"duration":613,"offset":945},"We have the inline elements this.",283320,{"text":947,"duration":948,"offset":949},"Element only takes up the space that is necessary to",3276,285680,{"text":951,"duration":952,"offset":953},"display its content and this does not need to start",3213,289019,{"text":955,"duration":956,"offset":957},"on a So.",505,292295,{"text":959,"duration":960,"offset":961},"This is an example of an inline elements, and these",3778,292800,{"text":963,"duration":964,"offset":965},"are all the inline elements in HTML.",2667,296652,{"text":967,"duration":968,"offset":969},"You certainly don't need to know any of these by",2021,299560,{"text":971,"duration":972,"offset":973},"heart, but this is just to give you an idea",1810,301623,{"text":975,"duration":976,"offset":977},"of what is out there.",885,303475,{"text":979,"duration":980,"offset":981},"You can also always look up any tag on the",2229,304360,{"text":983,"duration":984,"offset":985},"Internet.",477,306642,{"text":987,"duration":988,"offset":989},"There are many good websites such as W3 Schools and",2870,307120,{"text":991,"duration":992,"offset":993},"we will put a link to this in the description",2533,310046,{"text":995,"duration":996,"offset":997},"of this lesson.",844,312635,{"text":999,"duration":1000,"offset":1001},"All right, so now we have a good basic understanding",2545,313640,{"text":1003,"duration":1004,"offset":1005},"of HTML codes.",685,316234,{"text":1007,"duration":1008,"offset":1009},"There are a couple more things we will say about",2796,317200,{"text":1011,"duration":1012,"offset":1013},"HTML such as IDs and classes, but before we mention",2972,320054,{"text":1015,"duration":1016,"offset":1017},"those, let's first look at CSS codes.",2156,323084,{"text":1019,"duration":1020,"offset":1021},"So now let's look at the CSS codes.",1880,325480,{"text":1023,"duration":758,"offset":1024},"CSS stands for Cascading Style Sheets.",327720,{"text":1026,"duration":1027,"offset":1028},"As mentioned before, CSS code describes the appearance or presentation",4778,330880,{"text":1030,"duration":1031,"offset":1032},"of the HTML elements.",1434,335726,{"text":1034,"duration":1035,"offset":1036},"Every HTML elements can have its own piece of CSS",2902,337160,{"text":1038,"duration":537,"offset":1039},"codes, and if an HTML element does not have an",340121,{"text":1041,"duration":1042,"offset":1043},"associated piece of CSS codes, it will get a default",3080,342905,{"text":1045,"duration":1046,"offset":1047},"style.",356,346044,{"text":1049,"duration":1050,"offset":1051},"This is what a website without CSS looks like.",2680,346400,{"text":1053,"duration":1054,"offset":1055},"This is of course quite ugly.",1280,349080,{"text":1057,"duration":1058,"offset":1059},"So we do want to link CSS code to the",2354,350360,{"text":1061,"duration":814,"offset":1062},"HTML elements and there are three ways to do this.",352778,{"text":1064,"duration":1065,"offset":1066},"You can write CSS code inline, which means that within",3437,355960,{"text":1068,"duration":1069,"offset":1070},"A tag you can use the style attributes and write",3056,359461,{"text":1072,"duration":1073,"offset":1074},"your CSS codes right there in the tag.",2419,362580,{"text":1076,"duration":613,"offset":1077},"That will then apply to the content of that tag.",365040,{"text":1079,"duration":1080,"offset":1081},"You can also write CSS codes internal, meaning that you",3407,367520,{"text":1083,"duration":1084,"offset":1085},"place all the CSS codes in the head tag of",2601,370989,{"text":1087,"duration":1088,"offset":1089},"the HTML file.",868,373652,{"text":1091,"duration":1092,"offset":1093},"To do this you use the style tag and place",2739,374520,{"text":1095,"duration":1096,"offset":1097},"the CSS in between it.",1435,377324,{"text":1099,"duration":1100,"offset":1101},"With both of these two options, you have the CSS",2800,378880,{"text":1103,"duration":1100,"offset":1104},"codes in the HTML file, but for the third option",381739,{"text":1106,"duration":1107,"offset":1108},"you create a separate CSS file, also called the style",3092,384598,{"text":1110,"duration":1111,"offset":1112},"sheets, where you place all the CSS codes.",2451,387749,{"text":1114,"duration":1115,"offset":1116},"This is the nicest option of the three since placing",3105,390200,{"text":1118,"duration":1119,"offset":1120},"the CSS codes in the HTML file can become quite",2807,393365,{"text":1122,"duration":1123,"offset":1124},"messy and it is nice to keep them separate.",2568,396231,{"text":1126,"duration":1127,"offset":1128},"If you create a separate CSS file, you need to",2584,398920,{"text":1130,"duration":1131,"offset":1132},"make sure this is linked to the HTML file.",2359,401560,{"text":1134,"duration":1135,"offset":1136},"We will look into how to do this in future",2040,404000,{"text":1138,"duration":1139,"offset":1140},"lessons, but here you can see an example of how",2284,406089,{"text":1142,"duration":1143,"offset":1144},"this is done in the HEAD tech.",1457,408422,{"text":1146,"duration":1147,"offset":1148},"Next.",480,409960,{"text":1150,"duration":1151,"offset":1152},"Just like HTML code works hierarchically, so does CSS codes.",3800,410440,{"text":1154,"duration":1155,"offset":1156},"Another way to describe this idea of the hierarchical is",3078,414279,{"text":1158,"duration":1159,"offset":1160},"that there are parent child relationships.",2307,417412,{"text":1162,"duration":1100,"offset":1163},"The head and the body in the HTML are children",419720,{"text":1165,"duration":1166,"offset":1167},"to the HTML root notes, and in this example the",2861,422581,{"text":1169,"duration":1170,"offset":1171},"H2 title and the paragraph are children to the section",3287,425503,{"text":1173,"duration":778,"offset":1174},"tag, and the section tags are children to the main",428851,{"text":1176,"duration":1177,"offset":1178},"tag.",243,431956,{"text":1180,"duration":537,"offset":1181},"And in turn the main tag, the header, the navigation,",432480,{"text":1183,"duration":1184,"offset":1185},"and the footer are children to the body tag.",2263,435257,{"text":1187,"duration":1188,"offset":1189},"Cascading in CSS stands for the fact that CSS makes",3193,437520,{"text":1191,"duration":1192,"offset":1193},"use of this hierarchy such that when a style is",2943,440775,{"text":1195,"duration":1196,"offset":1197},"applied to a parent element, the children of that element",3569,443780,{"text":1199,"duration":1200,"offset":1201},"will have the same style unless a different style is",3255,447412,{"text":1203,"duration":1204,"offset":1205},"specified for any of those child elements.",2629,450730,{"text":1207,"duration":1208,"offset":1209},"All right, so now you have a good idea of",1975,453360,{"text":1211,"duration":1212,"offset":1213},"what CSS code is used for and where you can",2071,455383,{"text":1215,"duration":1216,"offset":1217},"put it.",338,457502,{"text":1219,"duration":1220,"offset":1221},"But what is the actual CSS codes?",2000,458000,{"text":1223,"duration":1224,"offset":1225},"CSS code is made-up out of rules and consists of",3612,460000,{"text":1227,"duration":1228,"offset":1229},"selectors and declarations.",2032,463687,{"text":1231,"duration":1232,"offset":1233},"The selector is the reference to the HTML element you",3292,465720,{"text":1235,"duration":1236,"offset":1237},"want that piece of CSS code to apply to.",2485,469074,{"text":1239,"duration":1240,"offset":1241},"So if you put a parent element in the selector,",2417,471640,{"text":1243,"duration":1240,"offset":1244},"that code will apply to the children of that as",474108,{"text":1246,"duration":1247,"offset":1248},"parents as well.",823,476577,{"text":1250,"duration":1251,"offset":1252},"In HTML, as I mentioned before, there are also classes",3350,477440,{"text":1254,"duration":1255,"offset":1256},"and IDs that you can apply to the elements.",2668,480852,{"text":1258,"duration":1259,"offset":1260},"As you can see here.",920,483520,{"text":1262,"duration":1263,"offset":1264},"These are very useful to refer to in the selectors",3362,484440,{"text":1266,"duration":1267,"offset":1268},"of your CSS codes.",1210,487869,{"text":1270,"duration":1271,"offset":1272},"When you want to select a class to style, you",2693,489080,{"text":1274,"duration":1275,"offset":1276},"need to write a dot and then the class name",2573,491833,{"text":1278,"duration":1279,"offset":1280},"as selector name followed by the declaration.",2694,494466,{"text":1282,"duration":1283,"offset":1284},"If you want to select an ID name, you can",2437,497320,{"text":1286,"duration":1287,"offset":1288},"write a hashtag and then the ID name as selector",2854,499817,{"text":1290,"duration":1291,"offset":1292},"as you can see here.",1189,502730,{"text":1294,"duration":617,"offset":1295},"Next we have the declarations.",504000,{"text":1297,"duration":758,"offset":1298},"The declarations are how the selector is styled.",505560,{"text":1300,"duration":1301,"offset":1302},"Declarations are further subdivided into property and value.",3440,508880,{"text":1304,"duration":1305,"offset":1306},"The property is the aspect of the selector you want",2842,512360,{"text":1308,"duration":1309,"offset":1310},"to style.",501,515258,{"text":1312,"duration":1313,"offset":1314},"For instance the color and the value is the specification",3228,515760,{"text":1316,"duration":1317,"offset":1318},"of what you want the property to be, for instance",2776,519044,{"text":1320,"duration":1321,"offset":1322},"blue.",284,521876,{"text":1324,"duration":1325,"offset":1326},"The CSS file will basically just be a large list",3125,522160,{"text":1328,"duration":1329,"offset":1330},"of selectors with their declarations.",2410,525350,{"text":1332,"duration":1333,"offset":1334},"Some important properties most HTML elements have are the bedding,",4174,527760,{"text":1336,"duration":1337,"offset":1338},"border, and margin.",1201,531998,{"text":1340,"duration":1341,"offset":1342},"These can be used to manipulate the layouts of how",2761,533200,{"text":1344,"duration":1345,"offset":1346},"the websites looks and to space everything out nicely.",2983,536017,{"text":1348,"duration":1349,"offset":1350},"The padding is the space between the actual content of",2638,539040,{"text":1352,"duration":1353,"offset":1354},"the element, for instance the text of a paragraph element",2785,541727,{"text":1356,"duration":1357,"offset":1358},"and the border around the paragraph elements.",2198,544561,{"text":1360,"duration":1361,"offset":1362},"The margin is the space between the border of the",2819,546760,{"text":1364,"duration":1365,"offset":1366},"elements and any other elements on the web page.",2762,549637,{"text":1368,"duration":1369,"offset":1370},"It is good to know the difference between the padding",2656,552520,{"text":1372,"duration":1373,"offset":1374},"and the margin to quickly solve layout problems and to",2707,555226,{"text":1376,"duration":1377,"offset":1378},"be able to ask Chechi PT precisely what you wanted",2506,557983,{"text":1380,"duration":1381,"offset":1382},"to do.",300,560539,{"text":1384,"duration":1385,"offset":1386},"So that is it for the theoretical explanations for now.",2960,560840,{"text":1388,"duration":1389,"offset":1390},"In the next lesson we are going to download and",2557,563800,{"text":1392,"duration":1393,"offset":1394},"set up Visual Studio codes and actually start using Jet",2993,566411,{"text":1396,"duration":1397,"offset":1398},"GPT to write our website for us.",1741,569458,{"text":1400,"duration":684,"offset":1401},"See you in that lesson.",571200,{"summary":1403,"sections":1404,"learningObjectives":1442,"keyConcepts":1451,"videoTags":1457},"This video tutorial covers the basics of HTML and CSS, essential for web design. It explains the structure and hierarchy of HTML, including tags and metadata, and introduces CSS for styling HTML elements. The tutorial also discusses the use of IDEs, specifically Visual Studio Code, for writing and managing code. Key concepts such as inline and block elements, CSS selectors, and declarations are explored, providing a foundational understanding of web development.",[1405,1414,1422,1429,1436],{"title":1406,"start":502,"end":598,"description":1407,"tags":1408},"Introduction to HTML and CSS","Overview of HTML, CSS, and IDEs.",[1409,1410,1411,1412,1413],"HTML","CSS","IDE","Visual Studio Code","web design",{"title":1415,"start":602,"end":751,"description":1416,"tags":1417},"HTML Structure and Tags","Explains HTML hierarchy and tags.",[1409,1418,1419,1420,1421],"tags","structure","web page","hierarchy",{"title":1423,"start":751,"end":1001,"description":1424,"tags":1425},"HTML Hierarchy and Metadata","Details on HTML hierarchy and metadata.",[1409,1421,1426,1427,1428],"metadata","head tag","body tag",{"title":1430,"start":1001,"end":1148,"description":1431,"tags":1432},"Introduction to CSS","Basics of CSS and its application.",[1410,1433,1434,1413,1435],"style","presentation","HTML elements",{"title":1437,"start":1148,"end":1401,"description":1438,"tags":1439},"CSS Selectors and Declarations","CSS rules, selectors, and declarations.",[1410,1440,1441,1433,1413],"selectors","declarations",[1443,1444,1445,1446,1447,1448,1449,1450],"Understand HTML basics","Identify HTML tags","Use CSS for styling","Apply CSS selectors","Recognize HTML hierarchy","Link CSS to HTML","Use Visual Studio Code","Understand metadata",[1452,1453,1454,1455,1456],"HTML structure","CSS styling","Web design hierarchy","IDE usage","HTML and CSS integration",{"keyTags":1458,"pedagogicalTags":1460},[1409,1410,1413,1412,1459],"programming",[1461,1462,1463],"instructional","tutorial","step-by-step","60919f6b27f749001c9a4bd7","2025-02-13T23:43:29.378Z","2025-02-14T19:26:00.259Z","ENABLED","2025-06-21T12:26:27.226Z",{"service":1470,"version":1471},"quizserver","4d61edb_rp9pgjtq",{"success":5,"data":1473,"time":1523},{"quizzes":1474,"total":1522,"timeTaken":70,"experiment":71,"source":72},[1475,1479,1486,1493,1500,1507,1511,1518],{"id":35,"isSuper":10,"type":11,"info":1476,"shouldIndex":10,"stats":1478},{"grade":1477,"name":38,"slug":38,"image":39},[14,14],{"totalQuestions":26},{"id":1480,"isSuper":10,"type":11,"info":1481,"shouldIndex":10,"stats":1485},"677378cdce9c17ee61a70391",{"grade":1482,"name":1483,"slug":1483,"image":1484},[14,14],"HTML CSS and JavaScript for Beginners - A Web Design Course - Select Element","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/13dc4979-6bcf-48b4-b915-15bb27907c94-v2",{"totalQuestions":26},{"id":1487,"isSuper":10,"type":11,"info":1488,"shouldIndex":10,"stats":1492},"67ac878b0f55df2770fe9cc2",{"grade":1489,"name":1490,"slug":1490,"image":1491},[14,14],"Learning LESS (Video 23)","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/21e3c1aa-6dc0-49c0-a61e-85f301955f0a-v2",{"totalQuestions":26},{"id":1494,"isSuper":10,"type":11,"info":1495,"shouldIndex":10,"stats":1499},"6775fc3dd5f5528204d52aa1",{"grade":1496,"name":1497,"slug":1497,"image":1498},[14,14],"Web Scraping Tutorial with Scrapy and Python for Beginners - Scrapy CSS Selector","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/bb87052b-1b39-40e7-85bb-da4cc370f34b-v2",{"totalQuestions":18},{"id":1501,"isSuper":10,"type":11,"info":1502,"shouldIndex":10,"stats":1506},"67765c8b64dc8a9000a6d128",{"grade":1503,"name":1504,"slug":1504,"image":1505},[14,14],"The Full Stack Web Development - Getting Started With CSS","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/fb0847ab-4a22-4937-aff1-620bc4ffd94f-v2",{"totalQuestions":18},{"id":9,"isSuper":10,"type":11,"info":1508,"shouldIndex":10,"stats":1510},{"grade":1509,"name":15,"slug":15,"image":16},[14,14],{"totalQuestions":18},{"id":1512,"isSuper":10,"type":11,"info":1513,"shouldIndex":10,"stats":1517},"67ac878b96eb0a30d6f8455d",{"grade":1514,"name":1515,"slug":1515,"image":1516},[14,14],"Learning LESS (Video 16)","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/0478f7de-842a-487f-a506-912860cb2d1e-v2",{"totalQuestions":26},{"id":20,"isSuper":10,"type":11,"info":1519,"shouldIndex":10,"stats":1521},{"grade":1520,"name":23,"slug":23,"image":24},[14,14],{"totalQuestions":26},2335,"2025-06-21T12:26:27.474921974Z",{"success":5,"data":1525,"time":1637},{"countryBasedRecommendations":1526,"subjectBasedRecommendations":1579,"subjectBasedQualifiers":1606},[1527,1533,1542,1549,1556,1562,1568,1574],{"id":1528,"quizId":1529,"country":90,"lowerGrade":48,"upperGrade":48,"quizRank":18,"subject":99,"quizImage":1530,"quizName":1531,"quizType":1532,"noOfQuestions":126,"noOfSlides":80},"684961d5a293b51a6177db29","5fd24190446546001b8943eb","https://quizizz.com/media/resource/gs/quizizz-media/quizzes/3d95930b-05ba-4eed-8bba-c3d3adab19a1","Character Analysis","quiz",{"id":1534,"quizId":1535,"country":90,"lowerGrade":95,"upperGrade":1536,"quizRank":1537,"subject":1538,"quizImage":1539,"quizName":1540,"quizType":1532,"noOfQuestions":1541,"noOfSlides":80},"68529c3a913e8f0e685b96be","663130398706efb7b94eb2bb",12,11,"Other","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/8dfa6da2-0657-4610-ba78-3df4540717f5-v2","Chapter 12 - Doing the Right Thing",17,{"id":1543,"quizId":1544,"country":90,"lowerGrade":122,"upperGrade":175,"quizRank":1545,"subject":1546,"quizImage":1547,"quizName":1548,"quizType":1532,"noOfQuestions":96,"noOfSlides":80},"68529c3a913e8f0e685b9692","5ec40dbb5a8f86001b6020fc",13,"History","https://quizizz.com/media/resource/gs/quizizz-media/quizzes/ed7a4843-36db-45b9-b2fe-819f8e54e809","American Flag",{"id":1550,"quizId":1551,"country":90,"lowerGrade":124,"upperGrade":124,"quizRank":1552,"subject":1538,"quizImage":1553,"quizName":1554,"quizType":1532,"noOfQuestions":1555,"noOfSlides":80},"67f75217bd773214f4c08ea2","5e94b04b49e5d9001b0b0729",14,"https://quizizz.com/media/resource/gs/quizizz-media/quizzes/a60fb278-3a36-49a1-978b-9308c9b21e4d","Reading Comprehension",20,{"id":1557,"quizId":1558,"country":90,"lowerGrade":95,"upperGrade":1536,"quizRank":126,"subject":98,"quizImage":1559,"quizName":1560,"quizType":1532,"noOfQuestions":1561,"noOfSlides":80},"68529c3a913e8f0e685b969d","6470c4b3c1c426001fee1cba","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/781ff440-480b-40dd-8c9e-0fc363726287-v2","Linear Inequalities",30,{"id":1563,"quizId":1564,"country":90,"lowerGrade":95,"upperGrade":1536,"quizRank":126,"subject":1565,"quizImage":1566,"quizName":1567,"quizType":1532,"noOfQuestions":1555,"noOfSlides":80},"67f75217bd773214f4c08c5b","5a95acd414c10f001bdc5bc1","Life Skills","https://quizizz.com/media/resource/gs/quizizz-media/quizzes/297e5535-e985-4c5e-82c5-c8021323ba19","Types of Credit",{"id":1569,"quizId":1570,"country":90,"lowerGrade":124,"upperGrade":124,"quizRank":1541,"subject":100,"quizImage":1571,"quizName":1572,"quizType":1532,"noOfQuestions":1573,"noOfSlides":80},"68529c3a913e8f0e685b96c5","6846ffd78770c495bf9afa79","https://media.quizizz.com/_mdserver/main/media/resource/gs/quizizz-media/quizzes/7b880939-bf58-4731-99eb-7b0e4ca4db49-v2","Full S.T.E.A.M. Ahead Summer Academy Pre-Test 24-25",18,{"id":1575,"quizId":1576,"country":90,"lowerGrade":26,"upperGrade":18,"quizRank":1541,"subject":99,"quizImage":1577,"quizName":1578,"quizType":1532,"noOfQuestions":1552,"noOfSlides":80},"684961d5a293b51a6177db41","56b0d2db0e6f4514362d45e9","https://quizizz.com/media/resource/gs/quizizz-media/quizzes/ef1a7f9d-3630-4b56-a583-2976b6997a2a","Misplaced and Dangling Modifiers",[1580,1586,1594,1601],{"id":1581,"quizId":1582,"country":90,"lowerGrade":80,"upperGrade":1545,"quizRank":1583,"subject":98,"quizImage":1584,"quizName":1585,"quizType":1532,"noOfQuestions":96,"noOfSlides":80},"684961d5a293b51a6177db9d","5f7f313ed420ff001b53ce86",26,"https://quizizz.com/media/resource/gs/quizizz-media/quizzes/990cc664-b458-4135-afa0-c385c7d3fad6","Identifying equations",{"id":1587,"quizId":1588,"country":90,"lowerGrade":176,"upperGrade":1552,"quizRank":1589,"subject":1590,"quizImage":1591,"quizName":1592,"quizType":1532,"noOfQuestions":1593,"noOfSlides":80},"684961d5a293b51a6177dbca","6631337b675a2a85e12ac63d",77,"Professional Development","https://quizizz.com/media/resource/gs/quizizz-media/quizzes/51771aa4-4312-4322-b736-7bc90ea54bf6","Chapter 8 - Getting Along with your Supervisor",16,{"id":1595,"quizId":1596,"country":90,"lowerGrade":80,"upperGrade":1545,"quizRank":1597,"subject":1598,"quizImage":151,"quizName":1599,"quizType":1532,"noOfQuestions":1600,"noOfSlides":80},"68529c3a913e8f0e685b96b7","5913b7aa8590481000eeefc9",133,"Multiple Subjects","logos",44,{"id":1602,"quizId":1603,"country":90,"lowerGrade":1545,"upperGrade":1545,"quizRank":1604,"subject":100,"quizImage":151,"quizName":1605,"quizType":1532,"noOfQuestions":26,"noOfSlides":80},"68402741814a8b60929e92aa","683e638c2ddc4e75d4f35494",316,"Railroad Operations and Classifications Quiz",[1607,1610,1613,1616,1619,1622,1625,1628,1631,1634],{"path":1608,"display":1609},"/ela/reading/informational-text/advanced-text-types/historical-documents/world-historical-texts","World historical texts",{"path":1611,"display":1612},"/math/number-system/quantities-and-measurement/working-with-units/defining-quantities-for-descriptive-modeling","Defining Quantities for Descriptive Modeling",{"path":1614,"display":1615},"/science/biology/human-physiology/circulatory-system/blood-vessels-and-circulation","Blood vessels and circulation",{"path":1617,"display":1618},"/math/functions/specific-functions/quadratic-functions/graphing-and-analyzing-quadratics/rewriting-quadratic-functions-to-reveal-properties/interpreting-quadratic-graphs-via-factoring","Interpreting Quadratic Graphs via Factoring",{"path":1620,"display":1621},"/math/geometry/transformations/transformation-properties/representing-and-comparing-transformations/comparing-transformations-that-preserve-distance-and-angle-to-those-that-do-not","Comparing transformations that preserve distance and angle to those that do not",{"path":1623,"display":1624},"/social-studies/civics-and-government/modern-government/levels-and-branches-of-government","Levels and branches of government",{"path":1626,"display":1627},"/science/physics/electricity-and-magnetism/electrostatics/electric-field-calculations","Electric field calculations",{"path":1629,"display":1630},"/ela/reading/literature/text-types-and-genres/drama/american-plays","American plays",{"path":1632,"display":1633},"/math/functions/specific-functions/exponential-and-logarithmic-functions/logarithmic-functions/evaluating-logarithms-in-exponential-models","Evaluating Logarithms in Exponential Models",{"path":1635,"display":1636},"/science/scientific-methods-and-applications/research-ethics-and-integrity/responsible-conduct","Responsible Conduct","2025-06-21T12:26:27.480352435Z",["Reactive",1639],{},["Set"],["ShallowReactive",1642],{"trvETABxpi":81,"LMMnhrPN3q":81,"NacwkiJcJD":81,"FGoA0jKral":81},"/admin/video-quiz/67ae83a1c0fd75a5db91a312/chatgpt-for-web-design-create-amazing-websites-introduction-to-web-design-html-and-css","none",{"ssr_adp-v2":1646},"var-2"]</script> <script>window.__NUXT__={};window.__NUXT__.config={public:{disableS3Cache:false,appEnv:"production",endpoints:{quizUrl:"https://services-internal-quiz.quizizz.com/_quizserver/adminv3ssr/v2/quiz",apiUrl:"https://quizizz.com/_api/rpc",autoCompleteUrl:"https://quizizz.com/_autocomserver/main",publicQuizUrl:"https://quizizz.com/_quizserver/main/v2/quiz",recommendationUrl:"https://search-internal.quizizz.com/_sserverv2/main/common/quizPageRecV3",joinUrl:"https://quizizz.com/join",quizPreviewUrl:"https://quizizz.com/signup/qdp",mlprocessorUrl:"https://quizizz.com/_mlprocessor/main",baseUrl:"https://quizizz.com",boclipsUrl:"https://quizizz.com/_quizserver/main/v2/boclips/video",categoryPagesUrl:"https://quizizz.com/_scserver/main/public/v1/category-pages",cdnBasePath:"https://cf.quizizz.com",searchServiceUrl:"https://quizizz.com/_sserverv2/main",schoolServiceUrl:"https://services-internal.quizizz.com/_scserver/main"},enablePseudoLocale:false,apiBase:"/nuxtssr/worker",sentry:{dsn:"https://f45858ca79fd48fe019ce67e6c560868@o984659.ingest.us.sentry.io/4508357912363008",enabled:true},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:"f6e44a25-97cd-46d3-911a-0525a181b891",buildAssetsDir:"_nuxtssr/main",cdnURL:"https://cf.quizizz.com"}}</script></body></html>