","<body>","<html>"],"correctAnswer":2,"explanation":"Everything you want the user to actually see on the screen goes inside the <body> tags."},{"question":"What goes inside the `<head>` tag?","options":["The main logo of the site","Invisible metadata, titles, and links to CSS","The footer","The navigation bar"],"correctAnswer":1,"explanation":"The <head> section is for machine-readable information, like character set definitions, viewport settings, and the page title."},{"question":"How do you write a comment in HTML?","options":["// This is a comment","/* This is a comment */","","# This is a comment"],"correctAnswer":2,"explanation":"HTML comments are wrapped in . The browser completely ignores them when rendering the page."},{"question":"What is the purpose of the `lang=\"en\"` attribute in the `<html>` tag?","options":["It translates the page automatically","It helps screen readers and search engines know the document is in English","It forces the font to be English","It is required for CSS to work"],"correctAnswer":1,"explanation":"The lang attribute is crucial for accessibility tools (like screen readers) to pronounce words correctly and for SEO."},{"question":"Is HTML considered a programming language?","options":["Yes, it compiles into machine code","Yes, it has loops and variables","No, it is a markup language","No, it is a database language"],"correctAnswer":2,"explanation":"HTML cannot perform logic, math, or loops. It simply 'marks up' text to give it structural meaning."},{"question":"What does the `<title>` tag do?","options":["Creates a large heading on the page","Sets the text shown in the browser's tab","Styles the text","Defines the website's logo"],"correctAnswer":1,"explanation":"The <title> tag lives inside the <head> and determines the text displayed on the browser tab and in Google search results."},{"question":"How is a closing tag different from an opening tag?","options":["It has a forward slash (/) before the tag name","It uses square brackets instead of angle brackets","It has a hashtag (#)","It must be capitalized"],"correctAnswer":0,"explanation":"A closing tag is identical to the opening tag, except it includes a forward slash (e.g., </p>)."},{"question":"What is the 'boilerplate' in HTML?","options":["A tool used to write CSS","The standard, required structural code that starts every HTML file","A special tag for bold text","The server that hosts the file"],"correctAnswer":1,"explanation":"The boilerplate is the standard template (DOCTYPE, html, head, body) required for a valid HTML document."},{"question":"Which meta tag ensures a website scales correctly on mobile devices?","options":["<meta charset=\"UTF-8\">","<meta name=\"mobile\">","<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">","<meta scale=\"true\">"],"correctAnswer":2,"explanation":"The viewport meta tag tells mobile browsers not to shrink the page, but to render it at the device's actual width."}]},{"id":"fe-3","title":"3. Headings & Paragraphs","duration":"30 Mins","level":"beginner","type":"interactive","locked":false,"content":"$1d","quiz":[{"question":"How many heading levels are available in HTML?","options":["3","5","6","Unlimited"],"correctAnswer":2,"explanation":"HTML provides exactly 6 heading tags, ranging from <h1> (most important) to <h6> (least important)."},{"question":"Why should you generally only use one `<h1>` tag per page?","options":["It causes the page to load slower","Search engines like Google use it as the main topic of the page, and multiples cause SEO penalties","The browser will crash","You cannot style more than one"],"correctAnswer":1,"explanation":"The <h1> represents the main title of the page. Using multiple confuses search engines and screen readers about the primary topic."},{"question":"Which tag is used to create a paragraph?","options":["<paragraph>","<text>","<p>","<pg>"],"correctAnswer":2,"explanation":"The <p> tag defines a paragraph, and browsers automatically add margin (spacing) above and below it."},{"question":"What is the semantic purpose of the `<strong>` tag?","options":["To make text bigger","To indicate that text has strong importance","To change the font color","To draw a border around text"],"correctAnswer":1,"explanation":"While <strong> visually renders as bold, its semantic purpose is to tell screen readers and search engines that the text is of high importance."},{"question":"Which tag is used to render text in italics for emphasis?","options":["<i>","<em>","<italic>","<slant>"],"correctAnswer":1,"explanation":"The <em> tag stands for emphasis and semantically stresses the wrapped text, visually rendering it as italic."},{"question":"How do you force a line break without starting a new paragraph?","options":["<break>","<lb>","<br>","<newline>"],"correctAnswer":2,"explanation":"The <br> (break) tag forces the text to drop to the next line immediately. It is a self-closing tag."},{"question":"What does the `<hr>` tag do?","options":["Highlights text","Creates a horizontal rule (a dividing line)","Aligns text to the right","Hides text"],"correctAnswer":1,"explanation":"The <hr> tag draws a horizontal line across the page, semantically representing a thematic break between sections."},{"question":"Which tag is used to display superscript text, like the '2' in E=mc²?","options":["<sub>","<super>","^","<sup>"],"correctAnswer":3,"explanation":"The <sup> tag renders text slightly higher and smaller, perfect for mathematical exponents."},{"question":"Which tag would you use to indicate deleted text (like an old price)?","options":["<strike>","<del>","<remove>","<s>"],"correctAnswer":1,"explanation":"The <del> tag semantically marks text as deleted, and browsers visually render it with a strike-through line."},{"question":"What is the visual effect of the `<mark>` tag by default?","options":["It underlines the text","It makes the text blink","It gives the text a yellow background highlight","It blurs the text"],"correctAnswer":2,"explanation":"The <mark> tag represents text marked or highlighted for reference, rendering with a yellow background by default."}]},{"id":"fe-4","title":"4. Links & Images","duration":"40 Mins","level":"beginner","type":"interactive","locked":false,"content":"$1e","quiz":[{"question":"Which tag is used to create a hyperlink?","options":["<link>","<href>","<a>","<hyper>"],"correctAnswer":2,"explanation":"The <a> (anchor) tag is the standard HTML element used to create hyperlinks."},{"question":"Which attribute is required inside an `<a>` tag to specify the link's destination?","options":["src","href","link","url"],"correctAnswer":1,"explanation":"The 'href' (Hypertext Reference) attribute points to the URL or path the link should navigate to."},{"question":"How do you make a link open in a completely new browser tab?","options":["target=\"_new\"","target=\"_blank\"","open=\"new\"","rel=\"blank\""],"correctAnswer":1,"explanation":"Adding target=\"_blank\" to an anchor tag forces the browser to open the destination in a new tab or window."},{"question":"What does an `href` value starting with `#` do? (e.g., `href=\"#contact\"`)","options":["Opens an email client","Jumps to a specific element on the same page with that ID","Creates a broken link","Downloads a file"],"correctAnswer":1,"explanation":"Using a hash symbol targets an element's ID on the same page, allowing you to create 'jump links' that scroll the user down."},{"question":"Which tag is used to embed an image?","options":["<image>","<pic>","<img>","<photo>"],"correctAnswer":2,"explanation":"The <img> tag is used to embed images. It is an empty/self-closing element."},{"question":"Which attribute in the `<img>` tag specifies the path to the image file?","options":["path","href","src","link"],"correctAnswer":2,"explanation":"The 'src' (source) attribute points to the file path or URL of the image."},{"question":"Why is the `alt` attribute essential for images?","options":["It makes the image load faster","It applies a border to the image","It provides alternative text for screen readers and SEO","It is required for the image to display colors"],"correctAnswer":2,"explanation":"The 'alt' (alternative text) attribute is critical for accessibility. Screen readers read this text aloud to visually impaired users."},{"question":"Does the `<img>` tag require a closing tag (e.g., `</img>`)?","options":["Yes, always","No, it is a self-closing tag","Only when it is a clickable link","Only in HTML4"],"correctAnswer":1,"explanation":"The <img> tag is an empty element, meaning it only contains attributes and does not wrap any text content, so it needs no closing tag."},{"question":"How do you make an image clickable as a link?","options":["Add href directly to the <img> tag","Wrap the <img> tag completely inside an <a> tag","Use the <link-img> tag","Add target=\"_blank\" to the <img> tag"],"correctAnswer":1,"explanation":"By placing an <img> element between the opening <a> and closing </a> tags, the entire image becomes the clickable hit-area for the link."},{"question":"What happens if an image fails to load and the `alt` attribute is present?","options":["The page crashes","A broken image icon appears along with the text from the `alt` attribute","The browser attempts to find a random image","Nothing appears at all"],"correctAnswer":1,"explanation":"If the source URL is broken, the browser displays the alt text so the user still knows what the image was supposed to be."}]},{"id":"fe-5","title":"5. Lists & Tables","duration":"40 Mins","level":"beginner","type":"interactive","locked":false,"content":"$1f","quiz":[{"question":"Which tag defines an unordered (bulleted) list?","options":["<list>","<ul>","<ol>","<bl>"],"correctAnswer":1,"explanation":"The <ul> tag stands for Unordered List, which defaults to rendering items with bullet points."},{"question":"Which tag is used to create a numbered list?","options":["<ul>","<nl>","<ol>","<num>"],"correctAnswer":2,"explanation":"The <ol> tag stands for Ordered List, automatically numbering the items inside it sequentially."},{"question":"What tag must wrap every individual item inside a list?","options":["<item>","<li>","<p>","<list-item>"],"correctAnswer":1,"explanation":"Whether inside a <ul> or an <ol>, every single item must be wrapped in an <li> (List Item) tag."},{"question":"Which tag defines an HTML table?","options":["<grid>","<spreadsheet>","<table>","<tbody>"],"correctAnswer":2,"explanation":"The <table> tag acts as the main container for all table rows and cells."},{"question":"How do you define a row in an HTML table?","options":["<row>","<td>","<tr>","<th>"],"correctAnswer":2,"explanation":"The <tr> (Table Row) tag creates a horizontal row. You place data cells inside it."},{"question":"What tag is used for standard data cells within a table row?","options":["<cell>","<td>","<th>","<tc>"],"correctAnswer":1,"explanation":"The <td> (Table Data) tag holds the actual data inside a row."},{"question":"How does a `<th>` cell differ from a `<td>` cell by default?","options":["It is invisible","It creates a new row","It renders text bold and centered","It spans multiple columns automatically"],"correctAnswer":2,"explanation":"The <th> (Table Header) tag is used for column headers. Browsers inherently style <th> text as bold and centered."},{"question":"What is the semantic purpose of the `<thead>` tag?","options":["To group the header rows of the table","To add a title above the table","To define the first column","To style the table border"],"correctAnswer":0,"explanation":"The <thead> semantically groups the header content of a table, separating it from the <tbody> (body content)."},{"question":"Can you put a list inside a table cell (`<td>`)?","options":["Yes, table cells can contain almost any HTML element","No, it breaks the table","Only unordered lists","Only if the table has no borders"],"correctAnswer":0,"explanation":"Table cells act like standard containers. You can place text, images, links, or even entire lists inside a <td>."},{"question":"Which CSS property is commonly used on tables to remove double borders between cells?","options":["border-radius","border-collapse","border-spacing","outline"],"correctAnswer":1,"explanation":"Using 'border-collapse: collapse;' merges the borders of adjacent cells into a single line, making it look like a standard spreadsheet."}]},{"id":"fe-6","title":"6. Forms & Inputs","duration":"50 Mins","level":"intermediate","type":"interactive","locked":false,"content":"$20","quiz":[{"question":"Which tag wraps all input elements to create an area for user data submission?","options":["<submit>","<inputs>","<form>","<fieldset>"],"correctAnswer":2,"explanation":"The <form> tag acts as the master container that gathers data from its internal inputs and submits it to a server."},{"question":"Which input type masks the characters users type with dots or asterisks?","options":["type=\"hidden\"","type=\"secret\"","type=\"password\"","type=\"text\""],"correctAnswer":2,"explanation":"Using type=\"password\" securely obscures the characters the user is typing so bystanders cannot read them."},{"question":"What does the `placeholder` attribute do?","options":["Sets the default value sent to the server","Shows a temporary, faded hint inside the input field","Requires the user to fill the field","Creates a tooltip on hover"],"correctAnswer":1,"explanation":"The placeholder attribute displays light grey text inside an empty input, disappearing as soon as the user starts typing."},{"question":"How do you link a `<label>` to a specific `<input>` element?","options":["Use the 'name' attribute on the label","Put them on the same line","Match the label's 'for' attribute to the input's 'id' attribute","Match the 'class' attributes"],"correctAnswer":2,"explanation":"Clicking a label activates its connected input. You connect them by making the label's 'for' attribute exactly match the input's 'id'."},{"question":"Which input type allows a user to select MULTIPLE options from a list?","options":["type=\"radio\"","type=\"checkbox\"","type=\"select\"","type=\"multiple\""],"correctAnswer":1,"explanation":"Checkboxes allow users to select zero, one, or multiple options independently."},{"question":"Which input type forces a user to select ONLY ONE option from a group?","options":["type=\"radio\"","type=\"checkbox\"","type=\"single\"","type=\"button\""],"correctAnswer":0,"explanation":"Radio buttons are mutually exclusive. If multiple radio buttons share the exact same 'name' attribute, selecting one deselects the others."},{"question":"What is the purpose of the `required` attribute?","options":["It forces the field to be uppercase","It prevents the form from submitting if the field is empty","It makes the input read-only","It highlights the field in red"],"correctAnswer":1,"explanation":"The required attribute is built-in HTML form validation. The browser will block the submission and alert the user if the field is blank."},{"question":"Which input type automatically provides a calendar pop-up in most browsers?","options":["type=\"calendar\"","type=\"time\"","type=\"date\"","type=\"datetime\""],"correctAnswer":2,"explanation":"type=\"date\" triggers a native, touch-friendly calendar picker in modern browsers."},{"question":"What is the difference between the `id` and `name` attributes on an input?","options":["They are identical","'id' is for CSS/JS and labels, 'name' is the key used when sending data to the server","'name' is for CSS, 'id' is for the server","'id' is visible to the user"],"correctAnswer":1,"explanation":"The 'id' must be unique for frontend manipulation (CSS, JS, labels). The 'name' is the variable name the backend server receives the data under."},{"question":"What does a button with `type=\"submit\"` do when clicked?","options":["Refreshes the page","Clears all form inputs","Collects the form data and attempts to send it to the server","Opens a confirmation dialog"],"correctAnswer":2,"explanation":"A submit button triggers the form's 'action', firing the data off to the specified URL."}]},{"id":"fe-7","title":"7. Semantic HTML5","duration":"45 Mins","level":"intermediate","type":"interactive","locked":false,"content":"$21","quiz":[{"question":"What is the primary benefit of using semantic HTML5 tags?","options":["They automatically style the page with CSS","They make JavaScript run faster","They clearly describe their meaning to both the browser and the developer, improving SEO and accessibility","They allow you to write less code"],"correctAnswer":2,"explanation":"Semantic tags (like <header> instead of a <div>) tell search engines and screen readers exactly what purpose a section of the page serves."},{"question":"Which tag is used to wrap the dominant, primary content of a webpage?","options":["<content>","<primary>","<main>","<body>"],"correctAnswer":2,"explanation":"The <main> tag identifies the core content of a document. A page should only have one <main> tag."},{"question":"Which tag should be used to wrap a group of major navigational links?","options":["<links>","<nav>","<menu>","<header>"],"correctAnswer":1,"explanation":"The <nav> tag is specifically designed to contain major blocks of navigation links, like the main menu."},{"question":"If you are writing a standalone blog post that makes sense on its own, which tag should wrap it?","options":["<post>","<section>","<div>","<article>"],"correctAnswer":3,"explanation":"The <article> tag specifies independent, self-contained content that could theoretically be syndicated or read outside the context of the site."},{"question":"Which tag is best for content that is tangentially related to the main content, like a sidebar?","options":["<sidebar>","<margin>","<aside>","<secondary>"],"correctAnswer":2,"explanation":"The <aside> tag is used for content indirectly related to the main content, typically rendered as a sidebar."},{"question":"Where should copyright information and general site links go?","options":["<bottom>","<end>","<summary>","<footer>"],"correctAnswer":3,"explanation":"The <footer> tag represents the footer of its nearest section or the entire page, typically containing authorship or copyright data."},{"question":"Is the `<div>` tag obsolete in HTML5?","options":["Yes, it should never be used","No, but it should only be used as a generic container when no semantic tag fits","Yes, it has been replaced by <box>","No, it is preferred over semantic tags"],"correctAnswer":1,"explanation":"<div> tags are perfectly fine, but they carry no semantic meaning. Use them for styling wrappers or generic boxes when tags like <article> or <section> don't apply."},{"question":"Which tag is used for a thematic grouping of content, typically with a heading?","options":["<group>","<section>","<area>","<div>"],"correctAnswer":1,"explanation":"The <section> tag is a generic semantic element used to group related content, usually beginning with an h2-h6 heading."},{"question":"Why did HTML5 introduce tags like `<header>` and `<footer>`?","options":["To force a specific visual layout","Because developers were previously using `<div id=\"header\">`, which computers couldn't read universally","To replace CSS","To make files smaller"],"correctAnswer":1,"explanation":"Before HTML5, everyone named their divs differently (<div class=\"head\">, <div id=\"header\">). Standardized tags made parsing the web universal."},{"question":"Which tag semantically represents a specific period in time or a date?","options":["<date>","<time>","<timestamp>","<period>"],"correctAnswer":1,"explanation":"The <time> tag represents a specific time or date, often paired with a 'datetime' attribute for machine-readable accuracy."}]},{"id":"fe-8","title":"8. Introduction to CSS","duration":"45 Mins","level":"beginner","type":"interactive","locked":false,"content":"$22","quiz":[{"question":"What does CSS stand for?","options":["Computer Style Sheets","Creative Style System","Cascading Style Sheets","Colorful Style Syntax"],"correctAnswer":2,"explanation":"CSS stands for Cascading Style Sheets, referring to the way rules 'cascade' down and overwrite each other based on specificity."},{"question":"Where is the correct place to put a `<style>` tag in an HTML document?","options":["At the end of the document","Inside the <head> section","Inside the <body> section","Directly on the element"],"correctAnswer":1,"explanation":"Internal CSS should be placed inside the <head> tag so the styles are loaded before the browser renders the visual body."},{"question":"What is the correct CSS syntax to target an element with `class=\"btn\"`?","options":["#btn","btn",".btn","*btn"],"correctAnswer":2,"explanation":"In CSS, a period (.) before the name targets elements by their class attribute."},{"question":"What is the correct CSS syntax to target an element with `id=\"header\"`?","options":[".header","header","*header","#header"],"correctAnswer":3,"explanation":"In CSS, a hash symbol (#) before the name targets an element by its unique ID attribute."},{"question":"What happens if a `p` tag has both a class color (blue) and an ID color (red) applied to it?","options":["It turns purple","It becomes blue because classes win","It becomes red because IDs have higher specificity","It crashes the stylesheet"],"correctAnswer":2,"explanation":"In the CSS Cascade rules, an ID selector is significantly stronger (more specific) than a class selector, so the ID rule wins."},{"question":"Which CSS syntax targets ALL `<h1>` tags on the page?","options":[".h1 { }","#h1 { }","h1 { }","all-h1 { }"],"correctAnswer":2,"explanation":"Typing the bare HTML tag name without a period or hash symbol acts as an element selector, applying the style to every instance of that tag."},{"question":"What does it mean when CSS 'cascades'?","options":["Styles animate down the screen","If two identical selectors have conflicting rules, the one further down the file wins","CSS files must be downloaded in a waterfall pattern","Colors blend together automatically"],"correctAnswer":1,"explanation":"The cascade means that rules are read top-to-bottom. If two rules have the exact same specificity, the last one declared overrides the earlier one."},{"question":"What is the nuclear option to force a CSS rule to override all others?","options":["!force","!override","!important","!strong"],"correctAnswer":2,"explanation":"Adding !important to the end of a CSS declaration forces it to win over any other rule. Professional developers use it rarely, as it makes debugging difficult."},{"question":"How many elements should share the exact same ID on a single page?","options":["Only one","Up to five","As many as you want","Zero, IDs are deprecated"],"correctAnswer":0,"explanation":"An ID is a unique identifier. It is invalid HTML to give multiple elements the same ID. If multiple elements need the same style, use a class."},{"question":"Which symbol is used to close a CSS declaration?","options":["Comma (,)","Period (.)","Semicolon (;)","Colon (:)"],"correctAnswer":2,"explanation":"Every CSS rule (like `color: blue`) must end with a semicolon (;) to separate it from the next rule."}]},{"id":"fe-9","title":"9. Colors, Fonts & Text","duration":"50 Mins","level":"beginner","type":"interactive","locked":false,"content":"$23","quiz":[{"question":"Which color format is most commonly used by UI designers and uses a hash symbol?","options":["RGB","HSL","Named Colors","Hexadecimal (Hex)"],"correctAnswer":3,"explanation":"Hexadecimal codes (like #1037c3) are the industry standard for precise UI color picking."},{"question":"What does the 'A' stand for in the RGBA color format?","options":["Alpha (Opacity)","Absolute","Add","Area"],"correctAnswer":0,"explanation":"The Alpha channel controls transparency. A value of 1 is solid, while 0.5 is 50% transparent."},{"question":"Which CSS property changes the text color?","options":["text-color","color","font-color","text-fill"],"correctAnswer":1,"explanation":"The 'color' property exclusively controls the color of the text within an element."},{"question":"How do you apply a fallback font in CSS?","options":["font-family: Arial fallback sans-serif;","font-family: Arial, sans-serif;","font-fallback: sans-serif;","font: Arial | sans-serif;"],"correctAnswer":1,"explanation":"You list fonts separated by commas. If the user's computer doesn't have the first font (Arial), it falls back to a generic category (sans-serif)."},{"question":"Which property makes text italic?","options":["font-weight: italic;","text-decoration: italic;","font-style: italic;","text-transform: italic;"],"correctAnswer":2,"explanation":"The 'font-style' property is used to specify normal, italic, or oblique text."},{"question":"Which property adds spacing between individual letters?","options":["word-spacing","line-height","text-indent","letter-spacing"],"correctAnswer":3,"explanation":"The 'letter-spacing' property increases or decreases the space between characters in a word."},{"question":"How do you remove the default underline from a link (`<a>`)?","options":["text-decoration: none;","underline: hidden;","font-style: normal;","text-transform: none;"],"correctAnswer":0,"explanation":"Links have a default text-decoration of underline. Setting it to 'none' removes it."},{"question":"Which CSS property aligns text to the middle of its container?","options":["align-items: center;","text-align: center;","vertical-align: middle;","center-text: true;"],"correctAnswer":1,"explanation":"The 'text-align' property controls the horizontal alignment of text within a block element."},{"question":"How do you automatically force text to be ALL CAPS via CSS?","options":["font-weight: uppercase;","text-transform: uppercase;","font-style: caps;","text-decoration: capitalize;"],"correctAnswer":1,"explanation":"The 'text-transform' property can instantly convert text to uppercase, lowercase, or capitalized without altering the HTML."},{"question":"What is the proper way to import a Google Font into your project?","options":["Download the file and use a <script> tag","Use an <img> tag","Place a <link> tag pointing to the Google Fonts URL inside the <head>","Use the CSS property google-font: 'Name';"],"correctAnswer":2,"explanation":"Google Fonts provides a <link rel=\"stylesheet\"> tag that you paste into your HTML's <head> to load the font files directly from their servers."}]},{"id":"fe-10","title":"10. The CSS Box Model","duration":"55 Mins","level":"intermediate","type":"interactive","locked":false,"content":"$24","quiz":[{"question":"What is the innermost layer of the CSS Box Model?","options":["Margin","Padding","Content","Border"],"correctAnswer":2,"explanation":"The Content area is the absolute center, holding the actual text, image, or child elements."},{"question":"Which property defines the space between the Content and the Border?","options":["Margin","Spacing","Gutter","Padding"],"correctAnswer":3,"explanation":"Padding pushes the border away from the content, acting as internal spacing."},{"question":"Which property creates empty space OUTSIDE the border, pushing other elements away?","options":["Margin","Padding","Offset","Border-Spacing"],"correctAnswer":0,"explanation":"Margin creates invisible space outside the element, ensuring it doesn't bump into other elements."},{"question":"If you write `padding: 10px 20px;`, what does it mean?","options":["10px top/bottom, 20px left/right","10px top/left, 20px bottom/right","10px all sides, 20px margin","10px left/right, 20px top/bottom"],"correctAnswer":0,"explanation":"The 2-value shorthand sets the top and bottom with the first value, and the left and right with the second value."},{"question":"If you write `margin: 5px 10px 15px 20px;`, what side gets 15px?","options":["Top","Right","Bottom","Left"],"correctAnswer":2,"explanation":"The 4-value shorthand always runs clockwise starting from the top: Top, Right, Bottom, Left."},{"question":"What is the default box-sizing behavior in CSS?","options":["box-sizing: border-box","box-sizing: padding-box","box-sizing: content-box","box-sizing: margin-box"],"correctAnswer":2,"explanation":"By default, CSS uses 'content-box', meaning padding and borders are added ON TOP of the specified width, making elements unexpectedly larger."},{"question":"Why do professionals reset every element to `box-sizing: border-box`?","options":["It removes all margins","It makes elements render faster","It forces the specified width to include the padding and border, making layouts predictable","It turns square boxes into circles"],"correctAnswer":2,"explanation":"With border-box, if you say width: 200px, the element stays exactly 200px wide. The padding is absorbed inwards instead of expanding outwards."},{"question":"How do you make an element perfectly circular using borders?","options":["border-circle: true;","border-radius: 50%;","box-shape: circle;","border-style: round;"],"correctAnswer":1,"explanation":"Applying a border-radius of 50% to a perfectly square element will turn it into a circle."},{"question":"What are the three required values to create a border? (e.g. `border: 2px solid black;`)","options":["Width, Style, Color","Radius, Color, Width","Margin, Padding, Color","Style, Color, Shadow"],"correctAnswer":0,"explanation":"A valid border declaration requires a width (e.g., 2px), a style (e.g., solid, dashed), and a color."},{"question":"What does the `*` selector do in CSS?","options":["Selects all bold text","Selects the <body> tag","Selects all elements universally","Selects all elements with a class"],"correctAnswer":2,"explanation":"The asterisk (*) is the universal selector. It targets every single element on the page."}]},{"id":"fe-11","title":"11. Display & Positioning","duration":"55 Mins","level":"intermediate","type":"interactive","locked":false,"content":"$25","quiz":[{"question":"Which display type forces an element to take up the full 100% width available, pushing the next element to a new line?","options":["display: inline","display: block","display: absolute","display: flex"],"correctAnswer":1,"explanation":"Block elements (like <div> or <h1>) are greedy. They consume the entire horizontal row by default."},{"question":"Which display type allows elements to sit side-by-side but IGNORES top and bottom margin/padding adjustments?","options":["display: block","display: inline","display: inline-block","display: grid"],"correctAnswer":1,"explanation":"Inline elements (like <span> or <a>) wrap tightly to text. They sit side-by-side but you cannot safely apply vertical margins or paddings to them."},{"question":"If you want buttons to sit side-by-side but still respect height, width, and padding, what display type is best?","options":["inline","block","inline-block","static"],"correctAnswer":2,"explanation":"Inline-block gives you the best of both worlds: they sit side-by-side like inline elements, but behave like blocks allowing you to set width and padding."},{"question":"What is the default position of every HTML element?","options":["position: relative","position: absolute","position: static","position: fixed"],"correctAnswer":2,"explanation":"By default, elements are static. They flow naturally down the page and ignore properties like 'top', 'left', or 'z-index'."},{"question":"What does `position: relative` do?","options":["Takes the element out of the document flow entirely","Keeps it in normal flow, but allows you to visually offset it using top/left/right/bottom","Pins it to the browser window","Makes it act like a flex container"],"correctAnswer":1,"explanation":"Relative positioning leaves a 'ghost' in the element's original spot to maintain layout, but lets you push the visible element around."},{"question":"How does `position: absolute` behave?","options":["It centers the element perfectly","It pins the element relative to the screen, ignoring scrolling","It completely removes the element from normal document flow and pins it to the nearest positioned ancestor","It acts like display: block"],"correctAnswer":2,"explanation":"Absolute elements float above the layout. They look up the DOM tree until they find an ancestor with position: relative, and pin themselves to that container."},{"question":"If an element has `position: fixed`, what is it pinned relative to?","options":["Its parent container","The previous element","The browser window (viewport)","The bottom of the document"],"correctAnswer":2,"explanation":"Fixed elements lock themselves to the browser window. When the user scrolls the page, the fixed element stays exactly where it is on the screen."},{"question":"What does `position: sticky` do?","options":["Acts like relative until you scroll past it, then locks like fixed","Glues two elements together","Fixes an element to the bottom of the page permanently","Makes an element unclickable"],"correctAnswer":0,"explanation":"Sticky is a hybrid. It scrolls normally until it hits a specified threshold (like top: 0), at which point it 'sticks' to the screen."},{"question":"Which CSS property controls the stacking order of overlapping positioned elements (which one is in front)?","options":["layer-index","stack-order","z-index","depth"],"correctAnswer":2,"explanation":"The z-index property (like the Z-axis in 3D geometry) dictates layering. Higher numbers appear in front of lower numbers."},{"question":"Can you use `z-index` on an element with `position: static`?","options":["Yes","No, z-index only works on positioned elements (relative, absolute, fixed, sticky)","Only if display is block","Only on images"],"correctAnswer":1,"explanation":"z-index does nothing to default (static) elements. You must change the position property to relative, absolute, fixed, or sticky first."}]},{"id":"fe-12","title":"12. CSS Flexbox","duration":"70 Mins","level":"upper-intermediate","type":"interactive","locked":false,"content":"$26","quiz":[{"question":"Which element do you apply `display: flex` to?","options":["To the children you want to align","To the parent container","To the <body> tag only","To inline elements only"],"correctAnswer":1,"explanation":"Flexbox is applied to the parent container. Once applied, its direct children become 'flex items' and can be arranged."},{"question":"By default, what direction do flex items arrange themselves in?","options":["A vertical column","A horizontal row","A diagonal grid","They stack on top of each other"],"correctAnswer":1,"explanation":"The default flex-direction is 'row', meaning items sit side-by-side from left to right."},{"question":"Which property controls the alignment of items along the main axis (usually horizontally)?","options":["align-items","justify-content","flex-wrap","margin-auto"],"correctAnswer":1,"explanation":"justify-content pushes items left, right, center, or spaces them out evenly along the main flow."},{"question":"Which property controls alignment along the cross axis (usually vertically)?","options":["justify-content","flex-direction","align-items","vertical-align"],"correctAnswer":2,"explanation":"align-items is used to center items vertically inside the flex container, or push them to the top/bottom."},{"question":"How do you achieve perfect horizontal and vertical centering using Flexbox?","options":["display: flex; margin: auto;","display: flex; justify-content: center; align-items: center;","align: center; vertical-align: middle;","display: inline-block; text-align: center;"],"correctAnswer":1,"explanation":"Combining justify-content: center (horizontal) and align-items: center (vertical) perfectly centers children."},{"question":"What does `justify-content: space-between` do?","options":["Centers everything with equal margins","Pushes the first item far left, the last item far right, and evenly spaces the rest in the middle","Adds padding to the container","Reverses the order of the items"],"correctAnswer":1,"explanation":"space-between is highly popular for Navbars. It anchors the outer elements to the edges and splits remaining space between middle elements."},{"question":"How can you change a flex container to stack its items vertically?","options":["flex-direction: column","display: block","justify-content: vertical","align-items: stack"],"correctAnswer":0,"explanation":"Changing flex-direction from 'row' to 'column' flips the axis, stacking items top-to-bottom."},{"question":"What does the `gap` property do in a flex container?","options":["Adds padding to the outside","Creates uniform spacing between the flex items without adding margin to the outer edges","Forces items to wrap","Changes the background color"],"correctAnswer":1,"explanation":"The gap property cleanly creates gutters/spacing directly between flex children, replacing old, messy margin hacks."},{"question":"What happens if you have 10 large flex items but the container is too narrow?","options":["They automatically drop to a new line","By default, they shrink to fit, or overflow the container in a single line","The container crashes","The items disappear"],"correctAnswer":1,"explanation":"By default, flex items try to stay on one line (flex-wrap: nowrap). You must explicitly set 'flex-wrap: wrap' if you want them to break to new lines."},{"question":"Can you use Flexbox inside another Flexbox?","options":["No, it creates a CSS conflict","Yes, nesting flex containers is a very common and powerful pattern","Only if the child is a column","Only in CSS Grid"],"correctAnswer":1,"explanation":"You can nest flex containers infinitely. A nav bar can be a flex row, and the links inside it can be a separate flex row."}]},{"id":"fe-13","title":"13. CSS Grid","duration":"65 Mins","level":"upper-intermediate","type":"interactive","locked":false,"content":"$27","quiz":[{"question":"What is the primary difference between Flexbox and CSS Grid?","options":["Flexbox is for 1D layouts (row OR column), Grid is for 2D layouts (rows AND columns simultaneously)","Grid is older and deprecated","Flexbox only works for text, Grid is for images","There is no difference, they do the exact same thing"],"correctAnswer":0,"explanation":"Flexbox excels at lining things up in a single direction. Grid excels at building complex, checkerboard-style layouts across two axes."},{"question":"Which property defines the number and width of columns in a grid?","options":["grid-columns-count","grid-template-columns","display-columns","column-width"],"correctAnswer":1,"explanation":"grid-template-columns takes a list of values (like 1fr 1fr 1fr) to explicitly define how many columns there are and how wide they should be."},{"question":"What does the `fr` unit stand for in CSS Grid (e.g., `1fr`)?","options":["Frame","Fraction","Free","Fixed Ratio"],"correctAnswer":1,"explanation":"The 'fr' unit represents a fraction of the available free space. '1fr 1fr 1fr' creates three perfectly equal columns."},{"question":"How do you create a 4-column grid using the `repeat()` function?","options":["grid-template-columns: repeat(4, 1fr);","grid-columns: 4;","grid-template: 4fr;","repeat-columns: 4 1fr;"],"correctAnswer":0,"explanation":"The repeat() function is a shorthand. repeat(4, 1fr) is exactly the same as writing '1fr 1fr 1fr 1fr'."},{"question":"How can you make a single child element stretch across two columns?","options":["width: 200%;","grid-span: 2;","grid-column: span 2;","display: double;"],"correctAnswer":2,"explanation":"Using 'grid-column: span 2' tells that specific child item to stretch across two tracks in the grid."},{"question":"Can you define both rows and columns in the same container?","options":["No, only one at a time","Yes, using grid-template-columns and grid-template-rows","Only if you use nested divs","Only if all cells are square"],"correctAnswer":1,"explanation":"Grid is 2-dimensional. You can explicitly set the width of columns and the height of rows on the same parent container."},{"question":"What does the `gap` property do in CSS Grid?","options":["Sets the outer margin","Creates blank spacing between the grid rows and columns","Changes the background color of empty cells","Makes the grid responsive"],"correctAnswer":1,"explanation":"Just like in Flexbox, the gap property creates consistent internal gutters between the cells."},{"question":"If you define a 3-column grid, but put 5 child items inside it, what happens?","options":["The 4th and 5th items disappear","The browser crashes","Grid automatically creates a second row and places the 4th and 5th items there","The items shrink to fit on one row"],"correctAnswer":2,"explanation":"CSS Grid has an implicit grid system. If it runs out of defined columns, it auto-generates a new row below to hold the overflow items."},{"question":"Which of these is best suited for an overall webpage skeleton (Header, Sidebar, Main, Footer)?","options":["Flexbox","CSS Grid","Absolute Positioning","Floats"],"correctAnswer":1,"explanation":"Grid is built specifically for macroscopic, 2D architectural layouts like a page skeleton."},{"question":"What does `grid-template-columns: 200px 1fr 200px;` create?","options":["An error","Three equal columns","A fixed left sidebar, a flexible middle area, and a fixed right sidebar","A layout that only works on desktop"],"correctAnswer":2,"explanation":"You can mix fixed units (px) with fractional units (fr). The middle column will absorb all remaining space between the two fixed sidebars."}]},{"id":"fe-14","title":"14. CSS Variables & Custom Properties","duration":"35 Mins","level":"intermediate","type":"interactive","locked":false,"content":"$28","quiz":[{"question":"What is the primary advantage of using CSS Variables (Custom Properties)?","options":["They make the CSS file download faster","You can define a value once and reuse it, making global design changes instantaneous","They allow you to write JavaScript inside CSS","They automatically make the site responsive"],"correctAnswer":1,"explanation":"Variables enforce consistency. If your brand color changes, you update the variable in one place, and every button on the site updates instantly."},{"question":"What syntax is required to DECLARE a CSS variable?","options":["$$var-name: blue;","@var-name: blue;","--var-name: blue;","var(name): blue;"],"correctAnswer":2,"explanation":"Native CSS variables must be prefixed with two hyphens (e.g., --primary-color)."},{"question":"Where are global CSS variables typically defined so the whole document can access them?","options":["Inside the <body> tag","Inside the :root pseudo-class","At the bottom of the file","Inside an @import statement"],"correctAnswer":1,"explanation":"The :root selector targets the highest level of the document tree (the <html> element), making the variables globally accessible."},{"question":"What syntax is used to USE (call) a CSS variable in a rule?","options":["color: $primary;","color: --primary;","color: get(--primary);","color: var(--primary);"],"correctAnswer":3,"explanation":"You must wrap the variable name in the var() function to insert its value into a property."},{"question":"Can CSS variables store values other than colors?","options":["No, only hex and RGB colors","Yes, they can store spacing (px), fonts, borders, or any valid CSS value","Only numbers","Only strings"],"correctAnswer":1,"explanation":"Custom properties can hold any CSS value. You can create variables for padding (--spacing: 16px), font stacks, or border-radius."},{"question":"Are CSS variables case-sensitive?","options":["Yes, --Primary is different from --primary","No, they are case-insensitive","Only in Firefox","Only when storing colors"],"correctAnswer":0,"explanation":"CSS Custom Properties are strictly case-sensitive. --mainColor and --maincolor are two completely separate variables."},{"question":"How do CSS variables make implementing Dark Mode easier?","options":["They automatically detect the user's OS preference","You can redefine the variables under a dark theme selector, and the whole UI updates without rewriting component CSS","They generate black backgrounds automatically","They don't, JavaScript is required for Dark Mode"],"correctAnswer":1,"explanation":"By changing the values of your color variables when a dark class/attribute is applied, the entire site repaints instantly without touching individual element rules."},{"question":"Can CSS variables be updated live using JavaScript?","options":["No, they are compiled","Yes, using the setProperty() method in JS","Only if the page refreshes","Only in Node.js"],"correctAnswer":1,"explanation":"Unlike Sass variables which compile to static CSS, native CSS variables exist in the DOM and can be dynamically altered by JavaScript."},{"question":"What happens if you use `var(--does-not-exist)`?","options":["The browser crashes","The property falls back to its inherited or default value","It defaults to black","It throws a syntax error"],"correctAnswer":1,"explanation":"If a variable is invalid or undefined, the browser treats the property as if it was set to 'unset' or 'initial'."},{"question":"How can you provide a fallback value in case a CSS variable is undefined?","options":["var(--color) || blue","fallback: blue;","var(--color, blue)","var(--color) ? blue"],"correctAnswer":2,"explanation":"The var() function accepts a second argument as a fallback. `var(--main-color, black)` will use black if --main-color isn't defined."}]},{"id":"fe-15","title":"15. Transitions & Animations","duration":"50 Mins","level":"upper-intermediate","type":"interactive","locked":false,"content":"$29","quiz":[{"question":"What is the primary difference between a CSS Transition and a CSS Animation?","options":["Transitions require JavaScript, animations do not","Transitions interpolate between two states (e.g. normal and hover), while Animations can follow multi-step keyframes autonomously","Animations are older and deprecated","Transitions only work on colors"],"correctAnswer":1,"explanation":"Transitions require a trigger (like :hover) to move from State A to State B. Animations use @keyframes to play complex sequences automatically."},{"question":"Where should you place the `transition` property for a hover effect?","options":["On the :hover pseudo-class","On the base element class","On the <body> tag","Inside a @keyframes block"],"correctAnswer":1,"explanation":"Always place it on the base state (e.g., .btn). This ensures the animation happens smoothly both when the mouse enters AND leaves the element."},{"question":"What does the `transform: translateY(-4px);` property do?","options":["Shrinks the element by 4 pixels","Moves the element UP by 4 pixels","Moves the element DOWN by 4 pixels","Rotates it 4 degrees"],"correctAnswer":1,"explanation":"On the Y-axis (vertical), negative values move elements UP the screen, making it look like it's lifting off the page."},{"question":"Which transition timing function starts slow, speeds up, and ends slow?","options":["linear","ease","step","fast-slow"],"correctAnswer":1,"explanation":"The 'ease' timing function provides a natural, smooth acceleration and deceleration, making it the most popular choice for UI."},{"question":"What CSS rule is used to define the actual steps of a complex animation?","options":["@animation","@media","@keyframes","@steps"],"correctAnswer":2,"explanation":"The @keyframes rule allows you to define exactly what an animation looks like at 0%, 50%, 100%, or 'from' and 'to'."},{"question":"How do you make an animation run forever without stopping?","options":["animation-loop: true;","animation-iteration-count: infinite;","loop: forever;","play: infinite;"],"correctAnswer":1,"explanation":"Setting the iteration count to 'infinite' (often used in shorthand like `animation: spin 1s infinite;`) causes it to loop endlessly."},{"question":"What does `transition: all 0.3s ease;` do?","options":["Fades all elements on the page in 0.3 seconds","Animates any changed property on that specific element over 0.3 seconds with smooth easing","Only animates color changes","Delays the animation by 0.3 seconds"],"correctAnswer":1,"explanation":"The 'all' keyword tells the browser to automatically animate ANY property (color, size, position) that changes."},{"question":"Which of these properties is the most performant to animate without causing layout lag?","options":["width","margin","transform","padding"],"correctAnswer":2,"explanation":"Animating transform (and opacity) is hardware-accelerated by the GPU. Animating width or margin forces the browser to expensively recalculate the entire page layout."},{"question":"What is the `:hover` pseudo-class used for?","options":["Creating tooltips","Applying styles only when the user's mouse cursor is resting over the element","Hiding elements","Triggering JavaScript"],"correctAnswer":1,"explanation":"The :hover state is triggered exactly when the pointer intersects the element, commonly used to trigger CSS transitions."},{"question":"If an animation uses `from` and `to`, what percentages do they represent?","options":["from is 1%, to is 99%","from is 0%, to is 100%","from is start, to is half","They are random"],"correctAnswer":1,"explanation":"In @keyframes, 'from' is just an alias for 0% (the start), and 'to' is an alias for 100% (the end)."}]},{"id":"fe-16","title":"16. Responsive Design","duration":"55 Mins","level":"advanced","type":"interactive","locked":false,"content":"$2a","quiz":[{"question":"What is the primary goal of Responsive Web Design?","options":["To make the site load faster","To ensure the layout looks good and functions well across all screen sizes (mobile, tablet, desktop)","To write CSS in JavaScript","To make images higher resolution"],"correctAnswer":1,"explanation":"Responsive design ensures that UI elements flexibly scale, stack, or hide based on the user's viewport, providing a seamless experience on any device."},{"question":"What CSS feature allows you to apply styles ONLY when the screen is a certain size?","options":["@responsive","@screen","@media queries","if/else statements"],"correctAnswer":2,"explanation":"@media queries act as conditional statements in CSS, overriding default styles when the viewport matches the specified width."},{"question":"What does `@media (max-width: 768px)` mean?","options":["Apply these styles only if the screen is exactly 768px","Apply these styles only on screens LARGER than 768px","Apply these styles only on screens 768px or SMALLER","Scale the screen to 768px"],"correctAnswer":2,"explanation":"max-width: 768px creates a ceiling. The styles inside will only trigger when the viewport shrinks to 768 pixels or below (typical mobile/tablet size)."},{"question":"What is the `vw` unit in CSS?","options":["Vertical Width","Viewport Width (1vw = 1% of the screen's total width)","Visual Weight","Vector Width"],"correctAnswer":1,"explanation":"Viewport Width (vw) is a relative unit. If the browser window is 1000px wide, 50vw equals exactly 500px."},{"question":"How does `width: 100%` differ from `width: 100vw`?","options":["They are exactly identical","100% is relative to the parent container, 100vw is relative to the entire screen size","100vw is only for mobile","100% ignores padding"],"correctAnswer":1,"explanation":"Percentage (%) calculates based on the element's direct parent box. Viewport units (vw/vh) ignore parents and calculate based strictly on the browser window."},{"question":"What does `max-width: 100%` do when applied to an `<img>`?","options":["Stretches the image to fit the screen","Ensures the image never scales larger than its container, preventing overflow on small screens","Makes the image square","Hides the image on mobile"],"correctAnswer":1,"explanation":"This is the golden rule of responsive images. It allows the image to shrink responsively but prevents it from breaking out of its container."},{"question":"What does the `clamp()` function do in CSS?","options":["Hides an element","Sets a minimum, preferred (fluid), and maximum value for a property","Locks the screen rotation","Clamps colors to safe web values"],"correctAnswer":1,"explanation":"clamp(1rem, 2vw, 3rem) is amazing for fluid typography. Text scales with the screen (2vw) but will never drop below 1rem or grow above 3rem."},{"question":"What is 'Mobile-First' design?","options":["Designing the desktop site and then shrinking it","Writing the default CSS for mobile screens first, then using `min-width` media queries to add complexity for larger screens","Only building a mobile app","Hiding images on mobile devices"],"correctAnswer":1,"explanation":"Mobile-First is a best practice where base CSS targets small screens. You then use `@media (min-width: 1024px)` to un-stack layouts for desktop."},{"question":"Which meta tag is absolutely required in your HTML `<head>` for responsive design to work on smartphones?","options":["<meta name=\"mobile\">","<meta name=\"responsive\" content=\"true\">","<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">","<meta device=\"phone\">"],"correctAnswer":2,"explanation":"Without the viewport meta tag, iPhones and Androids will stubbornly pretend they are desktop monitors and render your page tiny and zoomed out."},{"question":"If you have a 3-column CSS Grid, how do you easily make it stack into 1 column on mobile?","options":["Change it to display: block","Use a media query to change `grid-template-columns: 1fr;` on small screens","Use JavaScript to delete the columns","Apply float: left"],"correctAnswer":1,"explanation":"The beauty of Grid is that changing a single property inside a media query (grid-template-columns) instantly reflows the entire layout."}]},{"id":"fe-17","title":"17. Final Project: Portfolio","duration":"3 Hours","level":"advanced","type":"project","locked":false,"content":"$2b","quiz":[{"question":"What is the primary purpose of a portfolio website for a developer?","options":["To host a database","To showcase projects, skills, and contact information to potential employers or clients","To replace a GitHub account","To sell physical products"],"correctAnswer":1,"explanation":"A portfolio serves as a live, interactive resume. It proves you can actually build things, which is far more valuable than just listing skills on a PDF."},{"question":"When deploying a static website, what must the main HTML file be named?","options":["main.html","home.html","index.html","app.html"],"correctAnswer":2,"explanation":"Web servers automatically look for a file named 'index.html' to serve as the root page of a directory. Without it, your site won't load by default."},{"question":"Why is `height: 100vh` useful for a Hero section?","options":["It makes the hero section square","It forces the hero section to take up exactly 100% of the viewport's height, filling the entire screen perfectly","It centers the text","It hides the navigation bar"],"correctAnswer":1,"explanation":"Viewport Height (vh) ensures that no matter what device the user is on, the hero section will perfectly frame their screen before they start scrolling."},{"question":"What is the benefit of hosting a static portfolio on Netlify or GitHub Pages?","options":["It costs a lot of money","It requires backend servers","It is completely free, secure, and lightning fast since there is no backend database to manage","It only works on desktop"],"correctAnswer":2,"explanation":"Static hosting platforms serve pre-built HTML/CSS/JS globally via CDNs, making them free, unhackable, and incredibly fast."},{"question":"What is a 'semantic structure' in the context of a portfolio?","options":["Using IDs instead of classes","Organizing the page with meaningful tags like <header>, <main>, <section>, and <footer> instead of just <div>s","Making the site responsive","Using CSS Grid"],"correctAnswer":1,"explanation":"Semantic tags make your portfolio accessible to screen readers and optimize it for search engines (SEO), which employers look for."},{"question":"If your portfolio has a dark theme, what CSS feature is best for storing your exact hex codes?","options":["CSS Grid","Media Queries","CSS Variables (:root)","Inline styles"],"correctAnswer":2,"explanation":"Storing your theme colors in CSS Custom Properties (--primary, --dark) ensures absolute consistency across the entire project."},{"question":"What CSS property ensures a sticky navbar stays on top of other scrolling content?","options":["opacity","z-index","display","margin"],"correctAnswer":1,"explanation":"Because a sticky navbar can overlap other elements, giving it a high z-index (e.g., z-index: 100) ensures it renders in front of everything else."},{"question":"Why apply `box-shadow` on hover to portfolio cards?","options":["To make the code shorter","To fix mobile layout bugs","To provide visual feedback and depth, making the UI feel interactive and tactile","To hide the border"],"correctAnswer":2,"explanation":"Hover states (like a slight lift and a shadow) reassure the user that the element is clickable, greatly improving the User Experience (UX)."},{"question":"In a modern portfolio, which layout system is best for aligning the logo to the left and links to the right in a navbar?","options":["Floats","Flexbox (justify-content: space-between)","Absolute positioning","CSS Tables"],"correctAnswer":1,"explanation":"Flexbox with 'space-between' naturally pushes the first item (logo) to the far left and the last item (nav links) to the far right."},{"question":"What is the final, most crucial step before sending your portfolio link to a recruiter?","options":["Changing the background color","Testing the live URL on a real mobile phone to ensure responsiveness is actually working","Adding 10 more projects","Buying an expensive domain"],"correctAnswer":1,"explanation":"Recruiters and managers will likely open your link on their phones. If the mobile view is broken, your technical skills will immediately be doubted."}]}],"completedModuleIds":[],"resourceLink":"https://drive.google.com/drive/folders/1QB8ZMtSo6h8VMaYT_9ZFLIKwRsVr1Y_q?usp=drive_link","routePrefix":"/learn/linear-masterclasses/masterclasses/frontend-core"}],"$L2c"]}] </article></body></html>

10:["$","div",null,{"className":"flex h-screen w-full bg-[#050505] overflow-hidden","children":[["$","$L1a",null,{"skillId":"frontend-core","skillName":"Frontend Core","modules":[{"id":"fe-1","title":"1. How the Web Works","duration":"30 Mins","level":"beginner","type":"theory","locked":false,"content":"$1b","quiz":[{"question":"What is the role of a 'Client' in the Client-Server model?","options":["To store the website's database","To request and display web pages","To route internet traffic","To assign IP addresses"],"correctAnswer":1,"explanation":"The client (your web browser) requests data from the server and renders it so you can see and interact with it."},{"question":"What happens during a DNS Lookup?","options":["The browser downloads CSS","The server encrypts the data","A domain name is translated into an IP address","The HTML is converted to visual elements"],"correctAnswer":2,"explanation":"DNS (Domain Name System) acts like a phonebook, translating human-readable URLs (like google.com) into computer-readable IP addresses."},{"question":"Which technology acts as the 'skeleton' of a webpage?","options":["CSS","JavaScript","Python","HTML"],"correctAnswer":3,"explanation":"HTML provides the structural foundation and content of the page, acting as the skeleton."},{"question":"What does an HTTP 404 status code mean?","options":["Everything worked perfectly","The server crashed","The requested page was not found","The site has moved permanently"],"correctAnswer":2,"explanation":"A 404 status code is returned by the server when it cannot find the file or page the client requested."},{"question":"What is the purpose of CSS?","options":["To add logical interactions","To handle database connections","To control the visual appearance and layout","To structure paragraphs and headings"],"correctAnswer":2,"explanation":"CSS (Cascading Style Sheets) is the 'skin' of the web, responsible for colors, layouts, and responsive design."},{"question":"Which HTTP request method is used by a browser to fetch a standard webpage?","options":["POST","GET","PUT","DELETE"],"correctAnswer":1,"explanation":"A GET request tells the server that the client only wants to retrieve data, not change or submit anything."},{"question":"What does a 500 status code indicate?","options":["Unauthorized access","Internal Server Error","Success","Page Not Found"],"correctAnswer":1,"explanation":"A 500 Internal Server Error means something broke on the server's backend, usually a code crash or database failure."},{"question":"What tool allows you to inspect and temporarily edit the HTML/CSS of any live website?","options":["VS Code","Terminal","Chrome DevTools","Live Server"],"correctAnswer":2,"explanation":"Chrome DevTools (accessed via F12) is built into the browser and lets you inspect and manipulate the DOM live."},{"question":"What does the Live Server extension do in VS Code?","options":["Hosts your website on the internet","Auto-refreshes your local browser every time you save a file","Writes CSS automatically","Checks for broken links"],"correctAnswer":1,"explanation":"Live Server spawns a local development server that watches your files and automatically reloads the browser upon saving."},{"question":"Which technology is responsible for making a webpage interactive (e.g., clicking a button to open a modal)?","options":["HTML","CSS","HTTP","JavaScript"],"correctAnswer":3,"explanation":"JavaScript acts as the 'muscles' of the page, handling logic, math, and dynamic user interactions."}]},{"id":"fe-2","title":"2. Your First HTML Page","duration":"40 Mins","level":"beginner","type":"interactive","locked":false,"content":"$1c","quiz":[{"question":"What does the `` declaration do?","options":["Links a CSS file","Tells the browser to render the page using modern HTML5 standards","Creates a visible heading","Starts a comment"],"correctAnswer":1,"explanation":"It must be the very first line of code. It ensures the browser knows to expect HTML5, preventing it from rendering in legacy 'quirks mode'."},{"question":"Which tag contains the visible content of a webpage?","options":["","","<body>","<html>"],"correctAnswer":2,"explanation":"Everything you want the user to actually see on the screen goes inside the <body> tags."},{"question":"What goes inside the `<head>` tag?","options":["The main logo of the site","Invisible metadata, titles, and links to CSS","The footer","The navigation bar"],"correctAnswer":1,"explanation":"The <head> section is for machine-readable information, like character set definitions, viewport settings, and the page title."},{"question":"How do you write a comment in HTML?","options":["// This is a comment","/* This is a comment */","","# This is a comment"],"correctAnswer":2,"explanation":"HTML comments are wrapped in . The browser completely ignores them when rendering the page."},{"question":"What is the purpose of the `lang=\"en\"` attribute in the `<html>` tag?","options":["It translates the page automatically","It helps screen readers and search engines know the document is in English","It forces the font to be English","It is required for CSS to work"],"correctAnswer":1,"explanation":"The lang attribute is crucial for accessibility tools (like screen readers) to pronounce words correctly and for SEO."},{"question":"Is HTML considered a programming language?","options":["Yes, it compiles into machine code","Yes, it has loops and variables","No, it is a markup language","No, it is a database language"],"correctAnswer":2,"explanation":"HTML cannot perform logic, math, or loops. It simply 'marks up' text to give it structural meaning."},{"question":"What does the `<title>` tag do?","options":["Creates a large heading on the page","Sets the text shown in the browser's tab","Styles the text","Defines the website's logo"],"correctAnswer":1,"explanation":"The <title> tag lives inside the <head> and determines the text displayed on the browser tab and in Google search results."},{"question":"How is a closing tag different from an opening tag?","options":["It has a forward slash (/) before the tag name","It uses square brackets instead of angle brackets","It has a hashtag (#)","It must be capitalized"],"correctAnswer":0,"explanation":"A closing tag is identical to the opening tag, except it includes a forward slash (e.g., </p>)."},{"question":"What is the 'boilerplate' in HTML?","options":["A tool used to write CSS","The standard, required structural code that starts every HTML file","A special tag for bold text","The server that hosts the file"],"correctAnswer":1,"explanation":"The boilerplate is the standard template (DOCTYPE, html, head, body) required for a valid HTML document."},{"question":"Which meta tag ensures a website scales correctly on mobile devices?","options":["<meta charset=\"UTF-8\">","<meta name=\"mobile\">","<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">","<meta scale=\"true\">"],"correctAnswer":2,"explanation":"The viewport meta tag tells mobile browsers not to shrink the page, but to render it at the device's actual width."}]},{"id":"fe-3","title":"3. Headings & Paragraphs","duration":"30 Mins","level":"beginner","type":"interactive","locked":false,"content":"$1d","quiz":[{"question":"How many heading levels are available in HTML?","options":["3","5","6","Unlimited"],"correctAnswer":2,"explanation":"HTML provides exactly 6 heading tags, ranging from <h1> (most important) to <h6> (least important)."},{"question":"Why should you generally only use one `<h1>` tag per page?","options":["It causes the page to load slower","Search engines like Google use it as the main topic of the page, and multiples cause SEO penalties","The browser will crash","You cannot style more than one"],"correctAnswer":1,"explanation":"The <h1> represents the main title of the page. Using multiple confuses search engines and screen readers about the primary topic."},{"question":"Which tag is used to create a paragraph?","options":["<paragraph>","<text>","<p>","<pg>"],"correctAnswer":2,"explanation":"The <p> tag defines a paragraph, and browsers automatically add margin (spacing) above and below it."},{"question":"What is the semantic purpose of the `<strong>` tag?","options":["To make text bigger","To indicate that text has strong importance","To change the font color","To draw a border around text"],"correctAnswer":1,"explanation":"While <strong> visually renders as bold, its semantic purpose is to tell screen readers and search engines that the text is of high importance."},{"question":"Which tag is used to render text in italics for emphasis?","options":["<i>","<em>","<italic>","<slant>"],"correctAnswer":1,"explanation":"The <em> tag stands for emphasis and semantically stresses the wrapped text, visually rendering it as italic."},{"question":"How do you force a line break without starting a new paragraph?","options":["<break>","<lb>","<br>","<newline>"],"correctAnswer":2,"explanation":"The <br> (break) tag forces the text to drop to the next line immediately. It is a self-closing tag."},{"question":"What does the `<hr>` tag do?","options":["Highlights text","Creates a horizontal rule (a dividing line)","Aligns text to the right","Hides text"],"correctAnswer":1,"explanation":"The <hr> tag draws a horizontal line across the page, semantically representing a thematic break between sections."},{"question":"Which tag is used to display superscript text, like the '2' in E=mc²?","options":["<sub>","<super>","^","<sup>"],"correctAnswer":3,"explanation":"The <sup> tag renders text slightly higher and smaller, perfect for mathematical exponents."},{"question":"Which tag would you use to indicate deleted text (like an old price)?","options":["<strike>","<del>","<remove>","<s>"],"correctAnswer":1,"explanation":"The <del> tag semantically marks text as deleted, and browsers visually render it with a strike-through line."},{"question":"What is the visual effect of the `<mark>` tag by default?","options":["It underlines the text","It makes the text blink","It gives the text a yellow background highlight","It blurs the text"],"correctAnswer":2,"explanation":"The <mark> tag represents text marked or highlighted for reference, rendering with a yellow background by default."}]},{"id":"fe-4","title":"4. Links & Images","duration":"40 Mins","level":"beginner","type":"interactive","locked":false,"content":"$1e","quiz":[{"question":"Which tag is used to create a hyperlink?","options":["<link>","<href>","<a>","<hyper>"],"correctAnswer":2,"explanation":"The <a> (anchor) tag is the standard HTML element used to create hyperlinks."},{"question":"Which attribute is required inside an `<a>` tag to specify the link's destination?","options":["src","href","link","url"],"correctAnswer":1,"explanation":"The 'href' (Hypertext Reference) attribute points to the URL or path the link should navigate to."},{"question":"How do you make a link open in a completely new browser tab?","options":["target=\"_new\"","target=\"_blank\"","open=\"new\"","rel=\"blank\""],"correctAnswer":1,"explanation":"Adding target=\"_blank\" to an anchor tag forces the browser to open the destination in a new tab or window."},{"question":"What does an `href` value starting with `#` do? (e.g., `href=\"#contact\"`)","options":["Opens an email client","Jumps to a specific element on the same page with that ID","Creates a broken link","Downloads a file"],"correctAnswer":1,"explanation":"Using a hash symbol targets an element's ID on the same page, allowing you to create 'jump links' that scroll the user down."},{"question":"Which tag is used to embed an image?","options":["<image>","<pic>","<img>","<photo>"],"correctAnswer":2,"explanation":"The <img> tag is used to embed images. It is an empty/self-closing element."},{"question":"Which attribute in the `<img>` tag specifies the path to the image file?","options":["path","href","src","link"],"correctAnswer":2,"explanation":"The 'src' (source) attribute points to the file path or URL of the image."},{"question":"Why is the `alt` attribute essential for images?","options":["It makes the image load faster","It applies a border to the image","It provides alternative text for screen readers and SEO","It is required for the image to display colors"],"correctAnswer":2,"explanation":"The 'alt' (alternative text) attribute is critical for accessibility. Screen readers read this text aloud to visually impaired users."},{"question":"Does the `<img>` tag require a closing tag (e.g., `</img>`)?","options":["Yes, always","No, it is a self-closing tag","Only when it is a clickable link","Only in HTML4"],"correctAnswer":1,"explanation":"The <img> tag is an empty element, meaning it only contains attributes and does not wrap any text content, so it needs no closing tag."},{"question":"How do you make an image clickable as a link?","options":["Add href directly to the <img> tag","Wrap the <img> tag completely inside an <a> tag","Use the <link-img> tag","Add target=\"_blank\" to the <img> tag"],"correctAnswer":1,"explanation":"By placing an <img> element between the opening <a> and closing </a> tags, the entire image becomes the clickable hit-area for the link."},{"question":"What happens if an image fails to load and the `alt` attribute is present?","options":["The page crashes","A broken image icon appears along with the text from the `alt` attribute","The browser attempts to find a random image","Nothing appears at all"],"correctAnswer":1,"explanation":"If the source URL is broken, the browser displays the alt text so the user still knows what the image was supposed to be."}]},{"id":"fe-5","title":"5. Lists & Tables","duration":"40 Mins","level":"beginner","type":"interactive","locked":false,"content":"$1f","quiz":[{"question":"Which tag defines an unordered (bulleted) list?","options":["<list>","<ul>","<ol>","<bl>"],"correctAnswer":1,"explanation":"The <ul> tag stands for Unordered List, which defaults to rendering items with bullet points."},{"question":"Which tag is used to create a numbered list?","options":["<ul>","<nl>","<ol>","<num>"],"correctAnswer":2,"explanation":"The <ol> tag stands for Ordered List, automatically numbering the items inside it sequentially."},{"question":"What tag must wrap every individual item inside a list?","options":["<item>","<li>","<p>","<list-item>"],"correctAnswer":1,"explanation":"Whether inside a <ul> or an <ol>, every single item must be wrapped in an <li> (List Item) tag."},{"question":"Which tag defines an HTML table?","options":["<grid>","<spreadsheet>","<table>","<tbody>"],"correctAnswer":2,"explanation":"The <table> tag acts as the main container for all table rows and cells."},{"question":"How do you define a row in an HTML table?","options":["<row>","<td>","<tr>","<th>"],"correctAnswer":2,"explanation":"The <tr> (Table Row) tag creates a horizontal row. You place data cells inside it."},{"question":"What tag is used for standard data cells within a table row?","options":["<cell>","<td>","<th>","<tc>"],"correctAnswer":1,"explanation":"The <td> (Table Data) tag holds the actual data inside a row."},{"question":"How does a `<th>` cell differ from a `<td>` cell by default?","options":["It is invisible","It creates a new row","It renders text bold and centered","It spans multiple columns automatically"],"correctAnswer":2,"explanation":"The <th> (Table Header) tag is used for column headers. Browsers inherently style <th> text as bold and centered."},{"question":"What is the semantic purpose of the `<thead>` tag?","options":["To group the header rows of the table","To add a title above the table","To define the first column","To style the table border"],"correctAnswer":0,"explanation":"The <thead> semantically groups the header content of a table, separating it from the <tbody> (body content)."},{"question":"Can you put a list inside a table cell (`<td>`)?","options":["Yes, table cells can contain almost any HTML element","No, it breaks the table","Only unordered lists","Only if the table has no borders"],"correctAnswer":0,"explanation":"Table cells act like standard containers. You can place text, images, links, or even entire lists inside a <td>."},{"question":"Which CSS property is commonly used on tables to remove double borders between cells?","options":["border-radius","border-collapse","border-spacing","outline"],"correctAnswer":1,"explanation":"Using 'border-collapse: collapse;' merges the borders of adjacent cells into a single line, making it look like a standard spreadsheet."}]},{"id":"fe-6","title":"6. Forms & Inputs","duration":"50 Mins","level":"intermediate","type":"interactive","locked":false,"content":"$20","quiz":[{"question":"Which tag wraps all input elements to create an area for user data submission?","options":["<submit>","<inputs>","<form>","<fieldset>"],"correctAnswer":2,"explanation":"The <form> tag acts as the master container that gathers data from its internal inputs and submits it to a server."},{"question":"Which input type masks the characters users type with dots or asterisks?","options":["type=\"hidden\"","type=\"secret\"","type=\"password\"","type=\"text\""],"correctAnswer":2,"explanation":"Using type=\"password\" securely obscures the characters the user is typing so bystanders cannot read them."},{"question":"What does the `placeholder` attribute do?","options":["Sets the default value sent to the server","Shows a temporary, faded hint inside the input field","Requires the user to fill the field","Creates a tooltip on hover"],"correctAnswer":1,"explanation":"The placeholder attribute displays light grey text inside an empty input, disappearing as soon as the user starts typing."},{"question":"How do you link a `<label>` to a specific `<input>` element?","options":["Use the 'name' attribute on the label","Put them on the same line","Match the label's 'for' attribute to the input's 'id' attribute","Match the 'class' attributes"],"correctAnswer":2,"explanation":"Clicking a label activates its connected input. You connect them by making the label's 'for' attribute exactly match the input's 'id'."},{"question":"Which input type allows a user to select MULTIPLE options from a list?","options":["type=\"radio\"","type=\"checkbox\"","type=\"select\"","type=\"multiple\""],"correctAnswer":1,"explanation":"Checkboxes allow users to select zero, one, or multiple options independently."},{"question":"Which input type forces a user to select ONLY ONE option from a group?","options":["type=\"radio\"","type=\"checkbox\"","type=\"single\"","type=\"button\""],"correctAnswer":0,"explanation":"Radio buttons are mutually exclusive. If multiple radio buttons share the exact same 'name' attribute, selecting one deselects the others."},{"question":"What is the purpose of the `required` attribute?","options":["It forces the field to be uppercase","It prevents the form from submitting if the field is empty","It makes the input read-only","It highlights the field in red"],"correctAnswer":1,"explanation":"The required attribute is built-in HTML form validation. The browser will block the submission and alert the user if the field is blank."},{"question":"Which input type automatically provides a calendar pop-up in most browsers?","options":["type=\"calendar\"","type=\"time\"","type=\"date\"","type=\"datetime\""],"correctAnswer":2,"explanation":"type=\"date\" triggers a native, touch-friendly calendar picker in modern browsers."},{"question":"What is the difference between the `id` and `name` attributes on an input?","options":["They are identical","'id' is for CSS/JS and labels, 'name' is the key used when sending data to the server","'name' is for CSS, 'id' is for the server","'id' is visible to the user"],"correctAnswer":1,"explanation":"The 'id' must be unique for frontend manipulation (CSS, JS, labels). The 'name' is the variable name the backend server receives the data under."},{"question":"What does a button with `type=\"submit\"` do when clicked?","options":["Refreshes the page","Clears all form inputs","Collects the form data and attempts to send it to the server","Opens a confirmation dialog"],"correctAnswer":2,"explanation":"A submit button triggers the form's 'action', firing the data off to the specified URL."}]},{"id":"fe-7","title":"7. Semantic HTML5","duration":"45 Mins","level":"intermediate","type":"interactive","locked":false,"content":"$21","quiz":[{"question":"What is the primary benefit of using semantic HTML5 tags?","options":["They automatically style the page with CSS","They make JavaScript run faster","They clearly describe their meaning to both the browser and the developer, improving SEO and accessibility","They allow you to write less code"],"correctAnswer":2,"explanation":"Semantic tags (like <header> instead of a <div>) tell search engines and screen readers exactly what purpose a section of the page serves."},{"question":"Which tag is used to wrap the dominant, primary content of a webpage?","options":["<content>","<primary>","<main>","<body>"],"correctAnswer":2,"explanation":"The <main> tag identifies the core content of a document. A page should only have one <main> tag."},{"question":"Which tag should be used to wrap a group of major navigational links?","options":["<links>","<nav>","<menu>","<header>"],"correctAnswer":1,"explanation":"The <nav> tag is specifically designed to contain major blocks of navigation links, like the main menu."},{"question":"If you are writing a standalone blog post that makes sense on its own, which tag should wrap it?","options":["<post>","<section>","<div>","<article>"],"correctAnswer":3,"explanation":"The <article> tag specifies independent, self-contained content that could theoretically be syndicated or read outside the context of the site."},{"question":"Which tag is best for content that is tangentially related to the main content, like a sidebar?","options":["<sidebar>","<margin>","<aside>","<secondary>"],"correctAnswer":2,"explanation":"The <aside> tag is used for content indirectly related to the main content, typically rendered as a sidebar."},{"question":"Where should copyright information and general site links go?","options":["<bottom>","<end>","<summary>","<footer>"],"correctAnswer":3,"explanation":"The <footer> tag represents the footer of its nearest section or the entire page, typically containing authorship or copyright data."},{"question":"Is the `<div>` tag obsolete in HTML5?","options":["Yes, it should never be used","No, but it should only be used as a generic container when no semantic tag fits","Yes, it has been replaced by <box>","No, it is preferred over semantic tags"],"correctAnswer":1,"explanation":"<div> tags are perfectly fine, but they carry no semantic meaning. Use them for styling wrappers or generic boxes when tags like <article> or <section> don't apply."},{"question":"Which tag is used for a thematic grouping of content, typically with a heading?","options":["<group>","<section>","<area>","<div>"],"correctAnswer":1,"explanation":"The <section> tag is a generic semantic element used to group related content, usually beginning with an h2-h6 heading."},{"question":"Why did HTML5 introduce tags like `<header>` and `<footer>`?","options":["To force a specific visual layout","Because developers were previously using `<div id=\"header\">`, which computers couldn't read universally","To replace CSS","To make files smaller"],"correctAnswer":1,"explanation":"Before HTML5, everyone named their divs differently (<div class=\"head\">, <div id=\"header\">). Standardized tags made parsing the web universal."},{"question":"Which tag semantically represents a specific period in time or a date?","options":["<date>","<time>","<timestamp>","<period>"],"correctAnswer":1,"explanation":"The <time> tag represents a specific time or date, often paired with a 'datetime' attribute for machine-readable accuracy."}]},{"id":"fe-8","title":"8. Introduction to CSS","duration":"45 Mins","level":"beginner","type":"interactive","locked":false,"content":"$22","quiz":[{"question":"What does CSS stand for?","options":["Computer Style Sheets","Creative Style System","Cascading Style Sheets","Colorful Style Syntax"],"correctAnswer":2,"explanation":"CSS stands for Cascading Style Sheets, referring to the way rules 'cascade' down and overwrite each other based on specificity."},{"question":"Where is the correct place to put a `<style>` tag in an HTML document?","options":["At the end of the document","Inside the <head> section","Inside the <body> section","Directly on the element"],"correctAnswer":1,"explanation":"Internal CSS should be placed inside the <head> tag so the styles are loaded before the browser renders the visual body."},{"question":"What is the correct CSS syntax to target an element with `class=\"btn\"`?","options":["#btn","btn",".btn","*btn"],"correctAnswer":2,"explanation":"In CSS, a period (.) before the name targets elements by their class attribute."},{"question":"What is the correct CSS syntax to target an element with `id=\"header\"`?","options":[".header","header","*header","#header"],"correctAnswer":3,"explanation":"In CSS, a hash symbol (#) before the name targets an element by its unique ID attribute."},{"question":"What happens if a `p` tag has both a class color (blue) and an ID color (red) applied to it?","options":["It turns purple","It becomes blue because classes win","It becomes red because IDs have higher specificity","It crashes the stylesheet"],"correctAnswer":2,"explanation":"In the CSS Cascade rules, an ID selector is significantly stronger (more specific) than a class selector, so the ID rule wins."},{"question":"Which CSS syntax targets ALL `<h1>` tags on the page?","options":[".h1 { }","#h1 { }","h1 { }","all-h1 { }"],"correctAnswer":2,"explanation":"Typing the bare HTML tag name without a period or hash symbol acts as an element selector, applying the style to every instance of that tag."},{"question":"What does it mean when CSS 'cascades'?","options":["Styles animate down the screen","If two identical selectors have conflicting rules, the one further down the file wins","CSS files must be downloaded in a waterfall pattern","Colors blend together automatically"],"correctAnswer":1,"explanation":"The cascade means that rules are read top-to-bottom. If two rules have the exact same specificity, the last one declared overrides the earlier one."},{"question":"What is the nuclear option to force a CSS rule to override all others?","options":["!force","!override","!important","!strong"],"correctAnswer":2,"explanation":"Adding !important to the end of a CSS declaration forces it to win over any other rule. Professional developers use it rarely, as it makes debugging difficult."},{"question":"How many elements should share the exact same ID on a single page?","options":["Only one","Up to five","As many as you want","Zero, IDs are deprecated"],"correctAnswer":0,"explanation":"An ID is a unique identifier. It is invalid HTML to give multiple elements the same ID. If multiple elements need the same style, use a class."},{"question":"Which symbol is used to close a CSS declaration?","options":["Comma (,)","Period (.)","Semicolon (;)","Colon (:)"],"correctAnswer":2,"explanation":"Every CSS rule (like `color: blue`) must end with a semicolon (;) to separate it from the next rule."}]},{"id":"fe-9","title":"9. Colors, Fonts & Text","duration":"50 Mins","level":"beginner","type":"interactive","locked":false,"content":"$23","quiz":[{"question":"Which color format is most commonly used by UI designers and uses a hash symbol?","options":["RGB","HSL","Named Colors","Hexadecimal (Hex)"],"correctAnswer":3,"explanation":"Hexadecimal codes (like #1037c3) are the industry standard for precise UI color picking."},{"question":"What does the 'A' stand for in the RGBA color format?","options":["Alpha (Opacity)","Absolute","Add","Area"],"correctAnswer":0,"explanation":"The Alpha channel controls transparency. A value of 1 is solid, while 0.5 is 50% transparent."},{"question":"Which CSS property changes the text color?","options":["text-color","color","font-color","text-fill"],"correctAnswer":1,"explanation":"The 'color' property exclusively controls the color of the text within an element."},{"question":"How do you apply a fallback font in CSS?","options":["font-family: Arial fallback sans-serif;","font-family: Arial, sans-serif;","font-fallback: sans-serif;","font: Arial | sans-serif;"],"correctAnswer":1,"explanation":"You list fonts separated by commas. If the user's computer doesn't have the first font (Arial), it falls back to a generic category (sans-serif)."},{"question":"Which property makes text italic?","options":["font-weight: italic;","text-decoration: italic;","font-style: italic;","text-transform: italic;"],"correctAnswer":2,"explanation":"The 'font-style' property is used to specify normal, italic, or oblique text."},{"question":"Which property adds spacing between individual letters?","options":["word-spacing","line-height","text-indent","letter-spacing"],"correctAnswer":3,"explanation":"The 'letter-spacing' property increases or decreases the space between characters in a word."},{"question":"How do you remove the default underline from a link (`<a>`)?","options":["text-decoration: none;","underline: hidden;","font-style: normal;","text-transform: none;"],"correctAnswer":0,"explanation":"Links have a default text-decoration of underline. Setting it to 'none' removes it."},{"question":"Which CSS property aligns text to the middle of its container?","options":["align-items: center;","text-align: center;","vertical-align: middle;","center-text: true;"],"correctAnswer":1,"explanation":"The 'text-align' property controls the horizontal alignment of text within a block element."},{"question":"How do you automatically force text to be ALL CAPS via CSS?","options":["font-weight: uppercase;","text-transform: uppercase;","font-style: caps;","text-decoration: capitalize;"],"correctAnswer":1,"explanation":"The 'text-transform' property can instantly convert text to uppercase, lowercase, or capitalized without altering the HTML."},{"question":"What is the proper way to import a Google Font into your project?","options":["Download the file and use a <script> tag","Use an <img> tag","Place a <link> tag pointing to the Google Fonts URL inside the <head>","Use the CSS property google-font: 'Name';"],"correctAnswer":2,"explanation":"Google Fonts provides a <link rel=\"stylesheet\"> tag that you paste into your HTML's <head> to load the font files directly from their servers."}]},{"id":"fe-10","title":"10. The CSS Box Model","duration":"55 Mins","level":"intermediate","type":"interactive","locked":false,"content":"$24","quiz":[{"question":"What is the innermost layer of the CSS Box Model?","options":["Margin","Padding","Content","Border"],"correctAnswer":2,"explanation":"The Content area is the absolute center, holding the actual text, image, or child elements."},{"question":"Which property defines the space between the Content and the Border?","options":["Margin","Spacing","Gutter","Padding"],"correctAnswer":3,"explanation":"Padding pushes the border away from the content, acting as internal spacing."},{"question":"Which property creates empty space OUTSIDE the border, pushing other elements away?","options":["Margin","Padding","Offset","Border-Spacing"],"correctAnswer":0,"explanation":"Margin creates invisible space outside the element, ensuring it doesn't bump into other elements."},{"question":"If you write `padding: 10px 20px;`, what does it mean?","options":["10px top/bottom, 20px left/right","10px top/left, 20px bottom/right","10px all sides, 20px margin","10px left/right, 20px top/bottom"],"correctAnswer":0,"explanation":"The 2-value shorthand sets the top and bottom with the first value, and the left and right with the second value."},{"question":"If you write `margin: 5px 10px 15px 20px;`, what side gets 15px?","options":["Top","Right","Bottom","Left"],"correctAnswer":2,"explanation":"The 4-value shorthand always runs clockwise starting from the top: Top, Right, Bottom, Left."},{"question":"What is the default box-sizing behavior in CSS?","options":["box-sizing: border-box","box-sizing: padding-box","box-sizing: content-box","box-sizing: margin-box"],"correctAnswer":2,"explanation":"By default, CSS uses 'content-box', meaning padding and borders are added ON TOP of the specified width, making elements unexpectedly larger."},{"question":"Why do professionals reset every element to `box-sizing: border-box`?","options":["It removes all margins","It makes elements render faster","It forces the specified width to include the padding and border, making layouts predictable","It turns square boxes into circles"],"correctAnswer":2,"explanation":"With border-box, if you say width: 200px, the element stays exactly 200px wide. The padding is absorbed inwards instead of expanding outwards."},{"question":"How do you make an element perfectly circular using borders?","options":["border-circle: true;","border-radius: 50%;","box-shape: circle;","border-style: round;"],"correctAnswer":1,"explanation":"Applying a border-radius of 50% to a perfectly square element will turn it into a circle."},{"question":"What are the three required values to create a border? (e.g. `border: 2px solid black;`)","options":["Width, Style, Color","Radius, Color, Width","Margin, Padding, Color","Style, Color, Shadow"],"correctAnswer":0,"explanation":"A valid border declaration requires a width (e.g., 2px), a style (e.g., solid, dashed), and a color."},{"question":"What does the `*` selector do in CSS?","options":["Selects all bold text","Selects the <body> tag","Selects all elements universally","Selects all elements with a class"],"correctAnswer":2,"explanation":"The asterisk (*) is the universal selector. It targets every single element on the page."}]},{"id":"fe-11","title":"11. Display & Positioning","duration":"55 Mins","level":"intermediate","type":"interactive","locked":false,"content":"$25","quiz":[{"question":"Which display type forces an element to take up the full 100% width available, pushing the next element to a new line?","options":["display: inline","display: block","display: absolute","display: flex"],"correctAnswer":1,"explanation":"Block elements (like <div> or <h1>) are greedy. They consume the entire horizontal row by default."},{"question":"Which display type allows elements to sit side-by-side but IGNORES top and bottom margin/padding adjustments?","options":["display: block","display: inline","display: inline-block","display: grid"],"correctAnswer":1,"explanation":"Inline elements (like <span> or <a>) wrap tightly to text. They sit side-by-side but you cannot safely apply vertical margins or paddings to them."},{"question":"If you want buttons to sit side-by-side but still respect height, width, and padding, what display type is best?","options":["inline","block","inline-block","static"],"correctAnswer":2,"explanation":"Inline-block gives you the best of both worlds: they sit side-by-side like inline elements, but behave like blocks allowing you to set width and padding."},{"question":"What is the default position of every HTML element?","options":["position: relative","position: absolute","position: static","position: fixed"],"correctAnswer":2,"explanation":"By default, elements are static. They flow naturally down the page and ignore properties like 'top', 'left', or 'z-index'."},{"question":"What does `position: relative` do?","options":["Takes the element out of the document flow entirely","Keeps it in normal flow, but allows you to visually offset it using top/left/right/bottom","Pins it to the browser window","Makes it act like a flex container"],"correctAnswer":1,"explanation":"Relative positioning leaves a 'ghost' in the element's original spot to maintain layout, but lets you push the visible element around."},{"question":"How does `position: absolute` behave?","options":["It centers the element perfectly","It pins the element relative to the screen, ignoring scrolling","It completely removes the element from normal document flow and pins it to the nearest positioned ancestor","It acts like display: block"],"correctAnswer":2,"explanation":"Absolute elements float above the layout. They look up the DOM tree until they find an ancestor with position: relative, and pin themselves to that container."},{"question":"If an element has `position: fixed`, what is it pinned relative to?","options":["Its parent container","The previous element","The browser window (viewport)","The bottom of the document"],"correctAnswer":2,"explanation":"Fixed elements lock themselves to the browser window. When the user scrolls the page, the fixed element stays exactly where it is on the screen."},{"question":"What does `position: sticky` do?","options":["Acts like relative until you scroll past it, then locks like fixed","Glues two elements together","Fixes an element to the bottom of the page permanently","Makes an element unclickable"],"correctAnswer":0,"explanation":"Sticky is a hybrid. It scrolls normally until it hits a specified threshold (like top: 0), at which point it 'sticks' to the screen."},{"question":"Which CSS property controls the stacking order of overlapping positioned elements (which one is in front)?","options":["layer-index","stack-order","z-index","depth"],"correctAnswer":2,"explanation":"The z-index property (like the Z-axis in 3D geometry) dictates layering. Higher numbers appear in front of lower numbers."},{"question":"Can you use `z-index` on an element with `position: static`?","options":["Yes","No, z-index only works on positioned elements (relative, absolute, fixed, sticky)","Only if display is block","Only on images"],"correctAnswer":1,"explanation":"z-index does nothing to default (static) elements. You must change the position property to relative, absolute, fixed, or sticky first."}]},{"id":"fe-12","title":"12. CSS Flexbox","duration":"70 Mins","level":"upper-intermediate","type":"interactive","locked":false,"content":"$26","quiz":[{"question":"Which element do you apply `display: flex` to?","options":["To the children you want to align","To the parent container","To the <body> tag only","To inline elements only"],"correctAnswer":1,"explanation":"Flexbox is applied to the parent container. Once applied, its direct children become 'flex items' and can be arranged."},{"question":"By default, what direction do flex items arrange themselves in?","options":["A vertical column","A horizontal row","A diagonal grid","They stack on top of each other"],"correctAnswer":1,"explanation":"The default flex-direction is 'row', meaning items sit side-by-side from left to right."},{"question":"Which property controls the alignment of items along the main axis (usually horizontally)?","options":["align-items","justify-content","flex-wrap","margin-auto"],"correctAnswer":1,"explanation":"justify-content pushes items left, right, center, or spaces them out evenly along the main flow."},{"question":"Which property controls alignment along the cross axis (usually vertically)?","options":["justify-content","flex-direction","align-items","vertical-align"],"correctAnswer":2,"explanation":"align-items is used to center items vertically inside the flex container, or push them to the top/bottom."},{"question":"How do you achieve perfect horizontal and vertical centering using Flexbox?","options":["display: flex; margin: auto;","display: flex; justify-content: center; align-items: center;","align: center; vertical-align: middle;","display: inline-block; text-align: center;"],"correctAnswer":1,"explanation":"Combining justify-content: center (horizontal) and align-items: center (vertical) perfectly centers children."},{"question":"What does `justify-content: space-between` do?","options":["Centers everything with equal margins","Pushes the first item far left, the last item far right, and evenly spaces the rest in the middle","Adds padding to the container","Reverses the order of the items"],"correctAnswer":1,"explanation":"space-between is highly popular for Navbars. It anchors the outer elements to the edges and splits remaining space between middle elements."},{"question":"How can you change a flex container to stack its items vertically?","options":["flex-direction: column","display: block","justify-content: vertical","align-items: stack"],"correctAnswer":0,"explanation":"Changing flex-direction from 'row' to 'column' flips the axis, stacking items top-to-bottom."},{"question":"What does the `gap` property do in a flex container?","options":["Adds padding to the outside","Creates uniform spacing between the flex items without adding margin to the outer edges","Forces items to wrap","Changes the background color"],"correctAnswer":1,"explanation":"The gap property cleanly creates gutters/spacing directly between flex children, replacing old, messy margin hacks."},{"question":"What happens if you have 10 large flex items but the container is too narrow?","options":["They automatically drop to a new line","By default, they shrink to fit, or overflow the container in a single line","The container crashes","The items disappear"],"correctAnswer":1,"explanation":"By default, flex items try to stay on one line (flex-wrap: nowrap). You must explicitly set 'flex-wrap: wrap' if you want them to break to new lines."},{"question":"Can you use Flexbox inside another Flexbox?","options":["No, it creates a CSS conflict","Yes, nesting flex containers is a very common and powerful pattern","Only if the child is a column","Only in CSS Grid"],"correctAnswer":1,"explanation":"You can nest flex containers infinitely. A nav bar can be a flex row, and the links inside it can be a separate flex row."}]},{"id":"fe-13","title":"13. CSS Grid","duration":"65 Mins","level":"upper-intermediate","type":"interactive","locked":false,"content":"$27","quiz":[{"question":"What is the primary difference between Flexbox and CSS Grid?","options":["Flexbox is for 1D layouts (row OR column), Grid is for 2D layouts (rows AND columns simultaneously)","Grid is older and deprecated","Flexbox only works for text, Grid is for images","There is no difference, they do the exact same thing"],"correctAnswer":0,"explanation":"Flexbox excels at lining things up in a single direction. Grid excels at building complex, checkerboard-style layouts across two axes."},{"question":"Which property defines the number and width of columns in a grid?","options":["grid-columns-count","grid-template-columns","display-columns","column-width"],"correctAnswer":1,"explanation":"grid-template-columns takes a list of values (like 1fr 1fr 1fr) to explicitly define how many columns there are and how wide they should be."},{"question":"What does the `fr` unit stand for in CSS Grid (e.g., `1fr`)?","options":["Frame","Fraction","Free","Fixed Ratio"],"correctAnswer":1,"explanation":"The 'fr' unit represents a fraction of the available free space. '1fr 1fr 1fr' creates three perfectly equal columns."},{"question":"How do you create a 4-column grid using the `repeat()` function?","options":["grid-template-columns: repeat(4, 1fr);","grid-columns: 4;","grid-template: 4fr;","repeat-columns: 4 1fr;"],"correctAnswer":0,"explanation":"The repeat() function is a shorthand. repeat(4, 1fr) is exactly the same as writing '1fr 1fr 1fr 1fr'."},{"question":"How can you make a single child element stretch across two columns?","options":["width: 200%;","grid-span: 2;","grid-column: span 2;","display: double;"],"correctAnswer":2,"explanation":"Using 'grid-column: span 2' tells that specific child item to stretch across two tracks in the grid."},{"question":"Can you define both rows and columns in the same container?","options":["No, only one at a time","Yes, using grid-template-columns and grid-template-rows","Only if you use nested divs","Only if all cells are square"],"correctAnswer":1,"explanation":"Grid is 2-dimensional. You can explicitly set the width of columns and the height of rows on the same parent container."},{"question":"What does the `gap` property do in CSS Grid?","options":["Sets the outer margin","Creates blank spacing between the grid rows and columns","Changes the background color of empty cells","Makes the grid responsive"],"correctAnswer":1,"explanation":"Just like in Flexbox, the gap property creates consistent internal gutters between the cells."},{"question":"If you define a 3-column grid, but put 5 child items inside it, what happens?","options":["The 4th and 5th items disappear","The browser crashes","Grid automatically creates a second row and places the 4th and 5th items there","The items shrink to fit on one row"],"correctAnswer":2,"explanation":"CSS Grid has an implicit grid system. If it runs out of defined columns, it auto-generates a new row below to hold the overflow items."},{"question":"Which of these is best suited for an overall webpage skeleton (Header, Sidebar, Main, Footer)?","options":["Flexbox","CSS Grid","Absolute Positioning","Floats"],"correctAnswer":1,"explanation":"Grid is built specifically for macroscopic, 2D architectural layouts like a page skeleton."},{"question":"What does `grid-template-columns: 200px 1fr 200px;` create?","options":["An error","Three equal columns","A fixed left sidebar, a flexible middle area, and a fixed right sidebar","A layout that only works on desktop"],"correctAnswer":2,"explanation":"You can mix fixed units (px) with fractional units (fr). The middle column will absorb all remaining space between the two fixed sidebars."}]},{"id":"fe-14","title":"14. CSS Variables & Custom Properties","duration":"35 Mins","level":"intermediate","type":"interactive","locked":false,"content":"$28","quiz":[{"question":"What is the primary advantage of using CSS Variables (Custom Properties)?","options":["They make the CSS file download faster","You can define a value once and reuse it, making global design changes instantaneous","They allow you to write JavaScript inside CSS","They automatically make the site responsive"],"correctAnswer":1,"explanation":"Variables enforce consistency. If your brand color changes, you update the variable in one place, and every button on the site updates instantly."},{"question":"What syntax is required to DECLARE a CSS variable?","options":["$$var-name: blue;","@var-name: blue;","--var-name: blue;","var(name): blue;"],"correctAnswer":2,"explanation":"Native CSS variables must be prefixed with two hyphens (e.g., --primary-color)."},{"question":"Where are global CSS variables typically defined so the whole document can access them?","options":["Inside the <body> tag","Inside the :root pseudo-class","At the bottom of the file","Inside an @import statement"],"correctAnswer":1,"explanation":"The :root selector targets the highest level of the document tree (the <html> element), making the variables globally accessible."},{"question":"What syntax is used to USE (call) a CSS variable in a rule?","options":["color: $primary;","color: --primary;","color: get(--primary);","color: var(--primary);"],"correctAnswer":3,"explanation":"You must wrap the variable name in the var() function to insert its value into a property."},{"question":"Can CSS variables store values other than colors?","options":["No, only hex and RGB colors","Yes, they can store spacing (px), fonts, borders, or any valid CSS value","Only numbers","Only strings"],"correctAnswer":1,"explanation":"Custom properties can hold any CSS value. You can create variables for padding (--spacing: 16px), font stacks, or border-radius."},{"question":"Are CSS variables case-sensitive?","options":["Yes, --Primary is different from --primary","No, they are case-insensitive","Only in Firefox","Only when storing colors"],"correctAnswer":0,"explanation":"CSS Custom Properties are strictly case-sensitive. --mainColor and --maincolor are two completely separate variables."},{"question":"How do CSS variables make implementing Dark Mode easier?","options":["They automatically detect the user's OS preference","You can redefine the variables under a dark theme selector, and the whole UI updates without rewriting component CSS","They generate black backgrounds automatically","They don't, JavaScript is required for Dark Mode"],"correctAnswer":1,"explanation":"By changing the values of your color variables when a dark class/attribute is applied, the entire site repaints instantly without touching individual element rules."},{"question":"Can CSS variables be updated live using JavaScript?","options":["No, they are compiled","Yes, using the setProperty() method in JS","Only if the page refreshes","Only in Node.js"],"correctAnswer":1,"explanation":"Unlike Sass variables which compile to static CSS, native CSS variables exist in the DOM and can be dynamically altered by JavaScript."},{"question":"What happens if you use `var(--does-not-exist)`?","options":["The browser crashes","The property falls back to its inherited or default value","It defaults to black","It throws a syntax error"],"correctAnswer":1,"explanation":"If a variable is invalid or undefined, the browser treats the property as if it was set to 'unset' or 'initial'."},{"question":"How can you provide a fallback value in case a CSS variable is undefined?","options":["var(--color) || blue","fallback: blue;","var(--color, blue)","var(--color) ? blue"],"correctAnswer":2,"explanation":"The var() function accepts a second argument as a fallback. `var(--main-color, black)` will use black if --main-color isn't defined."}]},{"id":"fe-15","title":"15. Transitions & Animations","duration":"50 Mins","level":"upper-intermediate","type":"interactive","locked":false,"content":"$29","quiz":[{"question":"What is the primary difference between a CSS Transition and a CSS Animation?","options":["Transitions require JavaScript, animations do not","Transitions interpolate between two states (e.g. normal and hover), while Animations can follow multi-step keyframes autonomously","Animations are older and deprecated","Transitions only work on colors"],"correctAnswer":1,"explanation":"Transitions require a trigger (like :hover) to move from State A to State B. Animations use @keyframes to play complex sequences automatically."},{"question":"Where should you place the `transition` property for a hover effect?","options":["On the :hover pseudo-class","On the base element class","On the <body> tag","Inside a @keyframes block"],"correctAnswer":1,"explanation":"Always place it on the base state (e.g., .btn). This ensures the animation happens smoothly both when the mouse enters AND leaves the element."},{"question":"What does the `transform: translateY(-4px);` property do?","options":["Shrinks the element by 4 pixels","Moves the element UP by 4 pixels","Moves the element DOWN by 4 pixels","Rotates it 4 degrees"],"correctAnswer":1,"explanation":"On the Y-axis (vertical), negative values move elements UP the screen, making it look like it's lifting off the page."},{"question":"Which transition timing function starts slow, speeds up, and ends slow?","options":["linear","ease","step","fast-slow"],"correctAnswer":1,"explanation":"The 'ease' timing function provides a natural, smooth acceleration and deceleration, making it the most popular choice for UI."},{"question":"What CSS rule is used to define the actual steps of a complex animation?","options":["@animation","@media","@keyframes","@steps"],"correctAnswer":2,"explanation":"The @keyframes rule allows you to define exactly what an animation looks like at 0%, 50%, 100%, or 'from' and 'to'."},{"question":"How do you make an animation run forever without stopping?","options":["animation-loop: true;","animation-iteration-count: infinite;","loop: forever;","play: infinite;"],"correctAnswer":1,"explanation":"Setting the iteration count to 'infinite' (often used in shorthand like `animation: spin 1s infinite;`) causes it to loop endlessly."},{"question":"What does `transition: all 0.3s ease;` do?","options":["Fades all elements on the page in 0.3 seconds","Animates any changed property on that specific element over 0.3 seconds with smooth easing","Only animates color changes","Delays the animation by 0.3 seconds"],"correctAnswer":1,"explanation":"The 'all' keyword tells the browser to automatically animate ANY property (color, size, position) that changes."},{"question":"Which of these properties is the most performant to animate without causing layout lag?","options":["width","margin","transform","padding"],"correctAnswer":2,"explanation":"Animating transform (and opacity) is hardware-accelerated by the GPU. Animating width or margin forces the browser to expensively recalculate the entire page layout."},{"question":"What is the `:hover` pseudo-class used for?","options":["Creating tooltips","Applying styles only when the user's mouse cursor is resting over the element","Hiding elements","Triggering JavaScript"],"correctAnswer":1,"explanation":"The :hover state is triggered exactly when the pointer intersects the element, commonly used to trigger CSS transitions."},{"question":"If an animation uses `from` and `to`, what percentages do they represent?","options":["from is 1%, to is 99%","from is 0%, to is 100%","from is start, to is half","They are random"],"correctAnswer":1,"explanation":"In @keyframes, 'from' is just an alias for 0% (the start), and 'to' is an alias for 100% (the end)."}]},{"id":"fe-16","title":"16. Responsive Design","duration":"55 Mins","level":"advanced","type":"interactive","locked":false,"content":"$2a","quiz":[{"question":"What is the primary goal of Responsive Web Design?","options":["To make the site load faster","To ensure the layout looks good and functions well across all screen sizes (mobile, tablet, desktop)","To write CSS in JavaScript","To make images higher resolution"],"correctAnswer":1,"explanation":"Responsive design ensures that UI elements flexibly scale, stack, or hide based on the user's viewport, providing a seamless experience on any device."},{"question":"What CSS feature allows you to apply styles ONLY when the screen is a certain size?","options":["@responsive","@screen","@media queries","if/else statements"],"correctAnswer":2,"explanation":"@media queries act as conditional statements in CSS, overriding default styles when the viewport matches the specified width."},{"question":"What does `@media (max-width: 768px)` mean?","options":["Apply these styles only if the screen is exactly 768px","Apply these styles only on screens LARGER than 768px","Apply these styles only on screens 768px or SMALLER","Scale the screen to 768px"],"correctAnswer":2,"explanation":"max-width: 768px creates a ceiling. The styles inside will only trigger when the viewport shrinks to 768 pixels or below (typical mobile/tablet size)."},{"question":"What is the `vw` unit in CSS?","options":["Vertical Width","Viewport Width (1vw = 1% of the screen's total width)","Visual Weight","Vector Width"],"correctAnswer":1,"explanation":"Viewport Width (vw) is a relative unit. If the browser window is 1000px wide, 50vw equals exactly 500px."},{"question":"How does `width: 100%` differ from `width: 100vw`?","options":["They are exactly identical","100% is relative to the parent container, 100vw is relative to the entire screen size","100vw is only for mobile","100% ignores padding"],"correctAnswer":1,"explanation":"Percentage (%) calculates based on the element's direct parent box. Viewport units (vw/vh) ignore parents and calculate based strictly on the browser window."},{"question":"What does `max-width: 100%` do when applied to an `<img>`?","options":["Stretches the image to fit the screen","Ensures the image never scales larger than its container, preventing overflow on small screens","Makes the image square","Hides the image on mobile"],"correctAnswer":1,"explanation":"This is the golden rule of responsive images. It allows the image to shrink responsively but prevents it from breaking out of its container."},{"question":"What does the `clamp()` function do in CSS?","options":["Hides an element","Sets a minimum, preferred (fluid), and maximum value for a property","Locks the screen rotation","Clamps colors to safe web values"],"correctAnswer":1,"explanation":"clamp(1rem, 2vw, 3rem) is amazing for fluid typography. Text scales with the screen (2vw) but will never drop below 1rem or grow above 3rem."},{"question":"What is 'Mobile-First' design?","options":["Designing the desktop site and then shrinking it","Writing the default CSS for mobile screens first, then using `min-width` media queries to add complexity for larger screens","Only building a mobile app","Hiding images on mobile devices"],"correctAnswer":1,"explanation":"Mobile-First is a best practice where base CSS targets small screens. You then use `@media (min-width: 1024px)` to un-stack layouts for desktop."},{"question":"Which meta tag is absolutely required in your HTML `<head>` for responsive design to work on smartphones?","options":["<meta name=\"mobile\">","<meta name=\"responsive\" content=\"true\">","<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">","<meta device=\"phone\">"],"correctAnswer":2,"explanation":"Without the viewport meta tag, iPhones and Androids will stubbornly pretend they are desktop monitors and render your page tiny and zoomed out."},{"question":"If you have a 3-column CSS Grid, how do you easily make it stack into 1 column on mobile?","options":["Change it to display: block","Use a media query to change `grid-template-columns: 1fr;` on small screens","Use JavaScript to delete the columns","Apply float: left"],"correctAnswer":1,"explanation":"The beauty of Grid is that changing a single property inside a media query (grid-template-columns) instantly reflows the entire layout."}]},{"id":"fe-17","title":"17. Final Project: Portfolio","duration":"3 Hours","level":"advanced","type":"project","locked":false,"content":"$2b","quiz":[{"question":"What is the primary purpose of a portfolio website for a developer?","options":["To host a database","To showcase projects, skills, and contact information to potential employers or clients","To replace a GitHub account","To sell physical products"],"correctAnswer":1,"explanation":"A portfolio serves as a live, interactive resume. It proves you can actually build things, which is far more valuable than just listing skills on a PDF."},{"question":"When deploying a static website, what must the main HTML file be named?","options":["main.html","home.html","index.html","app.html"],"correctAnswer":2,"explanation":"Web servers automatically look for a file named 'index.html' to serve as the root page of a directory. Without it, your site won't load by default."},{"question":"Why is `height: 100vh` useful for a Hero section?","options":["It makes the hero section square","It forces the hero section to take up exactly 100% of the viewport's height, filling the entire screen perfectly","It centers the text","It hides the navigation bar"],"correctAnswer":1,"explanation":"Viewport Height (vh) ensures that no matter what device the user is on, the hero section will perfectly frame their screen before they start scrolling."},{"question":"What is the benefit of hosting a static portfolio on Netlify or GitHub Pages?","options":["It costs a lot of money","It requires backend servers","It is completely free, secure, and lightning fast since there is no backend database to manage","It only works on desktop"],"correctAnswer":2,"explanation":"Static hosting platforms serve pre-built HTML/CSS/JS globally via CDNs, making them free, unhackable, and incredibly fast."},{"question":"What is a 'semantic structure' in the context of a portfolio?","options":["Using IDs instead of classes","Organizing the page with meaningful tags like <header>, <main>, <section>, and <footer> instead of just <div>s","Making the site responsive","Using CSS Grid"],"correctAnswer":1,"explanation":"Semantic tags make your portfolio accessible to screen readers and optimize it for search engines (SEO), which employers look for."},{"question":"If your portfolio has a dark theme, what CSS feature is best for storing your exact hex codes?","options":["CSS Grid","Media Queries","CSS Variables (:root)","Inline styles"],"correctAnswer":2,"explanation":"Storing your theme colors in CSS Custom Properties (--primary, --dark) ensures absolute consistency across the entire project."},{"question":"What CSS property ensures a sticky navbar stays on top of other scrolling content?","options":["opacity","z-index","display","margin"],"correctAnswer":1,"explanation":"Because a sticky navbar can overlap other elements, giving it a high z-index (e.g., z-index: 100) ensures it renders in front of everything else."},{"question":"Why apply `box-shadow` on hover to portfolio cards?","options":["To make the code shorter","To fix mobile layout bugs","To provide visual feedback and depth, making the UI feel interactive and tactile","To hide the border"],"correctAnswer":2,"explanation":"Hover states (like a slight lift and a shadow) reassure the user that the element is clickable, greatly improving the User Experience (UX)."},{"question":"In a modern portfolio, which layout system is best for aligning the logo to the left and links to the right in a navbar?","options":["Floats","Flexbox (justify-content: space-between)","Absolute positioning","CSS Tables"],"correctAnswer":1,"explanation":"Flexbox with 'space-between' naturally pushes the first item (logo) to the far left and the last item (nav links) to the far right."},{"question":"What is the final, most crucial step before sending your portfolio link to a recruiter?","options":["Changing the background color","Testing the live URL on a real mobile phone to ensure responsiveness is actually working","Adding 10 more projects","Buying an expensive domain"],"correctAnswer":1,"explanation":"Recruiters and managers will likely open your link on their phones. If the mobile view is broken, your technical skills will immediately be doubted."}]}],"completedModuleIds":[],"resourceLink":"https://drive.google.com/drive/folders/1QB8ZMtSo6h8VMaYT_9ZFLIKwRsVr1Y_q?usp=drive_link","routePrefix":"/learn/linear-masterclasses/masterclasses/frontend-core"}],"$L2c"]}] </article></body></html>

14. CSS Variables & Custom Properties

Knowledge Check

14. CSS Variables & Custom Properties

Knowledge Check