Javascript 2 (short)

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?

Style can change without touching content

How does Separation of Concerns help accessibility?

Cleaner semantic HTML

What is semantic HTML?

HTML with meaning

Give one semantic tag.

Another semantic tag?

Another semantic tag?

Another semantic tag?

Another semantic tag?

Another semantic tag?

Why use semantic tags?

Adds meaning to HTML

What does semantic HTML help with?

Accessibility and SEO

What is the CSS Box Model?

Element sizing and spacing

What is the innermost part?

Content

What surrounds content?

Padding

What surrounds padding?

Border

What surrounds border?

Margin

What does padding do?

Adds space inside element

What does margin do?

Adds space outside element

What is the DOM?

Webpage tree structure

Why is the DOM important?

Allows JavaScript to access and modify elements

What does getElementById return?

One element

Why only one element?

IDs must be unique

What does getElementsByClassName return?

Multiple elements

What is an absolute path?

Full URL with domain

Example of absolute path?

https://example.com/image.png

What is a relative path?

Path based on current folder

Example of relative path?

images/photo.jpg

Default CSS position?

static

What does static positioning do?

Keeps element in normal flow

What does position absolute do?

Removes element from flow

Absolute positioning is relative to?

Nearest positioned ancestor

What is a prototype?

Model to test design

What is low-fidelity prototype?

Simple sketch or wireframe

Why use low-fidelity prototypes?

Test layout and flow quickly

What is high-fidelity prototype?

Detailed interactive design

Why use high-fidelity prototypes?

Mimics final product

What is Bootstrap?

CSS framework

Why use Bootstrap?

Faster development

What does Bootstrap provide?

Prebuilt components

What is Bootstrap’s grid?

Column layout system

How many columns in Bootstrap grid?

12

What happens on small screens in Bootstrap grid?

Columns stack vertically

What happens on large screens in Bootstrap grid?

Columns sit side by side

What is cross-browser consistency?

Same behaviour across browsers

What is a meta tag?

Page metadata

Where is meta tag placed?

What does viewport meta tag do?

Controls scaling on devices

What is responsive web design?

Website works on all screens

Why is responsive design needed?

Mobile usability

What is a CSS media query?

Conditional CSS rule

What conditions do media queries check?

Screen width or device type

What does # selector target?

ID

What does . selector target?

Class

Can multiple elements share a class?

Yes

Can multiple elements share an ID?

No

Where is internal CSS placed?

inside

Where is external CSS linked?

using

What is the role of ?

Metadata, title, CSS links

Is visible?

No

What is the role of ?

Visible content

What content goes in ?

Text, images, links

What is a local variable?

Declared inside a function

What scope does a local variable have?

Local

Where can a local variable be accessed?

Only inside the functi