Javascript 2

What are the three layers in the Separation of Concerns?

1. HTML (Structure), 2. CSS (Presentation), 3. JavaScript (Behaviour)

What is a primary benefit of Separation of Concerns for maintenance?

You can change the website’s appearance using CSS without changing HTML content or structure

How does Separation of Concerns help accessibility?

It keeps HTML clean and semantic, making it easier for screen readers to navigate

What are the four parts of the CSS Box Model from inside to outside?

Content, Padding, Border, Margin

What is padding in the CSS Box Model?

The space between an element’s content and its border

What is margin in the CSS Box Model?

The space outside the border that separates elements

What is the Document Object Model (DOM)?

A tree representation of a webpage that JavaScript can access and modify

What is the difference between getElementById and getElementsByClassName?

getElementById selects one unique element, getElementsByClassName selects multiple elements

What is an absolute path?

A full URL including the domain name, e.g. https://example.com/image.png

What is a relative path?

A file path based on the current folder location, e.g. images/photo

What is the default CSS positioning method?

static

What does position absolute do?

Removes the element from normal flow and positions it relative to the nearest positioned ancestor

What is a low-fidelity prototype?

A simple sketch or wireframe used to test layout and flow

What is a high-fidelity prototype?

A detailed, interactive design that closely resembles the final website

What is Bootstrap?

A front-end CSS framework used to build responsive websites faster

Name three advantages of using Bootstrap.

Faster development, responsive grid system, cross-browser consistency

What does a responsive grid mean in Bootstrap?

A column-based layout that automatically adapts to different screen sizes

What is the role of a meta tag in HTML?

It provides metadata such as descriptions or viewport settings for browsers and search engines

What is the main goal of responsive web design?

To ensure a website works well on all screen sizes

What is a CSS media query?

A rule that applies styles only when certain conditions like screen width are met

What does the # selector target in CSS?

An element by its unique ID

What does the . selector target in CSS?

Elements that share the same class name

Why is semantic HTML important (e.g.

,

)?

It adds meaning to structure, improving accessibility and SEO

What are the three ways to add CSS to a webpage?

Inline, Internal, External

What is the role of the tag?

It contains metadata, the page title, and links to CSS

What is the role of the tag?

It contains all visible webpage conte