Questions by Stephen

Question 20: Code Analysis

What's wrong with this CSS Grid code?

.grid-container {
  display: grid;
  grid-template-areas: 
    "header header"
    "sidebar main"
    "sidebar footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

grid-template-areas and grid-template-columns cannot be used together The grid areas don't match the defined template (footer should span both columns) grid-template-rows cannot use 'auto' values CSS class names cannot match grid area names

Question 21: Code Analysis

What accessibility issue exists in this HTML form?

<form>
  <div>Name: <input type="text" id="name"></div>
  <div>Email: <input type="email" id="email"></div>
  <div>
    <input type="checkbox" id="newsletter">
    Subscribe to newsletter
  </div>
  <button type="submit">Submit</button>
</form>

Form inputs are missing the 'required' attribute Labels are not properly associated with form inputs The form is missing a method attribute Email input should be type="text" instead

Question 22: Code Analysis

What's incorrect about this CSS animation?

.animated-box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: slide-in 2s ease-in infinite;
}

@keyframes slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@keyframes must be defined before the animation property 'infinite' makes the animation restart abruptly, creating a jarring effect translateX cannot use percentage values ease-in is not a valid animation timing function

Question 23: Code Analysis

What semantic HTML issue exists in this code?

<div class="article">
  <div class="title">Breaking News</div>
  <div class="author">By John Smith</div>
  <div class="date">March 15, 2024</div>
  <div class="content">
    This is the article content...
  </div>
</div>

All div elements should have unique IDs Should use semantic HTML elements like <article>, <h1>, <time>, and <p> instead of generic divs CSS classes should not describe content The date format is incorrect for HTML

Question 24: Code Analysis

What's problematic with this flexbox alignment?

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: space-between;
  height: 300px;
}

justify-content and align-items cannot be used together align-content only works when flex items wrap, but flex-wrap is not set 'center' is not a valid value for justify-content Height must be set in pixels, not fixed values

Question 25: Code Analysis

What CSS specificity issue might occur with these selectors?

/* CSS File */
.navigation ul li a { color: blue; }
nav a { color: red; }
a:hover { color: green; }
#main-nav a { color: purple; }

The ID selector (#main-nav a) will override all other rules regardless of order :hover pseudo-class always takes precedence over other selectors The first rule will always apply because it's more specific All rules have equal specificity and will apply in order

Question 26: Predict Output

How would this grid layout appear?

<div class="grid">
  <div class="item-a">A</div>
  <div class="item-b">B</div>
  <div class="item-c">C</div>
</div>

.grid {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content";
  grid-template-columns: 100px 1fr;
  grid-template-rows: 50px 200px;
}
.item-a { grid-area: header; background: red; }
.item-b { grid-area: sidebar; background: blue; }
.item-c { grid-area: content; background: green; }

Three equal-sized boxes arranged horizontally Red box spanning full width at top, blue box (100px wide) and green box (flexible width) below Three boxes stacked vertically Blue and green boxes at top, red box spanning full width below

Question 27: Predict Output

What would this CSS produce when hovering over the link?

<a href="#" class="button">Click me</a>

.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: blue;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
}
.button:hover {
  background-color: red;
  transform: scale(1.1);
}
.button:active {
  transform: scale(0.95);
}

Button changes from blue to red instantly on hover Button smoothly changes to red and grows 10% larger on hover, shrinks when clicked Button only changes color without any size effects Button shrinks first, then changes color on hover

Question 28: Predict Output

What would be the stacking order of these elements?

<div class="container">
  <div class="box-a">A</div>
  <div class="box-b">B</div>
  <div class="box-c">C</div>
</div>

.container { position: relative; }
.box-a { position: absolute; z-index: 5; background: red; }
.box-b { position: relative; z-index: 10; background: blue; }
.box-c { position: absolute; z-index: 1; background: green; }

A on top, then B, then C at bottom B on top, then A, then C at bottom C on top, then A, then B at bottom Order depends on the content size

Question 29: Predict Output

How would these flex items behave in a 600px container?

<div class="flex-container">
  <div class="item-1">Item 1</div>
  <div class="item-2">Item 2</div>
  <div class="item-3">Item 3</div>
</div>

.flex-container {
  display: flex;
  width: 600px;
}
.item-1 { flex: 1 0 100px; background: red; }
.item-2 { flex: 2 0 100px; background: blue; }
.item-3 { flex: 1 0 200px; background: green; }

All items 200px wide Item 1: 150px, Item 2: 250px, Item 3: 200px Item 1: 100px, Item 2: 200px, Item 3: 300px Items wrap to multiple lines

Question 30: Predict Output

What would this float layout create?

<div class="container">
  <div class="sidebar">Sidebar</div>
  <div class="content">Main content goes here...</div>
  <div class="footer">Footer</div>
</div>

.container { width: 800px; }
.sidebar { 
  float: left; 
  width: 200px; 
  height: 300px; 
  background: gray; 
}
.content { 
  margin-left: 220px; 
  background: lightblue; 
}
.footer { 
  clear: both; 
  background: yellow; 
}

Sidebar and content side by side, with footer floating Sidebar on left, content on right with 20px gap, footer below both All elements stacked vertically Sidebar overlaps the content area

Question 31: Predict Output

What would this pseudo-element CSS create?

<p class="quote">This is an important quote.</p>

.quote {
  position: relative;
  padding: 20px;
  background: lightgray;
}
.quote::before {
  content: """;
  font-size: 4em;
  position: absolute;
  top: -10px;
  left: 10px;
  color: red;
}
.quote::after {
  content: """;
  font-size: 4em;
  position: absolute;
  bottom: -30px;
  right: 10px;
  color: red;
}

A paragraph with quotation marks at the beginning and end of the text A paragraph with large red quotation marks positioned at top-left and bottom-right corners A paragraph with red background and quotation marks A paragraph with quotation marks that replace the original text

Question 32: Predict Output

What would happen with this overflow setup?

<div class="container">
  <div class="box">
    This is a very long text that will definitely exceed the width 
    of its container and should demonstrate overflow behavior.
  </div>
</div>

.container {
  width: 200px;
  height: 100px;
  border: 2px solid black;
}
.box {
  width: 300px;
  height: 150px;
  background: lightblue;
  overflow: hidden;
}

Content wraps within the container Blue box extends beyond container, but text is clipped within the blue box Scrollbars appear on the container Blue box shrinks to fit the container

Question 33: Predict Output

What color will the paragraph text be?

<div class="parent">
  <div class="child">
    <p class="text">What color am I?</p>
  </div>
</div>

.parent {
  color: red;
}
.child {
  color: blue;
}
p {
  color: green;
}
.text {
  /* No color specified */
}

Red (inherited from .parent) Blue (inherited from .child) Green (from p selector) Black (default browser color)

Quiz Questions by Stephen

Student Information