Life if sharing. Check your quizzes with mine.
Donate
User login
CSS section of Front End Developer
Lesson 5: CSS Syntax
====================
3. Quiz: CSS or HTML?
---------------------
Option: 3
5. Quiz: CSS Syntax
-------------------
<!DOCTYPE html>
<html>
<head>
<title>Quiz - Hello, world!</title>
<style>
p {
color: blue;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>Hello, world!</h1>
<p>Are you ready for your first challenge?</p>
<p>Let's add some style to this webpage!</p>
</body>
</html>
7. Quiz: Tag Selectors
----------------------
Option: 2 (all paragraphs)
9. Quiz: Using Selectors
------------------------
Options: 1, 4
10. Quiz: Using CSS References
------------------------------
1. to italicize: font-style
2. to underline: text-decoration
3. to uppercase: text-transform
4. to bold: font-weight
15. Quiz: Units in CSS
----------------------
<!DOCTYPE html>
<html>
<head>
<title>Quiz - Units in CSS</title>
<style>
.first {
width: 100px;
}
.second {
height: 200px;
}
.third {
margin: 1em;
}
.fourth {
font-size: 2em;
}
</style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
<div class="third">Hammock ex plaid nulla. Nihil stumptown gastropub, dreamcatcher gochujang franzen cillum cliche keffiyeh pop-up pug small batch knausgaard. Fanny pack elit you probably haven't heard of them before they sold out. Sint elit tofu et veniam irony 3 wolf moon. VHS slow-carb trust fund chartreuse wolf. Qui sed dreamcatcher cronut, hoodie fixie normcore. Gochujang dolor consectetur post-ironic.</div>
<div class="fourth">Hammock ex plaid nulla. Nihil stumptown gastropub, dreamcatcher gochujang franzen cillum cliche keffiyeh pop-up pug small batch knausgaard. Fanny pack elit you probably haven't heard of them before they sold out. Sint elit tofu et veniam irony 3 wolf moon. VHS slow-carb trust fund chartreuse wolf. Qui sed dreamcatcher cronut, hoodie fixie normcore. Gochujang dolor consectetur post-ironic.</div>
</body>
</html>
17. Quiz: Identifying Colors
----------------------------
Options: 2, 3, 5
Lesson 6: CSS Syntax Problem Set
================================
2. Quiz: Style an Image
-----------------------
<!DOCTYPE html>
<html>
<head>
<title>Style an Image Quiz</title>
<style>
.kitten-image {
border: 5px dashed salmon;
border-radius: 5px;
cursor: pointer;
box-shadow: 5px 5px 20px #ccc;
}
</style>
</head>
<body>
<img src="http://udacity.github.io/fend/lessons/L3/problem-set/02-style-an-image/k... alt="kitten" class="kitten-image">
</body>
</html>
![http://udacity.github.io/fend/lessons/L3/problem-set/02-style-an-image/k...](http://udacity.github.io/fend/lessons/L3/problem-set/02-style-an-image/kitten.jpg"){kind=link}
3. Quiz: Style the Font
-----------------------
<!DOCTYPE html>
<html>
<head>
<title>Style the Font Quiz</title>
<style>
.udacity-text {
font-family: Helvetica, Arial, sans-serif;
font-size: 60px;
color: #8001ff;
text-transform: uppercase;
text-decoration: underline;
}
</style>
</head>
<body>
<h1 class="udacity-text">udacity</h1>
</body>
</html>
5. Quiz: Writing Selectors
--------------------------
<!DOCTYPE html>
<html>
<head>
<title>Writing Selectors Quiz</title>
<style>
#menu {
text-align: center;
}
.item {
color: red;
}
.picture {
border-radius: 5px;
}
.description {
font-style: italic;
}
</style>
</head>
<body>
<div id="menu">
<h1 class="item">Chicken Clay Pot</h1>
<img src="img/clay-pot.jpg" alt="clay pot" class="picture">
<p class="description">Crispy rice baked in clay pot topped with chicken and vegetables</p>
</div>
</body>
</html>
6. Quiz: Using Attributes
-------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Using Attributes Quiz</title>
<style>
body {
font-family: Arial;
}
#to-do-list {
width: 400px;
background: #2e3d49;
padding: 10px 20px;
}
.title {
color: #fff;
}
.underline {
text-decoration: underline;
}
.list {
list-style-type: circle;
text-align: left;
font-size: 16px;
color: #1fba58;
line-height: 24px;
}
.finished {
color: #f4442f;
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="to-do-list">
<h1 class="title">My To-Do List</h1>
<h2 class="title underline">Chores</h2>
<ul class="list">
<li>load the diswasher</li>
<li>vacuum living room</li>
<li>take out garbage</li>
<li class="finished">sweep the garage</li>
</ul>
<h2 class="title underline">Homework</h2>
<ul class="list">
<li class="finished">brainstorm ideas for Science project</li>
<li class="finished">finish Calculus 2 problems</li>
<li>study for Programming midterm :P</li>
<li>finish Project 0 on Udacity FEND</li>
<li class="finished">find sources for Biology research paper</li>
<li>read first two chapters of The Art of War</li>
</ul>
<h2 class="title underline">Party</h2>
<ul class="list">
<li class="finished">send out invitations</li>
<li>reserve party room at restaurant</li>
<li>order the cake!</li>
</ul>
</div>
</body>
</html>
7. Quiz: Slack Card
-------------------
Sorry, it doesn't work to me in Mozzila.
8. Quiz: Udacity Site Header
----------------------------
Sorry, it doesn't work to me in Mozzila.
10. Quiz: Link to a Stylesheet
------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Link to a Stylesheet Quiz</title>
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="portfolio">
<h1>My Portfolio</h1>
<div class="item">
<img src="img/out-cold.png" width="300">
<span>This specific design features a 3D floating mountain above a weathered, rugged font to insinuate a winter outdoor theme. This logo would be a perfect fit for an outdoor product company or ski resort.</span>
</div>
<div class="item">
<img src="img/retro-beach.png" width="300">
<span>This specific design features a beach-themed fading sunset with palm trees. The fading vertical bars in the sun resemble warmth as it fades away into the sunset.</span>
</div>
</div>
</div>
</body>
</html>