NateWr/html-css-quiz.md Secret

## html-css-quiz.md

      
    Raw
  

              html-css-quiz.md
            
          
    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