Lesson 1 Exercises - HTML Basics

(Create a new file like “1a.html”, “1b.html”, etc… to try this exercises)

1a. Create a Button with the text “Click” inside.

Sample Output:

Solution:
<button>Click</button>

1b. Create 2 buttons. 1 with your name and 1 with your favorite food.
Sample Output:

Solution:
<button>Simon</button>
<button>chocolate</button>

1c. Create a Paragraph with the text “Hello, World!” inside.

Sample Output:

Solution:
<p>Hello, world!</p>

1d. Create a Paragraph below the previous paragraph and Write Something you did
today.
Sample Output:

Solution:
<p>Hello, world!</p>
<p>Today I went to the grocery store to buy some eggs and vegetables.</p>

1e. Create a link google.com (or similar website for your country.)
(don’t worry if your link is purple, it just means you visited the website before.)
Sample Output:
Solution:
<a href="https://www.google.com/">Search with Google</a>

1f. Make the link from the previous exercise (1e.) open in the new tab.
Sample Output:

Solution:
<a href="https://www.google.com/" target="blank">
Search with Google
</a>

Challenge Exercise:
1g. Try to copy this design using HTML (the link goes to amazon.com)
Sample Output:

Solution:
<a href="https://amazon.com">
Back to Amazon
</a>

<p>
Nike Black Running Shoes
</p>

<p>
$39 - in stock.
</p>

<p>
Free delivery tomorrow.
</p>

<button>
Add to Cart
</button>

<button>
 Buy now
</button>

Lesson 2 Exercises - CSS Basics

(Create a new file like “2a.html”, “2b.html”, etc… to try these exercises)
Use CSS to recreate these buttons from famous websites:

2a. Uber
Sample Output:

Solution:
<style>
.uber-button {
background-color: black;
color: white;
border: none;
height: 40px;
width: 110px;
cursor: pointer;
}
</style>

<button class="uber-button">
Request now
</button>

2b. Amazon
Sample Output:

Solution:
<style>
.amazon-button {
background-color: rgb(255, 216, 20);
border: none;
height: 30px;
width: 140px;
border-radius: 15px;
cursor: pointer;
}
</style>

<button class="amazon-button">
 Add to Cart
</button>

2c. GitHub
Sample Output:

Solution:
<style>
.github-button {
background-color: rgb(46, 164, 79);
color: white;
border: none;
height: 40px;
width: 90px;
font-weight: bold;
font-size: 15px;
border-radius: 6px;
cursor: pointer;
}
</style>

<button class="github-button">
Sign up
</button>

2d. Bootstrap
Sample Output:

Solution:
<style>
.get-started-button {
background-color: rgb(121, 82, 179);
color: white;
border: none;
height: 40px;
 width: 110px;
font-weight: bold;
border-radius: 4px;
cursor: pointer;
margin-right: 6px;
}

.download-button {
background-color: white;
color: rgb(108, 117, 125);
border-width: 1px;
border-style: solid;
border-color: rgb(108, 117, 125);
height: 40px;
width: 100px;
font-weight: bold;
border-radius: 4px;
cursor: pointer;
}
</style>

<button class="get-started-button">
Get started
</button>

<button class="download-button">
Download
</button>

2e. LinkedIn
Sample Output:

Solution:
<style>
.apply-button {
background-color: rgb(10, 102, 194);
color: white;
border: none;
 height: 40px;
width: 240px;
font-weight: bold;
font-size: 15px;
border-radius: 20px;
cursor: pointer;
margin-right: 8px;
}

.save-button {
background-color: white;
color: rgb(10, 102, 194);
border-width: 1px;
border-style: solid;
border-color: rgb(10, 102, 194);
height: 40px;
width: 80px;
font-weight: bold;
font-size: 15px;
border-radius: 20px;
cursor: pointer;
}
</style>

<button class="apply-button">
Apply on company website
</button>

<button class="save-button">
Save
</button>

Challenge Exercise:
2f. Continuing from exercise 1g. Recreate this design using CSS.
(hint: you’ll need the CSS Properties: color, font-weight, and font-size)
Sample Output:
rgb(0, 113, 133)
rgb(0, 118, 0)
rgb(255, 216, 20)
rgb(255, 164, 28)
Solution:
<style>
.amazon-link {
color: rgb(0, 113, 133);
}

.title {
font-size: 24px;
font-weight: bold;
}

.price {
color: rgb(0, 136, 0);
font-weight: bold;
}

.add-to-cart-button {
background-color: rgb(249, 217, 76);
border: none;
height: 30px;
width: 110px;
border-radius: 15px;
margin-right: 8px;
cursor: pointer;
}

.buy-now-button {
background-color: rgb(255, 164, 28);
border: none;
height: 30px;
 width: 110px;
border-radius: 15px;
cursor: pointer;
}
</style>

<a class="amazon-link" href="https://amazon.com">

Back to Amazon
</a>

<p class="title">
Nike Black Running Shoes
</p>

<p class="price">
$39 - in stock.
</p>

<p>
Free delivery tomorrow.
</p>

<button class="add-to-cart-button">
Add to Cart
</button>

<button class="buy-now-button">
Buy now
</button>

Lesson 3 Exercises - Hovers, Transitions, Shadows

Use CSS to recreate these buttons from famous websites:
(colors don’t have to be perfect, try to pick colors that are the close enough)

3a. Uber
Sample Output:

(opacity)
Solution:
<style>
.uber-button {
background-color: black;
color: white;
border: none;
height: 40px;
width: 110px;
cursor: pointer;
transition: opacity 0.15s;
}

.uber-button:hover {
opacity: 0.8;
}
</style>

<button class="uber-button">
Request now
</button>

3b. Amazon
Sample Output:

(background color)
Solution:
<style>
.amazon-button {
background-color: rgb(255, 216, 20);
border: none;
height: 30px;
width: 140px;
border-radius: 15px;
cursor: pointer;
}
 .amazon-button:hover {
background-color: rgb(245, 205, 3);
}
</style>

<button class="amazon-button">
Add to Cart
</button>

3c. GitHub
Sample Output:

(shadow)
Solution:
<style>
.github-button {
background-color: rgb(46, 164, 79);
color: white;
border: none;
height: 40px;
width: 90px;
font-weight: bold;
font-size: 15px;
border-radius: 6px;
cursor: pointer;
transition: box-shadow 0.15s;
}

.github-button:hover {
box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.15);
}
</style>

<button class="github-button">
Sign up
</button>
3d. Bootstrap
Sample Output:

(background color, text color)

Solution:
<style>
.get-started-button {
background-color: rgb(121, 82, 179);
color: white;
border: none;
height: 40px;
width: 110px;
font-weight: bold;
border-radius: 4px;
cursor: pointer;
margin-right: 6px;
transition: background-color 0.15s;
}

.get-started-button:hover {
background-color: rgb(99, 60, 156);
}

.download-button {
background-color: white;
color: rgb(108, 117, 125);
border-width: 1px;
border-style: solid;
border-color: rgb(108, 117, 125);
height: 40px;
width: 100px;
font-weight: bold;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.15s,
color 0.15s;
 }

.download-button:hover {
background-color: rgb(108, 117, 125);
color: white;
}
</style>

<button class="get-started-button">
Get started
</button>

3e. LinkedIn
Sample Output:

(background color, border width)

Solution:
<style>
.apply-button {
background-color: rgb(10, 102, 194);
color: white;
border: none;
height: 40px;
width: 240px;
font-weight: bold;
font-size: 15px;
border-radius: 20px;
cursor: pointer;
margin-right: 8px;
transition: background-color 0.15s;
}

.apply-button:hover {
background-color: rgb(2, 70, 138);
}

.save-button {
background-color: white;
 color: rgb(10, 102, 194);
border-width: 1px;
border-style: solid;
border-color: rgb(10, 102, 194);
height: 40px;
width: 80px;
font-weight: bold;
font-size: 15px;
border-radius: 20px;
cursor: pointer;
transition: background-color 0.15s,
border-width 0.15s;
}

.save-button:hover {
background-color: rgb(226, 240, 254);
border-width: 2px;
}
</style>

<button class="apply-button">
Apply on company website
</button>

<button class="save-button">
Save
</button>

Challenge Exercise:
3f. Continuing from exercises 2f. recreate the design below:
Sample Output:
(again, colors don’t have to be perfect, just close enough.)
Solution:
<style>
.amazon-link {
color: rgb(0, 113, 133);
}

.amazon-link:hover {
color: rgb(199, 81, 31);
}

.title {
font-size: 24px;
font-weight: bold;
}

.price {
color: rgb(0, 136, 0);
font-weight: bold;
}

.add-to-cart-button {
background-color: rgb(249, 217, 76);
border: none;
height: 30px;
width: 110px;
border-radius: 15px;
margin-right: 8px;
cursor: pointer;
}

.add-to-cart-button:hover {
 background-color: rgb(247, 202, 0);
}

.add-to-cart-button:active {
opacity: 0.5;
}

.buy-now-button {
background-color: rgb(255, 164, 28);
border: none;
height: 30px;
width: 110px;
border-radius: 15px;
cursor: pointer;
}

.buy-now-button:hover {
background-color: rgb(250, 137, 0);
}

.buy-now-button:active {
opacity: 0.5;
}
</style>

<a class="amazon-link" href="https://amazon.com">

Back to Amazon
</a>

<p class="title">
Nike Black Running Shoes
</p>

<p class="price">
$39 - in stock.
</p>

<p>
Free delivery tomorrow.
</p>
<button class="add-to-cart-button">
Add to Cart
</button>

<button class="buy-now-button">
Buy now
</button>

Lesson 4 Exercises - Chrome DevTools & CSS Box Model

4a. - 4e. modify exercises 3a. - 3e. to use padding instead of height/width
4a. Solution:
<style>
.uber-button {
background-color: black;
color: white;
border: none;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 15px;
padding-right: 15px;
cursor: pointer;
transition: opacity 0.15s;
}

.uber-button:hover {
opacity: 0.8;
}
</style>

<button class="uber-button">
Request now
</button>

4b. Solution:
<style>
.amazon-button {
background-color: rgb(255, 216, 20);
border: none;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 35px;
padding-right: 35px;
border-radius: 15px;
cursor: pointer;
}

.amazon-button:hover {
background-color: rgb(245, 205, 3);
}
</style>
<button class="amazon-button">
Add to Cart
</button>

4c. Solution:
<style>
.github-button {
background-color: rgb(46, 164, 79);
color: white;
border: none;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 17px;
padding-right: 17px;
font-weight: bold;
font-size: 15px;
border-radius: 6px;
cursor: pointer;
transition: box-shadow 0.15s;
}

.github-button:hover {
box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.15);
}
</style>

<button class="github-button">
Sign up
</button>

4d. Solution:
<style>
.get-started-button {
background-color: rgb(121, 82, 179);
color: white;
border: none;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 20px;
padding-right: 20px;
font-weight: bold;
 border-radius: 4px;
cursor: pointer;
margin-right: 6px;
transition: background-color 0.15s;
}

.get-started-button:hover {
background-color: rgb(99, 60, 156);
}

.download-button {
background-color: white;
color: rgb(108, 117, 125);
border-width: 1px;
border-style: solid;
border-color: rgb(108, 117, 125);
padding-top: 12px;
padding-bottom: 12px;
padding-left: 17px;
padding-right: 17px;
font-weight: bold;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.15s,
color 0.15s;
}

.download-button:hover {
background-color: rgb(108, 117, 125);
color: white;
}
</style>

<button class="get-started-button">
Get started
</button>

<button class="download-button">
Download
</button>
4e. Solution:
<style>
.apply-button {
background-color: rgb(10, 102, 194);
color: white;
border: none;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 24px;
padding-right: 24px;
font-weight: bold;
font-size: 15px;
border-radius: 20px;
cursor: pointer;
margin-right: 8px;
transition: background-color 0.15s;
}

.apply-button:hover {
background-color: rgb(2, 70, 138);
}

.save-button {
background-color: white;
color: rgb(10, 102, 194);
border-width: 1px;
border-style: solid;
border-color: rgb(10, 102, 194);
padding-top: 12px;
padding-bottom: 12px;
padding-left: 24px;
padding-right: 24px;
font-weight: bold;
font-size: 15px;
border-radius: 30px;
cursor: pointer;
transition: background-color 0.15s,
border-width 0.15s,
padding 0.15s;
}
 .save-button:hover {
background-color: rgb(226, 240, 254);
border-width: 2px;
padding-top: 11px;
padding-bottom: 11px;
padding-left: 23px;
padding-right: 23px;
}
</style>

<button class="apply-button">
Apply on company website
</button>

<button class="save-button">
Save
</button>

In the current project (buttons.html):

4f. Update the Tweet button to use padding instead of height/width
Sample Output:

Solution:
<style>
.tweet-button {
background-color: rgb(29, 155, 240);
color: white;
border: none;

padding-top: 10px;
padding-bottom: 10px;
padding-left: 16px;
padding-right: 16px;

border-radius: 18px;
font-weight: bold;
 font-size: 15px;
cursor: pointer;
margin-left: 8px;
transition: box-shadow 0.15s;
vertical-align: top;
}

.tweet-button:hover {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
}
</style>

4g. Use the Chrome DevTools to get the exact color for the Subscribe button and
Update it in the code.
Solution:
<style>
.subscribe-button {
background-color: rgb(204, 0, 0);
color: white;
border: none;
border-radius: 2px;
cursor: pointer;
margin-right: 8px;
margin-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 16px;
padding-right: 16px;
transition: opacity 0.15s;
vertical-align: top;
}
</style>

Challenge Exercise:
Recreate the designs below using the Box Model:
4h. Pagination
Sample Output:
Solution:
<style>
.back-button {
margin-right: 8px;
padding-top: 8px;
padding-bottom: 8px;
font-size: 16px;
}

.search-result {
margin-left: 4px;
margin-right: 4px;
font-size: 18px;
}

.next-button {
margin-left: 8px;
padding-top: 8px;
padding-bottom: 8px;
font-size: 16px;
}
</style>

<button class="back-button">Back</button>
<a class="search-result" href="https://google.com">1</a>
<a class="search-result" href="https://google.com">2</a>
<a class="search-result" href="https://google.com">3</a>
<a class="search-result" href="https://google.com">4</a>
<a class="search-result" href="https://google.com">5</a>
<button class="next-button">Next</button>

4i. Stretch
Sample Output:
Solution:
<style>
.stretch-button {
background-color: green;
color: white;
border: none;
font-size: 18px;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 15px;
padding-right: 15px;
cursor: pointer;
transition: padding-top 1s,
padding-bottom 1s,
padding-left 1s,
padding-right 1s;
}

.stretch-button:hover {
padding-top: 18px;
padding-bottom: 18px;
padding-left: 36px;
padding-right: 36px;
}
</style>

<button class="stretch-button">
Stretch
</button>

4j. 3D Click
Sample Output:

Solution:
<style>
.shadow-button {
 background-color: green;
color: white;
border: none;
font-size: 18px;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 16px;
padding-right: 16px;
cursor: pointer;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}

.shadow-button:active {
margin-top: 3px;
margin-left: 3px;
box-shadow: none;
}
</style>

<button class="shadow-button">
Shadow
</button>

4k. Margin and Padding together

Sample Output:

Solution:
<style>
.stretch-button {
background-color: green;
color: white;
border: none;
font-size: 18px;
padding-top: 8px;
padding-bottom: 8px;
cursor: pointer;

padding-left: 15px;
 padding-right: 15px;
margin-left: 10px;
margin-right: 10px;

transition: padding 0.15s,

margin 0.15s;
}

.stretch-button:hover {
padding-left: 25px;
padding-right: 25px;
margin-left: 0px;
margin-right: 0px;
}
</style>

<button class="stretch-button">
One
</button>
<button class="stretch-button">
Two
</button>
<button class="stretch-button">
Three
</button>

Lesson 5 Exercises - Text Styles

Recreate the following text styles:
(font sizes and colors don’t have to be perfect, just close enough)

5a. Font = Tahoma

Sample Output:
Solution:
<style>
.title {
font-family: Tahoma;
font-size: 30px;
font-weight: bold;
}
</style>

<p class="title">
This is Tahoma Font
</p>

5b. Font = Arial

Sample Output:

Solution:
<style>
.title {
font-family: Arial;
font-size: 26px;
font-weight: bold;
margin-bottom: 8px;
}

.sale {
font-family: Arial;
color: red;
font-style: italic;
font-size: 18px;
margin-top: 0;
}
</style>

<p class="title">
Biggest Deals of the Year!
</p>
<p class="sale">
Sales end Tuesday
</p>

5c. Font = Verdana

Sample Output:

Solution:
<style>
p{
font-family: Verdana;
margin-top: 0;
margin-bottom: 0;
}

.title {
font-weight: bold;
font-size: 18px;
margin-bottom: 3px;
}

.subtitle {
color: rgb(100, 100, 100);
margin-bottom: 18px;
}

.content {
width: 300px;
line-height: 22px;
margin-bottom: 18px;
}

.button {
font-family: Verdana;
 background-color: green;
color: white;
border: none;
padding-top: 8px;
padding-bottom: 8px;
padding-left: 16px;
padding-right: 16px;
border-radius: 6px;
cursor: pointer;
}
</style>

<p class="title">
HTML CSS Course
</p>

<p class="subtitle">
Beginner to Pro
</p>

<p class="content">
In this course, we'll learn the skills you need to become a developer.
</p>

<button class="button">
Get Started
</button>

5d. Font = Arial

Sample Output:

Solution:
<style>
p{
font-family: Arial;
text-align: center;
 margin-top: 0;
margin-bottom: 0;
}

.title {
font-size: 28px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 20px;
}

.subtitle {
margin-bottom: 20px;
}

.link {
color: rgb(58, 108, 199);
}
</style>

<p class="title">
Shopping for your business?
</p>

<p class="subtitle">
See how Apple at Work can help.
</p>

<p class="link">
Learn more &#62;
</p>

Challenge Exercise:
All use font-family Arial. (hint: you’ll need lots of <span>’s for 5f and fg.)
5e. Sample Output:
Solution:
<style>
p{
font-family: Arial;
text-align: center;
margin-top: 0;
margin-bottom: 0;
}

.new {
color: rgb(245, 99, 0);
margin-bottom: 10px;
}

.product {
font-size: 24px;
font-weight: bold;
margin-bottom: 5px;
}

.title {
font-size: 45px;
font-weight: bold;
margin-bottom: 15px;
}

.price {
margin-bottom: 25px;
}

.buy {
background-color: rgb(0, 113, 227);
color: white;
padding-top: 7px;
padding-bottom: 7px;
padding-left: 15px;
padding-right: 15px;
border-radius: 30px;
font-weight: bold;
cursor: pointer;
}
</style>

<p class="new">
New
</p>

<p class="product">
MacBook Pro
</p>

<p class="title">
Supercharged for pros.
</p>

<p class="price">
From $1999
</p>

<p>
<span class="buy">Buy</span>
</p>

5f. Sample Output:

Solution:
<style>
p{
font-family: Arial;
margin-top: 0;
margin-bottom: 0;
}

.price {
font-size: 32px;
margin-bottom: 5px;
}
 .currency {
font-size: 16px;
color: rgb(100, 100, 100);
}

.change {
color: rgb(24, 128, 56);
margin-bottom: 8px;
}

.after-hours {
color: rgb(100, 100, 100);
}

.after-hours-change {
color: rgb(235, 39, 39);
}
</style>

<p class="price">
1,049.61 <span class="currency">USD</span>
</p>

<p class="change">
+18.05 (1.75%) today
</p>

<p class="after-hours">
After hours 1,048.00
<span class="after-hours-change">-1.61 (0.15%)</span>
</p>

5g. Sample Output:

Solution:
<style>
 p{
font-family: Arial;
font-size: 18px;
margin-top: 0;
margin-bottom: 0;
}

.tweet-header {
margin-bottom: 5px;
}

.tweet-author {
font-weight: bold;
}

.tweet-info {
color: rgb(100, 100, 100);
}

.tweet {
width: 600px;
line-height: 25px;
margin-bottom: 20px;
}

.twitter-handle {
color: rgb(29, 155, 240);
}
</style>

<p class="tweet-header">
<span class="tweet-author">freeCodeCamp.org</span>
<span class="tweet-info">@freeCodeCamp 1h</span>
</p>

<p class="tweet">
As a web developer, you'll want to make your projects easy to use and navigate
around.
</p>

<p class="tweet">
 Here <span class="twitter-handle">@chp_it</span> outlines the top skills new
developers should have.
</p>