1/66
Looks like no tags are added yet.
Name | Mastery | Learn | Test | Matching | Spaced | Call with Kai |
|---|
No study sessions yet.
What is Separation of Concerns?
Separating structure, style, and behaviour
Which language handles structure?
HTML
Which language handles presentation?
CSS
Which language handles behaviour?
JavaScript
Why use Separation of Concerns?
Easier maintenance
How does Separation of Concerns help updates?
CSS changes without touching HTML
How does Separation of Concerns help accessibility?
Cleaner semantic HTML
Semantic tag example?
<nav>
Semantic tag example 2?
<footer>
Semantic tag example 3?
<header>
Semantic tag example 4?
<main>
Semantic tag example 5?
<section>
Semantic tag example 6?
<article>
What is the CSS Box Model?
Element sizing and spacing
Box Model innermost part?
Content
Box Model padding?
Inner space
Box Model border?
Outline around padding
Box Model margin?
Outer space
What is the DOM?
Webpage tree structure
DOM allows?
JavaScript access and modification
getElementById returns?
One element
getElementsByClassName returns?
Multiple elements
IDs can repeat?
No
Classes can repeat?
Yes
Absolute path example?
https://example.com/image.png
Relative path example?
images/photo.jpg
Default CSS position?
static
Static position does?
Keeps element in normal flow
Position absolute does?
Removes element from flow
Absolute positioning relative to?
Nearest positioned ancestor
Low-fidelity prototype?
Simple sketch
Low-fidelity purpose?
Test layout and flow
High-fidelity prototype?
Detailed design
High-fidelity purpose?
Simulate final product
Bootstrap is?
CSS framework
Bootstrap advantage 1?
Faster development
Bootstrap advantage 2?
Responsive grid system
Bootstrap advantage 3?
Cross-browser consistency
Bootstrap grid columns?
12
Grid small screens?
Columns stack
Grid large screens?
Columns side by side
Prebuilt Bootstrap components?
Buttons, forms, navbars
Why prebuilt components?
Saves time
Meta tag example?
<meta name="viewport" content="width=device-width, initial-scale=1">
Responsive web design?
Works on all screens
Why responsive design?
Mobile usability
CSS media query?
Conditional CSS rule
Media query checks what?
Screen width or device
ID
. selector targets?
Class
Internal CSS location?
<head> inside <style>
External CSS location?
<head> using <link>
<head> role?
Metadata, title, CSS links
<head> visible?
No
<body> role?
Visible content
<body> content?
Text, images, links
Local variable?
Inside function
Local variable scope?
Local
Local variable accessible where?
Only inside function
Example JS variable?
var x = 5;
Example JS function?
function myFunc() { console.log(x); }
JS string example?
var str = "Hello";
JS curly braces escaped?
{ }
HTML <script> escaped?
<script> JS code </script>
HTML <style> escaped?
<style> CSS rules </style>
HTML <link> escaped?
<link rel="stylesheet" href="style.css">
HTML <meta> escaped?
<meta name="viewport" content="width=device-width, initial-scale=1">