0% found this document useful (0 votes)

159 views

Accessibility

Uploaded by

ilias

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

159 views

Accessibility

Uploaded by

ilias

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 341

ACCESSIBILITY

Introduction to Accessibility
When designing a website, it is important to keep in mind that some users access the Internet in
many different ways. For example, many users with a visual impairment use screen readers to
access content on the Internet.

A screen reader is a piece of software that provides an audio description of a web page’s content.
A screen reader not only reads the visual content out loud, it also reads out element names and
other attributes that make it easier for visually impaired users to navigate a web page.

In the early days of the Internet, many pages were saturated with graphics and flash animations.
Screen readers, unfortunately, could not interpret these types of elements. As such, a person with
a visual impairment might not have been able to perceive important information on a website.
For this reason, the Web Accessibility Initiative (led by W3C) developed standards for making
information on the Internet accessible to all.

These standards fall under a group of guidelines called ARIA, or Accessible Rich Internet
Applications. These guidelines are easily implemented and make web pages accessible to a
broader audience. We’ll learn how to use ARIA roles and properties in this lesson to improve
access for people who are visually impaired.

In this lesson, we will cover these practices:

1. Semantic Elements
2. ARIA Roles
3. ARIA Properties
4. alt Attributes

Instructions

Think about the following questions while you explore index.html:

1. What is unfamiliar to you?

2. Which elements convey information?
3. Which elements are for appearance only?
4. If you read this document from top to bottom, how much sense would it make to you?
<!DOCTYPE html>

<html>

<head>

<title>A Brief History of Programming</title>

<link href="style.css" type="text/css" rel="stylesheet">

<link href="hidden.css" type="text/css" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">

</head>

<body>

<h3>A BRIEF HISTORY OF</h3>

<h1>PROGRAMMING</h1>

</header>

<nav>

<li><a href="#early">Early</a></li>

<li><a href="#middle">Middle</a></li>

<li><a href="#current">Current</a></li>

</ul>

</nav>
<div id="early" class="container">

<span class="aside" role="note">Ada Lovelace is the favorite programmer of the author of this web
page!</span>

<h2>Early</h2>

<div class="p-container" role="presentation">

<p>Below is an image of Ada Lovelace, born in 1815 (<em>Died: 1852</em>). She worked with
Charles Babbage and is known as the first programmer.</p>

<p>Below is an image of Charles Babbage, born in 1791 (<em>Died: 1871</em>). Babbage is

considered the father of the computer.</p>

</div>

<img src="

https://content.codecademy.com/courses/freelance-1/unit-4/img-lovelace.jpg" alt="Ada Lovelace"/>

<div class="timeline" role="presentation">

<div class="date-square" role="presentation">

<p aria-label="Date of Lovelace photo">1840</p>

</div>

<div class="date-square" role="presentation">

<p aria-label="Date of Babbage photo">1850</p>

</div>

</div>
</div>

<div id="middle" class="container">

<h2>Middle</h2>

<div class="p-container" role="presentation">

<p>Below is an image of Grace Hopper, born in 1906 (<em>Died: 1992</em>). She invented the first
compiler and contributed to the COBOL language.</p>

<p>Below is an image of Dennis Ritchie, born in 1941 (<em>Died: 2011</em>). He created the C
programming language (1972) and helped develop Unix.</p>

</div>

<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-hopper.jpg" alt="Grace

Hopper"/>

<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-ritchie.jpg" alt="Dennis

Ritchie"/>

<div class="timeline" role="presentation">

<div class="date-square" role="presentation">

<p aria-label="Date of Hopper photo">1950</p>

</div>

<div class="date-square" role="presentation">

<p aria-label="Date of Ritchie photo">1978</p>

</div>

</div>
</div>

<div id="late" class="container">

<div class="p-container" role="presentation">

<p>Below is an image of Guido Van Rossum, born in 1956. He helped to create the Python language
in 1991.</p>

<p>Below is an image of Yukihiro Matsumoto, born in 1965. He developed Ruby, which was first
available in 1995.</p>

</div>

<div class="timeline" role="presentation">

<div class="date-square" role="presentation">

<p aria-label="Date of Van Rossum photo">1991</p>

</div>

<div class="date-square" role="presentation">

<p aria-label="Date of Matsumoto photo">1995</p>

</div>

</div>
</div>

<div id="current" class="container">

<h2>Current</h2>

<h4>2000 - Present</h4>

<div class="p-container" role="presentation">

<p>Below is an image of Robert Griesemer. He was on the Google team that developed GOLANG,
which first appeared in 2009.</p>

<p>Below is an image of Chris Lattner, a developer at Apple. He helped to write Swift, which first
appeared in 2014.</p>

</div>

<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-lattner.jpg" alt="Chris

Lattner"/>

<div class="timeline" role="presentation">

<div class="date-square" role="presentation">

<p aria-label="Date of Griesemer photo">2010</p>

</div>

<div class="date-square" role="presentation">

<p aria-label="Date of Lattner photo">2014</p>

</div>

</div>
</div>

<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-logo2.png" id="logo" />

<li>The Programming Historical Society</li>

<li>[email protected]</li>

</ul>

</footer>

</body>

</html>
header {

background-color: #0e0e0e;

color: white;

padding: 5px;

position: fixed;

width: 100%;

z-index: 2;

nav {

text-align: right;

margin-bottom: 10px;

position: fixed;

top: 87px;

width: 100%;

z-index: 2;

nav li {

display: inline-block;

width: 60px;

padding: 5px;

text-align: center;

}
nav a {

text-decoration: none;

color: white;

height: 200px;

width: 200px;

display: inline-block;

margin: 0px 5%;

footer {

height: 100px;

color: white;

position: relative;

top: 150px;

footer li {

display: inline;

.container {
text-align: center;

max-width: 980px;

min-width: 625px;

position: relative;

top: 120px;

padding-top: 120px;

.date-square {

width: 55px;

height: 50px;

background-color: white;

position: relative;

bottom: 25px;

display: inline-block;

z-index: 1;

.date-square p {

color: black;

width: 50px;

height: 30px;

background-color: white;

text-align: center;

margin: 0;
position: relative;

top: 10px;

#logo {

height: 100px;

width: auto;

margin: 0px;

position: absolute;

right: 5px;

bottom: 5px;

}
ACCESSIBILITY
Semantic HTML Elements
The quickest way of improving accessibility for screen readers is to use the
appropriate tags for a given task.

For example, developers should wrap a navigation bar in a header tag.

Although the navigation bar could be wrapped in a div element with a class
of header, the native semantics of a header tag allow someone using a screen
reader to understand and navigate a web page more efficiently.

<div id="header">

</div>
In the example above, header content is wrapped in a div tag with the
ID header. While this is valid HTML, an individual using a screen reader will not
understand the purpose of the div is and, instead, will have to piece the web
page together as child elements are read out loud to them.

Native semantics of a tag describe a tag’s intended purpose. For example,

the header tag is intended to contain introductory and navigational elements
such as a logo, links, or a search bar.

<header>

</header>
In the example above, the HTML will render the same exact content present in
the first example. However, this example uses the correct semantic element
(<header>), which allows an individual using a screen reader to easily identify
the purpose of the elements inside of the header.

Here is a list of all the semantic HTML elements that exist.

Instructions

1.
The header of this website is wrapped in a div with the id header.
In index.html, remove this div and wrap this section with opening and
closing <header> tags instead.
Checkpoint 2 Passed
2.
The CSS no longer functions correctly because we changed the name of the
element.

In style.css, change the #header selector to header.

Checkpoint 3 Passed

3.
The navigation of this website is wrapped in a div with the id nav.
In index.html, remove this div and wrap this section with opening and
closing <nav> tags instead.
Checkpoint 4 Passed

4.
Once again, we’ll have to update the CSS stylesheet since we modified the
HTML.

In style.css, change all three #nav selectors to nav.

Checkpoint 5 Passed

5.
The footer of this website is wrapped in a div with the id footer. In index.html,
remove this div and wrap this section with opening and closing <footer> tags
instead.
Checkpoint 6 Passed

6.
Let’s update the CSS stylesheet one more time.

In style.css, change both #footer selectors to footer.

header {

background-color: #0e0e0e;

color: white;

padding: 5px;

position: fixed;

width: 100%;

z-index: 2;

}
nav {

text-align: right;

margin-bottom: 10px;

position: fixed;

top: 87px;

width: 100%;

z-index: 2;

nav li {

display: inline-block;

width: 60px;

padding: 5px;

text-align: center;

nav a {

text-decoration: none;

color: white;

height: 200px;

width: 200px;
display: inline-block;

margin: 0px 5%;

footer {

height: 100px;

color: white;

position: relative;

top: 150px;

footer li {

display: inline;

.container {

text-align: center;

max-width: 980px;

min-width: 625px;

position: relative;

top: 120px;

padding-top: 120px;

.date-square {
width: 55px;

height: 50px;

background-color: white;

position: relative;

bottom: 25px;

display: inline-block;

z-index: 1;

.date-square p {

color: black;

width: 50px;

height: 30px;

background-color: white;

text-align: center;

margin: 0;

position: relative;

top: 10px;

#logo {

height: 100px;

width: auto;

margin: 0px;

position: absolute;
right: 5px;

bottom: 5px;

<!DOCTYPE html>

<html>

<head>

<title>A Brief History of Programming</title>

<link href="style.css" type="text/css" rel="stylesheet">

<link href="hidden.css" type="text/css" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">

</head>

<body>

<h3>A BRIEF HISTORY OF</h3>

<h1>PROGRAMMING</h1>

</header>

<nav>

<ul>

<li><a href="#early">Early</a></li>

<li><a href="#middle">Middle</a></li>
<li><a href="#late">Late</a></li>

<li><a href="#current">Current</a></li>

</ul>

</nav>

<div id="early" class="container">

<span class="aside">Ada Lovelace is the favorite programmer of the author of this web page!</span>

<h2>Early</h2>

<p>Below is an image of Ada Lovelace, born in 1815 (<em>Died: 1852</em>). She worked with
Charles Babbage and is known as the first programmer.</p>

<p>Below is an image of Charles Babbage, born in 1791 (<em>Died: 1871</em>). Babbage is

considered the father of the computer.</p>

</div>

<img src="

https://content.codecademy.com/courses/freelance-1/unit-4/img-lovelace.jpg" />

<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-babbage.jpg" />

</div>

</div>

<div id="middle" class="container">

<h2>Middle</h2>

<p>Below is an image of Grace Hopper, born in 1906 (<em>Died: 1992</em>). She invented the first
compiler and contributed to the COBOL language.</p>

<p>Below is an image of Dennis Ritchie, born in 1941 (<em>Died: 2011</em>). He created the C
programming language (1972) and helped develop Unix.</p>

</div>

<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-hopper.jpg" />

<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-ritchie.jpg" />

</div>

</div>
</div>

</div>

<div id="late" class="container">

<p>Below is an image of Guido Van Rossum, born in 1956. He helped to create the Python language
in 1991.</p>

<p>Below is an image of Yukihiro Matsumoto, born in 1965. He developed Ruby, which was first
available in 1995.</p>

</div>

<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-vanrossum.jpg" />

<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-matusmoto.jpg" />

</div>

</div>

</div>
<div id="current" class="container">

<h2>Current</h2>

<h4>2000 - Present</h4>

<p>Below is an image of Robert Griesemer. He was on the Google team that developed GOLANG,
which first appeared in 2009.</p>

<p>Below is an image of Chris Lattner, a developer at Apple. He helped to write Swift, which first
appeared in 2014.</p>

</div>

<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-griesemer.jpg" />

<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-lattner.jpg" />

</div>

</div>

<ul>

<li>

The Programming Historical Society

</li>

<li>

[email protected]

</li>

</ul>

</footer>

</body>

</html>
ACCESSIBILITY
ARIA Properties
ARIA properties are attributes that you can add to HTML elements. These
attributes provide additional information about elements that might not be
obvious to users of screen readers. Let’s explore a property called aria-label.

<img src="#" alt="A painting of the Shenandoah Valley"/>

<p>Armand Cabrera, 2010</p>
In the example above, a person looking at the web page would likely see
“Armand Cabrera” below the image and use visual clues to infer that he is the
artist. However, for someone using a screen reader it might not be clear what
the paragraph below the image means. The property aria-label gives the
screen reader additional information to read out loud to the user.

<img src="#" alt="A painting of the Shenandoah Valley"/>

<p aria-label="Artist">Armand Cabrera, 2010</p>
In the improved HTML above, a user of a screen reader will know how this
paragraph relates to the image above it.

Other ARIA properties are useful in more complex websites using HTML forms,
JavaScript, and other advanced tools.

For a complete list of ARIA properties, visit the following resource:

 ARIA Techniques

Instructions

1.
In the <p> tag containing 1840, add an aria-label attribute that says Date of
Lovelace photo.
Checkpoint 2 Passed

2.
In the <p> tag containing 1850, add an aria-label attribute that says Date of
Babbage photo. We will add the appropriate aria-label to the rest of the
squares containing the dates of the images for you.
ACCESSIBILITY
Alt Attribute
Some HTML elements have a built-in attribute called alt that works like aria-
label but has additional functionality.

The alt attribute is used to describe an image (or several other elements). A

screen reader will read the value of the alt attribute out loud. However, if the
element cannot be visually seen — whether it is because the user is visually
impaired, an incorrect source is referenced, or the page is being accessed over
a slow connection — the alt attribute will be displayed in its place.

On the other hand, the value of aria-label will never be displayed on the

screen and is a better choice for elements that do not support
the alt attribute.

<img src="#" alt="a kitten snuggling a puppy"/>

In the example above, a screen reader will read out loud “image: a kitten
snuggling a puppy” to the user. If the image doesn’t load properly, the
browser will display this text as a tooltip.

When using the alt attribute, you should adhere to these conventions:

1. In general, the value of alt should concisely describe the image.

2. For images that are also <a> elements, the alt attribute should describe
the source that the link targets.
3. If an image conveys no information (such as a decorative border),
the alt attribute should be empty, but should never be omitted.
4. If an image is described by text near the image, do not duplicate the
description in the alt attribute. Use an empty alt attribute instead.
5. The value of an alt attribute should be no more than 150 characters.

Instructions

1.
Give the logo an alt attribute with the value company logo. This element can be
found in the footer of index.html.
Checkpoint 2 Passed

2.
Give the image of Ada Lovelace an alt attribute with the value Ada Lovelace.
Checkpoint 3 Passed

3.
Give the image of Charles Babbage an alt attribute with the value Charles
Babbage. We will add the rest of the alt tags for you
<!DOCTYPE html>

<html>

<head>

<title>A Brief History of Programming</title>

<link href="style.css" type="text/css" rel="stylesheet">

<link href="hidden.css" type="text/css" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">

</head>

<body>

<h3>A BRIEF HISTORY OF</h3>

<h1>PROGRAMMING</h1>

</header>

<nav>

<li><a href="#early">Early</a></li>

<li><a href="#middle">Middle</a></li>

<li><a href="#current">Current</a></li>

</ul>

</nav>
<div id="early" class="container">

<span class="aside" role="note">Ada Lovelace is the favorite programmer of the author of this web
page!</span>

<h2>Early</h2>

<div class="p-container" role="presentation">

<p>Below is an image of Ada Lovelace, born in 1815 (<em>Died: 1852</em>). She worked with
Charles Babbage and is known as the first programmer.</p>

<p>Below is an image of Charles Babbage, born in 1791 (<em>Died: 1871</em>). Babbage is

considered the father of the computer.</p>

</div>

<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-lovelace.jpg" alt="Ada

Lovelace"/>

<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-babbage.jpg"

alt="Charles Babbage" />

<div class="timeline" role="presentation">

<div class="date-square" role="presentation">

<p aria-label="Date of Lovelace photo">1840</p>

</div>

<div class="date-square" role="presentation">

<p aria-label="Date of Babbage photo">1850</p>

</div>

</div>
</div>

<div id="middle" class="container">

<h2>Middle</h2>

<div class="p-container" role="presentation">

<p>Below is an image of Grace Hopper, born in 1906 (<em>Died: 1992</em>). She invented the first
compiler and contributed to the COBOL language.</p>

<p>Below is an image of Dennis Ritchie, born in 1941 (<em>Died: 2011</em>). He created the C
programming language (1972) and helped develop Unix.</p>

</div>

<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-hopper.jpg" />

<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-ritchie.jpg" />

<div class="timeline" role="presentation">

<div class="date-square" role="presentation">

<p aria-label="Date of Hopper photo">1950</p>

</div>

<div class="date-square" role="presentation">

<p aria-label="Date of Ritchie photo">1978</p>

</div>

</div>
<div id="late" class="container">

<div class="p-container" role="presentation">

<p>Below is an image of Guido Van Rossum, born in 1956. He helped to create the Python language
in 1991.</p>

<p>Below is an image of Yukihiro Matsumoto, born in 1965. He developed Ruby, which was first
available in 1995.</p>

</div>

<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-vanrossum.jpg" />

<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-matusmoto.jpg" />

<div class="timeline" role="presentation">

<div class="date-square" role="presentation">

<p aria-label="Date of Van Rossum photo">1991</p>

</div>

<div class="date-square" role="presentation">

<p aria-label="Date of Matsumoto photo">1995</p>

</div>

</div>
<div id="current" class="container">

<h2>Current</h2>

<h4>2000 - Present</h4>

<div class="p-container" role="presentation">

<p>Below is an image of Robert Griesemer. He was on the Google team that developed GOLANG,
which first appeared in 2009.</p>

<p>Below is an image of Chris Lattner, a developer at Apple. He helped to write Swift, which first
appeared in 2014.</p>

</div>

<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-griesemer.jpg" />

<img src="https://content.codecademy.com/courses/freelance-1/unit-4/img-lattner.jpg" />

<div class="timeline" role="presentation">

<div class="date-square" role="presentation">

<p aria-label="Date of Griesemer photo">2010</p>

</div>

<div class="date-square" role="presentation">

<p aria-label="Date of Lattner photo">2014</p>

</div>

<li>The Programming Historical Society</li>

<li>[email protected]</li>

</ul>

</footer>

</body>

</html>
ACCESSIBILITY
Review: Accessibility
Using ARIA roles and properties, alt attributes, and semantic elements in your HTML is a
simple way to make your website accessible to visually-impaired Internet users.

1. Using semantic HTML elements whenever possible (such as <header> instead

of <div id="header">) will allow screen reader users to navigate your website more
efficiently.
2. The role attribute is used to communicate information about the role of specific
elements.
3. role="presentation" allows a screen reader to skip markup elements that don’t
directly contain useful information.
4. aria-label and other ARIA properties can be used to help users perceive
information that is communicated visually but not through text.
5. The alt attribute should be added to every image element (and all other
elements that support it) instead of aria-label. When used, its value should be a
useful description of the image.
DOCUMENTATION AND RESEARCH
Overview
Building websites requires technical knowledge of multiple languages and frameworks.
You may wonder, “How is it possible for developers to know everything there is to know
about every language?” The answer is, thankfully, they don’t. One of the most essential
skills of being a developer is knowing how to investigate solutions to problems you
have not yet learned how to solve.

In this lesson, you will learn how to look up new ways to use previously-learned CSS
properties and discover entirely new CSS properties.

On the right side of the screen is the portfolio site that you will develop into the final
product. We suggest you keep this mock open in a separate tab for reference
throughout the lesson.
nav {

padding: 25px;

font-family: 'Roboto', sans-serif;

background-color: #F25F5C;

h1 {

float: left;

margin-top: 5px;

color: white;

font-size: 36px;

ul {

float: right;

li {

display: inline-block;

margin-right: 25px;

text-align: center;

background-color: #28587B;

}
a{

display: inline-block;

width: 150px;

padding: 10px 0;

text-decoration: none;

font-size: 24px;

color: white;

.clearfix:after {

content: " ";

visibility: hidden;

display: block;

height: 0;

clear: both;

@media only screen and (max-width: 800px) {

h1 {

display: none;

li {

margin-right: 10px;
}

width: 100px;

padding: 5px 0;

font-size: 16px;

}
nav {

padding: 25px;

font-family: 'Roboto', sans-serif;

background-color: #F25F5C;

h1 {

float: left;

margin-top: 5px;

color: white;

font-size: 36px;

ul {

float: right;

li {

display: inline-block;

margin-right: 25px;

text-align: center;

background-color: #28587B;

a{
display: inline-block;

width: 150px;

padding: 10px 0;

text-decoration: none;

font-size: 24px;

color: white;

text-shadow:2px 2px 0 #bbbbbb;

.clearfix:after {

content: " ";

visibility: hidden;

display: block;

height: 0;

clear: both;

@media only screen and (max-width: 800px) {

h1 {

display: none;

li {

margin-right: 10px;

}
a{

width: 100px;

padding: 5px 0;

font-size: 16px;

DOCUMENTATION AND RESEARCH

Google
Documentation is an essential tool to learn about properties. However, what if
you don’t even know what property you need?

In situations like this, it might come as no surprise that using Google is a great

way to read other developers’ solutions to problems. Googling the problem
you’re trying to solve and the language you’re using will yield many useful
answers.

For example, if you want to know how to change the size of text, you could
google “how to change text size using CSS.” After doing this, you will receive
multiple links to information about the font-size property.

Instructions

1.
In the mock, we can see that the a elements should have a light shadow
beneath them. Use Google to find out which CSS property allows you to add a
shadow beneath text. Once you’ve found the property, set its value to 2px 2px
0 #bbbbbb in the a rule (try to figure out what this value will do by reading the
documentation for the property).
DOCUMENTATION AND RESEARCH
Google
Documentation is an essential tool to learn about properties. However, what if
you don’t even know what property you need?

In situations like this, it might come as no surprise that using Google is a great

way to read other developers’ solutions to problems. Googling the problem
you’re trying to solve and the language you’re using will yield many useful
answers.

Instructions

In situations like this, it might come as no surprise that using Google is a great

way to read other developers’ solutions to problems. Googling the problem
you’re trying to solve and the language you’re using will yield many useful
answers.

Instructions

padding: 25px;

font-family: 'Roboto', sans-serif;

background-color: #F25F5C;

h1 {

float: left;

margin-top: 5px;

color: white;

font-size: 36px;

ul {

float: right;

li {

display: inline-block;

margin-right: 25px;

text-align: center;

background-color: #28587B;

border-radius: 5px;

}
a{

display: inline-block;

width: 150px;

padding: 10px 0;

text-decoration: none;

font-size: 24px;

color: white;

text-shadow: 2px 2px 0 #bbbbbb;

.clearfix:after {

content: " ";

visibility: hidden;

display: block;

height: 0;

clear: both;

@media only screen and (max-width: 800px) {

h1 {

display: none;

li {

margin-right: 10px;
}

width: 100px;

padding: 5px 0;

font-size: 16px;

DOCUMENTATION AND RESEARCH

Review
Awesome! With just a few simple searches and some research you completed the
header for your portfolio site. Reading documentation and searching Google and Stack
Overflow make it easy to solve development problems, even if you haven’t previously
encountered the right tool for the job.

In summary:

1. Documentation is an easy way to view all of the information about a language or

framework. The Mozilla Development Network is the source of documentation for
HTML, CSS, and JavaScript.
2. Investigating a new language feature is as easy as typing the problem and the
language into Google or Stack Overflow.
Now that you know how to find any feature and read its documentation, the sky’s the
limit on what you can do. Feel free to browse MDN and Stack Overflow to find new
features and try incorporating them into your header to make it look even better. Great
job!
html, body {

margin: 0;

padding: 0;

font-family: 'Libre Baskerville', sans-serif;

img {

margin: 10px auto;

height: auto;

width: auto;

ul {

text-align: right;

h1 {

font-size: 20px;

/*Sizing*/

.container {

margin: 0 auto;

}
.spacer {

max-width: 1200px;

margin: auto;

.main {

background-color: #ffc200;

/*Header Section*/

.header {

padding: 30px 0px 40px;

margin-left: 50px;

margin-right: 50px;

.header li {

list-style: none;

display: inline-block;

.header li a {

color: #333;

margin:0;

border:0px;
}

/*Jumbotron Section*/

.jumbotron {

background-color: #fff;

max-width: 1200px;

margin-left: 50px;

.jumbotron h2 {

font-size: 50px;

margin-bottom: 70px;

.jumbotron h2 span {

color:#ffc200;

.jumbotron p {

text-shadow: 0 0;

font-size: 16px;

color: #666;

margin-bottom: 0;

}
/*Banner Section*/

.banner {

background-color: #333;

color: #fff;

padding: 20px;

text-align: center;

/*Expertise Section*/

.cards {

background-color: #ffc200;

display: flex;

justify-content: space-around;

flex-wrap: wrap;

.col {

display: inline-flex;

flex-direction: column;

justify-content: space-between;

#expertise {

padding: 20px;

background-color: #ffc200;
margin: 0;

text-align: center;

/*Footer Section*/

.footer {

padding: 60px 0px;

background-color: #000;

color: #fff;

.footer h3 {

font-size: 20px;

margin-left: 20px;

.footer p {

font-size:12px;

margin-bottom: 0;

margin-left: 20px;

}
<!doctype html>

<html>

<head>

<link rel='stylesheet' href='style.css'>

</head>

<body>

<h1>Headlines.</h1>

<ul>

<li><a href='3'>About</a></li>

<li><a href='#expertise'>Our Services</a></li>

<li><a href='3'>Our Team</a></li>

<li><a href='#footer'>Contact Us</a></li>

</ul>

</div>

<h2>We <span>collect and curate</span>

articles, opinions, and images

from around the world.</h2>

</div>

</div>
<div class='banner'>

<h2>The Bottom Line.</h2>

<p>We deliver the news that is relevant to you.</p>

</div>

<h2 id='expertise'>Our Expertise.</h2>

</div>

</div>

</div>

<h3>Headlines.</h3>

<p>1000 7th Avenue</p>

<p>New York, NY</p>

<p>(484) 192 - 8372</p>

</div>

</body>

</html>
FLEXBOX
display: flex
Any element can be a flex container. Flex containers are helpful tools for
creating websites that respond to changes in screen sizes. Child elements of
flex containers will change size and location in response to the size and
position of their parent container.

For an element to become a flex container, its display property must be set

to flex.

div.container {
display: flex;
}
In the example above, all divs with the class container are flex containers. If
they have children, the children are flex items. A div with the
declaration display: flex; will remain block level — no other elements will
appear on the same line as it.

However, it will change the behavior of its child elements. Child elements will
not begin on new lines. In the exercises that follow, we will cover how the
flex display property impacts the positioning of child elements.

Instructions

1.
In the <div> with id flex, add a display property with a value of flex. Compare
the two divs in the browser.
Checkpoint 2 Passed

Hint
Inside the curly braces of the #flex selector ruleset, the display property
should have a value of flex

selector {
property: value;
}

body {

margin: 0;
border: 0;

font-family: 'Roboto Mono', monospace;

h1 {

font-size: 18px;

text-align: center;

h2 {

font-size: 16px;

text-align: center;

.container {

background-color: whitesmoke;

.box {

background-color: dodgerblue;

height: 100px;

width: 100px;

border: 1px solid lightgrey;

}
#flex {

display:flex;

}
<!DOCTYPE html>

<html>

<head>

<title>Inline</title>

<link href='style.css' rel='stylesheet' />

<link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet'>

</head>

<body>

<h1>Inline-flex</h1>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

body {

margin: 0;

border: 0;

font-family: 'Roboto Mono', monospace;

text-align: center;

h1 {

font-size: 18px;

text-align: center;

.container {

width: 150px;
border: 1px solid grey;

.box {

background-color: dodgerblue;

height: 75px;

width: 75px;

border: 1px solid turquoise;

}
body {

margin: 0;

border: 0;

font-family: 'Roboto Mono', monospace;

text-align: center;

h1 {

font-size: 18px;

text-align: center;

.container {

display:inline-flex;

width: 150px;

border: 1px solid grey;

.box {

background-color: dodgerblue;

height: 75px;

width: 75px;

border: 1px solid turquoise;

}
FLEXBOX
justify-content
In previous exercises, when we changed the display value of parent containers
to flex or inline-flex, all of the child elements (flex items) moved toward the
upper left corner of the parent container. This is the default behavior of flex
containers and their children. We can specify how flex items spread out from
left to right, along the main axis. We will learn more about axes in a later
exercise.

To position the items from left to right, we use a property called justify-

content.

.container {
display: flex;
justify-content: flex-end;
}
In the example above, we set the value of justify-content to flex-end. This will
cause all of the flex items to shift to the right side of the flex container.

Below are five commonly used values for the justify-content property:

 flex-start — all items will be positioned in order, starting from the left
of the parent container, with no extra space between or before them.
 flex-end — all items will be positioned in order, with the last item
starting on the right side of the parent container, with no extra space
between or after them.
 center — all items will be positioned in order, in the center of the parent
container with no extra space before, between, or after them.
 space-around — items will be positioned with equal space before and
after each item, resulting in double the space between elements.
 space-between — items will be positioned with equal space between
them, but no extra space before the first or after the last elements.

In the definitions above, “no extra space” means that margins and borders will
be respected, but no more space (than is specified in the style rule for the
particular element) will be added between elements. The size of each
individual flex item is not changed by this property.

Instructions

1.
Assign the <div> element with the id flexstart a justify-content property with
a value of flex-start.

You won’t see any changes since flex-start is the default value;

Stuck? Get a hint
2.
Assign the <div> element with the id flexend a justify-content property with a
value of flex-end.
Stuck? Get a hint
3.
Assign the <div> element with the id center a justify-content property with a
value of center.
Stuck? Get a hint
4.
Assign the <div> element with the id spacearound a justify-content property
with a value of space-around.

Stretch and shrink the browser window to compare and contrast how the
elements in each div behave.
Stuck? Get a hint
5.
Assign the <div> element with the id spacebetween a justify-content property
with a value of space-between.

body {

border: 0;

margin: 0;

font-family: 'Roboto Mono', monospace;

h1 {

text-align: center;

display: block;

font-size: 18px;

.container {

height: 150px;

width: 100%;

display: flex;

background-color: whitesmoke;

.box {

height: 75px;

width: 100px;
background-color: dodgerblue;

border: 1px solid lightgrey;

display: inline-block;

#flexstart {

#flexend {

#center {

#spacearound {

#spacebetween {

}
body {

border: 0;

margin: 0;

font-family: 'Roboto Mono', monospace;

h1 {

text-align: center;

display: block;

font-size: 18px;

.container {

height: 150px;

width: 100%;

display: flex;

background-color: whitesmoke;

.box {

height: 75px;

width: 100px;

background-color: dodgerblue;

border: 1px solid lightgrey;

display: inline-block;
}

#flexstart {

justify-content: flex-start;

#flexend {

justify-content: flex-end;

#center {

justify-content: center;

#spacearound {

justify-content: space-around;

#spacebetween {

justify-content: space-between;

<!DOCTYPE html>

<html>

<head>
<title>Flex Justify</title>

<link href='style.css' rel='stylesheet' />

<link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet'>

</head>

<body>

<h1>Flex Start</h1>

<div class='container' id='flexstart'>

</div>

<div class='container' id='flexend'>

</div>

<h1>Center</h1>

<div class='container' id='center'>

</div>

<h1>Space Around</h1>
<div class='container' id='spacearound'>

</div>

<h1>Space Between</h1>

<div class='container' id='spacebetween'>

</div>

</body>

</html>

https://www.codecademy.com/learn/paths/learn-how-to-build-websites/tracks/advanced-css-flexbox-
and-animations/modules/layout-with-flexbox/cheatsheet

body {

border: 0;

margin: 0;

font-family: 'Roboto Mono', monospace;

h1 {

text-align: center;

display: block;

font-size: 18px;
}

.container {

height: 150px;

width: 100%;

display: flex;

background-color: whitesmoke;

.box {

height: 75px;

width: 100px;

background-color: dodgerblue;

border: 1px solid lightgrey;

display: inline-block;

#flexstart {

justify-content: flex-start;

#flexend {

justify-content: flex-end;

}
#center {

justify-content: center;

#spacearound {

justify-content: space-around;

#spacebetween {

justify-content: space-between;

}
FLEXBOX
align-items
In the previous exercise, you learned how to justify the content of a flex
container from left to right across the page. It is also possible to align flex
items vertically within the container. The align-items property makes it
possible to space flex items vertically.

.container {
align-items: baseline;
}
In the example above, the align-items property is set to baseline. This means
that the baseline of the content of each item will be aligned.

Below are five commonly used values for the align-items property:

 flex-start — all elements will be positioned at the top of the parent

container.
 flex-end — all elements will be positioned at the bottom of the parent
container.
 center — the center of all elements will be positioned halfway between
the top and bottom of the parent container.
 baseline — the bottom of the content of all items will be aligned with
each other.
 stretch — if possible, the items will stretch from top to bottom of the
container (this is the default value; elements with a specified height will
not stretch; elements with a minimum height or no height specified will
stretch).

These five values tell the elements how to behave along the cross axis of the
parent container. In these examples, the cross axis stretches from top to
bottom of the container. We’ll learn more about this in a future exercise.

You might be unfamiliar with the min-height and max-height properties, but you

have used height and width before. min-height, max-height, min-width, and max-
width are properties that ensure an element is at least a certain size or at most
a certain size. You’ll see how these become useful as you move throughout
this lesson.
Now you’re going to see each of the five values above in action!

Instructions

1.
Assign the <div> element with id flexstart an align-items property with the
value flex-start.
Stuck? Get a hint
2.
Assign the <div> element with id flexend an align-items property with the
value flex-end.
Stuck? Get a hint
3.
Assign the <div> element with id center an align-items property with the
value center.
Stuck? Get a hint
4.
Assign the <div> element with id baseline an align-items property with the
value baseline. How does the behavior of these elements differ from those in
other divs?
Stuck? Get a hint
5.
Take a look at the elements under “Stretch” at the bottom of the page. Now,
in the .left, .center, right ruleset, change the height property to min-
height and observe what happens to these elements.

body {

font-family: 'Roboto Mono', monospace;

h1 {

margin: 20px;

text-align: center;
font-size: 18px;

.container {

height: 150px;

background-color: whitesmoke;

display: flex;

justify-content: center;

.left,

.center,

.right {

height: 75px;

width: 125px;

background-color: dodgerblue;

border: 2px solid lightgrey;

#baseline .center {

height: 100px;

width: 100px;

border: 5px solid turquoise;

}
#flexstart {

#flexend {

#center {

#baseline {

body {

font-family: 'Roboto Mono', monospace;

h1 {

margin: 20px;

text-align: center;

font-size: 18px;

}
.container {

height: 150px;

background-color: whitesmoke;

display: flex;

justify-content: center;

.left,

.center,

.right {

min-height: 75px;

width: 125px;

background-color: dodgerblue;

border: 2px solid lightgrey;

#baseline .center {

height: 100px;

width: 100px;

border: 5px solid turquoise;

#flexstart {

align-items: flex-start;

}
#flexend {

align-items: flex-end;

#center {

align-items: center;

#baseline {

align-items: baseline;

}
FLEXBOX
flex-grow
In Exercise 3, we learned that all flex items shrink proportionally when the flex
container is too small. However, if the parent container is larger than necessary
then the flex items will not stretch by default. The flex-grow property allows us
to specify if items should grow to fill a container and also which items should
grow proportionally more or less than others.

<div class='container'>
  <div class='side'>
    <h1>I’m on the side of the flex container!</h1>
  </div>
  <div class='center'>
    <h1>I'm in the center of the flex container!</h1>
  </div>
  <div class='side'>
    <h1>I'm on the other side of the flex container!</h1>
  </div>
</div>
.container {
  display: flex;
}

.side {
width: 100px;
flex-grow: 1;
}

.center {
width: 100px;
flex-grow: 2;
}
In the example above, the .container div has a display value of flex, so its
three child divs will be positioned next to each other. If there is additional
space in the .container div (in this case, if it is wider than 300 pixels), the flex
items will grow to fill it. The .center div will stretch twice as much as
the .side divs. For example, if there were 60 additional pixels of space,
the center div would absorb 30 pixels and the side divs would absorb 15 pixels
each.
If a max-width is set for an element, it will not grow larger than that even if
there is more space for it to absorb.

All of the previous properties we have learned are declared on flex containers,
or the parent elements. This property — flex-grow — is the first we have
learned that is declared on flex items.

Instructions

1.
Assign .top.side and .top.center a flex-grow value of 1. Stretch and shrink the
browser.
Stuck? Get a hint
2.
Assign .middle.center the flex-grow value of 1. Stretch and shrink the browser
again.
Stuck? Get a hint
3.
Assign .bottom.side a flex-grow value of 1 and .bottom.center a flex-grow value
of 2. Shrink and stretch the browser again. Compare the differences in
behavior of all three sections.

body {

margin: 0;

border: 0;

font-family: 'Roboto Mono', monospace;

h1 {

font-size: 18px;

}
h2 {

font-size: 16px;

h1,

h2 {

text-align: center;

.top,

.middle,

.bottom {

width: 100px;

height: 100px;

background-color: dodgerblue;

border: 2px solid lightgrey;

margin: 10px 30px;

.top.side {

.top.center {
}

.middle.side {

.middle.center {

.bottom.side {

.bottom.center {

#top,

#middle,

#bottom {

display: flex;

background-color: Whitesmoke;

justify-content: center;

min-height: 200px;
align-items: center;

<!DOCTYPE html>

<html>

<head>

<title>Flex Grow and Shrink</title>

<link href='style.css' rel='stylesheet' />

<link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet'>

</head>

<body>

<div class='top side'>

</div>

<div class='top center'>

</div>

<div class='top side'>

</div>

<div class='middle side'>

</div>

<div class='middle center'>

</div>

<div class='middle side'>

</div>

<div class='bottom side'>

</div>

<div class='bottom center'>

</div>

<div class='bottom side'>

</div>

</body>
</html>

body {

margin: 0;

border: 0;

font-family: 'Roboto Mono', monospace;

h1 {

font-size: 18px;

h2 {

font-size: 16px;

h1,

h2 {

text-align: center;

.top,

.middle,

.bottom {

width: 100px;

height: 100px;
background-color: dodgerblue;

border: 2px solid lightgrey;

margin: 10px 30px;

.top.side {

.top.center {

.middle.side {

.middle.center {

.bottom.side {

}
.bottom.center {

#top,

#middle,

#bottom {

display: flex;

background-color: Whitesmoke;

justify-content: center;

min-height: 200px;

align-items: center;

https://www.codecademy.com/learn/paths/learn-how-to-build-websites/tracks/advanced-css-flexbox-
and-animations/modules/layout-with-flexbox/cheatsheet
https://www.codecademy.com/learn/paths/learn-how-to-build-websites/tracks/advanced-css-flexbox-
and-animations/modules/layout-with-flexbox/cheatsheet

body {

margin: 0;

border: 0;

font-family: 'Roboto Mono', monospace;

h1 {

font-size: 18px;

h2 {

font-size: 16px;

h1,

h2 {

text-align: center;

.top,

.middle,

.bottom {

width: 100px;
height: 100px;

background-color: dodgerblue;

border: 2px solid lightgrey;

margin: 10px 30px;

.top.side {

flex-grow: 1;

.top.center {

flex-grow: 1;

.middle.side {

.middle.center {

flex-grow: 1;

.bottom.side {

flex-grow: 1;

}
.bottom.center {

flex-grow: 2;

#top,

#middle,

#bottom {

display: flex;

background-color: Whitesmoke;

justify-content: center;

min-height: 200px;

align-items: center;

}
FLEXBOX
flex-shrink
Just as the flex-grow property proportionally stretches flex items, the flex-
shrink property can be used to specify which elements will shrink and in what
proportions.

You may have noticed in earlier exercises that flex items shrank when the flex
container was too small, even though we had not declared the property. This
is because the default value of flex-shrink is 1. However, flex items do not
grow unless the flex-grow property is declared because the default value
of flex-grow is 0.

<div class='container'>
  <div class='side'>
    <h1>I'm on the side of the flex container!</h1>
  </div>
  <div class='center'>
    <h1>I'm in the center of the flex container!</h1>
  </div>
  <div class='side'>
    <h1>I'm on the other side of the flex container!</h1>
  </div>
</div>
.container {
  display: flex;
}

.side {
width: 100px;
flex-shrink: 1;
}

.center {
width: 100px;
flex-shrink: 2;
}
In the example above, the .center div will shrink twice as much as
the .side divs if the .container div is too small to fit the elements within it. If
the content is 60 pixels too large for the flex container that surrounds it,
the .center div will shrink by 30 pixels and the outer divs will shrink by 15
pixels each. Margins are unaffected by flex-grow and flex-shrink.

Keep in mind, minimum and maximum widths will take precedence over flex-
grow and flex-shrink. As with flex-grow, flex-shrink will only be employed if
the parent container is too small or the browser is adjusted.

Instructions

1.
Assign .top.side a flex-shrink value of 2.

Stretch and shrink the browser. Because the default value for flex-shrink is 1,
the .top.center div will shrink but not as much as the .side divs.
Checkpoint 2 Passed

Hint
Inside the curly braces of the .top.side selector ruleset, the flex-
shrink property should have a value of 2

selector {
property: value;
}
2.
Assign .middle.side a flex-shrink value of 0.

Stretch and shrink the browser. How do the .middle divs resize differently than
the .top divs?
Checkpoint 3 Passed

Stuck? Get a hint

3.
Assign the .bottom.center div a flex-shrink value of 2.

Shrink and stretch the browser again. How do the .bottom divs resize

differently than the .top and .middle divs?

body {

margin: 0;

border: 0;
font-family: 'Roboto Mono', monospace;

h1 {

font-size: 18px;

h2 {

font-size: 16px;

h1,

h2 {

text-align: center;

.top,

.middle,

.bottom {

width: 100px;

height: 100px;

background-color: dodgerblue;

border: 2px solid lightgrey;

margin: 10px 30px;

}
.top.side {

flex-shrink: 2;

.top.center {

.middle.side {

flex-shrink: 0;

.middle.center {

.bottom.side {

.bottom.center {

flex-shrink: 2;

}
#top,

#middle,

#bottom {

display: flex;

background-color: whitesmoke;

justify-content: center;

min-height: 200px;

align-items: center;

}
FLEXBOX
flex-basis
In the previous two exercises, the dimensions of the divs were determined by
heights and widths set with CSS. Another way of specifying the width of a flex
item is with the flex-basis property. flex-basis allows us to specify the width
of an item before it stretches or shrinks.

<div class='container'>
  <div class='side'>
    <h1>Left side!</h1>
  </div>
  <div class='center'>
    <h1>Center!</h1>
  </div>
  <div class='side'>
    <h1>Right side!</h1>
  </div>
</div>
.container {
  display: flex;
}

.side {
flex-grow: 1;
flex-basis: 100px;
}

.center {
flex-grow: 2;
flex-basis: 150px;
}
In the example above, the .side divs will be 100 pixels wide and the .center div
will be 150 pixels wide if the .container div has just the right amount of space
(350 pixels, plus a little extra for margins and borders). If the .container div is
larger, the .center div will absorb twice as much space as the .side divs.

The same would hold true if we assigned flex-shrink values to the divs above

as well.
Instructions

1.
In style.css, inside the .grow.side ruleset, add a flex-basis of 60px.
Checkpoint 2 Passed

Hint
To add flex-basis, use the property flex-basis.
2.
In the same rule, add a flex-grow value of 1.
Checkpoint 3 Passed

Stuck? Get a hint

3.
In the .grow.center rule, add a flex-grow property with a value of 3.
Checkpoint 4 Passed

Stuck? Get a hint

4.
In the .shrink.side rule, add a flex-basis property with a value of 300px.
Checkpoint 5 Passed

Stuck? Get a hint

5.
In the same rule, add a flex-shrink property with a value of 3.
Checkpoint 6 Passed

Stuck? Get a hint

6.
In the .shrink.center rule, add a flex-shrink property with a value of 2.
Checkpoint 7 Passed

Stuck? Get a hint

7.
In the same rule, add a flex-basis property with a value of 150px. Now stretch
and shrink the browser.

body {

margin: 0;

border: 0;

font-family: 'Roboto Mono', monospace;

h1 {
text-align: center;

font-size: 18px;

h2 {

text-align: center;

font-size: 16px;

.grow,

.shrink {

width: 100px;

height: 100px;

background-color: dodgerblue;

border: 2px solid lightgrey;

margin: 10px 30px;

.grow.side {

flex-basis: 60px;

flex-grow: 1;

.grow.center {

flex-grow: 3;
}

.shrink.side {

flex-basis: 300px;

flex-shrink: 3;

.shrink.center {

flex-shrink: 2;

flex-basis: 150px;

#grows,

#shrinks {

display: flex;

background-color: whitesmoke;

justify-content: center;

min-height: 200px;

align-items: center;

<!DOCTYPE html>

<html>

<head>

<title>Flex Basis</title>
<link href='style.css' rel='stylesheet' />

<link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet'>

</head>

<body>

<h1>Grows</h1>

<div class='grow side'>

</div>

<div class='grow center'>

</div>

<div class='grow side'>

</div>

<h1>Shrinks</h1>

<div class='shrink side'>

</div>

<div class='shrink center'>

</div>
<div class='shrink side'>

</div>

</body>

</html>

body {

margin: 0;

border: 0;

font-family: 'Roboto Mono', monospace;

h1 {

text-align: center;

font-size: 18px;

h2 {

text-align: center;

font-size: 16px;

.grow,

.shrink {
width: 100px;

height: 100px;

background-color: dodgerblue;

border: 2px solid lightgrey;

margin: 10px 30px;

.grow.side {

flex-basis: 60px;

flex-grow: 1;

.grow.center {

flex-grow: 3;

.shrink.side {

flex-basis: 300px;

flex-shrink: 3;

.shrink.center {

flex-shrink: 2;

flex-basis: 150px;

}
#grows,

#shrinks {

display: flex;

background-color: whitesmoke;

justify-content: center;

min-height: 200px;

align-items: center;

}
FLEXBOX
flex
The shorthand flex property provides a convenient way for specifying how
elements stretch and shrink, while simplifying the CSS required.
The flex property allows you to declare flex-grow, flex-shrink, and flex-
basis all in one line.

Note: The flex property is different from the flex value used for

the display property.

.big {
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 150px;
}

.small {
  flex-grow: 1;
  flex-shrink: 2;
  flex-basis: 100px;
}
In the example above, all elements with class big will grow twice as much as
elements with class small. Keep in mind, this doesn’t mean big items will be
twice as big as small items, they’ll just take up more of the extra space.

The CSS below declares these three properties in one line.

.big {
flex: 2 1 150px;
}

.small {
flex: 1 2 100px;
}
In the example above, we use the flex property to declare the values for flex-
grow, flex-shrink, and flex-basis (in that order) all in one line.
.big {
flex: 2 1;
}
In the example above, we use the flex property to declare flex-grow and flex-
shrink, but not flex-basis.

.small {
flex: 1 20px;
}
In the example above, we use the flex property to declare flex-grow and flex-
basis. Note that there is no way to set only flex-shrink and flex-basis using 2
values.

The browser to the right has two flex containers, each with three flex items.
In style.css, examine the values for each of these items. Notice that the flex-
grow and flex-basis values are set for the blue divs.

Stretch the browser window to increase its width. Observe that once the top
outer divs reach 100 pixels wide, they begin to grow faster than the top
center div. Also notice that once the bottom center div reaches 100 pixels
wide, it begins to grow faster than the outer divs.

Now, shrink the browser window and notice that once the top
center div reaches 50 pixels wide it begins to shrink faster than the outer divs
and when the bottom outer divs reach 75 pixels, they begin to shrink faster
than the center div.

Instructions

1.
In #top .side, all three values for flex-grow, flex-shrink, and flex-basis are
assigned individually. Refactor them to be declared in one line using the
shorthand flex property.
Stuck? Get a hint
2.
In #top .center, all three values for flex-grow, flex-shrink, and flex-basis are
assigned individually. Refactor them to be declared in one line.
Stuck? Get a hint
3.
In #bottom .side, all three values for flex-grow, flex-shrink, and flex-basis are
assigned individually. Refactor them to be declared in one line.
Stuck? Get a hint
4.
In #bottom .center, all three values for flex-grow, flex-shrink, and flex-
basis are assigned individually. Refactor them to be declared in one line

FLEXBOX
flex
The shorthand flex property provides a convenient way for specifying how
elements stretch and shrink, while simplifying the CSS required.
The flex property allows you to declare flex-grow, flex-shrink, and flex-
basis all in one line.

Note: The flex property is different from the flex value used for

the display property.

.big {
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 150px;
}

The CSS below declares these three properties in one line.

.big {
flex: 2 1 150px;
}
.small {
flex: 1 2 100px;
}
In the example above, we use the flex property to declare the values for flex-
grow, flex-shrink, and flex-basis (in that order) all in one line.

.big {
flex: 2 1;
}
In the example above, we use the flex property to declare flex-grow and flex-
shrink, but not flex-basis.

.small {
flex: 1 20px;
}
In the example above, we use the flex property to declare flex-grow and flex-
basis. Note that there is no way to set only flex-shrink and flex-basis using 2
values.

Instructions

border: 0;

margin: 0 15px;

font-family: 'Roboto Mono', monospace;

h1 {

text-align: center;

display: block;

font-size: 18px;

.container {

height: 150px;

width: 100%;
display: flex;

background-color: whitesmoke;

.side,

.center {

height: 75px;

background-color: dodgerblue;

border: 1px solid lightgrey;

display: inline-block;

#top .side {

flex: 2 2 100px;

#top .center {

flex: 1 3 50px;

#bottom .side {

flex: 1 2 75px;

#bottom .center {
flex: 2 1 100px;

}
body {

font-family: 'Roboto Mono', monospace;

h1 {

font-size: 18px;

h1,

h3 {

text-align: center;

.container {

background-color: dodgerblue;

display: flex;

align-items: center;

min-height: 125px;

.box {

background-color: whitesmoke;

border: 1px solid white;

width: 100px;

height: 100px;
}

#wrap {

#nowrap {

#reverse {

}
FLEXBOX
flex-wrap
Sometimes, we don’t want our content to shrink to fit its container. Instead, we
might want flex items to move to the next line when necessary. This can be
declared with the flex-wrap property. The flex-wrap property can accept three
values:

1. wrap — child elements of a flex container that don’t fit into a row will
move down to the next line
2. wrap-reverse — the same functionality as wrap, but the order of rows
within a flex container is reversed (for example, in a 2-row flexbox, the
first row from a wrap container will become the second in wrap-
reverse and the second row from the wrap container will become the first
in wrap-reverse)
3. nowrap — prevents items from wrapping; this is the default value and is
only necessary to override a wrap value set by a different CSS rule.

<div class='container'>
  <div class='item'>
    <h1>We're going to wrap!</h1>
  </div>
  <div class='item'>
    <h1>We're going to wrap!</h1>
  </div>
  <div class='item'>
    <h1>We're going to wrap!</h1>
  </div>
</div>
.container {
  display: inline-flex;
  flex-wrap: wrap;
  width: 250px;
}

.item {
width: 100px;
height: 100px;
}
In the example above, three flex items are contained by a parent flex
container. The flex container is only 250 pixels wide so the three 100 pixel
wide flex items cannot fit inline. The flex-wrap: wrap; setting causes the third,
overflowing item to appear on a new line, below the other two items.

Note: The flex-wrap property is declared on flex containers.

Instructions

1.
In style.css, inside the #wrap ruleset, add a flex-wrap property with a value
of wrap. Shrink and stretch the browser.
Stuck? Get a hint
2.
Inside the #nowrap ruleset, add a flex-wrap property with a value of nowrap.
Shrink and stretch the browser.
Stuck? Get a hint
3.
Inside the #reverse ruleset, add a flex-wrap property with a value of wrap-
reverse. Shrink and stretch the browser.
Stuck? Get a hint
4.
Inside the .container ruleset, add a justify-content property with a value
of space-around. Stretch and shrink the browser. What’s different this time?
FLEXBOX
flex-wrap
Sometimes, we don’t want our content to shrink to fit its container. Instead, we
might want flex items to move to the next line when necessary. This can be
declared with the flex-wrap property. The flex-wrap property can accept three
values:

Note: The flex-wrap property is declared on flex containers.

Instructions

1.
In style.css, inside the #wrap ruleset, add a flex-wrap property with a value
of wrap. Shrink and stretch the browser.
Checkpoint 2 Passed

Stuck? Get a hint

2.
Inside the #nowrap ruleset, add a flex-wrap property with a value of nowrap.
Shrink and stretch the browser.
Checkpoint 3 Passed

Hint
Be sure to use the value nowrap this time!
3.
Inside the #reverse ruleset, add a flex-wrap property with a value of wrap-
reverse. Shrink and stretch the browser.
Checkpoint 4 Passed

Stuck? Get a hint

4.
Inside the .container ruleset, add a justify-content property with a value
of space-around. Stretch and shrink the browser. What’s different this time?
Checkpoint 5 Passed

Hint
Inside the curly braces of the .container selector ruleset, the justify-
content property should have a value of space-around .

selector {
property: value;
}

body {

font-family: 'Roboto Mono', monospace;

}
h1 {

font-size: 18px;

h1,

h3 {

text-align: center;

.container {

justify-content:space-around;

background-color: dodgerblue;

display: flex;

align-items: center;

min-height: 125px;

.box {

background-color: whitesmoke;

border: 1px solid white;

width: 100px;

height: 100px;

}
#wrap {

flex-wrap:wrap;

#nowrap {

flex-wrap:nowrap;

#reverse {

flex-wrap:wrap-reverse;

<!DOCTYPE html>

<html>

<head>

<link href='style.css' rel='stylesheet' />

<link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet'>

</head>

<body>

<div class='container' id='wrap'>

</div>

</div>

</div>

</div>

</div>

<div class='container' id='nowrap'>

</div>

</div>

</div>

</div>

<h1>Flex-Wrap: Wrap-Reverse</h1>

<div class='container' id='reverse'>

</div>

</div>

</div>

</div>

</div>
</div>

</body>

</html>
FLEXBOX
align-content
Now that elements can wrap to the next line, we might have multiple rows of
flex items within the same container. In a previous exercise, we used the align-
items property to space flex items from the top to the bottom of a flex
container. align-items is for aligning elements within a single row. If a flex
container has multiple rows of content, we can use align-content to space the
rows from top to bottom.

Below are some of the more commonly used align-content values:

 flex-start — all rows of elements will be positioned at the top of the

parent container with no extra space between.
 flex-end — all rows of elements will be positioned at the bottom of the
parent container with no extra space between.
 center — all rows of elements will be positioned at the center of the
parent element with no extra space between.
 space-between — all rows of elements will be spaced evenly from the top
to the bottom of the container with no space above the first or below
the last.
 space-around — all rows of elements will be spaced evenly from the top
to the bottom of the container with the same amount of space at the
top and bottom and between each element.
 stretch — if a minimum height or no height is specified, the rows of
elements will stretch to fill the parent container from top to bottom
(default value).

<div class='container'>
  <div class='child'>
    <h1>1</h1>
  </div>
  <div class='child'>
    <h1>2</h1>
  </div>
  <div class='child'>
    <h1>3</h1>
  </div>
  <div class='child'>
    <h1>4</h1>
  </div>
</div>
.container {
  display: flex;
  width: 400px;
  height: 400px;
  flex-wrap: wrap;
  align-content: space-around;
}

.child {
width: 150px;
height: 150px;
}
In the example above, there are four flex items inside of a flex container. The
flex items are set to be 150 pixels wide each, but the parent container is only
400 pixels wide. This means that no more than two elements can be displayed
inline. The other two elements will wrap to the next line and there will be two
rows of divs inside of the flex container. The align-content property is set to
the value of space-around, which means the two rows of divs will be evenly
spaced from top to bottom of the parent container with equal space before
the first row and after the second, with double space between the rows.

Below, we will see each of the properties in action!

Note: The align-content property is declared on flex containers.

Instructions

1.
In style.css, inside the #flexstart ruleset, add an align-content property with a
value of flex-start to position the rows of elements at the top of the parent
container.
Stuck? Get a hint
2.
In style.css, inside the #flexend ruleset, add an align-content property with a
value of flex-end to position the rows of elements at the bottom of the parent
container.
Stuck? Get a hint
3.
In style.css, inside the #center ruleset, add an align-content property with a
value of center to position the rows of elements at the center of the parent
container.
Stuck? Get a hint
4.
In style.css, inside the #between ruleset, add an align-content property with a
value of space-between to space out all of the rows of elements evenly with
equal space between each row.
Stuck? Get a hint
5.
In style.css, inside the #around ruleset, add an align-content property with a
value of space-around to space out all of the rows of elements evenly with
equal space around each row.
Stuck? Get a hint
6.
Inside the .left, .center, .right ruleset, change the height property to min-
height. What happens to the flex items in the #stretch container?

body {

font-family: 'Roboto Mono', monospace;

h1 {

margin: 20px;

text-align: center;

font-size: 18px;

}
.container {

height: 300px;

width: 600px;

background-color: whitesmoke;

display: flex;

flex-wrap: wrap;

margin: auto;

.left,

.center,

.right {

height: 75px;

width: 200px;

margin: 2px;

background-color: dodgerblue;

border: 2px solid lightgrey;

#flexstart {

#flexend {
}

#center {

#between {

#around {

body {

font-family: 'Roboto Mono', monospace;

h1 {

margin: 20px;

text-align: center;

font-size: 18px;

.container {
height: 300px;

width: 600px;

background-color: whitesmoke;

display: flex;

flex-wrap: wrap;

margin: auto;

.left,

.center,

.right {

min-height: 75px;

width: 200px;

margin: 2px;

background-color: dodgerblue;

border: 2px solid lightgrey;

#flexstart {

align-content: flex-start;

#flexend {

align-content: flex-end;

}
#center {

align-content: center;

#between {

align-content: space-between;

#around {

align-content: space-around;

}
FLEXBOX
flex-direction
Up to this point, we’ve only covered flex items that stretch and shrink
horizontally and wrap vertically. As previously stated, flex containers have two
axes: a main axis and a cross axis. By default, the main axis is horizontal and
the cross axis is vertical.

The main axis is used to position flex items with the following properties:

1. justify-content
2. flex-wrap
3. flex-grow
4. flex-shrink

The cross axis is used to position flex items with the following properties:

1. align-items
2. align-content

The main axis and cross axis are interchangeable. We can switch them using
the flex-direction property. If we add the flex-direction property and give it a
value of column, the flex items will be ordered vertically, not horizontally.

<div class='container'>
  <div class='item'>
    <h1>1</h1>
  </div>
  <div class='item'>
    <h1>2</h1>
  </div>
  <div class='item'>
    <h1>3</h1>
  </div>
  <div class='item'>
    <h1>4</h1>
  </div>
  <div class="item">
    <h1>5</h1>
  </div>
</div>
.container {
  display: flex;
  flex-direction: column;
  width: 1000px;
}
.item {
  height: 100px;
  width: 100px;
}
In the example above, the five divs will be positioned in a vertical column. All
of these divs could fit in one horizontal row. However, the column value tells
the browser to stack the divs one on top of the other. As explained above,
properties like justify-content will not behave the way they did in previous
examples.

The flex-direction property can accept four values:

1. row — elements will be positioned from left to right across the parent
element starting from the top left corner (default).
2. row-reverse — elements will be positioned from right to left across the
parent element starting from the top right corner.
3. column — elements will be positioned from top to bottom of the parent
element starting from the top left corner.
4. column-reverse — elements will be positioned from the bottom to the
top of the parent element starting from the bottom left corner.

Below, we’ll investigate how these work.

Note: The flex-direction property is declared on flex containers.

Instructions

1.
In style.css, inside the #row ruleset, add a flex-direction property with a value
of row.
Checkpoint 2 Passed

Hint
Inside the curly braces of the #row selector ruleset, the flex-direction property
should have a value of row.

selector {
property: value;
}
2.
Inside the #row-reverse ruleset, add a flex-direction property with a value
of row-reverse.
Checkpoint 3 Passed

Hint
This time, the flex-direction property gets a value of row-reverse.
3.
Inside the #column ruleset, add a flex-direction property with a value of column.
Checkpoint 4 Passed

Hint
This time. the value is column.
4.
Inside the #column-reverse ruleset, add a flex-direction property with a value
of column-reverse.
Checkpoint 5 Passed

Hint
The value used here will be column-reverse.
5.
Change the height property of .container elements to be max-height.
Remember to stretch and shrink the browser after each checkpoint so you can
see the effects.
Checkpoint 6 Passed

Hint
Inside the .container ruleset, change the height property to be max-height.
6.
Inside the .container ruleset, add an align-items property with a value
of center.
Checkpoint 7 Passed

Hint
Inside the curly braces of the .container selector ruleset, the align-
items property should have a value of center.

selector {
property: value;
}
7.
Inside the .container ruleset, add a justify-content property with a value
of space-around.
Checkpoint 8 Passed

Hint
Inside the curly braces of the .container selector ruleset, the justify-
content property should have a value of space-around.

selector {
property: value;
}
8.
Inside the .box ruleset, add a flex-grow property with a value of 1. In which
direction do the elements grow?
Checkpoint 9 Passed

Hint
Inside the curly braces of the .box selector ruleset, the flex-grow property
should have a value of 1.

selector {
property: value;
}

body {

margin: 0;

border: 0;

font-family: 'Roboto Mono', monospace;

h1 {

font-size: 18px;

h2 {
font-size: 14px;

h1,

h2 {

text-align: center;

.container {

background-color: dodgerblue;

display: flex;

max-height: 600px;

align-items:center;

justify-content:space-around;

.box {

background-color: whitesmoke;

border: 1px solid white;

width: 100px;

height: 100px;

flex-grow:1;

}
#row {

flex-direction:row;

#row-reverse {

flex-direction:row-reverse;

#column {

flex-direction:column;

#column-reverse {

flex-direction:column-reverse;

}
FLEXBOX
flex-flow
Like the shorthand flex property, the shorthand flex-flow property is used to declare both
the flex-wrap and flex-direction properties in one line.

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
In the example above, we take two lines to accomplish what can be done with one.

.container {
display: flex;
flex-flow: column wrap;
}
In the example above, the first value in the flex-flow declaration is a flex-direction value and
the second is a flex-wrap value. All values for flex-direction and flex-wrap are accepted.

Note: The flex-flow property is declared on flex containers.

Instructions

1.
In the #row-reverse ruleset, set the flex-flow property to have a direction of row-reverse and
to wrap elements. You should be able to accomplish this in one line.
Hint
The flex-flow property should have a value of row-reverse wrap.
2.
In the #column ruleset, set the flex-flow property to give elements a direction of column and
to wrap elements. You should be able to accomplish this in one line.
Hint
The flex-flow property should have a value of column wrap.

Concept Review

Want to quickly review some of the concepts you’ve been learning? Take a look at this
material's cheatsheet!
body {

margin: 0;

border: 0;

font-family: 'Roboto Mono', monospace;

}

h1 {

font-size: 18px;

h2 {

font-size: 14px;

h1, h2 {

text-align: center;

.container {

background-color: dodgerblue;

display: flex;

height: 600px;

align-items: center;

.box {

background-color: whitesmoke;

border: 1px solid white;

width: 100px;

height: 100px;

}
#row {

#row-reverse {

#column {

#column-reverse {

<!DOCTYPE html>

<html>

<head>

<title>Direction</title>

<link href='style.css' rel='stylesheet' />

<link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet'>

</head>
<body>

<h1>Flex-Direction: Row</h1>

<div class='container' id='row'>

</div>

</div>

</div>

</div>

</div>

<h1>Flex-Direction: Row-Reverse</h1>

<div class='container' id='row-reverse'>

</div>
<div class='box'>

</div>

</div>

</div>

</div>

<h1>Flex-Direction: Column</h1>

<div class='container' id='column'>

</div>

</div>

</div>

</div>

</div>

<h1>Flex-Direction: Column-Reverse</h1>

<div class='container' id='column-reverse'>

</div>

</div>

</div>

</div>

</div>

</body>
</html>

body {

margin: 0;

border: 0;

font-family: 'Roboto Mono', monospace;

h1 {

font-size: 18px;

h2 {

font-size: 14px;

h1, h2 {

text-align: center;

.container {

background-color: dodgerblue;

display: flex;

height: 600px;

align-items: center;

}
.box {

background-color: whitesmoke;

border: 1px solid white;

width: 100px;

height: 100px;

#row {

#row-reverse {

flex-flow: row-reverse wrap;

#column {

flex-flow: column wrap;

#column-reverse {

FLEXBOX
Nested Flexboxes
So far, we’ve had multiple flex containers on the same page to explore flex
item positioning. It is also possible to position flex containers inside of one
another.

<div class='container'>
  <div class='left'>
    <img class='small' src='#'/>
    <img class='small' src='#'/>
    <img class='small' src='#' />
  </div>
  <div class='right'>
    <img class='large' src='#' />
  </div>
</div>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.left {
  display: inline-flex;
  flex: 2 1 200px;
  flex-direction: column;
}

.right {
  display: inline-flex;
  flex: 1 2 400px;
  align-items: center;
}

.small {
height: 200px;
width: auto;
}

.large {
height: 600px;
width: auto;
}
In the example above, a div with three smaller images will display from top to
bottom on the left of the page (.left). There is also a div with one large image
that will display on the right side of the page (.right). The left div has a
smaller flex-basis but stretches to fill more extra space; the right div has a
larger flex-basis but stretches to fill less extra space. Both divs are flex
items and flex containers. The items have properties that dictate how they will
be positioned in the parent container and how their flex item children will be
positioned in them.

We’ll use the same formatting above to layout the simple page to the right.

Instructions

1.
Inside the .main ruleset, add a display property with a value of flex.
Hint
Inside the curly braces of the .main selector ruleset, the display property
should have a value of flex.

selector {
property: value;
}
2.
Inside the .main ruleset, add an align-items property with a value of center.
Hint
The value used in this step will be center.
3.
Inside the .main ruleset, add a justify-content property with a value of space-
around.
Hint
The value used in this step will be space-around.
4.
Inside the .container ruleset, add a display property with a value of flex.
Hint
The value used in this step will be flex.
5.
Inside the .container ruleset, add a flex-direction property with a value
of column.
Hint
The value used in this step will be column.
6.
Inside the .container ruleset, add a justify-content property with a value
of center.
Stuck? Get a hint
7.
Inside the .container ruleset, add an align-items property with a value
of center.
Hint
The value used in this step will be center.
8.
Repeat steps 4, 6, and 7 for the .child ruleset.
Hint
Inside the .child ruleset:

 add a display property with a value of flex.

 add a justify-content property with a value of center.
 add a align-items property with a value of center.

body {

font-family: 'Roboto Mono', monospace;

h2 {

text-align: center;

font-size: 18px;

.main {
background-color: lightgrey;

width: 400px;

height: 700px;

.container {

width: 300px;

height: 300px;

background-color: dodgerblue;

border: 1px solid white;

.child {

height: 75px;

width: 75px;

background-color: whitesmoke;

border: 1px solid snow;

}
FLEXBOX
Nested Flexboxes
So far, we’ve had multiple flex containers on the same page to explore flex
item positioning. It is also possible to position flex containers inside of one
another.

.left {
  display: inline-flex;
  flex: 2 1 200px;
  flex-direction: column;
}

.right {
  display: inline-flex;
  flex: 1 2 400px;
  align-items: center;
}

.small {
height: 200px;
width: auto;
}

We’ll use the same formatting above to layout the simple page to the right.

Instructions

1.
Inside the .main ruleset, add a display property with a value of flex.
Checkpoint 2 Passed

Hint
Inside the curly braces of the .main selector ruleset, the display property
should have a value of flex.

selector {
property: value;
}
2.
Inside the .main ruleset, add an align-items property with a value of center.
Checkpoint 3 Passed

Hint
The value used in this step will be center.
3.
Inside the .main ruleset, add a justify-content property with a value of space-
around.
Checkpoint 4 Passed

Hint
The value used in this step will be space-around.
4.
Inside the .container ruleset, add a display property with a value of flex.
Checkpoint 5 Passed

Hint
The value used in this step will be flex.
5.
Inside the .container ruleset, add a flex-direction property with a value
of column.
Checkpoint 6 Passed

Hint
The value used in this step will be column.
6.
Inside the .container ruleset, add a justify-content property with a value
of center.
Checkpoint 7 Passed

Stuck? Get a hint

7.
Inside the .container ruleset, add an align-items property with a value
of center.
Checkpoint 8 Passed

Hint
The value used in this step will be center.
8.
Repeat steps 4, 6, and 7 for the .child ruleset.
Checkpoint 9 Passed

Hint
Inside the .child ruleset:

 add a display property with a value of flex.

 add a justify-content property with a value of center.
 add a align-items property with a value of center.
FLEXBOX
Review: Flexbox
You should be proud of yourself! You have learned the most important
properties of flexbox. Flexbox is an art and a science; you can use it to make
laying out multiple elements a piece of cake. You know everything necessary
to begin using it in your own projects.

1. display: flex changes an element to a block-level container with flex

items inside of it.
2. display: inline-flex allows multiple flex containers to appear inline with
each other.
3. justify-content is used to space items along the main axis.
4. align-items is used to space items along the cross axis.
5. flex-grow is used to specify how much space (and in what proportions)
flex items absorb along the main axis.
6. flex-shrink is used to specify how much flex items shrink and in what
proportions along the main axis.
7. flex-basis is used to specify the initial size of an element styled
with flex-grow and/or flex-shrink.
8. flex is used to specify flex-grow, flex-shrink, and flex-basis in one
declaration.
9. flex-wrap specifies that elements should shift along the cross axis if the
flex container is not large enough.
10. align-content is used to space rows along the cross axis.
11. flex-direction is used to specify the main and cross axes.
12. flex-flow is used to specify flex-wrap and flex-direction in one
declaration.
13.Flex containers can be nested inside of each other by declaring display:
flex or display: inline-flex for children of flex containers.

Let’s apply a few of the properties you’ve learned to arrange one section of
the web page in the browser to the right!

Instructions

1.
All of the images are inside of three column divs and the three column divs
are all inside of one large div called .cards.

Inside the .cards ruleset, add a display property with a value of flex.

Hint
Inside the curly braces of the .cards selector ruleset, the display property
should have a value of flex.

selector {
property: value;
}
2.
Now, inside the .cards ruleset, set the flex-wrap property to have a value
of wrap.
Hint
flex-wrap should have a value of wrap.
3.
Inside the .cards ruleset, set the justify-content property to have a value
of space-around.
Hint
justify-content should have a value of space-around.
4.
In the .col ruleset, set the display property to have a value of inline-flex.
Hint
The declaration should be display: inline-flex;
5.
In the .col ruleset, set the flex-direction property to have a value of column.
Hint
Inside the curly braces of the .col selector ruleset, the flex-direction property
should have a value of column.

selector {
property: value;
}
6.
In the .col ruleset, set the justify-content property to have a value of space-
between.
Hint
Inside the curly braces of the .col selector ruleset, the justify-
content property should have a value of space-between.

selector {
property: value;
}
html, body {

margin: 0;

padding: 0;

font-family: 'Libre Baskerville', sans-serif;

img {

margin: 10px auto;

height: auto;

width: auto;

ul {

text-align: right;

h1 {

font-size: 20px;

/*Sizing*/

.container {

margin: 0 auto;

}
.spacer {

max-width: 1200px;

margin: auto;

.main {

background-color: #ffc200;

/*Header Section*/

.header {

padding: 30px 0px 40px;

margin-left: 50px;

margin-right: 50px;

.header li {

list-style: none;

display: inline-block;

.header li a {

color: #333;
margin:0;

border:0px;

/*Jumbotron Section*/

.jumbotron {

background-color: #fff;

max-width: 1200px;

margin-left: 50px;

.jumbotron h2 {

font-size: 50px;

margin-bottom: 70px;

.jumbotron h2 span {

color:#ffc200;

.jumbotron p {

text-shadow: 0 0;

font-size: 16px;

color: #666;
margin-bottom: 0;

/*Banner Section*/

.banner {

background-color: #333;

color: #fff;

padding: 20px;

text-align: center;

/*Expertise Section*/

.cards {

background-color: #ffc200;

.col {

#expertise {

padding: 20px;

background-color: #ffc200;

margin: 0;

text-align: center;
}

/*Footer Section*/

.footer {

padding: 60px 0px;

background-color: #000;

color: #fff;

.footer h3 {

font-size: 20px;

margin-left: 20px;

.footer p {

font-size:12px;

margin-bottom: 0;

margin-left: 20px;

}
html, body {

margin: 0;

padding: 0;

font-family: 'Libre Baskerville', sans-serif;

img {

margin: 10px auto;

height: auto;

width: auto;

ul {

text-align: right;

h1 {

font-size: 20px;

/*Sizing*/

.container {

margin: 0 auto;

}
.spacer {

max-width: 1200px;

margin: auto;

.main {

background-color: #ffc200;

/*Header Section*/

.header {

padding: 30px 0px 40px;

margin-left: 50px;

margin-right: 50px;

.header li {

list-style: none;

display: inline-block;

.header li a {

color: #333;
margin:0;

border:0px;

/*Jumbotron Section*/

.jumbotron {

background-color: #fff;

max-width: 1200px;

margin-left: 50px;

.jumbotron h2 {

font-size: 50px;

margin-bottom: 70px;

.jumbotron h2 span {

color:#ffc200;

.jumbotron p {

text-shadow: 0 0;

font-size: 16px;

color: #666;
margin-bottom: 0;

/*Banner Section*/

.banner {

background-color: #333;

color: #fff;

padding: 20px;

text-align: center;

/*Expertise Section*/

.cards {

background-color: #ffc200;

display:flex;

flex-wrap:wrap;

justify-content:space-around;;

.col {

display:inline-flex;

flex-direction:column;

justify-content:space-between;

}
#expertise {

padding: 20px;

background-color: #ffc200;

margin: 0;

text-align: center;

/*Footer Section*/

.footer {

padding: 60px 0px;

background-color: #000;

color: #fff;

.footer h3 {

font-size: 20px;

margin-left: 20px;

.footer p {

font-size:12px;

margin-bottom: 0;

margin-left: 20px;

}
ADVANCED CSS: FLEXBOX AND CSS TRANSITIONS
Flexbox: To-Do App
In this project, you will follow step-by-step instructions to fix a to-do web app. All of the
HTML and most of the CSS is intact, however, a few Flexbox values are missing.

In order to complete this project, you must know how to set an element’s Flexbox
properties.

We recommend that you review our Flexbox Lesson before beginning.

The website’s existing index.html and style.css files are displayed in the text editor to

the right. Good luck!

<!DOCTYPE html>

<html>

<head>

<link rel='stylesheet' href='style.css'>

<link href='https://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet'>

<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet'>

</head>

<body>

<h1>To Do or Not To Do</h1>

<h2 class='tagline'>(your priorities at a glance)</h2>

</div>

<div class='row secondary-background'>

<div class='day square'><h3>MON</h3></div>

<div class='task square'>

<p> Insert some information about your week here :) </p>

</div>

<div class='task square'></div>

</div>

<div class='day square'><h3>TUE</h3></div>

<div class='task square'></div>

</div>

<div class='row secondary-background'>

<div class='day square'><h3>WED</h3></div>

<div class='task square'></div>

</div>
<div class='row'>

<div class='day square'><h3>THU</h3></div>

<div class='task square'></div>

</div>

<div class='row secondary-background'>

<div class='day square'><h3>FRI</h3></div>

<div class='task square'></div>

</div>

<h3>Reminders</h3>

</div>

<span class='tagline'>copyright nottodo.com</span>

</footer>

</body>
</html>

/* Universal Styles */

body {

margin: 0px;

background-color: whitesmoke;

font-family: 'Rock Salt', cursive;

text-align: center;

.secondary-background {

background-color: snow;

.tagline {

font-family: 'Quicksand', sans-serif;

color: lightslategrey;

line-height: 125px;

/* Header */

h1 {

margin: 0;

background-color: steelblue;

line-height: 100px;

color: khaki;
}

h2 {

margin: 10px;

/* App Container */

.container {

border: 2px solid snow;

/* To Do Section */

.week {

.row {

min-height: 200px;

display: flex;

.square {

width: 125px;

height: 125px;

padding: 10px;

}
.day.square {

background-color: steelblue;

border: 1px solid white;

.task.square {

background-color: khaki;

border: 1px solid white;

.task p {

font-family: 'Quicksand', sans-serif;

font-weight: 700;

font-size: 12px;

/* Reminders */

.reminders {

background-color: khaki;

.reminders h3 {

width: 100%;

margin: 10px;
color: black;

line-height: 90px;

font-size: 24px;

/* Footer */

footer {

font-size: 24px;

}
ADVANCED CSS: FLEXBOX AND CSS TRANSITIONS
Flexbox: To-Do App
In this project, you will follow step-by-step instructions to fix a to-do web app.
All of the HTML and most of the CSS is intact, however, a few Flexbox values
are missing.

In order to complete this project, you must know how to set an element’s
Flexbox properties.

We recommend that you review our Flexbox Lesson before beginning.

The website’s existing index.html and style.css files are displayed in the text

editor to the right. Good luck!

If you get stuck during this project, check out the project walkthrough
video which can be found in the help menu.

Tasks

6/6 Complete
Mark the tasks as complete by checking them off
1.
Start off by turning some of the elements into flex and inline-flex containers.

 Turn elements with the class container and elements with the

class square into flex containers.
 Turn elements with the class week and elements with the
class reminders into inline-flex containers.

To do this, add the display property with a value of either flex or inline-flex.

Hint
The .container and .square rulesets get the declaration:

display: flex;
The .week and .reminders rulesets get the declaration:

display: inline-flex;
2.
The elements inside the new inline-flex containers should grow to fill the
container. This is accomplished using the flex-grow property:

 Elements with the class week will get a flex-grow property with a value

of 3.
 Elements with the class reminders will get a flex-grow property with a
value of 2.

Hint
The .week ruleset declaration should be:

flex-grow: 3;
The .reminders ruleset declaration should be:

flex-grow: 2;
3.
We want the flex items with the class week to be ordered vertically, instead of
horizontally.

Inside the .week ruleset, add a flex-direction property with the value that

orders the items in a column.
Hint
The flex-direction property gets the value column.
4.
The items with the class row should move to the next line when the container
gets too small.

Inside the .row ruleset, add a flex-wrap property with the value that moves

items to the next row, while keeping their order intact.
Hint
The value wrap will move items to the next row.
5.
The items with the class row also need some space:

Inside the .row ruleset, add a justify-content property with the value that adds

space around each item.
Furthermore, the items with the class square need to be centered:

Inside the .square ruleset, add a justify-content property with the value that

centers the items in the container.
Hint
To add space around items, use the space-around value.

To center the items, use the center value.

6.
Lastly, the elements with the class row and elements with the class square need
to be aligned vertically:

Inside the rulesets for .row and .square, add the align-items property with the

value that centers the items inside the container.

You did it! Great work. Now resize the browser to see your flex properties in
action!
Hint
The align-items property gets a value of center in order to center the items!

/* Universal Styles */

body {

margin: 0px;

background-color: whitesmoke;

font-family: 'Rock Salt', cursive;

text-align: center;

.secondary-background {

background-color: snow;

}
.tagline {

font-family: 'Quicksand', sans-serif;

color: lightslategrey;

line-height: 125px;

/* Header */

h1 {

margin: 0;

background-color: steelblue;

line-height: 100px;

color: khaki;

h2 {

margin: 10px;

/* App Container */

.container {

border: 2px solid snow;

display: flex;

}
/* To Do Section */

.week {

display:inline-flex;

flex-grow: 3;

flex-direction:column;

justify-content:space-around;

.row {

flex-wrap:wrap;

min-height: 200px;

display: flex;

align-items:center;

.square {

display: flex;

width: 125px;

height: 125px;

padding: 10px;

justify-content:center;

align-items:center;

}
.day.square {

background-color: steelblue;

border: 1px solid white;

.task.square {

background-color: khaki;

border: 1px solid white;

.task p {

font-family: 'Quicksand', sans-serif;

font-weight: 700;

font-size: 12px;

/* Reminders */

.reminders {

display:inline-flex;

background-color: khaki;

.reminders h3 {

width: 100%;
margin: 10px;

color: black;

line-height: 90px;

font-size: 24px;

/* Footer */

footer {

font-size: 24px;

}
ADVANCED CSS: FLEXBOX AND CSS TRANSITIONS
Tea Cozy
In this project, you will create a fictional tea shop website on your own computer.

We will provide a design spec and image assets to help you along the way. A design
spec is an image of a web page outlined with all of its CSS properties and values. These
are usually created by a designer as a source of instructions for a web developer. This
project assumes that you will be able to reproduce the basic HTML and CSS with little
guidance.

The images and design spec you need to complete the project are listed below.

Images:

1. Logo
2. Bedford Bizarre
3. Berry Blitz
4. Donut
5. Locations
6. Background
7. Myrtle Ave
8. Spiced Rum

Design Spec:

1. Click here to access the design spec.

Good luck!
https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-redline.jpg

https://content.codecademy.com/courses/freelance-1/unit-4/img-bedford-bizarre.jpg
CSS TRANSITIONS
CSS Transitions
After a website is displayed, the visual appearances of various elements can
change for many reasons. For example:

 Moving your mouse over a link may change the color or appearance of
that link.
 Changing the size of the window may change the layout.
 Scrolling causes some elements to disappear and others to appear.

With CSS transitions, we can control how these changes happen.

These changes are a type of state change. CSS transitions allow us to control
the timing of visual state changes. We can control the following four aspects
of an element’s transition:

 Which CSS properties transition

 How long a transition lasts
 How much time there is before a transition begins
 How a transition accelerates

We’ll explore how different answers to each of these questions changes the
animation. If any of these sound confusing, don’t worry! We will look at
examples of each and learn how to use them together for a visually pleasing
experience.

Instructions

1.
The web page in the browser contains a link styled as a button.

Currently, the background color abruptly changes from orange to green when
you move your mouse over it. Let’s make this transition smoother.

In style.css, find the rule for <a> elements, and add a declaration to transition

the background-color property over a duration of two seconds. It should look
like this:
a {
transition-property: background-color;
transition-duration: 2s;
}
Run the code, then hover over the links. What do you notice?
Hint
The transition-property property is used to define which property will
transition. The transition-duration property is used to set the duration of the
transition. You’ll learn more about these in the next exercise. For now, just
paste the code and check out the new CSS transition you just created!

display: block;

width: 300px;

padding: 31px 5px;

border-radius: 5px;

margin: 20% auto;

background-color: orange;

text-align: center;

font-family: Helvetica;

font-size: 32px;

color: mintcream;

transition-property: background-color;

transition-duration: 2s;

a:hover {

background-color: limegreen;
}
a{

display: block;

width: 300px;

padding: 31px 5px;

border-radius: 5px;

margin: 20% auto;

background-color: orange;

text-align: center;

font-family: Helvetica;

font-size: 32px;

color: mintcream;

transition-property: background-color;

transition-duration: 2s;

a:hover {

background-color: limegreen;

}
CSS TRANSITIONS

Duration

To create a simple transition in CSS, we must specify two of the four aspects:

1. The property that we want to transition.

2. The duration of the transition.

a {
transition-property: color;
transition-duration: 1s;
}
In the example above, transition-property declares which CSS property we will
be transitioning, the text color. The second property, transition-duration,
declares how long the transition will take — one second.

Many properties’ state changes can be transitioned. The type of transition

depends on the property you choose. For a complete list of all animated
properties, see this resource.

Different properties transition in different ways, for example:

 Color values, like color and background-color, will blend to a new color.

 Length values like font-size, width, and height will grow or shrink.

Duration is specified in seconds or milliseconds, such as 3s, 0.75s, 500ms. The

default value is 0s, or instantaneous, as if there is no transition.

When choosing a duration, think about how long actions take in real life. For
example, a human eye blink takes around 400ms. People might expect the
animation of clicking a button to be as sudden as a blink.

Instructions

1.
The background-color transition we implemented in the last exercise is a little
slow. The user may move their mouse away before they notice the color
changing!

Change the duration to 750 milliseconds.

Ultimately, it’s up to you how long your animation takes; there is no right or
wrong value. Experiment and have fun!
Hint

Change the value of the transition-duration property from 2s to 750ms.

display: block;

width: 300px;

padding: 31px 5px;

border-radius: 5px;

margin: 20% auto;

background-color: orange;

text-align: center;

font-family: Helvetica;

font-size: 32px;

color: mintcream;

transition-property: background-color;

transition-duration: 2s;

a:hover {

background-color: limegreen;
}
CSS TRANSITIONS

Timing Function

The next transition property is transition-timing-function. The timing function

describes the pace of the transition.

The default value is ease, which starts the transition slowly, speeds up in the
middle, and slows down again at the end.

Other valid values include:

 ease-in — starts slow, accelerates quickly, stops abruptly

 ease-out — begins abruptly, slows down, and ends slowly
 ease-in-out — starts slow, gets fast in the middle, and ends slowly
 linear — constant speed throughout

transition-property: color;
transition-duration: 1s;
transition-timing-function: ease-out;
In the example above, the text color will be animated over one second. The
timing function is ease-out which means it will begin abruptly and slow down
as it ends.

If you’re interested in learning more about timing functions or seeing a full list
of the possible values, we recommend this resource from the Mozilla
Developer Network.

Instructions

Let’s use the transition-timing-function property in a game! Find the gazelle

in the picture to your right and move your mouse over it. Hint: It’s under a
zebra’s head.

Add transition-timing-function as a property to the .game .gazelle ruleset with

the value linear.
Hover your mouse over the gazelle to observe the difference in motion. If you
can’t tell the difference, you can change the transition-duration value to be
longer.
Hint

Inside the curly braces of the .game .gazelle ruleset, the transition-timing-

function property should have a value of linear.

html,

body {

margin-top: 50px;

height: 100%;

text-align: center;

font-family: Arial, sans-serif;

font-size: 16px;

h1 {

font-size: 40px;

.game {

position: relative;

display: inline-block;

height: 60%;

.game img {
cursor: pointer;

.game .safari {

margin-top: 50px;

height: 430.188px;

width: 573.578px;

.game .gazelle {

position: absolute;

top: 260px;

left: 231px;

z-index: 1;

max-height: 50px;

transition-property: max-height;

transition-duration: 750ms;

.game .gazelle:hover {

max-height: 180px;

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

https://github.com/mdn/content/blob/main/files/en-us/web/css/transition-timing-function/index.html

CSS TRANSITIONS
Timing Function

The next transition property is transition-timing-function. The timing function describes the
pace of the transition.

The default value is ease, which starts the transition slowly, speeds up in the middle, and slows
down again at the end.

Other valid values include:

 ease-in — starts slow, accelerates quickly, stops abruptly

 ease-out — begins abruptly, slows down, and ends slowly
 ease-in-out — starts slow, gets fast in the middle, and ends slowly
 linear — constant speed throughout

transition-property: color;
transition-duration: 1s;
transition-timing-function: ease-out;
In the example above, the text color will be animated over one second. The timing function
is ease-out which means it will begin abruptly and slow down as it ends.

If you’re interested in learning more about timing functions or seeing a full list of the possible
values, we recommend this resource from the Mozilla Developer Network.

Instructions

Let’s use the transition-timing-function property in a game! Find the gazelle in the picture to

your right and move your mouse over it. Hint: It’s under a zebra’s head.

Add transition-timing-function as a property to the .game .gazelle ruleset with the

value linear.

Hover your mouse over the gazelle to observe the difference in motion. If you can’t tell the
difference, you can change the transition-duration value to be longer.
Checkpoint 2 Passed

Hint

Inside the curly braces of the .game .gazelle ruleset, the transition-timing-function property

should have a value of linear.

html,

body {
margin-top: 50px;

height: 100%;

text-align: center;

font-family: Arial, sans-serif;

font-size: 16px;

h1 {

font-size: 40px;

.game {

position: relative;

display: inline-block;

height: 60%;

.game img {

cursor: pointer;

.game .safari {

margin-top: 50px;

height: 430.188px;

width: 573.578px;
}

.game .gazelle {

position: absolute;

top: 260px;

left: 231px;

z-index: 1;

max-height: 50px;

transition-property: max-height;

transition-duration: 750ms;

transition-timing-function:linear;

.game .gazelle:hover {

max-height: 180px;

CSS TRANSITIONS
Delay
Our last transition property is transition-delay. Much like duration, its value is
an amount of time. Delay specifies the time to wait before starting the
transition. As with the duration property, the default value for transition-
delay is 0s, which means no delay.

transition-property: width;
transition-duration: 750ms;
transition-delay: 250ms;
In the example above, a change in the width of the element will start after a
quarter of a second, and it will animate over three quarters of a second.

Instructions

1.
Right now the gazelle immediately begins the transition to the new state when
the mouse hovers over it. Let’s add a delay to make the game a little more
interesting.

In the .game .gazelle ruleset, add a delay of 400ms.

Hint
Use the transition-delay property to add a delay before the transition.

html,

body {

margin-top: 50px;

height: 100%;

text-align: center;

font-family: Arial, sans-serif;

font-size: 16px;

h1 {

font-size: 40px;

.game {

position: relative;

display: inline-block;
height: 60%;

.game img {

cursor: pointer;

.game .safari {

margin-top: 50px;

height: 430.188px;

width: 573.578px;

.game .gazelle {

position: absolute;

top: 260px;

left: 231px;

z-index: 1;

max-height: 50px;

transition-property: max-height;

transition-duration: 750ms;

transition-timing-function: linear;

transition-delay:400ms;

}
.game .gazelle:hover {

max-height: 180px;

}
CSS TRANSITIONS
Shorthand
Now that we’ve explored each transition property, you may find yourself with
many CSS rule sets that look like the code below.

transition-property: color;
transition-duration: 1.5s;
transition-timing-function: linear;
transition-delay: 0.5s;
Because these four properties are so frequently declared together, CSS
provides a property that can be used to declare them all in one
line: transition. This shorthand property describes each aspect of the
transition puzzle in a single declaration. The properties must be specified in
this order: transition-property, transition-duration, transition-timing-
function, transition-delay.

transition: color 1.5s linear 0.5s;

In the example above, we have refactored the four lines of code in the
previous example into one concise line. This example will cause any change in
text color to transition at constant speed over 1.5 seconds, after a delay of 0.5
seconds.

Leaving out one of the properties causes the default value for that property to
be applied. There is one exception: You must set duration if you want to
define delay. Since both are time values, the browser will always interpret the
first time value it sees as duration.

Instructions

1.
Combine all the transition properties for the gazelle into one, shorthand
declaration. The property being transitioned is max-height, with a duration
of 750ms. The timing function is linear, and the delay is 400ms.
Hint
The transition shorthand property uses the properties from all 4 existing
transition properties in this order: transition-property transition-
duration transition-timing-function transition-delay.
html,

body {

margin-top: 50px;

height: 100%;

text-align: center;

font-family: Arial, sans-serif;

font-size: 16px;

h1 {

font-size: 40px;

.game {

position: relative;

display: inline-block;

height: 60%;

.game img {

cursor: pointer;

.game .safari {

margin-top: 50px;
height: 430.188px;

width: 573.578px;

.game .gazelle {

position: absolute;

top: 260px;

left: 231px;

z-index: 1;

max-height: 50px;

transition-property: max-height;

transition-duration: 750ms;

transition-timing-function: linear;

transition-delay: 400ms;

.game .gazelle:hover {

max-height: 180px;

html,

body {

margin-top: 50px;

height: 100%;

text-align: center;

font-family: Arial, sans-serif;

font-size: 16px;

h1 {

font-size: 40px;

.game {

position: relative;

display: inline-block;

height: 60%;

.game img {

cursor: pointer;

.game .safari {

margin-top: 50px;

height: 430.188px;

width: 573.578px;

.game .gazelle {

position: absolute;
top: 260px;

left: 231px;

z-index: 1;

max-height: 50px;

transition: max-height 750ms linear 400ms;

.game .gazelle:hover {

max-height: 180px;

}
CSS TRANSITIONS
Combinations
The shorthand transition rule has one advantage over the set of
separate transition-<property> rules: you can describe unique transitions for
multiple properties, and combine them.

To combine transitions, add a comma (,) before the semicolon (;) in your rule.
After the comma, use the same shorthand syntax. For example:

transition: color 1s linear,

font-size 750ms ease-in 100ms;
The above code transitions two properties at once. The text color transitions
over one second with linear timing and no delay. At the same time, the font
size transitions over 750 milliseconds with an ease-in timing and a 100
millisecond delay. This “chaining” is a powerful tool for expressing
complicated animations.

Instructions

1.
Let’s try this with a deeper example. Note that some of the CSS used in this
example is out of scope for this lesson; however, we’re confident you’ll have
no trouble transforming the experience of a page with transitions.

When you mouse over the button in the browser, you’ll notice it instantly
changes. Let’s fix this so that the change is animated.

Make a new CSS ruleset in style.css to target all elements within the button.
There are three types of elements to account for, <span>, <div>, and <i>:

.button span,
.button div,
.button i {

}
Hint
Remember the spaces and curly braces!
2.
Within the new ruleset, add a shorthand transition declaration to transition the
width of all elements. Set the property to be transitioned to width, the duration
to 750ms, the timing function to ease-in, and the delay to 200ms.
Stuck? Get a hint
3.
That looks nicer except that the “DOWNLOAD” text disappears instantly. Let’s
animate that in tandem.

Add a comma and another transition value for the left property.

Make the duration 500ms, the timing function ease-out, and the delay 450ms.

Hint
The new set of values will go after the first set, separated by a comma.
4.
There’s one more instantaneous change to smooth out: the icon size.

Add another transition to the chain for font-size. Make the duration 950ms and

the timing function linear. Since there is no delay on this transition, leave off
the last delay value.
Hint
transition: width 750ms ease-in 200ms,
left 500ms ease-out 450ms,
font-size 950ms linear;

<!DOCTYPE html>

<head>

<title>Animation All</title>

<link rel="stylesheet" href="style.css">

</head>

<span>DOWNLOAD</span>

<i class="fa fa-arrow-down"></i>

</div>

</a>

</body>

</html>

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);

/* Main Styles */

body {

min-width: 300px;

background-color: #ecf0f1;

font-family: 'Open Sans', sans-serif;

font-size: 16px;

.button {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;
display: block;

overflow: hidden;

margin: auto;

border-radius: 5px;

box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);

width: 300px;

height: 100px;

line-height: 100px;

background-color: #34B3A0;

color: #fff;

.button span,

.button .icon {

position: absolute;

display: block;

height: 100%;

text-align: center;

.button span {

width: 72%;

left: 0px;

line-height: inherit;

font-size: 22px;
}

.button .icon {

right: 0;

width: 28%;

.button .icon .fa {

font-size: 30px;

vertical-align: middle;

.icon {

width: 200px;

background-color: #1A7B72;

.button:hover span {

left: -72%;

.button:hover .icon {

width: 100%;

}
.button:hover .icon .fa {

font-size: 45px;

CSS Transitions: Combinations

Narrative and Instructions

Learn

CSS TRANSITIONS

Combinations

The shorthand transition rule has one advantage over the set of separate transition-
<property> rules: you can describe unique transitions for multiple properties, and combine them.

To combine transitions, add a comma (,) before the semicolon (;) in your rule. After the comma,
use the same shorthand syntax. For example:

transition: color 1s linear,

font-size 750ms ease-in 100ms;
The above code transitions two properties at once. The text color transitions over one second
with linear timing and no delay. At the same time, the font size transitions over 750 milliseconds
with an ease-in timing and a 100 millisecond delay. This “chaining” is a powerful tool for
expressing complicated animations.

Instructions

Let’s try this with a deeper example. Note that some of the CSS used in this example is out of
scope for this lesson; however, we’re confident you’ll have no trouble transforming the
experience of a page with transitions.

When you mouse over the button in the browser, you’ll notice it instantly changes. Let’s fix this
so that the change is animated.

Make a new CSS ruleset in style.css to target all elements within the button. There are three
types of elements to account for, <span>, <div>, and <i>:
.button span,
.button div,
.button i {

}
Checkpoint 2 Passed

Hint

Remember the spaces and curly braces!

Within the new ruleset, add a shorthand transition declaration to transition the width of all
elements. Set the property to be transitioned to width, the duration to 750ms, the timing function
to ease-in, and the delay to 200ms.
Checkpoint 3 Passed

Stuck? Get a hint

That looks nicer except that the “DOWNLOAD” text disappears instantly. Let’s animate that in
tandem.

Add a comma and another transition value for the left property.

Make the duration 500ms, the timing function ease-out, and the delay 450ms.

Checkpoint 4 Passed

Hint

The new set of values will go after the first set, separated by a comma.
4.

There’s one more instantaneous change to smooth out: the icon size.

Add another transition to the chain for font-size. Make the duration 950ms and the timing
function linear. Since there is no delay on this transition, leave off the last delay value.
Checkpoint 5 Passed

Hint

transition: width 750ms ease-in 200ms,

left 500ms ease-out 450ms,
font-size 950ms linear;

Community Forums

Still have questions? View this exercise's thread in the

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);

/* Main Styles */

body {

min-width: 300px;

background-color: #ecf0f1;

font-family: 'Open Sans', sans-serif;

font-size: 16px;

.button {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

display: block;

overflow: hidden;

margin: auto;

border-radius: 5px;

box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);

width: 300px;

height: 100px;

line-height: 100px;
background-color: #34B3A0;

color: #fff;

.button span,

.button .icon {

position: absolute;

display: block;

height: 100%;

text-align: center;

.button span {

width: 72%;

left: 0px;

line-height: inherit;

font-size: 22px;

.button .icon {

right: 0;

width: 28%;

.button .icon .fa {

font-size: 30px;

vertical-align: middle;

.button span,

.button div,

.button i {

transition: width 750ms ease-in 200ms,

left 500ms ease-out 450ms,

font-size 950ms linear;

.icon {

width: 200px;

background-color: #1A7B72;

.button:hover span {

left: -72%;

.button:hover .icon {

width: 100%;

}
.button:hover .icon .fa {

font-size: 45px;

}
All
Even with the shorthand, specifying transitions for many properties can be
tedious. It is common to use the same duration, timing function, and delay for
multiple properties. When this is the case you can set the transition-
property value to all. This will apply the same values to all properties. To effect
this, you can use all as a value for transition-property.

all means every value that changes will be transitioned in the same way. You
can use all with the separate transition properties, or the shorthand syntax.
This allows you to describe the transition of many properties with a single line:

transition: all 1.5s linear 0.5s;

In this example, any change will be animated over one and a half seconds after
a half-second delay with linear timing.

Instructions

1.
Replace all the combined transitions with one single transition for all.

Use a duration of 1.2s, a timing function of ease-out, and delay of 0.2s.

Hint
You’ll need to remove the existing value sets from the transition property and
replace them with a single shorthand declaration using all 1.2s ease-out,
and 0.2s.
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);

/* Main Styles */

body {

min-width: 300px;

background-color: #ecf0f1;

font-family: 'Open Sans', sans-serif;

font-size: 16px;

.button {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

display: block;

overflow: hidden;

margin: auto;

border-radius: 5px;

box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);

width: 300px;

height: 100px;

line-height: 100px;
background-color: #34B3A0;

color: #fff;

.button span,

.button .icon {

position: absolute;

display: block;

height: 100%;

text-align: center;

.button span {

width: 72%;

left: 0px;

line-height: inherit;

font-size: 22px;

.button .icon {

right: 0;

width: 28%;

.button .icon .fa {

font-size: 30px;

vertical-align: middle;

.button span,

.button div,

.button i {

transition: width 750ms ease-in 200ms,

left 500ms ease-out 450ms,

font-size 950ms linear;

.icon {

width: 200px;

background-color: #1A7B72;

.button:hover span {

left: -72%;

.button:hover .icon {

width: 100%;

}
.button:hover .icon .fa {

font-size: 45px;

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);

/* Main Styles */

body {

min-width: 300px;

background-color: #ecf0f1;

font-family: 'Open Sans', sans-serif;

font-size: 16px;

.button {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

display: block;

overflow: hidden;

margin: auto;

border-radius: 5px;

box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);

width: 300px;

height: 100px;

line-height: 100px;

background-color: #34B3A0;

color: #fff;

.button span,

.button .icon {

position: absolute;

display: block;

height: 100%;

text-align: center;

.button span {

width: 72%;

left: 0px;

line-height: inherit;

font-size: 22px;

.button .icon {

right: 0;

width: 28%;
}

.button .icon .fa {

font-size: 30px;

vertical-align: middle;

.button span,

.button div,

.button i {

// transition: width 750ms ease-in 200ms, left 500ms ease-out 450ms, font-size 950ms linear;

transition: all 1.2s ease-out 0.2s;

.icon {

width: 200px;

background-color: #1A7B72;

.button:hover span {

left: -72%;

.button:hover .icon {

width: 100%;
}

.button:hover .icon .fa {

font-size: 45px;

CSS Transitions: All

Narrative and Instructions

Learn

CSS TRANSITIONS

All

Even with the shorthand, specifying transitions for many properties can be tedious. It is common
to use the same duration, timing function, and delay for multiple properties. When this is the case
you can set the transition-property value to all. This will apply the same values to all
properties. To effect this, you can use all as a value for transition-property.

all means every value that changes will be transitioned in the same way. You can use all with
the separate transition properties, or the shorthand syntax. This allows you to describe the
transition of many properties with a single line:

transition: all 1.5s linear 0.5s;

In this example, any change will be animated over one and a half seconds after a half-second
delay with linear timing.

Instructions

Replace all the combined transitions with one single transition for all.

Use a duration of 1.2s, a timing function of ease-out, and delay of 0.2s.

Checkpoint 2 Passed

Hint
You’ll need to remove the existing value sets from the transition property and replace them
with a single shorthand declaration using all 1.2s ease-out, and 0.2s.

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);

/* Main Styles */

body {

min-width: 300px;

background-color: #ecf0f1;

font-family: 'Open Sans', sans-serif;

font-size: 16px;

.button {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

display: block;

overflow: hidden;

margin: auto;

border-radius: 5px;

box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);

width: 300px;
height: 100px;

line-height: 100px;

background-color: #34B3A0;

color: #fff;

.button span,

.button .icon {

position: absolute;

display: block;

height: 100%;

text-align: center;

.button span {

width: 72%;

left: 0px;

line-height: inherit;

font-size: 22px;

.button .icon {

right: 0;

width: 28%;

}
.button .icon .fa {

font-size: 30px;

vertical-align: middle;

.button span,

.button div,

.button i {

// transition: width 750ms ease-in 200ms, left 500ms ease-out 450ms, font-size 950ms linear;

transition: all 1.2s ease-out 0.2s;

.icon {

width: 200px;

background-color: #1A7B72;

.button:hover span {

left: -72%;

.button:hover .icon {

width: 100%;

}
.button:hover .icon .fa {

font-size: 45px;

CSS TRANSITIONS

Review

CSS Transitions are a powerful tool for providing visual feedback to users. We’ve learned
a lot about transitions, so let’s review:

CSS Transitions have 4 components:

 A property that will transition.

 The duration which describes how long the transition takes.
 The delay to pause before the transition will take place.
 The timing function that describes the transition’s acceleration.

A simple transition can be described with a property and a duration, which can be
written like this:

transition-property: color;
transition-duration: 1s;
Many properties’ state changes can be transitioned, including color, background color,
font size, width, and height. all is also a valid transition property that causes every
changing property to transition.

The shorthand property transition can be used to describe all four components of a

transition at once. By using the comma (,) operator, many transitions can be described
in one CSS rule.

If you want to learn more about CSS Transitions, we recommend MDN’s Using CSS
Transitions doc.

Good work, you now have the tools to make your web pages come to life!
ADVANCED CSS: FLEXBOX AND CSS TRANSITIONS
Transitions - 20,000 Leagues Under the Sea
In this project you will follow step-by-step instructions to add animations to
an existing static web page. The web page is an online reader; it presents the
full text of the book “20,000 Leagues Under the Sea” by Jules Verne.

The page for the first chapter is mostly complete. There are a few fancy
features:

 When you hover over the sidebar on the left, a menu opens which
contains the Table of Contents.
 When you hover over a highlighted word in the text, a definition
appears. See the words “phosphorescent” and “locomotion”.
 When you hover over the semi-transparent buttons at the bottom of the
page, they turn opaque.
 When you hover over any link, it changes color.

These interactions add a level of refinement to an otherwise static page. Your

job will be to refine them even more. Currently, all these changes happen in an
instant. Add transitions to make the changes smooth.

The website’s existing index.html and style.css files are displayed in the text

editor.

If you get stuck during this project or would like to see an experienced
developer work through it, click “Get Unstuck“ to see a project walkthrough
video.

Tasks

0/5 Complete
Mark the tasks as complete by checking them off
1.
In style.css, find the ruleset for links inside the sidebar ( nav a). Add a CSS
declaration to transition the text color. Experiment with different values for
duration, timing function, and delay until you are satisfied.
Hint
Add a shorthand ‘transition’ property starting with a value of color, followed
by any values you choose for duration, timing function, and delay.

Duration and delay values can be specified using seconds or milliseconds, and
examples of a timing functions are ease and linear!
2.
Next, you’ll animate the “Next” and “Back” buttons’ transparency.

Find the .button ruleset. Add a declaration to transition the property opacity.

Again, the choice for the other values is yours. Pick values for duration, timing
function, and delay that feel good to you.
Hint
Add a shorthand ‘transition’ property starting with a value of opacity, followed
by any values you choose for duration, timing function, and delay.
3.
Now make the sidebar slide out instead of instantly appearing. Add a
declaration to the nav ruleset to transition the left property. Experiment with
the other transition properties.
Hint
Add a shorthand ‘transition’ property just like in the previous steps. You’ve got
this!

You can use ctrl+f (Windows) or cmnd+f (Mac) in the workspace to do a quick

search for the ruleset!
4.
Find the selector .definable .word which selects the words that have
definitions. Add a transition for the text color.
Hint
Add a shorthand transition property with the color value followed by any
values you choose for duration, timing function, and delay.
5.
Finally, we’ll make the definition block fall down from the top of the page and
fade in. The selector for this section is .definable .definition-container. Add a
declaration to transition the top property. Use a comma (,) to transition a
second property, opacity.
Hint
Use the shorthand transition property with a value of top, followed by any
values you choose for duration, timing function, and delay. Then, in the same
declaration, add the `opacity value, and values for duration, timing function,
and delay.

<!DOCTYPE html>

<html>

<head>

<title>20,000 Leagues Under The Sea</title>

<link rel="stylesheet" type="text/css" href="resources/css/reset.css">

<link rel="stylesheet" type="text/css" href="resources/css/style.css">

<link href="https://fonts.googleapis.com/css?family=Proza+Libre:400,500,700" rel="stylesheet">

</head>

<body>

<nav>

<h2>Contents</h2>

<ol>

<li><a href="#" class="active">A SHIFTING REEF</a></li>

<li><a href="#">PRO AND CON</a></li>

<li><a href="#">I FORM MY RESOLUTION</a></li>

<li><a href="#">AT A VENTURE</a></li>

<li><a href="#">AT FULL STEAM</a></li>

</ol>

</div>

<div>

</div>

</nav>

<h1>Twenty Thousand Leagues Under the Sea</h1>

<h2>Jules Verne</h2>

</header>

<span class="number">CHAPTER I</span>

<span class="name">A SHIFTING REEF</span>

</div>

<div class="prose">The year 1866 was signalised by a remarkable incident, a mysterious and puzzling
phenomenon, which doubtless no one has yet forgotten. Not to mention rumours which agitated the
maritime population and excited the public mind, even in the interior of continents, seafaring men were
particularly excited. Merchants, common sailors, captains of vessels, skippers, both of Europe and
America, naval officers of all countries, and the Governments of several States on the two continents,
were deeply interested in the matter.</div>

<div class="prose">For some time past vessels had been met by “an enormous thing,” a long object,
spindle-shaped, occasionally

<span class="word">phosphorescent</span><!-- Trailing comments prevents indentation whitespace

from displaying between divs.

--><div class="definition-container">

<h4>phosphorescent</h4>

<span class="information">adjective | phos·pho·res·cent</span>

<li>Exhibiting a luminescence that is caused by the absorption of radiations (as light or electrons)
and continues for a noticeable time after these radiations have stopped</li>

<li>Exhibiting an enduring luminescence without sensible heat</li>

</ul>

</div><!--

--></div>, and infinitely larger and more rapid in its movements than a whale.</div>

<div class="prose">The facts relating to this apparition (entered in various log-books) agreed in most
respects as to the shape of the object or creature in question, the untiring rapidity of its movements, its
surprising power of

<span class="word">locomotion</span><div class="definition-container">

<h4>locomotion</h4>

<span class="information">noun | lo·co·mo·tion</span>

<li>movement or the ability to move from one place to another</li>

</ol>

</div><!--

--></div>,

and the peculiar life with which it seemed endowed. If it was a whale, it surpassed in size all those
hitherto classified in science. Taking into consideration the mean of observations made at divers times—
rejecting the timid estimate of those who assigned to this object a length of two hundred feet, equally
with the exaggerated opinions which set it down as a mile in width and three in length—we might fairly
conclude that this mysterious being surpassed greatly all dimensions admitted by the learned ones of
the day, if it existed at all. And that it DID exist was an undeniable fact; and, with that tendency which
disposes the human mind in favour of the marvellous, we can understand the excitement produced in
the entire world by this supernatural apparition. As to classing it in the list of fables, the idea was out of
the question.</div>

<div class="prose">On the 20th of July, 1866, the steamer Governor Higginson, of the Calcutta and
Burnach Steam Navigation Company, had met this moving mass five miles off the east coast of Australia.
Captain Baker thought at first that he was in the presence of an unknown sandbank; he even prepared
to determine its exact position when two columns of water, projected by the mysterious object, shot
with a hissing noise a hundred and fifty feet up into the air. Now, unless the sandbank had been
submitted to the intermittent eruption of a geyser, the Governor Higginson had to do neither more nor
less than with an aquatic mammal, unknown till then, which threw up from its blow-holes columns of
water mixed with air and vapour.</div>

<a href="#" class="button"><img src="https://content.codecademy.com/courses/freelance-1/unit-

6/left_arrow.svg"><span class="action">Back</span></a>

<a href="#" class="button"><span class="action">Next</span><img

src="https://content.codecademy.com/courses/freelance-1/unit-6/right_arrow.svg"></a>
</div>

</div>

</body>

</html>

/* Universal Styles */

html {

font-size: 16px;

body {

min-width: 475px;

font-family: "Cormorant Garamond", serif;

@media only screen and (max-width: 810px) {

html {

font-size: 14px;

@media only screen and (max-width: 540px) {

html {

font-size: 12px;
}

/* Navigation Bar */

nav {

position: fixed;

z-index: 5;

left: -17.8em;

display: flex;

align-items: center;

height: 100%;

padding-left: 5rem;

padding-right: 2rem;

background: url("https://content.codecademy.com/courses/freelance-1/unit-6/nav_background.png")
center center repeat;

font-family: "Proza Libre", serif;

font-size: 18px;

line-height: 2.2;

font-weight: bold;

color: #142033;

nav:hover {

left: 0;
}

nav .hover-content {

margin-right: 3em;

nav h2 {

font-family: "Cormorant Garamond", serif;

font-size: 2.6em;

font-weight: bold;

color: #639eff;

nav h3 {

padding-bottom: 1.1em;

nav ol {

list-style: upper-roman outside;

nav a {

text-decoration: none;

color: inherit;
}

nav a:hover,

nav a.active {

color: #639eff;

/* Header */

header {

padding: 3.125rem 13rem;

background-color: #142033;

text-align: center;

font-weight: bold;

line-height: 2.1;

color: #b3d0ff;

header h1 {

font-size: 6rem;

line-height: 1;

font-weight: 500;

color: #66a1ff;

}
header em {

font-size: 1.5rem;

font-style: italic;

header h2 {

font-size: 3rem;

@media only screen and (max-width: 810px) {

header {

padding: 3.125rem 8rem 3.125rem 10rem;

header h1 {

font-size: 4rem;

header h2 {

font-size: 2rem;

/* Book Content */
.book-content {

padding: 4.75rem 20%;

background-color: #f2f7ff;

font-family: "Proza Libre", sans-serif;

font-size: 1.5rem;

line-height: 2;

color: #4a4a4a;

cursor: default;

.book-content h3 {

text-align: center;

font-size: 3rem;

line-height: 2.1;

font-weight: bold;

color: #142033;

.chapter {

color: #639eff;

.chapter .number {

display: block;

font-size: 1.25rem;
}

.chapter .name {

display: block;

font-size: 2.25rem;

.book-content .prose {

margin-bottom: 4.75rem;

@media only screen and (max-width: 810px) {

.book-content {

padding-right: 10%;

@media only screen and (max-width: 540px) {

.book-content {

padding-right: 1%;

/* Word Definitions */
.definable {

display: inline;

.definable .word {

color: #639eff;

.definable .word:hover {

color: #306acc;

.definable .definition-container {

position: fixed;

z-index: 10;

top: -100%;

left: 0;

box-sizing: border-box;

width: 100%;

padding: 0.5rem 4rem 2rem 4rem;

background-color: #ffffff;

box-shadow: 0 0 64px 0 rgba(0, 0, 0, 0.2);

opacity: 0;

font-family: "Proza Libre", sans-serif;

font-size: 1.5rem;

.definable:hover .definition-container {

top: 0;

opacity: 1;

.definition-container h4 {

font-family: "Cormorant Garamond", serif;

font-size: 3rem;

font-weight: bold;

line-height: 2.1;

color: #66a1ff;

.definition-container .information {

display: block;

line-height: 2.5;

color: #9b9b9b;

.definition-container .definitions {

list-style: inside decimal;

line-height: 1.7;

color: #4a4a4a;

/* Chapter Navigation Buttons */

.navigation-buttons {

display: flex;

justify-content: space-between;

align-items: center;

.button {

display: inline-flex;

justify-content: space-between;

align-items: center;

width: 13rem;

padding: 0 2rem;

background-color: #639eff;

opacity: 0.3;

font-size: 3rem;

font-weight: bold;

text-decoration: none;

color: #ffffff;
}

.button:hover {

opacity: 1;

@media only screen and (max-width: 930px) {

.button {

width: auto;

padding: 1rem 2rem;

.button .action {

display: none;

/* Universal Styles */

html {

font-size: 16px;

body {

min-width: 475px;

font-family: "Cormorant Garamond", serif;

}

@media only screen and (max-width: 810px) {

html {

font-size: 14px;

@media only screen and (max-width: 540px) {

html {

font-size: 12px;

/* Navigation Bar */

nav {

position: fixed;

z-index: 5;

left: -17.8em;

display: flex;

align-items: center;

height: 100%;

padding-left: 5rem;
padding-right: 2rem;

background: url("https://content.codecademy.com/courses/freelance-1/unit-6/nav_background.png")
center center repeat;

font-family: "Proza Libre", serif;

font-size: 18px;

line-height: 2.2;

font-weight: bold;

color: #142033;

transition-property:left;

transition-duration:1s;

transition-timing-function:1s;

transition-delay:1s;

nav:hover {

left: 0;

nav .hover-content {

margin-right: 3em;

nav h2 {

font-family: "Cormorant Garamond", serif;

font-size: 2.6em;

font-weight: bold;
color: #639eff;

nav h3 {

padding-bottom: 1.1em;

nav ol {

list-style: upper-roman outside;

nav a {

text-decoration: none;

color: inherit;

transition-property:color;

transition-duration:800ms;

transition-timing-function:ease-in;

transition-delay:300ms;

nav a:hover,

nav a.active {

color: #639eff;

}
/* Header */

header {

padding: 3.125rem 13rem;

background-color: #142033;

text-align: center;

font-weight: bold;

line-height: 2.1;

color: #b3d0ff;

header h1 {

font-size: 6rem;

line-height: 1;

font-weight: 500;

color: #66a1ff;

header em {

font-size: 1.5rem;

font-style: italic;

header h2 {
font-size: 3rem;

@media only screen and (max-width: 810px) {

header {

padding: 3.125rem 8rem 3.125rem 10rem;

header h1 {

font-size: 4rem;

header h2 {

font-size: 2rem;

/* Book Content */

.book-content {

padding: 4.75rem 20%;

background-color: #f2f7ff;

font-family: "Proza Libre", sans-serif;

font-size: 1.5rem;

line-height: 2;
color: #4a4a4a;

cursor: default;

.book-content h3 {

text-align: center;

font-size: 3rem;

line-height: 2.1;

font-weight: bold;

color: #142033;

.chapter {

color: #639eff;

.chapter .number {

display: block;

font-size: 1.25rem;

.chapter .name {

display: block;

font-size: 2.25rem;

}
.book-content .prose {

margin-bottom: 4.75rem;

@media only screen and (max-width: 810px) {

.book-content {

padding-right: 10%;

@media only screen and (max-width: 540px) {

.book-content {

padding-right: 1%;

/* Word Definitions */

.definable {

display: inline;

.definable .word {

color: #639eff;
}

.definable .word:hover {

color: #306acc;

.definable .definition-container {

position: fixed;

z-index: 10;

top: -100%;

left: 0;

box-sizing: border-box;

width: 100%;

padding: 0.5rem 4rem 2rem 4rem;

background-color: #ffffff;

box-shadow: 0 0 64px 0 rgba(0, 0, 0, 0.2);

opacity: 0;

font-family: "Proza Libre", sans-serif;

font-size: 1.5rem;

.definable:hover .definition-container {

top: 0;
opacity: 1;

.definition-container h4 {

font-family: "Cormorant Garamond", serif;

font-size: 3rem;

font-weight: bold;

line-height: 2.1;

color: #66a1ff;

.definition-container .information {

display: block;

line-height: 2.5;

color: #9b9b9b;

.definition-container .definitions {

list-style: inside decimal;

line-height: 1.7;

color: #4a4a4a;

/* Chapter Navigation Buttons */

.navigation-buttons {

display: flex;

justify-content: space-between;

align-items: center;

.button {

display: inline-flex;

justify-content: space-between;

align-items: center;

width: 13rem;

padding: 0 2rem;

background-color: #639eff;

opacity: 0.3;

font-size: 3rem;

font-weight: bold;

text-decoration: none;

color: #ffffff;

transition-property:opacity;

transition-duration:500ms;

transition-timing-function:ease-in-out;

transition-delay:300ms;

.button:hover {
opacity: 1;

@media only screen and (max-width: 930px) {

.button {

width: auto;

padding: 1rem 2rem;

.button .action {

display: none;

/* Universal Styles */

html {

font-size: 16px;

body {

min-width: 475px;

font-family: "Cormorant Garamond", serif;

@media only screen and (max-width: 810px) {

html {

font-size: 14px;

@media only screen and (max-width: 540px) {

html {

font-size: 12px;

/* Navigation Bar */

nav {

position: fixed;

z-index: 5;

left: -17.8em;

display: flex;

align-items: center;

height: 100%;

padding-left: 5rem;

padding-right: 2rem;

background: url("https://content.codecademy.com/courses/freelance-1/unit-6/nav_background.png")
center center repeat;

font-family: "Proza Libre", serif;

font-size: 18px;

line-height: 2.2;

font-weight: bold;

color: #142033;

transition-property:left;

transition-duration:1s;

transition-timing-function:1s;

transition-delay:1s;

nav:hover {

left: 0;

nav .hover-content {

margin-right: 3em;

nav h2 {

font-family: "Cormorant Garamond", serif;

font-size: 2.6em;

font-weight: bold;

color: #639eff;

}
nav h3 {

padding-bottom: 1.1em;

nav ol {

list-style: upper-roman outside;

nav a {

text-decoration: none;

color: inherit;

transition-property:color;

transition-duration:800ms;

transition-timing-function:ease-in;

transition-delay:300ms;

nav a:hover,

nav a.active {

color: #639eff;

/* Header */
header {

padding: 3.125rem 13rem;

background-color: #142033;

text-align: center;

font-weight: bold;

line-height: 2.1;

color: #b3d0ff;

header h1 {

font-size: 6rem;

line-height: 1;

font-weight: 500;

color: #66a1ff;

header em {

font-size: 1.5rem;

font-style: italic;

header h2 {

font-size: 3rem;

}
@media only screen and (max-width: 810px) {

header {

padding: 3.125rem 8rem 3.125rem 10rem;

header h1 {

font-size: 4rem;

header h2 {

font-size: 2rem;

/* Book Content */

.book-content {

padding: 4.75rem 20%;

background-color: #f2f7ff;

font-family: "Proza Libre", sans-serif;

font-size: 1.5rem;

line-height: 2;

color: #4a4a4a;

cursor: default;

}
.book-content h3 {

text-align: center;

font-size: 3rem;

line-height: 2.1;

font-weight: bold;

color: #142033;

.chapter {

color: #639eff;

.chapter .number {

display: block;

font-size: 1.25rem;

.chapter .name {

display: block;

font-size: 2.25rem;

.book-content .prose {

margin-bottom: 4.75rem;
}

@media only screen and (max-width: 810px) {

.book-content {

padding-right: 10%;

@media only screen and (max-width: 540px) {

.book-content {

padding-right: 1%;

/* Word Definitions */

.definable {

display: inline;

.definable .word {

color: #639eff;

transition-property:color:

transition-duration:300ms;

transition-timing-function:ease-in;
}

.definable .word:hover {

color: #306acc;

.definable .definition-container {

position: fixed;

z-index: 10;

top: -100%;

left: 0;

box-sizing: border-box;

width: 100%;

padding: 0.5rem 4rem 2rem 4rem;

background-color: #ffffff;

box-shadow: 0 0 64px 0 rgba(0, 0, 0, 0.2);

opacity: 0;

font-family: "Proza Libre", sans-serif;

font-size: 1.5rem;

transition-property:top,opacity:

transition-duration:2000ms,3000ms;

transition-delay:0s,1000ms;
}

.definable:hover .definition-container {

top: 0;

opacity: 1;

.definition-container h4 {

font-family: "Cormorant Garamond", serif;

font-size: 3rem;

font-weight: bold;

line-height: 2.1;

color: #66a1ff;

.definition-container .information {

display: block;

line-height: 2.5;

color: #9b9b9b;

.definition-container .definitions {

list-style: inside decimal;

line-height: 1.7;

color: #4a4a4a;
}

/* Chapter Navigation Buttons */

.navigation-buttons {

display: flex;

justify-content: space-between;

align-items: center;

.button {

display: inline-flex;

justify-content: space-between;

align-items: center;

width: 13rem;

padding: 0 2rem;

background-color: #639eff;

opacity: 0.3;

font-size: 3rem;

font-weight: bold;

text-decoration: none;

color: #ffffff;

transition-property:opacity;

transition-duration:500ms;

transition-timing-function:ease-in-out;
transition-delay:300ms;

.button:hover {

opacity: 1;

@media only screen and (max-width: 930px) {

.button {

width: auto;

padding: 1rem 2rem;

.button .action {

display: none;

<!DOCTYPE html>

<html>

<head>

<title>20,000 Leagues Under The Sea</title>

<link rel="stylesheet" type="text/css" href="resources/css/reset.css">

<link rel="stylesheet" type="text/css" href="resources/css/style.css">

<link href="https://fonts.googleapis.com/css?family=Proza+Libre:400,500,700" rel="stylesheet">

</head>

<body>

<nav>

<h2>Contents</h2>

<ol>

<li><a href="#" class="active">A SHIFTING REEF</a></li>

<li><a href="#">PRO AND CON</a></li>

<li><a href="#">I FORM MY RESOLUTION</a></li>

<li><a href="#">NED LAND</a></li>

<li><a href="#">AT A VENTURE</a></li>

<li><a href="#">AT FULL STEAM</a></li>

</ol>

</div>

<div>

</div>

</nav>

<h1>Twenty Thousand Leagues Under the Sea</h1>

<h2>Jules Verne</h2>

</header>

<span class="number">CHAPTER I</span>

<span class="name">A SHIFTING REEF</span>

</div>

<div class="prose">For some time past vessels had been met by “an enormous thing,” a long object,
spindle-shaped, occasionally

<span class="word">phosphorescent</span><!-- Trailing comments prevents indentation whitespace

from displaying between divs.

--><div class="definition-container">

<h4>phosphorescent</h4>
<span class="information">adjective | phos·pho·res·cent</span>

<li>Exhibiting a luminescence that is caused by the absorption of radiations (as light or electrons)
and continues for a noticeable time after these radiations have stopped</li>

<li>Exhibiting an enduring luminescence without sensible heat</li>

</ul>

</div><!--

--></div>, and infinitely larger and more rapid in its movements than a whale.</div>

<span class="word">locomotion</span><!--

--><div class="definition-container">

<h4>locomotion</h4>

<span class="information">noun | lo·co·mo·tion</span>

<li>movement or the ability to move from one place to another</li>

</ol>

</div><!--

--></div>,

<a href="#" class="button"><img src="https://content.codecademy.com/courses/freelance-1/unit-

6/left_arrow.svg"><span class="action">Back</span></a>

<a href="#" class="button"><span class="action">Next</span><img

src="https://content.codecademy.com/courses/freelance-1/unit-6/right_arrow.svg"></a>

</div>

</body>

</html>

ADVANCED CSS: FLEXBOX AND CSS TRANSITIONS

Transitions - 20,000 Leagues Under the Sea
In this project you will follow step-by-step instructions to add animations to
an existing static web page. The web page is an online reader; it presents the
full text of the book “20,000 Leagues Under the Sea” by Jules Verne.

The page for the first chapter is mostly complete. There are a few fancy
features:

These interactions add a level of refinement to an otherwise static page. Your

job will be to refine them even more. Currently, all these changes happen in an
instant. Add transitions to make the changes smooth.

The website’s existing index.html and style.css files are displayed in the text

editor.

If you get stuck during this project or would like to see an experienced
developer work through it, click “Get Unstuck“ to see a project walkthrough
video.

Tasks

5/5 Complete
Mark the tasks as complete by checking them off
1.
In style.css, find the ruleset for links inside the sidebar ( nav a). Add a CSS
declaration to transition the text color. Experiment with different values for
duration, timing function, and delay until you are satisfied.
Hint
Add a shorthand ‘transition’ property starting with a value of color, followed
by any values you choose for duration, timing function, and delay.

Find the .button ruleset. Add a declaration to transition the property opacity.

You can use ctrl+f (Windows) or cmnd+f (Mac) in the workspace to do a quick

<!DOCTYPE html>

<html>

<head>

<title>20,000 Leagues Under The Sea</title>

<link rel="stylesheet" type="text/css" href="resources/css/style.css">

<link href="https://fonts.googleapis.com/css?family=Proza+Libre:400,500,700" rel="stylesheet">

</head>

<body>

<nav>

<h2>Contents</h2>

<ol>

<li><a href="#" class="active">A SHIFTING REEF</a></li>

<li><a href="#">PRO AND CON</a></li>

<li><a href="#">I FORM MY RESOLUTION</a></li>

<li><a href="#">NED LAND</a></li>

<li><a href="#">AT A VENTURE</a></li>

<li><a href="#">AT FULL STEAM</a></li>

</ol>

</div>

<div>

</div>
</nav>

<h1>Twenty Thousand Leagues Under the Sea</h1>

<h2>Jules Verne</h2>

</header>

<span class="number">CHAPTER I</span>

<span class="name">A SHIFTING REEF</span>

</div>

<div class="prose">For some time past vessels had been met by “an enormous thing,” a long object,
spindle-shaped, occasionally

<div class="definable">
<span class="word">phosphorescent</span><!-- Trailing comments prevents indentation whitespace
from displaying between divs.

--><div class="definition-container">

<h4>phosphorescent</h4>

<span class="information">adjective | phos·pho·res·cent</span>

<li>Exhibiting a luminescence that is caused by the absorption of radiations (as light or electrons)
and continues for a noticeable time after these radiations have stopped</li>

<li>Exhibiting an enduring luminescence without sensible heat</li>

</ul>

</div><!--

--></div>, and infinitely larger and more rapid in its movements than a whale.</div>

<span class="word">locomotion</span><!--

--><div class="definition-container">

<h4>locomotion</h4>

<span class="information">noun | lo·co·mo·tion</span>

<li>movement or the ability to move from one place to another</li>

</ol>

</div><!--

--></div>,
and the peculiar life with which it seemed endowed. If it was a whale, it surpassed in size all those
hitherto classified in science. Taking into consideration the mean of observations made at divers times—
rejecting the timid estimate of those who assigned to this object a length of two hundred feet, equally
with the exaggerated opinions which set it down as a mile in width and three in length—we might fairly
conclude that this mysterious being surpassed greatly all dimensions admitted by the learned ones of
the day, if it existed at all. And that it DID exist was an undeniable fact; and, with that tendency which
disposes the human mind in favour of the marvellous, we can understand the excitement produced in
the entire world by this supernatural apparition. As to classing it in the list of fables, the idea was out of
the question.</div>

<a href="#" class="button"><img src="https://content.codecademy.com/courses/freelance-1/unit-

6/left_arrow.svg"><span class="action">Back</span></a>

<a href="#" class="button"><span class="action">Next</span><img

src="https://content.codecademy.com/courses/freelance-1/unit-6/right_arrow.svg"></a>

</div>

</body>

</html>

/* Universal Styles */

html {

font-size: 16px;
}

body {

min-width: 475px;

font-family: "Cormorant Garamond", serif;

@media only screen and (max-width: 810px) {

html {

font-size: 14px;

@media only screen and (max-width: 540px) {

html {

font-size: 12px;

/* Navigation Bar */

nav {

position: fixed;

z-index: 5;
left: -17.8em;

display: flex;

align-items: center;

height: 100%;

padding-left: 5rem;

padding-right: 2rem;

background: url("https://content.codecademy.com/courses/freelance-1/unit-6/nav_background.png")
center center repeat;

font-family: "Proza Libre", serif;

font-size: 18px;

line-height: 2.2;

font-weight: bold;

color: #142033;

transition-property:left;

transition-duration:1s;

transition-timing-function:1s;

transition-delay:1s;

nav:hover {

left: 0;

nav .hover-content {

margin-right: 3em;

}
nav h2 {

font-family: "Cormorant Garamond", serif;

font-size: 2.6em;

font-weight: bold;

color: #639eff;

nav h3 {

padding-bottom: 1.1em;

nav ol {

list-style: upper-roman outside;

nav a {

text-decoration: none;

color: inherit;

transition-property:color;

transition-duration:800ms;

transition-timing-function:ease-in;

transition-delay:300ms;

}
nav a:hover,

nav a.active {

color: #639eff;

/* Header */

header {

padding: 3.125rem 13rem;

background-color: #142033;

text-align: center;

font-weight: bold;

line-height: 2.1;

color: #b3d0ff;

header h1 {

font-size: 6rem;

line-height: 1;

font-weight: 500;

color: #66a1ff;

header em {
font-size: 1.5rem;

font-style: italic;

header h2 {

font-size: 3rem;

@media only screen and (max-width: 810px) {

header {

padding: 3.125rem 8rem 3.125rem 10rem;

header h1 {

font-size: 4rem;

header h2 {

font-size: 2rem;

/* Book Content */

.book-content {
padding: 4.75rem 20%;

background-color: #f2f7ff;

font-family: "Proza Libre", sans-serif;

font-size: 1.5rem;

line-height: 2;

color: #4a4a4a;

cursor: default;

.book-content h3 {

text-align: center;

font-size: 3rem;

line-height: 2.1;

font-weight: bold;

color: #142033;

.chapter {

color: #639eff;

.chapter .number {

display: block;

font-size: 1.25rem;

}
.chapter .name {

display: block;

font-size: 2.25rem;

.book-content .prose {

margin-bottom: 4.75rem;

@media only screen and (max-width: 810px) {

.book-content {

padding-right: 10%;

@media only screen and (max-width: 540px) {

.book-content {

padding-right: 1%;

/* Word Definitions */

.definable {
display: inline;

.definable .word {

color: #639eff;

transition-property:color:

transition-duration:300ms;

transition-timing-function:ease-in;

.definable .word:hover {

color: #306acc;

.definable .definition-container {

position: fixed;

z-index: 10;

top: -100%;

left: 0;

box-sizing: border-box;

width: 100%;

padding: 0.5rem 4rem 2rem 4rem;

background-color: #ffffff;
box-shadow: 0 0 64px 0 rgba(0, 0, 0, 0.2);

opacity: 0;

font-family: "Proza Libre", sans-serif;

font-size: 1.5rem;

transition-property:top,opacity:

transition-duration:2000ms,3000ms;

transition-delay:0s,1000ms;

.definable:hover .definition-container {

top: 0;

opacity: 1;

.definition-container h4 {

font-family: "Cormorant Garamond", serif;

font-size: 3rem;

font-weight: bold;

line-height: 2.1;

color: #66a1ff;

.definition-container .information {

display: block;
line-height: 2.5;

color: #9b9b9b;

.definition-container .definitions {

list-style: inside decimal;

line-height: 1.7;

color: #4a4a4a;

/* Chapter Navigation Buttons */

.navigation-buttons {

display: flex;

justify-content: space-between;

align-items: center;

.button {

display: inline-flex;

justify-content: space-between;

align-items: center;

width: 13rem;

padding: 0 2rem;

background-color: #639eff;
opacity: 0.3;

font-size: 3rem;

font-weight: bold;

text-decoration: none;

color: #ffffff;

transition-property:opacity;

transition-duration:500ms;

transition-timing-function:ease-in-out;

transition-delay:300ms;

.button:hover {

opacity: 1;

@media only screen and (max-width: 930px) {

.button {

width: auto;

padding: 1rem 2rem;

.button .action {

display: none;

}
Fontawesome:

<!DOCTYPE html>

<html>

<head>

<title>Please Participate in Our Survey!</title>

<link rel="stylesheet" type="text/css" href="style.css">

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-

awesome/4.7.0/css/font-awesome.css">

</head>

<body>

<nav>

<ul>

<li><a href="#question1">QUESTION 1</a></li>

<li><a href="#question2">QUESTION 2</a></li>

<li><a href="#question3">QUESTION 3</a></li>

<li><a href="#question4">QUESTION 4</a></li>

<li><a href="#question5">QUESTION 5</a></li>

</ul>

</nav>
<div class="welcome">

<h1>WELCOME TO OUR SURVEY!</h1>

<h3>We're looking forward to getting your answers so we can make sure our products and services
are the best they can be!</h3>

</div>

</header>

<div id="question1" class="question">

<h4>QUESTION 1</h4>

<span class="prompt">I like participating in physical activity such as running, swimming, or

biking.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question2" class="question">

<h4>QUESTION 2</h4>

<span class="prompt">I try to keep up to date with the latest fashion in active wear.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>
</div>

<div id="question3" class="question">

<h4>QUESTION 3</h4>

<span class="prompt">I purchase clothing online regularly.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question4" class="question">

<h4>QUESTION 4</h4>

<span class="prompt">I try to buy goods that are designed and/or manufactured in my home
country.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question5" class="question">

<h4>QUESTION 5</h4>

<span class="prompt">I look to famous athletes when trying to choose what to wear when
training.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>
</div>

</div>

<span>Share your results with friends</span>

<i class="fa fa-facebook fa-lg"></i>

<i class="fa fa-twitter fa-lg"></i>

<i class="fa fa-pinterest fa-lg"></i>

</div>

</body>

</html>

FONT AWESOME
Introduction to Font Awesome
Icons are small symbols used on many websites to convey information, often without
text. Most people associate a few commonly used icons with specific software actions.
For example, the floppy disk icon is commonly associated with saving a document —
years after we’ve stopped using floppy disks! In this lesson, we will introduce Font
Awesome, a library used to add widely recognized icons to web pages. We will walk you
through the two simple steps required to add a Font Awesome icon:

1. Linking HTML to the Font Awesome library.

2. Adding and resizing an icon with Font Awesome classes and the <i> tag.

When used correctly, these icons save space, appear cleaner than text, and make
common actions stand out to the user.

By the end of this lesson, you will know how to add, position, and size Font Awesome
icons on a web page.

<!DOCTYPE html>
<html>

<head>

<title>Please Participate in Our Survey!</title>

<link rel="stylesheet" type="text/css" href="style.css">

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-

awesome/4.7.0/css/font-awesome.css">

</head>

<body>

<nav>

<ul>

<li><a href="#question1">QUESTION 1</a></li>

<li><a href="#question2">QUESTION 2</a></li>

<li><a href="#question3">QUESTION 3</a></li>

<li><a href="#question4">QUESTION 4</a></li>

<li><a href="#question5">QUESTION 5</a></li>

</ul>

</nav>

<div class="welcome">
<h1>WELCOME TO OUR SURVEY!</h1>

<h3>We're looking forward to getting your answers so we can make sure our products and services
are the best they can be!</h3>

</div>

</header>

<div id="question1" class="question">

<h4>QUESTION 1</h4>

<span class="prompt">I like participating in physical activity such as running, swimming, or

biking.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question2" class="question">

<h4>QUESTION 2</h4>

<span class="prompt">I try to keep up to date with the latest fashion in active wear.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>
<div id="question3" class="question">

<h4>QUESTION 3</h4>

<span class="prompt">I purchase clothing online regularly.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question4" class="question">

<h4>QUESTION 4</h4>

<span class="prompt">I try to buy goods that are designed and/or manufactured in my home
country.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question5" class="question">

<h4>QUESTION 5</h4>

<span class="prompt">I look to famous athletes when trying to choose what to wear when
training.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

</div>

<span>Share your results with friends</span>

<i class="fa fa-facebook fa-lg"></i>

<i class="fa fa-twitter fa-lg"></i>

<i class="fa fa-pinterest fa-lg"></i>

</div>

</body>

</html>

https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css

FONT AWESOME

Link Font Awesome

The Font Awesome library is linked to an HTML document using

the <link> tag. The library can be linked from a CDN or saved and linked to a
local file.

When linking to a CDN, we recommend using the Bootstrap CDN, which hosts

a copy of the Font Awesome library. The file is referenced using the <link> tag
in the head of the HTML document:

<head>
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
</head>
In the example above, the <link> tag is used to reference (href) font-
awesome.css, stored on a Bootstrap CDN server. The rel and type values
indicate the file is a CSS stylesheet.
When linking to a local version of Font Awesome, you should download the
most up-to-date file. The Font Awesome css file can then be added to the
current project directory. The <link> tag is used to reference the Font
Awesome CSS file.

<head>
<link rel="stylesheet" type="text/css"
href="resources/css/font-awesome.css">
</head>
In the example above, a local version of Font Awesome is linked in the head of
the HTML document. The href value is a path to the local Font Awesome CSS
file. The css folder in the downloaded font-awesome-4.7.0 directory was
dragged into resources, a local directory for storing additional styling
resources. Notice the rest of the path, css/font-awesome.css, is the same as the
CDN.

Both methods are acceptable. The CDN method is faster and requires less
storage space, while the locally stored library will work in the event that the
CDN server goes down and allows you the flexibility to edit your website even
when you don’t have internet access.

Instructions

Link the following path in the <head> of the HTML file. It is a path to the local
Font Awesome CSS file.

resources/css/font-awesome.css
<!DOCTYPE html>

<html>

<head>

<title>Please Participate in Our Survey!</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<nav>

<ul>

<li><a href="#question1">QUESTION 1</a></li>

<li><a href="#question2">QUESTION 2</a></li>

<li><a href="#question3">QUESTION 3</a></li>

<li><a href="#question4">QUESTION 4</a></li>

<li><a href="#question5">QUESTION 5</a></li>

</ul>

</nav>

<h1>WELCOME TO OUR SURVEY!</h1>

<h3>We're looking forward to getting your answers so we can make sure our products and services
are the best they can be!</h3>
</div>

</header>

<div id="question1" class="question">

<h4>QUESTION 1</h4>

<span class="prompt">I like participating in physical activity such as running, swimming, or

biking.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question2" class="question">

<h4>QUESTION 2</h4>

<span class="prompt">I try to keep up to date with the latest fashion in active wear.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question3" class="question">

<h4>QUESTION 3</h4>

<span class="prompt">I purchase clothing online regularly.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question4" class="question">

<h4>QUESTION 4</h4>

<span class="prompt">I try to buy goods that are designed and/or manufactured in my home
country.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question5" class="question">

<h4>QUESTION 5</h4>

<span class="prompt">I look to famous athletes when trying to choose what to wear when
training.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div class="social">
<span>Share your results with friends</span>

</div>

</body>

</html>

https://fontawesome.com/start
<!DOCTYPE html>

<html>

<head>

<title>Please Participate in Our Survey!</title>

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-

awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<nav>

<ul>

<li><a href="#question1">QUESTION 1</a></li>

<li><a href="#question2">QUESTION 2</a></li>

<li><a href="#question3">QUESTION 3</a></li>

<li><a href="#question4">QUESTION 4</a></li>

<li><a href="#question5">QUESTION 5</a></li>

</ul>

</nav>

<h1>WELCOME TO OUR SURVEY!</h1>

<h3>We're looking forward to getting your answers so we can make sure our products and services
are the best they can be!</h3>

</div>

</header>

<div id="question1" class="question">

<h4>QUESTION 1</h4>

<span class="prompt">I like participating in physical activity such as running, swimming, or

biking.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question2" class="question">

<h4>QUESTION 2</h4>

<span class="prompt">I try to keep up to date with the latest fashion in active wear.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question3" class="question">

<h4>QUESTION 3</h4>

<span class="prompt">I purchase clothing online regularly.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question4" class="question">

<h4>QUESTION 4</h4>

<span class="prompt">I try to buy goods that are designed and/or manufactured in my home
country.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question5" class="question">

<h4>QUESTION 5</h4>

<span class="prompt">I look to famous athletes when trying to choose what to wear when
training.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

</div>

<span>Share your results with friends</span>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Please Participate in Our Survey!</title>

<link rel="stylesheet" type="text/css" href="style.css">

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-

awesome/4.7.0/css/font-awesome.css">

</head>

<body>

<nav>

<ul>

<li><a href="#question1">QUESTION 1</a></li>

<li><a href="#question2">QUESTION 2</a></li>

<li><a href="#question3">QUESTION 3</a></li>

<li><a href="#question4">QUESTION 4</a></li>

<li><a href="#question5">QUESTION 5</a></li>

</ul>

</nav>

<h1>WELCOME TO OUR SURVEY!</h1>

<h3>We're looking forward to getting your answers so we can make sure our products and services
are the best they can be!</h3>

</div>

</header>

<div id="question1" class="question">

<h4>QUESTION 1</h4>

<span class="prompt">I like participating in physical activity such as running, swimming, or

biking.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question2" class="question">

<h4>QUESTION 2</h4>
<span class="prompt">I try to keep up to date with the latest fashion in active wear.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question3" class="question">

<h4>QUESTION 3</h4>

<span class="prompt">I purchase clothing online regularly.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question4" class="question">

<h4>QUESTION 4</h4>

<span class="prompt">I try to buy goods that are designed and/or manufactured in my home
country.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question5" class="question">

<h4>QUESTION 5</h4>
<span class="prompt">I look to famous athletes when trying to choose what to wear when
training.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<span>Share your results with friends</span>

</div>

</body>

</html>

FONT AWESOME

Add Font Awesome Icon

Font Awesome icons are saved as CSS classes. They are placed into an HTML
document by adding an <i> tag with two classes: fa and fa-icon-name,
where fa-icon-name refers to the icon-specific class name.

<i class="fa fa-save"></i>

In the example above, the <i> tag’s class is fa fa-save. The fa class is required
for all Font Awesome icon elements. It provides standard size and display
values for the icon, without which, the icon would not appear properly. The fa-
save class references the floppy disc image. If Font Awesome is correctly
loaded in the head of the document, the floppy disc icon will appear on the
HTML page.
Use the Font Awesome cheat sheet to find Font Awesome icons and their
matching classes.

Instructions

Navigate to the bottom of the index.html file. There is a section labeled

“Social Media Icons.” Under the <span> tag, add an <i> tag with
classes fa and fa-facebook.
2.

Under the fa-facebook icon, add the twitter icon (fa-twitter).

Under the twitter icon, use the cheat sheet to add the pinterest icon.

FONT AWESOME

Add Font Awesome Icon

<i class="fa fa-save"></i>

Use the Font Awesome cheat sheet to find Font Awesome icons and their
matching classes.

Instructions
1.

Navigate to the bottom of the index.html file. There is a section labeled

“Social Media Icons.” Under the <span> tag, add an <i> tag with
classes fa and fa-facebook.
Checkpoint 2 Passed

Under the fa-facebook icon, add the twitter icon (fa-twitter).

Checkpoint 3 Passed

Under the twitter icon, use the cheat sheet to add the pinterest icon.

<!DOCTYPE html>

<html>

<head>

<title>Please Participate in Our Survey!</title>

<link rel="stylesheet" type="text/css" href="style.css">

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-

awesome/4.7.0/css/font-awesome.css">

</head>

<body>

<nav>

<ul>

<li><a href="#question1">QUESTION 1</a></li>

<li><a href="#question2">QUESTION 2</a></li>

<li><a href="#question3">QUESTION 3</a></li>

<li><a href="#question4">QUESTION 4</a></li>

<li><a href="#question5">QUESTION 5</a></li>

</ul>

</nav>

<h1>WELCOME TO OUR SURVEY!</h1>

<h3>We're looking forward to getting your answers so we can make sure our products and services
are the best they can be!</h3>

</div>

</header>

<div id="question1" class="question">

<h4>QUESTION 1</h4>

<span class="prompt">I like participating in physical activity such as running, swimming, or

biking.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>
<div id="question2" class="question">

<h4>QUESTION 2</h4>

<span class="prompt">I try to keep up to date with the latest fashion in active wear.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question3" class="question">

<h4>QUESTION 3</h4>

<span class="prompt">I purchase clothing online regularly.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question4" class="question">

<h4>QUESTION 4</h4>

<span class="prompt">I try to buy goods that are designed and/or manufactured in my home
country.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question5" class="question">

<h4>QUESTION 5</h4>

<span class="prompt">I look to famous athletes when trying to choose what to wear when
training.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<span>Share your results with friends</span>

<i class="fa fa-facebook"></i>

<i class="fa fa-twitter"></i>

<i class="fa fa-pinterest"></i>

</div>

</body>

</html>
FONT AWESOME
Icon Sizing
Font Awesome supports additional classes for icon sizing.

Icon size can be increased by 33% with fa-lg, two times with fa-2x, three times
with fa-3x, four times with fa-4x, or five times with fa-5x.

<i class="fa fa-camera fa-lg"></i>

<i class="fa fa-cab fa-4x"></i>
In the example above, the fa-lg and fa-4x classes will make their respective
icons appear larger. The first line instructs the browser to display a camera
icon (fa-camera) that is 33% larger (fa-lg) than the default size. The second line
instructs the browser to add a cab icon (fa-cab) that is four times larger (fa-4x)
than the default.

Instructions

1.
Make each of the social media icons 33% larger.

<!DOCTYPE html>

<html>

<head>

<title>Please Participate in Our Survey!</title>

<link rel="stylesheet" type="text/css" href="style.css">

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-

awesome/4.7.0/css/font-awesome.css">

</head>

<body>

<nav>

<ul>

<li><a href="#question1">QUESTION 1</a></li>

<li><a href="#question2">QUESTION 2</a></li>

<li><a href="#question3">QUESTION 3</a></li>

<li><a href="#question4">QUESTION 4</a></li>

<li><a href="#question5">QUESTION 5</a></li>

</ul>

</nav>

<h1>WELCOME TO OUR SURVEY!</h1>

<h3>We're looking forward to getting your answers so we can make sure our products and services
are the best they can be!</h3>

</div>

</header>

<div id="question1" class="question">

<h4>QUESTION 1</h4>

<span class="prompt">I like participating in physical activity such as running, swimming, or

biking.</span>

<span class="answer">DISAGREE</span>
<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question2" class="question">

<h4>QUESTION 2</h4>

<span class="prompt">I try to keep up to date with the latest fashion in active wear.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question3" class="question">

<h4>QUESTION 3</h4>

<span class="prompt">I purchase clothing online regularly.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question4" class="question">

<h4>QUESTION 4</h4>

<span class="prompt">I try to buy goods that are designed and/or manufactured in my home
country.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>
<span class="answer">AGREE</span>

</div>

<div id="question5" class="question">

<h4>QUESTION 5</h4>

<span class="prompt">I look to famous athletes when trying to choose what to wear when
training.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<span>Share your results with friends</span>

<i class="fa fa-facebook"></i>

<i class="fa fa-twitter"></i>

<i class="fa fa-pinterest"></i>

</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>
<title>Please Participate in Our Survey!</title>

<link rel="stylesheet" type="text/css" href="style.css">

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-

awesome/4.7.0/css/font-awesome.css">

</head>

<body>

<nav>

<ul>

<li><a href="#question1">QUESTION 1</a></li>

<li><a href="#question2">QUESTION 2</a></li>

<li><a href="#question3">QUESTION 3</a></li>

<li><a href="#question4">QUESTION 4</a></li>

<li><a href="#question5">QUESTION 5</a></li>

</ul>

</nav>

<h1>WELCOME TO OUR SURVEY!</h1>

<h3>We're looking forward to getting your answers so we can make sure our products and services
are the best they can be!</h3>

</div>

</header>

<div id="question1" class="question">

<h4>QUESTION 1</h4>

<span class="prompt">I like participating in physical activity such as running, swimming, or

biking.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question2" class="question">

<h4>QUESTION 2</h4>

<span class="prompt">I try to keep up to date with the latest fashion in active wear.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question3" class="question">

<h4>QUESTION 3</h4>

<span class="prompt">I purchase clothing online regularly.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>
<span class="answer">AGREE</span>

</div>

<div id="question4" class="question">

<h4>QUESTION 4</h4>

<span class="prompt">I try to buy goods that are designed and/or manufactured in my home
country.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<div id="question5" class="question">

<h4>QUESTION 5</h4>

<span class="prompt">I look to famous athletes when trying to choose what to wear when
training.</span>

<span class="answer">DISAGREE</span>

<span class="answer">NEUTRAL</span>

<span class="answer">AGREE</span>

</div>

<span>Share your results with friends</span>

<i class="fa fa-facebook"></i>

<i class="fa fa-pinterest"></i>

</div>

</body>

</html>

FONT AWESOME

Review

In this lesson, we covered the basics of the Font Awesome icon library. The
library contains a large selection of icons with additional classes for sizing,
listing, and animating.

Although the library provides a large supply of icons and tools, it’s important
to understand that few icons are truly universal. Here are a few best practices
to help you anticipate and plan for user misunderstanding:

1. Research the icon in question. When in doubt, check to see if the icon
shows up on other popular sites.
2. Use a word or two next to the icon for additional context.

If you keep this in mind, you should be in a good position to produce

attractive and intuitive websites.

Let’s take a minute to review some of the concepts from this lesson:

1. The Font Awesome library can be linked to an HTML document from a

remote CDN or a local CSS file.
2. Font Awesome icons are added to a website by setting an <i> tag’s
classes to fa and fa-icon-name, where fa-icon-name refers to the icon-
specific class name.
3. Font Awesome icons can be resized using fa-lg, fa-2x, fa-3x, fa-4x, or fa-
5x.
Instructions

Take a few moments to look over the content in the workspace to the right.
Try to adjust some of the following:

1. The icons displayed

2. The icon size
3. Unordered lists

Use the Font Awesome icon cheat sheet and examples if you need help.

https://fontawesome.com/v5/cheatsheet

https://image.online-convert.com/convert-to-svg

https://www.codecademy.com/learn/paths/learn-how-to-build-websites/tracks/finishing-touches-and-
publishing-a-website/modules/git-and-publishing-to-github-pages/cheatsheet

$ git init

Initialized empty Git repository in /home/ccuser/workspace/sorcerers-code/.git/

$ git init

Reinitialized existing Git repository in /home/ccuser/workspace/sorcerers-code/.git/

$ git status

On branch master

Initial commit

Untracked files:

(use "git add <file>..." to include in what will be committed)

init_test.rb
scene-1.txt

nothing added to commit but untracked files present (use "git add" to track)

$ scene-1.txt

bash: scene-1.txt: command not found

$ git status

On branch master

Initial commit

Untracked files:

(use "git add <file>..." to include in what will be committed)

add_test.rb

init_test.rb

scene-1.txt

nothing added to commit but untracked files present (use "git add" to track)

$ git add scene.txt

fatal: pathspec 'scene.txt' did not match any files

$ ^C

$ ^Mgit status

bash: $'\rgit': command not found

$ git status

On branch master
Initial commit

Untracked files:

(use "git add <file>..." to include in what will be committed)

add_test.rb

init_test.rb

scene-1.txt

nothing added to commit but untracked files present (use "git add" to track)

$ git add scene-1.txt

$ git status

On branch master

Initial commit

Changes to be committed:

(use "git rm --cached <file>..." to unstage)

new file: scene-1.txt

Untracked files:

(use "git add <file>..." to include in what will be committed)

add_test.rb

init_test.rb

Harry Programmer and the Sorcerer’s Code: Scene 1

Dumblediff: I should've known you would be here, Professor McGonagit.

BASIC GIT WORKFLOW

git diff
Good work! Now you know how to add a file to the staging area.

Imagine that we type another line in scene-1.txt. Since the file is tracked, we can check the
differences between the working directory and the staging area with:

git diff filename

Here, filename is the actual name of the file. If the name of my file was changes.txt the
command would be

git diff changes.txt

Instructions

1.
In the code editor, add this text to scene-1.txt:

Dumblediff: I should've known you would be here, Professor McGonagit.

Click Run.
Checkpoint 2 Passed

2.
From the terminal, use the new command to check the difference between the working directory
and the staging area.

Notice the output:

 “Harry Programmer and the Sorcerer’s Code: Scene 1” is in the staging area, as
indicated in white.
 Changes to the file are marked with a + and are indicated in green.
Checkpoint 3 Passed

Hint
If you get stuck in “diff mode”, press q on your keyboard to exit.
3.
Add the changes to the staging area in Git. Recall that you will need to identify the file by its
name.
Checkpoint 4 Passed

Hint
We can add a file to the staging area with:

git add filename

Basic Git Workflow: git commit

Narrative and Instructions

Learn

BASIC GIT WORKFLOW

git commit

A commit is the last step in our Git workflow. A commit permanently stores changes from the
staging area inside the repository.

git commit isthe command we’ll do next. However, one more bit of code is needed for a
commit: the option -m followed by a message. Here’s an example:

git commit -m "Complete first line of dialogue"

Standard Conventions for Commit Messages:

 Must be in quotation marks

 Written in the present tense
 Should be brief (50 characters or less) when using -m

Instructions

Make your first commit! From the terminal, type the command along with a commit message.
The message should describe the point of the commit.

If you’re having trouble thinking of a good commit message, reflect on how the project has
changed since it began.
ASIC GIT WORKFLOW
git log
Often with Git, you’ll need to refer back to an earlier version of a project.
Commits are stored chronologically in the repository and can be viewed with:

git log

Instructions

1.
From the terminal, log a list of your commits.

In the output, notice:

 A 40-character code, called a SHA, that uniquely identifies the

commit. This appears in orange text.
 The commit author (you!)
 The date and time of the commit
 The commit message

Click “Next” to continue.

Checkpoint 2 Passed

Hint
Here’s what an example log looks like:

BASIC GIT WORKFLOW

Generalizations
You have now been introduced to the fundamental Git workflow. You learned
a lot! Let’s take a moment to generalize:

 Git is the industry-standard version control system for web developers

 Use Git commands to help keep track of changes made to a project:
o git init creates a new Git repository
o git status inspects the contents of the working directory and
staging area
o git add adds files from the working directory to the staging area
o git diff shows the difference between the working directory and
the staging area
o git commit permanently stores file changes from the staging area
in the repository
o git log shows a list of all previous commits

Instructions

Click Next to complete the lesson!

BASIC GIT WORKFLOW
Generalizations
You have now been introduced to the fundamental Git workflow. You learned
a lot! Let’s take a moment to generalize:

 Git is the industry-standard version control system for web developers

Instructions

Click Next to complete the lesson!

https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/finishing-touches-and-
publishing-a-website/modules/git-and-publishing-to-github-pages/articles/f1-u3-github-pages
https://content.codecademy.com/programs/freelance-one/excursion/index.html

https://content.codecademy.com/programs/freelance-one/excursion/index.html

https://content.codecademy.com/programs/freelance-one/excursion/mocks/excursion.png

https://content.codecademy.com/programs/freelance-one/excursion/mocks/excursion_redline.png

video url of project excursion

https://youtu.be/smYRUiwf8yI

https://www.codecademy.com/paths/learn-how-to-build-websites/tracks/learn-how-to-build-websites-
capstone-project/modules/colmar-academy/informationals/capstone-project-introduction-colmar-
academy

https://content.codecademy.com/courses/freelance-1/capstone-2/colmar-academy-spec.png
<!DOCTYPE
html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./resources/css/reset.css">
<link rel="stylesheet" type="text/css" href="./resources/css/style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|
Roboto:400,700" rel="stylesheet">
<title>Colmar Academy</title>
<link rel="icon" href="./resources/images/ic-logo.ico">
</head>
<body>

<header>
<div class="logo">
<img src="./resources/images/ic-logo.svg" alt="School logo">
<h3 class="title-bar"><span>COLMAR</span>ACADEMY</h3>
</div>
<nav class="desktop">
<a href="#">On Campus</a>
<a href="#">Online</a>
<a href="#">Companies</a>
<a href="#">Sign in</a>
</nav>
<nav class="mobile">
<img src="./resources/images/ic-logo.svg" alt="">
<a href="#"><img src="./resources/images/ic-on-campus.svg" alt="Campus
programs"></a>
<a href="#"><img src="./resources/images/ic-online.svg" alt="Online
programs"></a>
<a href="#"><img src="./resources/images/ic-login.svg" alt="Log in"></a>
</nav>
</header>

<main>

<section class="landing-box">
<img src="./resources/images/banner.jpg" alt="Three classmates studying
outside">
<div class="side-text">
<h1>Learn something new everyday</h1>
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
<a href="#" class="start">Start here</a>
</div>
</section>

<section class="information">
<div class="multi-container">
<div class="main-pic-box">
<img src="./resources/images/information-main.jpg" alt="Student
enjoying book outside">
<h2>It doesn't hurt to keep practicing</h2>
<p>"Curabitur vitae libero ipsum porttior consequat. Aliquam et
commodo
lectus, nec consequat neque. Sed non accumsan urna. Phasellus sed
consequat ex. Etiam eget magna laoreet efficitur dolo consequat,
tristique ligula."</p>
<h5>Emaunuel, Sr Strategist at Hiring.com</h5>
</div>
<div class="stacked-content-box">
<div class="content-box">
<img id="pc-pic" src="./resources/images/information-
orientation.jpg" alt="Bird's eye view of orientation" title="">
<img id="mobile-pic" src="./resources/images/information-
orientation-mobile.jpg" alt="Bird's eye view of orientation">
<div class="side-text">
<h3>Orientation Date</h3>
<p>Tue 10/11 & Wed 10/12: 8am-3pm</p>
<a href="#">Read more</a>
</div>
</div>
<div class="content-box">
<img id="pc-pic" src="./resources/images/information-campus.jpg"
alt="Indoors look at common area" title="" style="">
<img id="mobile-pic" src="./resources/images/information-campus-
mobile.jpg" alt="Indoors look at common area">
<div class="side-text">
<h3>Our campus</h3>
<p>Find a campus near you</p>
<a href="#">Read more</a>
</div>
</div>
<div class="content-box">
<img id="pc-pic" src="./resources/images/information-guest-
lecture.jpg" alt="Oliver Sacks" title="" style="">
<img id="mobile-pic" src="./resources/images/information-guest-
lecture-mobile.jpg" alt="Oliver Sacks">
<div class="side-text">
<h3>Our guest lecture</h3>
<p>Join a keynote with Oliver Sacks about music in medical
treatment</p>
<a href="#">Read more</a>
</div>
</div>
</div>
</div>
</section>

<section class="courses">
<h2>Start learning</h2>
<div class="course-container">
<div class="course-box">
<img src="./resources/images/course-software.jpg" alt="Desk with
monitors">
<div class="course-text">
<h3>Software Engineering</h3>
<p>COURSES</p>
<p>Web Development, Mobile Development, IoT, APIs</p>
</div>
</div>
<div class="course-box">
<img src="./resources/images/course-computer-art.jpg" alt="Hand
holding mobile phone">
<div class="course-text">
<h3>Computer Art</h3>
<p>COURSES</p>
<p>Imaging & Design, Web Design, Motion Graphics & Visual
Effects, Computer Animation</p>
</div>
</div>
<div class="course-box">
<img src="./resources/images/course-design.jpg" alt="Person holding
advanced camera">
<div class="course-text">
<h3>Design</h3>
<p>COURSES</p>
<p>User Experience Design, User Research, Visual Design</p>
</div>
</div>
<div class="course-box">
<img src="./resources/images/course-data.jpg" alt="Laptop open with
charts">
<div class="course-text">
<h3>Data</h3>
<p>COURSES</p>
<p>Data Science, Big Data, SQL, Data Visualization</p>
</div>
</div>
<div class="course-box">
<img src="./resources/images/course-business.jpg" alt="Chessboard with
chess pieces">
<div class="course-text">
<h3>Business</h3>
<p>COURSES</p>
<p>Product Development, Business Development, Startup</p>
</div>
</div>
<div class="course-box">
<img src="./resources/images/course-marketing.jpg" alt="Person using
smart watch">
<div class="course-text">
<h3>Marketing</h3>
<p>COURSES</p>
<p>Analytics, Content Marketing, Mobile Marketing</p>
</div>
</div>
</div>
</section>

<section class="thesis">
<h2>Thesis Exhibits</h2>
<div class="multi-container">
<div class="main-pic-box">
<video src="./resources/videos/thesis.mp4" autoplay muted loop
alt="Shadows on building as time passes"></video>
<h3>Reimagine Urban</h3>
<p>"Curabitur vitae libero ipsum porttior consequat. Aliquam et
commodo
lectus, nec consequat neque. Sed non accumsan urna. Phasellus sed
consequat ex. Etiam eget magna laoreet efficitur dolo consequat,
tristique ligula."</p>
</div>
<div class="stacked-content-box">
<div class="content-box">
<img src="./resources/images/thesis-fisma.jpg" alt="Planning with
highlighter" title="" style="">
<div class="side-text">
<h3>FISMA: Design and Security</h3>
<p>Designer showcase of new prototype project</p>
</div>
</div>
<div class="content-box">
<img src="./resources/images/thesis-now-and-then.jpg" alt="City
skyline" title="" style="">
<div class="side-text">
<h3>Now and Then</h3>
<p>Research study about New York</p>
</div>
</div>
</div>
</div>
</section>
</main>

<footer>
<h5>© 2016 Colmar Academy. All rights reserved</h5>
<nav class="legal">
<span>Terms</span>
<span>Privacy</span>
</nav>
</footer>
</body>
</html>

/* Universal Styles */
html {
font-family: "Open Sans", sans-serif;
font-size: 16px;
color: #01161E;
}
main {
font-family: "Open Sans", sans-serif;
position:relative; /* handle fixed menu bar */
top: 4rem;
color: #01161E;
}
section:nth-child(2n+1) {
background-color: #EEF9ED;
}
section {
width: auto 0;
}
a {
font-family: "Open Sans", sans-serif;
text-decoration: none;
padding-left: 1rem;
color: #01161E;
font-size: 1.25rem;
}
h1 {
font-family: "Roboto", sans-serif;
font-size: 3rem;
font-weight: 900;
line-height: 1.1;
}
h2 {
font-family: "Roboto", sans-serif;
font-size: 2.4rem;
font-weight: bold;
padding: 2rem 0;
}
h3 {
font-family: "Roboto", sans-serif;
font-size: 1.4rem;
line-height: 1.2;
font-weight: bold;
}
h5, footer span {
font-size: 0.8rem;
color: #01161E;
}
p {
line-height: 1.35;
padding: 0.5rem 0.5rem 0.5rem 0;
}
/* Header Section */
header {
background-color: white;
height: 4rem;
width: 100%;
display: flex;
justify-content: space-between;
position: fixed;
z-index: 10;
}
header img {
height: 3rem;
padding: 0 2% 0 1.5rem;
}
.logo {
display: flex;
justify-content: space-between;
align-items: center;
}
.title-bar {
color: #8A97A8;
}
.title-bar span {
padding: 0;
font-weight: bold;
color: #01161E;
}
/* Navigation */
nav {
padding-right: 3%;
align-self: center;
display: flex;
}
.desktop {
display: inline-block;
}
.mobile {
display: none;
}
/* Start Banner */
.side-text {
display: inline-flex;
flex-flow: column;
justify-content: space-between;
vertical-align: middle;
}
.landing-box img {
display: inline-block;
vertical-align: middle;
width: 60%;
margin: 2rem 2.5rem 2rem 1.5rem;
flex-shrink: 0;
}
.landing-box h3 {
margin: 1.5rem 0;
}
.landing-box .side-text {
width: 30%;
box-sizing: border-box;
}
.landing-box p, .main-pic-box p {
margin-bottom: 1.5rem;
}
/* Start Here Button */
.start {
width: 75%;
background-color: #ADBED3;
color: #01161E;
font-size: 1.2rem;
padding: 1rem 0;
text-align: center;
transition:color 400ms, background-color 400ms;
font-weight: bold;
}
.start:hover {
background-color: #FF7954;
color: #01161E;
}
.information .content-box:last-child, .thesis .content-box:first-child
{
background-color: #EEF9ED;
}
/* Large Containers */
.multi-container {
width: 100%;
display: flex;
flex-wrap: nowrap;
}
.main-pic-box {
width: 60%;
padding: 2rem 1.5rem;
}
.main-pic-box img, video {
width: 100%;
margin-bottom: 2rem;
}
.main-pic-box h2 {
padding: 0 0 1.5rem 0;
}
#mobile-pic {
display: none;
}
/* Small Containers*/
.stacked-content-box {
display: flex;
flex-flow: column;
vertical-align: top;
margin-top: 1rem;
width: 35%;
}
.content-box img {
width: 35%;
margin: 3.5%;
vertical-align: middle;
display: inline-block;
}
.content-box .side-text {
width: 56%;
}
.content-box a {
color: #FF7954;
padding: 0;
}
.thesis .main-pic-box {
padding: 1rem 1rem 1.5rem 1.5rem;
}
/* Courses Section */
.courses {
display: flex;
justify-content: center;
flex-flow: column;
align-items: center;
}
.course-container {
width: 90%;
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 2rem;
}
.course-box {
width: 30%;
height: auto;
margin: 0 0.5rem 1rem 0.5rem;
background-color: #ADBED3;
}
.courses h2, .thesis h2 {
text-align: center;
}
.course-box img {
width:100%;
}
.course-text {
padding: 1rem 0 0 1rem;
margin: 1.5rem auto;
}
/* Footer Section*/
footer {
background-color: white;
border-top: 1px solid #01161E;
display: flex;
justify-content: space-between;
position:relative; /* handle fixed menu bar */
top: 4rem;
width: 100%
}
footer h5 {
font-family: "Roboto", sans-serif;
display: inline-block;
padding: 1rem 1.5rem;
margin-bottom: 1.5rem;
}
footer nav {
align-self: auto;
padding-top: 1rem;
}
footer span {
padding-left: 1rem;
}
/* Tablet Settings for Smoother Transition */
@media only screen and (max-width:825px) {
.landing-box img, .main-pic-box {
width: 40%;
}
.landing-box .side-text, .stacked-content-box {
width: 45%;
}
.course-box {
width: 45%;
}
}
/* Mobile Settings */
@media only screen and (max-width:470px) {
/* Do Not Display */
footer nav, .desktop, .logo, .information .main-pic-box,
.thesis .stacked-content-box, .thesis p, .thesis h3, .course-box img,
.course-box p, #pc-pic {
display: none;
}
/* Mobile Header */
.mobile {
display: flex;
justify-content: space-around;
width: 100%;
}
.mobile img {
width: auto;
height: 90%;
}
/* Mobile Start Banner */
.start {
width: 100%;
align-self: center;
}
.landing-box img {
width: 90%;
padding: 2rem 1rem;
margin: auto;
}
.landing-box .side-text {
width: 100%;
padding: 0 1rem;
margin: auto;
}
/* Mobile Campus Section */
.stacked-content-box, .content-box .side-text{
width: 100%;
background-color: white;
}
.content-box {
display: flex;
flex-flow: column;
}
#mobile-pic {
display: block;
box-sizing: border-box;
padding: 1rem 1rem 1.5rem 1rem;
}
.content-box img {
width: 100%;
margin: auto;
background-color: white;
}
.content-box .side-text {
box-sizing: border-box;
padding: 1rem;
}
.content-box a {
font-size: 1rem;
}
/* Mobile Courses Section */
.courses {
border-top: 1px solid #8A97A8;
border-bottom: 1px solid #8A97A8;
}
.course-container {
flex-flow: column;
}
.course-box {
width: 100%;
height: auto;
padding: 0;
margin: 0 0 0.5rem 0;
}
.course-text {
padding: 1rem;
}
/* Mobile Thesis Section */
.thesis .main-pic-box {
width: 100%;
padding: 0 0 2rem 0;
}
video {
margin:auto;
}
/* Mobile Footer */
h5 {
margin: 1.5rem 0 0 0;
}
}

HTML CSS Javascript MCQ
83% (23)
HTML CSS Javascript MCQ
11 pages
Web Programming - Building Internet Applications
100% (2)
Web Programming - Building Internet Applications
624 pages
CNI Practical File
0% (1)
CNI Practical File
56 pages
CSS Grid Layout: 5 Practical Projects
From Everand
CSS Grid Layout: 5 Practical Projects
Craig Buckler
No ratings yet
MERN Stack Lectureflow
No ratings yet
MERN Stack Lectureflow
12 pages
HTML5,CSS3,Javascript and JQuery Mobile Programming: Beginning to End Cross-Platform App Design
From Everand
HTML5,CSS3,Javascript and JQuery Mobile Programming: Beginning to End Cross-Platform App Design
Stephen J Link
5/5 (3)
ASP .NET With AWS SYLABUS
No ratings yet
ASP .NET With AWS SYLABUS
12 pages
App Dev and Web Dev Syllabus
No ratings yet
App Dev and Web Dev Syllabus
17 pages
Web Devlopment
From Everand
Web Devlopment
Netra
No ratings yet
How to Create a Website in Dreamweaver
From Everand
How to Create a Website in Dreamweaver
Robert Lasky-Davison
No ratings yet
Sharp Academy - IT Trainning Center Join Us Contact US: 01065468210
No ratings yet
Sharp Academy - IT Trainning Center Join Us Contact US: 01065468210
22 pages
Cooking up the web with HTML and JavaScript
From Everand
Cooking up the web with HTML and JavaScript
Tom Henricksen
No ratings yet
To The Development of Web Applications (Core) MVC: Razvan Alexandru Mezei
No ratings yet
To The Development of Web Applications (Core) MVC: Razvan Alexandru Mezei
321 pages
BCA-341-20-AWD-2020 (New)
No ratings yet
BCA-341-20-AWD-2020 (New)
169 pages
HTML+CSS Quick-n Dirty
From Everand
HTML+CSS Quick-n Dirty
Tom Henricksen
No ratings yet
Coding JavaScript
From Everand
Coding JavaScript
Tom Henricksen
No ratings yet
Intro To Software Development PDF
100% (1)
Intro To Software Development PDF
148 pages
Quick Start Basic HTML and JavaScript
From Everand
Quick Start Basic HTML and JavaScript
Tom Henricksen
No ratings yet
Html5: QuickStudy Laminated Reference Guide
From Everand
Html5: QuickStudy Laminated Reference Guide
Robin Nixon
No ratings yet
CMP508 Web Technologies
No ratings yet
CMP508 Web Technologies
154 pages
WT EX 1-6 Raju PDF
No ratings yet
WT EX 1-6 Raju PDF
24 pages
HTMLSyntax_abcfee8d-0b76-464e-9cee-6e851a372536_238726_
No ratings yet
HTMLSyntax_abcfee8d-0b76-464e-9cee-6e851a372536_238726_
6 pages
Exercise 2 Webdev
No ratings yet
Exercise 2 Webdev
14 pages
Fullstack Python Development
No ratings yet
Fullstack Python Development
11 pages
full stack developer
No ratings yet
full stack developer
51 pages
Syllabus and Weekly Teaching Plan of Web Programming-I (Web Fundamentals)
No ratings yet
Syllabus and Weekly Teaching Plan of Web Programming-I (Web Fundamentals)
8 pages
Tycs Ac
No ratings yet
Tycs Ac
38 pages
Write Some Code with HTML, CSS, + JavaScript
From Everand
Write Some Code with HTML, CSS, + JavaScript
Tom Henricksen
No ratings yet
Frontend Week - 1
No ratings yet
Frontend Week - 1
47 pages
Java Script Notes Sem-II-1
No ratings yet
Java Script Notes Sem-II-1
55 pages
Chapter 1: Introduction To Programming
No ratings yet
Chapter 1: Introduction To Programming
5 pages
Ian Builds Apps and Games 1: AppsAndGames, #1
From Everand
Ian Builds Apps and Games 1: AppsAndGames, #1
Ian Eress
No ratings yet
Front End Development Lectureflow PDF
No ratings yet
Front End Development Lectureflow PDF
6 pages
IT Skills Handout
No ratings yet
IT Skills Handout
43 pages
INTERNSHIP_REPORT._aaditya anand jha
No ratings yet
INTERNSHIP_REPORT._aaditya anand jha
68 pages
Internship Report - (3012)
No ratings yet
Internship Report - (3012)
21 pages
Keshav Synopsis Format
No ratings yet
Keshav Synopsis Format
6 pages
Introduction To Programming Nanodegree Syllabus: Before You Start
No ratings yet
Introduction To Programming Nanodegree Syllabus: Before You Start
6 pages
HTML5 & CSS3 For Beginners: Your Guide To Easily Learn HTML5 & CSS3 Programming in 7 Days
From Everand
HTML5 & CSS3 For Beginners: Your Guide To Easily Learn HTML5 & CSS3 Programming in 7 Days
i Code Academy
4/5 (11)
COMPLETE NOTES
No ratings yet
COMPLETE NOTES
235 pages
Dot Net
No ratings yet
Dot Net
9 pages
Computer Science Starter Pack
No ratings yet
Computer Science Starter Pack
5 pages
Manav Rachna University
No ratings yet
Manav Rachna University
27 pages
Responsive Design: All CSS responsive features
From Everand
Responsive Design: All CSS responsive features
Abdelfattah Ragab
No ratings yet
Industrial Training 5th Sem
No ratings yet
Industrial Training 5th Sem
16 pages
Lesson 1 - Introduction HTML Css
No ratings yet
Lesson 1 - Introduction HTML Css
38 pages
Web Applications Topics
No ratings yet
Web Applications Topics
43 pages
Instructor (Mehran Sahami) : So Welcome Back! So Yet Another Fun-Filled, Exciting Day
No ratings yet
Instructor (Mehran Sahami) : So Welcome Back! So Yet Another Fun-Filled, Exciting Day
17 pages
Nexus Bootcamp Brochure
No ratings yet
Nexus Bootcamp Brochure
27 pages
353
No ratings yet
353
184 pages
Python Full Stack Developer
No ratings yet
Python Full Stack Developer
39 pages
Java Full Stack Development Course Content
No ratings yet
Java Full Stack Development Course Content
27 pages
Hsslive XII CS Short Notes Joy John
No ratings yet
Hsslive XII CS Short Notes Joy John
14 pages
Lecture 1 - CS50's Computer Science For Lawyers
No ratings yet
Lecture 1 - CS50's Computer Science For Lawyers
7 pages
Cs101 Lec45
No ratings yet
Cs101 Lec45
61 pages
Angular Shopping Store: From Scratch to Successful Payment
From Everand
Angular Shopping Store: From Scratch to Successful Payment
Abdelfattah Ragab
No ratings yet
Arcadia It Institute
No ratings yet
Arcadia It Institute
5 pages
Practicals of sem 4 Q.1 to 50
No ratings yet
Practicals of sem 4 Q.1 to 50
73 pages
FrontEnd Web Dev
No ratings yet
FrontEnd Web Dev
13 pages
HTML5 Reference: An Alphabetical Guide
From Everand
HTML5 Reference: An Alphabetical Guide
Jo Foster
No ratings yet
Getting Started with Zurb Foundation 5
From Everand
Getting Started with Zurb Foundation 5
Ryan Flores
3/5 (1)
HTML & Css Syllabus PDF
100% (1)
HTML & Css Syllabus PDF
7 pages
HTML Tutorial
No ratings yet
HTML Tutorial
53 pages
WebDesigning PDF
No ratings yet
WebDesigning PDF
133 pages
Javascript
No ratings yet
Javascript
37 pages
Basic HTML and HTML5
No ratings yet
Basic HTML and HTML5
19 pages
Coding - Intro To CSS
No ratings yet
Coding - Intro To CSS
29 pages
Lesson 2 CSS Selectors Div Span and Link
No ratings yet
Lesson 2 CSS Selectors Div Span and Link
29 pages
Web2py Slides (Version 1.64.4)
100% (21)
Web2py Slides (Version 1.64.4)
153 pages
SEO and Technical Writing
No ratings yet
SEO and Technical Writing
37 pages
Web Page Development Using HTML
No ratings yet
Web Page Development Using HTML
126 pages
Chap 2
No ratings yet
Chap 2
47 pages
Notes of 1st Module CYBER SPACE
No ratings yet
Notes of 1st Module CYBER SPACE
57 pages
Udacity Introduction To Programming PDF Free
No ratings yet
Udacity Introduction To Programming PDF Free
111 pages
To Cascading Style Sheets: A Workbook & Guide
No ratings yet
To Cascading Style Sheets: A Workbook & Guide
58 pages
HTML & CSS Crash Course
No ratings yet
HTML & CSS Crash Course
14 pages
Course Name: Web Programming Course Code:CS406: Credit Hours: 3 Prerequisites: NA
No ratings yet
Course Name: Web Programming Course Code:CS406: Credit Hours: 3 Prerequisites: NA
56 pages
Client CSS
No ratings yet
Client CSS
47 pages
How To Lay Out A Web Page With CSS: Adobe Dreamweaver Guide
No ratings yet
How To Lay Out A Web Page With CSS: Adobe Dreamweaver Guide
5 pages
WT Practical
No ratings yet
WT Practical
55 pages
WebAnimator Plus - Manual (Ingles)
No ratings yet
WebAnimator Plus - Manual (Ingles)
51 pages
Chap2 Basic HTML Structure
No ratings yet
Chap2 Basic HTML Structure
81 pages
HTML 5.0: Tushar Shinde (B.E.I.T)
No ratings yet
HTML 5.0: Tushar Shinde (B.E.I.T)
8 pages
HTML Glossary
No ratings yet
HTML Glossary
6 pages
Basic HTML Document: Hypertext Refers To The Way in Which Web Pages (HTML Documents) Are Linked
No ratings yet
Basic HTML Document: Hypertext Refers To The Way in Which Web Pages (HTML Documents) Are Linked
41 pages
Introduction To CSS
94% (18)
Introduction To CSS
22 pages
How To Create A Website
No ratings yet
How To Create A Website
72 pages
Programming - Programming QuickStart Box Set - HTML, Javascript & CSS (Programming, HTML, Javascript, CSS, Computer Programming) (PDFDrive)
No ratings yet
Programming - Programming QuickStart Box Set - HTML, Javascript & CSS (Programming, HTML, Javascript, CSS, Computer Programming) (PDFDrive)
223 pages
Unit Ii HTML and XHTML
No ratings yet
Unit Ii HTML and XHTML
81 pages
CSS Stands For Cascading Style Sheets. It Is A Style Sheet Language That Acts As The Presentation Layer For Markup Languages Such As HTML and XHTML
No ratings yet
CSS Stands For Cascading Style Sheets. It Is A Style Sheet Language That Acts As The Presentation Layer For Markup Languages Such As HTML and XHTML
82 pages