Skip to content

Instantly share code, notes, and snippets.

@NateWr NateWr/html-css-quiz.md Secret
Last active Feb 8, 2019

Embed
What would you like to do?
A quiz for students who have completed CodeYourFuture's HTML/CSS module.

Read the following code and then answer the questions below.

<div id="alert-article-1" class="alert" role="alert">
	<p>You have one article pending.</p>
	<span class="close-button" role="button" data-target="alert-article-1">Close</span>
</div>
<div class="articles">
	<article id="article-1">
		<h1>Learning HTML for the first time</h1>
		<p class="description">An article about my first three weeks learning HTML and CSS</p>
		<div class="article-actions">
			<button class="btn" aria-controls="article-1">Save</button>
			<button class="btn btn-delete" aria-controls="article-1">Delete</button>
		</div>
	</article>
</div>

HTML Syntax

Write down all of the child tags of the <article> tag.







Write down all of the HTML attribute names.






CSS Selectors

In the HTML code above, which element will the CSS code below be applied to?

.alert {
	border: 1px solid red;
}
  • <p>You have one article pending.</p>
  • <button class="btn" aria-controls="article-1">Save</button>
  • <div class="articles"></div>
  • <div id="alert-article-1" class="alert" role="alert">
  • <span class="close-button" role="button" data-target="alert-article-1">Close</span>
  • <div class="article-actions"></div>

In the HTML code above, which HTML element will the CSS code below be applied to?

h1 + .description {
	margin-top: 0;
}
  • <p>You have one article pending.</p>
  • <h1>Learning HTML for the first time</h1>
  • <div class="article-actions"></div>
  • <p class="description">An article about my first three weeks learning HTML and CSS</p>

Media Queries

What screen sizes will show .article with a blue background?

.article {
	background: blue;
}
@media screen and (min-width: 992px) {
	.article {
		background: green;
	}
}

Hint: All screen sizes show the width first and the height second.

  • 768x1024
  • 800x600
  • 1600x900
  • 1024x768
  • 800x600
  • 320x480
  • 1024x768
  • 1200x800

Flexbox

Write the CSS code that would be needed to arrange the boxes according to the drawing on the left. Write the code in the space on the right.

┌───────────────┐    <div class="container">       .container {
│1      2      3│      <div>1</div>                  display: flex;
│               │      <div>2</div>
│               │      <div>3</div>
│               │    </div>
│               │
└───────────────┘                                  }

Write the CSS code that would be needed to arrange the boxes according to the drawing on the left. Write the code in the space on the right.

┌───────────────┐    <div class="container">       .container {
│               │      <div>1</div>                  display: flex;
│       ☐       │      <div>☐☐☐</div>
│  1    ☐    3  │      <div>3</div>
│       ☐       │    </div>
│               │
└───────────────┘                                  }

Git

What is the difference between a "local" and "remote" repository?

  • A local repository is on my computer and a remote repostory is on a different computer.
  • A local repository is my repository and a remote repository is someone else's repository.
  • A local repository is the one with my feature branch and a remote repository is where the master branch is.

What command would you use to create a new branch called "my-feature"?

  • git checkout my-feature
  • git create-new-branch my-feature
  • git checkout -b my-feature
  • git branch my-feature
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.