Show:
Vocab
Structure
Attributes
Connections
Flex andDebug
100

Chrome, Edge, Firefox, and Safari are all examples of what type of program?


A web browser


Why: 

A web browser.


100

Which HTML section normally contains the content visitors can see on the webpage?


<body>


Why: 

Headings, paragraphs, images, links, lists, forms, and buttons normally belong inside <body>.

100

Which attribute tells the browser where an image file is located?


src 

Why: 

src means source. It gives the browser the image’s file name, path, or URL.


Example: 

<img src="dog.jpg">


100

What is the main job of CSS?


CSS controls the appearance and layout of a webpage.


Why: 

HTML creates the structure and content. CSS changes how that content looks and is arranged.

100

Which CSS declaration turns an element into a Flexbox container?


display: flex;


200

What word means the rules for writing code correctly?


Syntax 


Why: Every coding language has syntax rules. HTML uses angle brackets around tags, CSS uses colons between properties and values, and Python uses indentation to organize blocks of code. 

200

What text will appear on the browser tab?

<head>  <title>Gaming Club</title> </head>
<body>  <h1>Welcome!</h1> </body>

Gaming Club


Why: 

The <title> element controls the browser-tab text. The <h1> displays “Welcome!” inside the webpage.

200

Explain the job of each attribute:

<img src="dog.jpg" alt="A brown dog running" width="250 height="200">

  • src provides the image location.
  • alt describes the image.
  • width controls the image width.
  • height controls the image height.
200

What does each declaration change?

.card {  color: blue;  background-color: white;  padding: 15px;  border-radius: 10px; }

  • color changes the text color.
  • background-color changes the background.
  • padding adds space inside the card.
  • border-radius rounds the corners.
200

Where should display: flex be placed if the goal is to arrange the two cards beside each other?

<div class="cards">  <div class="card">Games</div>  <div class="card">Art</div> </div>


It should be placed on .cards, the parent container.


Why: 

Flexbox controls how a parent arranges its children. The two .card elements are the children.

300

In this code, what is src="cat.jpg"?

<img src="cat.jpg" alt="A sleeping cat">

An HTML attribute.

Why: 

An attribute provides additional information about an HTML element.

In this example:

  • src is the attribute name.
  • cat.jpg is the attribute value.
  • The attribute tells the browser where to find the image.
300

Which section contains information about the document that does not normally appear as regular page content?


<head>


Why: The <head> can contain:

  • The page title
  • Internal CSS
  • Metadata
  • Other information used by the browser

The visible page content belongs inside <body>.

300

What happens when the user clicks this link?

<a href="https://www.nasa.gov"   target="_blank">  Visit NASA </a>

The NASA website opens in a new browser tab.


Why: 

  • ref provides the destination.
  • target="_blank" opens the destination in a new tab.
  • Visit NASA is the clickable text.


300

Explain how these two pieces of code connect:

<p class="message">Hello!</p>

.message {  color: blue; }

The HTML paragraph has class="message". The CSS uses .message to select every element with that class. The paragraph’s text becomes blue.

300

What is the difference between these values?

flex-direction: row;

flex-direction: column;

  • row arranges the flex items from side to side.
  • column stacks the flex items from top to bottom
400

Identify the selector, property, and value in this CSS rule:

.title {  color: purple; }

  • Selector: .title
  • Property: color
  • Value: purple

Why: The selector chooses what will be styled. The property identifies what will change. The value tells the browser how it should change. 

400

In this code, which element is the parent, and which elements are its children?

<div class="menu">  <button>Play</button>  <button>Settings</button> </div>

  • Parent: <div class="menu">
  • Children: The two <button> elements


Why: A parent contains other elements. An element placed directly inside that parent is one of its children.


400

Explain the difference between type, placeholder, and value in this code:

<input type="text"       placeholder="Enter your name">
<input type="button"       value="Submit">

  • type="text" creates a regular text input.
  • placeholder provides a temporary hint inside the input.
  • type="button" creates an input button.
  • value="Submit" provides the visible words on the button.
400

Why will this paragraph not become purple?

<p class="important-message">  Read this! </p>

.important {  color: purple; }

The names do not match. The HTML uses important-message, while the CSS uses important.


400

The menu items currently stack from top to bottom. The goal is to place them beside each other with space between them. What CSS declarations should be changed?

.menu {  display: flex;  flex-direction: column; }

flex-direction: column stacks the items vertically. Changing it to row arranges them beside each other.

500

What is an identifier, and which of these is the better identifier?

.box1

or

.signup-form

An identifier is a name used to identify something in code. .signup-form is the better name because it explains the element’s purpose.

500

Describe what the browser will display from this code:

<!DOCTYPE html> <html> <head>  <title>Pet Club</title> </head>
<body>  <h1>Welcome to Pet Club</h1>   <ul>    <li>Cats</li>    <li>Dogs</li>  </ul> </body> </html>

The browser tab will say “Pet Club.” The webpage will show the heading “Welcome to Pet Club” followed by a bulleted list containing Cats and Dogs.


Why: 

  • <title> controls the tab.
  • <h1> creates the main heading.
  • <ul> creates an unordered list.
  • <li> creates each list item.


500

Find and correct every problem in this code:

<label for="student-email">Email:</label>
<input id="email" type="text" value="Enter your email">


hint: 3 errors

<label for="student-email">Email:</label>
<input id="student-email" type="email" placeholder="Enter your email">


Why:

  • for="student-email" does not match id="email".
  • An email field should use type="email".
  • A temporary hint should use placeholder, not value.
500

Find and correct all three problems:

<h1 class="page-title">Art Club</h1>

page-title {  color = purple }

.page-title {  color: purple; }

Why:

  1. The class selector needs a period.
  2. CSS uses a colon between the property and value.
  3. The declaration should end with a semicolon.
500

How will the three buttons be arranged?

<div class="menu">  <button>Home</button>  <button>Games</button>  <button>Contact</button> </div>

.menu {  display: flex;  flex-direction: column;  align-items: center; }

The buttons will stack from top to bottom and align in the center.

Why: flex-direction: column stacks the buttons vertically. align-items: center centers them across the other direction.