HTML
Besides section, article, aside, footer and nav, name two other HTML5 semantic elements that define specific parts of a webpage.
header, main, figure, figcaption, time, mark
What is the difference between the > (child combinator) and the (space) (descendant combinator) in CSS selectors?
> selects only direct children, while (space) selects any descendant
In Flexbox, what is the difference between align-items and align-content, and when would you use one over the other?
align-items aligns items on the current line of a multi-line flex container.
align-content controls the spacing between the lines themselves
What is Sass, and how does it relate to CSS?
Sass is a CSS preprocessor
Sass compiles into regular CSS
What is Bootstrap, and what are some of its key benefits?
Bootstrap is a front-end framework for building responsive websites and web applications
Speed up development, consistency, responsive grid system, and pre-built components.
What is the purpose of the rel attribute in a <link> tag when used for stylesheets, and what is a common value other than "stylesheet"?
The rel attribute specifies the relationship between the current document and the linked document.
Explain the concept of the CSS Specificity hierarchy and name at least three factors, in order of precedence, that contribute to it.
Specificity determines which CSS rule is applied when multiple rules target the same element.
In CSS Grid, what is the purpose of the fr unit, and how does it differ from using percentages?
fr (fractional unit) represents a fraction of the available space in the grid container.
Percentages are relative to the total size of the container
How do you define a variable in Sass?
$primary-color: blue;
How would you create a basic two-column layout in Bootstrap where the columns are equal width on all screen sizes?
<div class="row">
<div class="col">...</div>
<div class="col">...</div>
</div>
What is the purpose of the <meta> tag, and provide two examples of attributes commonly used with it, along with their functions.
Charset="UTF-8"
name="viewport"
name="description"
What are pseudo-classes in CSS, and provide two examples of commonly used pseudo-classes along with their functions?
Pseudo-classes select elements based on a state or condition.
:hover, :active, :nth-child(), :focus,
In either Flexbox or CSS Grid, what is the purpose of the gap (or row-gap and column-gap) property
The gap property (or the individual row-gap and column-gap properties) defines the space between items in a Flexbox or Grid container.
What is a mixin in Sass, and how would you create and include one?
A mixin is a reusable block of CSS declarations.
Create: @mixin my-mixin { color: red; font-size: 16px; }
Include: .element { @include my-mixin; }
What is the purpose of the .container and .container-fluid classes in Bootstrap?
.container provides a responsive fixed-width container.
.container-fluid provides a full-width container that spans the entire viewport.
Describe the purpose of the <iframe> element and give a common use case.
The <iframe> element embeds another HTML document within the current document, creating a nested browsing context
Explain the difference between the following CSS display property values: block, inline, and inline-block
block: Takes up the full width available
inline: Only takes up as much width as necessary
inline-block: Flows like an inline element but you can set width and height properties
You have a Flexbox container with flex-direction: row;. You want the items inside to be centered horizontally and vertically within the container Which Flexbox properties (on the container) would you use to achieve this, and what values would you set them to?
justify-content: center;
align-items: center;
Explain the concept of nesting in Sass and why it's useful.
writing CSS rules inside other CSS rules
It makes code more readable and organized, and avoids repetition of parent selectors.
How would you add a primary-colored button with rounded corners using Bootstrap classes?
<button class="btn btn-primary rounded">My Button</button>
Describe how you would use the <picture> element to provide different image sources based on media queries, and explain the role of the <source> and <img> elements within it.
The <picture> element allows you to specify multiple <source> elements, each with srcset and media attributes
The browser selects the first <source> that matches the current media conditions. The <img> element provides a fallback for browsers that don't support <picture> and acts as the default image if no <source> matches.
What are CSS Custom Properties (variables), and how do they differ from Sass variables?
CSS Custom Properties (declared with --) are variables defined within CSS itself. :root { --primary-color: blue;
Sass variables are processed during compilation and cannot be changed at runtime. $primary-color: blue;
How would you make a three-column layout using CSS Grid where the first column is twice as wide as the other two columns?
display: grid; grid-template-columns: 2fr 1fr 1fr;
ow would you import a partial Sass file named _colors.scss into your main Sass file?
@import "colors";
What class(es) is used to create a basic navigation bar using Bootstrap
navbar, navbar-expand-lg, navbar-light,