mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
feat(curriculum): add tailwind CTA component workshop to main (#61013)
Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com>
This commit is contained in:
Kolade Chris
@@ -4005,6 +4005,12 @@
|
||||
"In this workshop, you will learn the basics of Tailwind CSS by building out an error message component."
|
||||
]
|
||||
},
|
||||
"workshop-tailwind-cta-component": {
|
||||
"title": "Build a Taiwlind CTA Compoent",
|
||||
"intro": [
|
||||
"In this workshop, you will build a call to action (CTA) component using Tailwind CSS."
|
||||
]
|
||||
},
|
||||
"lab-music-shopping-cart-page": {
|
||||
"title": "Build a Music Shopping Cart Page",
|
||||
"intro": [
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Introduction to the Build a Tailwind CTA Component
|
||||
block: workshop-tailwind-cta-component
|
||||
superBlock: full-stack-developer
|
||||
---
|
||||
|
||||
## Introduction to the Build a Tailwind CTA Component
|
||||
|
||||
This is workshop will cover how to use Tailwind CSS to build a call to action (CTA) component.
|
||||
@@ -0,0 +1,85 @@
|
||||
{
|
||||
"name": "Build a Tailwind CTA Component",
|
||||
"isUpcomingChange": true,
|
||||
"dashedName": "workshop-tailwind-cta-component",
|
||||
"superBlock": "full-stack-developer",
|
||||
"helpCategory": "HTML-CSS",
|
||||
"blockType": "workshop",
|
||||
"blockLayout": "challenge-grid",
|
||||
"challengeOrder": [
|
||||
{
|
||||
"id": "68551b677a5f6898af364b85",
|
||||
"title": "Step 1"
|
||||
},
|
||||
{
|
||||
"id": "685523c05fb41d0848c4b52f",
|
||||
"title": "Step 2"
|
||||
},
|
||||
{
|
||||
"id": "68552464ef378e1051a55c28",
|
||||
"title": "Step 3"
|
||||
},
|
||||
{
|
||||
"id": "6858e7e23bf9e475e14cb931",
|
||||
"title": "Step 4"
|
||||
},
|
||||
{
|
||||
"id": "6858e9f87e4faa903267d810",
|
||||
"title": "Step 5"
|
||||
},
|
||||
{
|
||||
"id": "6858eadd3144c89d45e02bc7",
|
||||
"title": "Step 6"
|
||||
},
|
||||
{
|
||||
"id": "6858ebf2552046ab3de9f17c",
|
||||
"title": "Step 7"
|
||||
},
|
||||
{
|
||||
"id": "6858ee73ed8106ccb214942a",
|
||||
"title": "Step 8"
|
||||
},
|
||||
{
|
||||
"id": "6858ef974c8ad5dcd7abb9f1",
|
||||
"title": "Step 9"
|
||||
},
|
||||
{
|
||||
"id": "6858f3a67aa8580ff37016c7",
|
||||
"title": "Step 10"
|
||||
},
|
||||
{
|
||||
"id": "6858f90c54647a48ddb8822d",
|
||||
"title": "Step 11"
|
||||
},
|
||||
{
|
||||
"id": "68591755e8cd86d27699d282",
|
||||
"title": "Step 12"
|
||||
},
|
||||
{
|
||||
"id": "6855255d96c1441bd919dc5d",
|
||||
"title": "Step 13"
|
||||
},
|
||||
{
|
||||
"id": "6858e6408a0999603b2a4fee",
|
||||
"title": "Step 14"
|
||||
},
|
||||
{
|
||||
"id": "68597114730d7c6b8838d204",
|
||||
"title": "Step 15"
|
||||
},
|
||||
{
|
||||
"id": "685972d14c6d8182fbae71f1",
|
||||
"title": "Step 16"
|
||||
},
|
||||
{
|
||||
"id": "685973ca82469e940afcc422",
|
||||
"title": "Step 17"
|
||||
},
|
||||
{
|
||||
"id": "685975c2505e3db255720561",
|
||||
"title": "Step 18"
|
||||
}
|
||||
],
|
||||
"usesMultifileEditor": true,
|
||||
"hasEditableBoundaries": true
|
||||
}
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
---
|
||||
id: 68551b677a5f6898af364b85
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
demoType: onLoad
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
In this workshop, you will learn more about Tailwind CSS by using its flexbox utility classes to build a responsive call to action (CTA) component.
|
||||
|
||||
The basic HTML boilerplate has been provided for you, so you need to build out the HTML elements first.
|
||||
|
||||
Begin by creating a `div` element. Inside that `div`, create two more separate `div` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `div` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector("div"));
|
||||
```
|
||||
|
||||
You should have two more `div` elements inside the `div` element.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll("div > div"), 2)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CTA component</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+56
@@ -0,0 +1,56 @@
|
||||
---
|
||||
id: 685523c05fb41d0848c4b52f
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the first `div` element, create a `span` element with the text `Soundflow`, a `h1` element with the text `Discover New Music`, and a `p` element with the text `Stream your favorite tracks and discover new artists.`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `span` element with the text `Soundflow` inside the first `div` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector("div > div:first-child > span")?.textContent, "Soundflow")
|
||||
```
|
||||
|
||||
You should create a `h1` element with the text `Discover New Music` inside the first `div` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector("div > div:first-child > h1")?.textContent, "Discover New Music")
|
||||
```
|
||||
|
||||
You should create a `p` element with the text `Stream your favorite tracks and discover new artists.` inside the first `div` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector("div > div:first-child > p")?.textContent, "Stream your favorite tracks and discover new artists.")
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CTA component</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+68
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 68552464ef378e1051a55c28
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Inside the second `div`, create two anchor elements. The first should have the text `Learn more`, and the second should have the text `Start listening`.
|
||||
|
||||
For the `href` attribute of the two anchor elements, set them both to `#`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create two `a` elements inside the second `div` element
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll("div > div:nth-child(2) > a"), 2)
|
||||
```
|
||||
|
||||
Your first `a` element should have the text `Learn more` and an `href` attribute of `#` inside the second `div` element.
|
||||
|
||||
```js
|
||||
const links = document.querySelectorAll("div > div:nth-child(2) > a")
|
||||
|
||||
assert.equal(links[0]?.textContent, "Learn more")
|
||||
assert.equal(links[0]?.getAttribute("href"), "#")
|
||||
```
|
||||
|
||||
Your second `a` element should have the text `Start listening` and a `href` attribute of `#` inside the second `div` element.
|
||||
|
||||
```js
|
||||
const links = document.querySelectorAll("div > div:nth-child(2) > a")
|
||||
|
||||
assert.equal(links[1]?.textContent, "Start listening")
|
||||
assert.equal(links[1]?.getAttribute("href"), "#")
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CTA component</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<div>
|
||||
<span>Soundflow</span>
|
||||
<h1>Discover New Music</h1>
|
||||
<p>Stream your favorite tracks and discover new artists.</p>
|
||||
</div>
|
||||
<div>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
---
|
||||
id: 6855255d96c1441bd919dc5d
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Moving to the `span` element with the text `Soundflow`, the text in it needs to be in uppercase.
|
||||
|
||||
Here's an example showing how to use the `uppercase` utility class:
|
||||
|
||||
```html
|
||||
<p class="uppercase">Quincy Larson</p>
|
||||
```
|
||||
|
||||
Add the class `uppercase` to the `span` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `span` element should have the utility class `uppercase`.
|
||||
|
||||
```js
|
||||
const spanEl = document.querySelector("span");
|
||||
assert.isTrue(spanEl.classList.contains("uppercase"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CTA component</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-indigo-600 text-white mt-8 p-4 md:w-1/2 mx-auto flex flex-col lg:flex-row justify-around items-center rounded-md">
|
||||
<div>
|
||||
--fcc-editable-region--
|
||||
<span>Soundflow</span>
|
||||
--fcc-editable-region--
|
||||
<h1>Discover New Music</h1>
|
||||
<p>Stream your favorite tracks and discover new artists.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#">Learn more</a>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+66
@@ -0,0 +1,66 @@
|
||||
---
|
||||
id: 6858e6408a0999603b2a4fee
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For the `h1`, add the classes `font-bold` and `text-4xl`. This will make the text bolder, bigger, and also give it more line spacing.
|
||||
|
||||
Also, add the class `my-4` to increase the top and bottom margin of the `h1` by 16 pixels, or `1rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `h1` element should have the utility class `font-bold`.
|
||||
|
||||
```js
|
||||
const h1El = document.querySelector("h1");
|
||||
assert.isTrue(h1El.classList.contains("font-bold"));
|
||||
```
|
||||
|
||||
Your `h1` element should have the utility class `text-4xl`.
|
||||
|
||||
```js
|
||||
const h1El = document.querySelector("h1");
|
||||
assert.isTrue(h1El.classList.contains("text-4xl"));
|
||||
```
|
||||
|
||||
Your `h1` element should have the utility class `my-4`.
|
||||
|
||||
```js
|
||||
const h1El = document.querySelector("h1");
|
||||
assert.isTrue(h1El.classList.contains("my-4"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CTA component</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-indigo-600 text-white mt-8 p-4 md:w-1/2 mx-auto flex flex-col lg:flex-row justify-around items-center rounded-md">
|
||||
<div>
|
||||
<span class="uppercase">Soundflow</span>
|
||||
--fcc-editable-region--
|
||||
<h1>Discover New Music</h1>
|
||||
--fcc-editable-region--
|
||||
<p>Stream your favorite tracks and discover new artists.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#">Learn more</a>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+52
@@ -0,0 +1,52 @@
|
||||
---
|
||||
id: 6858e7e23bf9e475e14cb931
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that the HTML structure is built out, it's time to move to the proper styling with Tailwind.
|
||||
|
||||
Begin with the `div` element that wraps the entire content. Set its background color by giving it a `class` of `bg-indigo-600`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your outer `div` should have a `class` attribute set to `bg-indigo-600`.
|
||||
|
||||
```js
|
||||
const firstDiv = document.querySelectorAll("div")[0];
|
||||
assert.isTrue(firstDiv.classList.contains("bg-indigo-600"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CTA component</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div>
|
||||
<div>
|
||||
<span>Soundflow</span>
|
||||
<h1>Discover New Music</h1>
|
||||
<p>Stream your favorite tracks and discover new artists.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#">Learn more</a>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
---
|
||||
id: 6858e9f87e4faa903267d810
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
As the text in the outer `div` is the default black, it is not easy enough to see. So, add the class `text-white` to the `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your outer `div` element should have the utility class `text-white`.
|
||||
|
||||
```js
|
||||
const firstDiv = document.querySelectorAll("div")[0];
|
||||
assert.isTrue(firstDiv.classList.contains("text-white"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CTA component</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div class="bg-indigo-600">
|
||||
<div>
|
||||
<span>Soundflow</span>
|
||||
<h1>Discover New Music</h1>
|
||||
<p>Stream your favorite tracks and discover new artists.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#">Learn more</a>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+59
@@ -0,0 +1,59 @@
|
||||
---
|
||||
id: 6858eadd3144c89d45e02bc7
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
If you notice, the outer `div` is too attached to the top and the content in it is too stacked to the left. So, you should work on some spacing now.
|
||||
|
||||
Add the class `mt-8` to the `div` to push it down a bit and `p-4` to shift the text away from the left.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your outer `div` element should the utility class `mt-8`.
|
||||
|
||||
```js
|
||||
const firstDiv = document.querySelectorAll("div")[0];
|
||||
assert.isTrue(firstDiv.classList.contains("mt-8"));
|
||||
```
|
||||
|
||||
Your outer `div` element should the utility class `p-4`.
|
||||
|
||||
```js
|
||||
const firstDiv = document.querySelectorAll("div")[0];
|
||||
assert.isTrue(firstDiv.classList.contains("p-4"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CTA component</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div class="bg-indigo-600 text-white">
|
||||
<div>
|
||||
<span>Soundflow</span>
|
||||
<h1>Discover New Music</h1>
|
||||
<p>Stream your favorite tracks and discover new artists.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#">Learn more</a>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+54
@@ -0,0 +1,54 @@
|
||||
---
|
||||
id: 6858ebf2552046ab3de9f17c
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
At this point, you'll notice there's too much space to the right of the content in the `div`. You can minimize this by adding a width.
|
||||
|
||||
Add the class `md:w-1/2` to the `div` to reduce the width to 50% on medium and larger screens. That is, screens that are 768 pixels and up.
|
||||
|
||||
To see that in effect, expand the preview tab.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your outer `div` element should have the utility class `md:w-1/2`.
|
||||
|
||||
```js
|
||||
const firstDiv = document.querySelectorAll("div")[0];
|
||||
assert.isTrue(firstDiv.classList.contains("md:w-1/2"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CTA component</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div class="bg-indigo-600 text-white mt-8 p-4">
|
||||
<div>
|
||||
<span>Soundflow</span>
|
||||
<h1>Discover New Music</h1>
|
||||
<p>Stream your favorite tracks and discover new artists.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#">Learn more</a>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+52
@@ -0,0 +1,52 @@
|
||||
---
|
||||
id: 6858ee73ed8106ccb214942a
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that everything sticks to the left, you need to center the entire content by adding a margin of auto to the x-axis.
|
||||
|
||||
Add the Tailwind class that corresponds to that to the outer `div` element. To see that effect, adjust the preview tab until the entire content is centered.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your outer `div` element should have the utility class `mx-auto`.
|
||||
|
||||
```js
|
||||
const firstDiv = document.querySelectorAll("div")[0];
|
||||
assert.isTrue(firstDiv.classList.contains("mx-auto"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CTA component</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div class="bg-indigo-600 text-white mt-8 p-4 md:w-1/2">
|
||||
<div>
|
||||
<span>Soundflow</span>
|
||||
<h1>Discover New Music</h1>
|
||||
<p>Stream your favorite tracks and discover new artists.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#">Learn more</a>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+68
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 6858ef974c8ad5dcd7abb9f1
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The content inside the `div` can be better spaced and arranged. For the rest of the spacing and that arrangement, you need to use flexbox.
|
||||
|
||||
Add the class `flex` to the `div` so the two child `div` elements sit side by side.
|
||||
|
||||
Also, add `justify-around` so the space around and between the content is evenly distributed, and `items-center` so the entire content is finally centered in the `div`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your outer `div` element should have the utility class `flex`.
|
||||
|
||||
```js
|
||||
const firstDiv = document.querySelectorAll("div")[0];
|
||||
assert.isTrue(firstDiv.classList.contains("flex"));
|
||||
```
|
||||
|
||||
Your outer `div` element should have the utility class `justify-around`.
|
||||
|
||||
```js
|
||||
const firstDiv = document.querySelectorAll("div")[0];
|
||||
assert.isTrue(firstDiv.classList.contains("justify-around"));
|
||||
```
|
||||
|
||||
Your outer `div` element should have the utility class `items-center`.
|
||||
|
||||
```js
|
||||
const firstDiv = document.querySelectorAll("div")[0];
|
||||
assert.isTrue(firstDiv.classList.contains("items-center"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CTA component</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div class="bg-indigo-600 text-white mt-8 p-4 md:w-1/2 mx-auto">
|
||||
<div>
|
||||
<span>Soundflow</span>
|
||||
<h1>Discover New Music</h1>
|
||||
<p>Stream your favorite tracks and discover new artists.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#">Learn more</a>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+61
@@ -0,0 +1,61 @@
|
||||
---
|
||||
id: 6858f3a67aa8580ff37016c7
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
If you adjust the width of the preview tab to the width identical to a mobile device again, you will notice the content is always sitting side-by-side. This is not what you want on mobile devices.
|
||||
|
||||
To fix that, add the class `flex-col` to the `div`. This will change the flex direction to column, so things will stack on top of each other.
|
||||
|
||||
Here's how to use the `flex-col` utility class:
|
||||
|
||||
```html
|
||||
<div class="flex flex-col">
|
||||
<element></element>
|
||||
<element></element>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Your opening `div` element should have the utility class `flex-col`.
|
||||
|
||||
```js
|
||||
const firstDiv = document.querySelectorAll("div")[0];
|
||||
assert.isTrue(firstDiv.classList.contains("flex-col"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CTA component</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div class="bg-indigo-600 text-white mt-8 p-4 md:w-1/2 mx-auto flex justify-around items-center">
|
||||
<div>
|
||||
<span>Soundflow</span>
|
||||
<h1>Discover New Music</h1>
|
||||
<p>Stream your favorite tracks and discover new artists.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#">Learn more</a>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+54
@@ -0,0 +1,54 @@
|
||||
---
|
||||
id: 6858f90c54647a48ddb8822d
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
At this point, the content, that is, the two `div` elements inside the outer `div` will be stacked on top of each other no matter the screen size.
|
||||
|
||||
That's because you have the `flex-col` class in the wrapping `div` element. To fix that, use the `lg:` prefix to add the class `flex-row` to the `div`.
|
||||
|
||||
This means on devices with larger screens, the flex direction will be `row`. To see that in effect again, adjust the browser to a larger width.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your outer `div` element should have the utility class `lg:flex-row`.
|
||||
|
||||
```js
|
||||
const firstDiv = document.querySelectorAll("div")[0];
|
||||
assert.isTrue(firstDiv.classList.contains("lg:flex-row"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CTA component</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div class="bg-indigo-600 text-white mt-8 p-4 md:w-1/2 mx-auto flex flex-col justify-around items-center">
|
||||
<div>
|
||||
<span>Soundflow</span>
|
||||
<h1>Discover New Music</h1>
|
||||
<p>Stream your favorite tracks and discover new artists.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#">Learn more</a>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
---
|
||||
id: 68591755e8cd86d27699d282
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, to remove the sharp edges of the outer `div` element, add the class `rounded-md`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your outer `div` element should have the utility class `rounded-md`.
|
||||
|
||||
```js
|
||||
const firstDiv = document.querySelectorAll("div")[0];
|
||||
assert.isTrue(firstDiv.classList.contains("rounded-md"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CTA component</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<div class="bg-indigo-600 text-white mt-8 p-4 md:w-1/2 mx-auto flex flex-col lg:flex-row justify-around items-center">
|
||||
<div>
|
||||
<span>Soundflow</span>
|
||||
<h1>Discover New Music</h1>
|
||||
<p>Stream your favorite tracks and discover new artists.</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="#">Learn more</a>
|
||||
<a href="#">Start listening</a>
|
||||
</div>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+93
@@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 68597114730d7c6b8838d204
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The paragraph under the `h1` looks good, so it doesn't need any more styling. That means you can move to the anchor elements inside the second `div` element.
|
||||
|
||||
Give the first anchor element the classes `bg-white`, `hover:bg-gray-100`, and `text-indigo-600`. This gives it a white background, a text-color of indigo, and a slightly light background when you hover on it.
|
||||
|
||||
For the second anchor element, give it the classes `bg-pink-500`, `hover:bg-pink-600`, and `text-white`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your first anchor element should have the utility class `bg-white`.
|
||||
|
||||
```js
|
||||
const anchorEls = document.querySelectorAll("a");
|
||||
assert.isTrue(anchorEls[0].classList.contains("bg-white"));
|
||||
```
|
||||
|
||||
Your first anchor element should have the utility class `hover:bg-gray-100`.
|
||||
|
||||
```js
|
||||
const anchorEls = document.querySelectorAll("a");
|
||||
assert.isTrue(anchorEls[0].classList.contains("hover:bg-gray-100"));
|
||||
```
|
||||
|
||||
Your first anchor element should have the utility class `text-indigo-600`.
|
||||
|
||||
```js
|
||||
const anchorEls = document.querySelectorAll("a");
|
||||
assert.isTrue(anchorEls[0].classList.contains("text-indigo-600"));
|
||||
```
|
||||
|
||||
Your second anchor element should have the utility class `bg-pink-500`.
|
||||
|
||||
```js
|
||||
const anchorEls = document.querySelectorAll("a");
|
||||
assert.isTrue(anchorEls[1].classList.contains("bg-pink-500"));
|
||||
```
|
||||
|
||||
Your second anchor element should have the utility class `hover:bg-pink-600`.
|
||||
|
||||
```js
|
||||
const anchorEls = document.querySelectorAll("a");
|
||||
assert.isTrue(anchorEls[1].classList.contains("hover:bg-pink-600"));
|
||||
```
|
||||
|
||||
Your second anchor element should have the utility class `text-white`.
|
||||
|
||||
```js
|
||||
const anchorEls = document.querySelectorAll("a");
|
||||
assert.isTrue(anchorEls[1].classList.contains("text-white"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CTA component</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-indigo-600 text-white mt-8 p-4 md:w-1/2 mx-auto flex flex-col lg:flex-row justify-around items-center rounded-md">
|
||||
<div>
|
||||
<span class="uppercase">Soundflow</span>
|
||||
<h1 class="font-bold text-4xl my-4">Discover New Music</h1>
|
||||
<p>Stream your favorite tracks and discover new artists.</p>
|
||||
</div>
|
||||
<div>
|
||||
--fcc-editable-region--
|
||||
<a href="#">
|
||||
Learn more
|
||||
</a>
|
||||
<a href="#">
|
||||
Start listening
|
||||
</a>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+81
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 685972d14c6d8182fbae71f1
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To make the anchor tags look more like a button, add the classes `px-4` and `py-2` to each of them. `px-4` will increase the right and left padding by `1rem`, and `py-2` will increase the top and bottom padding by `0.5rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your first anchor element should have the utility class `px-4`.
|
||||
|
||||
```js
|
||||
const anchorEls = document.querySelectorAll("a");
|
||||
assert.isTrue(anchorEls[0].classList.contains("px-4"));
|
||||
```
|
||||
|
||||
Your first anchor element should have the utility class `py-2`.
|
||||
|
||||
```js
|
||||
const anchorEls = document.querySelectorAll("a");
|
||||
assert.isTrue(anchorEls[0].classList.contains("py-2"));
|
||||
```
|
||||
|
||||
Your second anchor element should have the utility class `px-4`.
|
||||
|
||||
```js
|
||||
const anchorEls = document.querySelectorAll("a");
|
||||
assert.isTrue(anchorEls[1].classList.contains("px-4"));
|
||||
```
|
||||
|
||||
Your second anchor element should have the utility class `py-2`.
|
||||
|
||||
```js
|
||||
const anchorEls = document.querySelectorAll("a");
|
||||
assert.isTrue(anchorEls[1].classList.contains("py-2"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CTA component</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-indigo-600 text-white mt-8 p-4 md:w-1/2 mx-auto flex flex-col lg:flex-row justify-around items-center rounded-md">
|
||||
<div>
|
||||
<span class="uppercase">Soundflow</span>
|
||||
<h1 class="font-bold text-4xl my-4">Discover New Music</h1>
|
||||
<p>Stream your favorite tracks and discover new artists.</p>
|
||||
</div>
|
||||
<div>
|
||||
--fcc-editable-region--
|
||||
<a
|
||||
href="#"
|
||||
class="bg-white hover:bg-gray-100 text-indigo-600"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="bg-pink-500 hover:bg-pink-600 text-white"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+81
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 685973ca82469e940afcc422
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To finish up the button styling, add the utility class `font-semibold` to each `a` element so their text can be bolder. Also, add the class `rounded` to remove the sharp edges on the buttons.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your first anchor element should have the utility class `font-semibold`.
|
||||
|
||||
```js
|
||||
const anchorEls = document.querySelectorAll("a");
|
||||
assert.isTrue(anchorEls[0].classList.contains("font-semibold"));
|
||||
```
|
||||
|
||||
Your first anchor element should have the utility class `rounded`.
|
||||
|
||||
```js
|
||||
const anchorEls = document.querySelectorAll("a");
|
||||
assert.isTrue(anchorEls[0].classList.contains("rounded"));
|
||||
```
|
||||
|
||||
Your second anchor element should have the utility class `font-semibold`.
|
||||
|
||||
```js
|
||||
const anchorEls = document.querySelectorAll("a");
|
||||
assert.isTrue(anchorEls[1].classList.contains("font-semibold"));
|
||||
```
|
||||
|
||||
Your second anchor element should have the utility class `rounded`.
|
||||
|
||||
```js
|
||||
const anchorEls = document.querySelectorAll("a");
|
||||
assert.isTrue(anchorEls[1].classList.contains("rounded"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CTA component</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-indigo-600 text-white mt-8 p-4 md:w-1/2 mx-auto flex flex-col lg:flex-row justify-around items-center rounded-md">
|
||||
<div>
|
||||
<span class="uppercase">Soundflow</span>
|
||||
<h1 class="font-bold text-4xl my-4">Discover New Music</h1>
|
||||
<p>Stream your favorite tracks and discover new artists.</p>
|
||||
</div>
|
||||
<div>
|
||||
--fcc-editable-region--
|
||||
<a
|
||||
href="#"
|
||||
class="bg-white hover:bg-gray-100 text-indigo-600 px-4 py-2"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
+113
@@ -0,0 +1,113 @@
|
||||
---
|
||||
id: 685975c2505e3db255720561
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Lastly, the buttons can be better spaced apart and from the top. To do that, you need to target the `div` element that wraps them both. So, add the classes `flex`, `gap-2`, and `mt-6` to that `div`.
|
||||
|
||||
With that, your CTA component workshop is complete!
|
||||
|
||||
# --hints--
|
||||
|
||||
The `div` element that wraps the anchor elements should have the utility class `flex`.
|
||||
|
||||
```js
|
||||
const targetDiv = document.querySelectorAll("div")[2];
|
||||
assert.isTrue(targetDiv.classList.contains("flex"));
|
||||
```
|
||||
|
||||
The `div` element that wraps the anchor elements should have the utility class `gap-2`.
|
||||
|
||||
```js
|
||||
const targetDiv = document.querySelectorAll("div")[2];
|
||||
assert.isTrue(targetDiv.classList.contains("gap-2"));
|
||||
```
|
||||
|
||||
The `div` element that wraps the anchor elements should have the utility class `mt-6`.
|
||||
|
||||
```js
|
||||
const targetDiv = document.querySelectorAll("div")[2];
|
||||
assert.isTrue(targetDiv.classList.contains("mt-6"));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CTA component</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-indigo-600 text-white mt-8 p-4 md:w-1/2 mx-auto flex flex-col lg:flex-row justify-around items-center rounded-md">
|
||||
<div>
|
||||
<span class="uppercase">Soundflow</span>
|
||||
<h1 class="font-bold text-4xl my-4">Discover New Music</h1>
|
||||
<p>Stream your favorite tracks and discover new artists.</p>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div >
|
||||
<a
|
||||
href="#"
|
||||
class="bg-white hover:bg-gray-100 text-indigo-600 px-4 py-2 font-semibold rounded"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 font-semibold rounded"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>CTA component</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-indigo-600 text-white mt-8 p-4 md:w-1/2 mx-auto flex flex-col lg:flex-row justify-around items-center rounded-md">
|
||||
<div>
|
||||
<span class="uppercase">Soundflow</span>
|
||||
<h1 class="font-bold text-4xl my-4">Discover New Music</h1>
|
||||
<p>Stream your favorite tracks and discover new artists.</p>
|
||||
</div>
|
||||
<div class="flex gap-2 mt-6">
|
||||
<a
|
||||
href="#"
|
||||
class="bg-white hover:bg-gray-100 text-indigo-600 px-4 py-2 font-semibold rounded"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 font-semibold rounded"
|
||||
>
|
||||
Start listening
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@@ -1182,6 +1182,9 @@
|
||||
{
|
||||
"dashedName": "workshop-error-message-component"
|
||||
},
|
||||
{
|
||||
"dashedName": "workshop-tailwind-cta-component"
|
||||
},
|
||||
{
|
||||
"dashedName": "lab-music-shopping-cart-page"
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user