jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-20 12:03:11 -04:00
Code Issues Projects Releases Wiki Activity

feat(curriculum): add Blockquotes and Quote Workshop to FSD cert (#62568)

Browse Source 
Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com>
Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com>
Co-authored-by: Anna <a.rcottrill521@gmail.com>
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
l3onhard
2025-10-29 18:05:27 +01:00
committed by GitHub
parent fdb74bea05
commit e85aeb7704
17 changed files with 1107 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/i18n/locales/english/intro.json
View File

@@ -2179,6 +2179,12 @@
"In this lesson, you will learn about the importance of semantics in conveying meaning for text and time-related content including the <code>time</code>, <code>blockquote</code> elements and more."
]
},
"workshop-quincys-job-tips": {
"title": "Build Quincy's Job Tips Page",
"intro": [
"In this workshop, you will practice working with semantic HTML by using the <code>q</code>, <code>blockquote</code> and <code>cite</code> elements."
]
},
"lecture-working-with-specialized-semantic-elements": {
"title": "Working with Specialized Semantic Elements",
"intro": [

9
client/src/pages/learn/full-stack-developer/workshop-quincys-job-tips/index.md Normal file
View File

@@ -0,0 +1,9 @@
---
title: Introduction to the Build Quincy's Job Tips Page
block: workshop-quincys-job-tips
superBlock: full-stack-developer
---
## Introduction to the Build Quincy's Job Tips Page
In this workshop, you will practice working with semantic HTML by using the `q`, `blockquote` and `cite` elements.

47
curriculum/challenges/english/blocks/workshop-quincys-job-tips/68e4c81577243e4db1676491.md Normal file
View File

@@ -0,0 +1,47 @@
---
id: 68e4c81577243e4db1676491
title: Step 1
challengeType: 0
dashedName: step-1
demoType: onLoad
---
# --description--
In this workshop, you will practice working with semantic HTML by building a web page that includes some of Quincy Larson's tips for landing a developer job. The basic HTML boilerplate has been prepared for you.
Begin by creating an `h1` element with the text `Quincy's Tips for Getting a Developer Job`.
# --hints--
You should have an `h1` element.
```js
assert.exists(document.querySelector('h1'));
```
Your `h1` element should have the text `Quincy's Tips for Getting a Developer Job`.
```js
assert.equal(document.querySelector('h1')?.textContent.trim(), "Quincy's Tips for Getting a Developer Job")
```
# --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>Quincy's Tips for Getting a Developer Job</title>
</head>
<body>
--fcc-editable-region--
--fcc-editable-region--
</body>
</html>
```

51
curriculum/challenges/english/blocks/workshop-quincys-job-tips/68e65ec5348e40a739903e6d.md Normal file
View File

@@ -0,0 +1,51 @@
---
id: 68e65ec5348e40a739903e6d
title: Step 2
challengeType: 0
dashedName: step-2
---
# --description--
Now, create a paragraph element below the `h1` element. Inside this paragraph add the text `Learning to code is hard, but as Quincy Larson says, You can become a developer.`.
# --hints--
You should have a `p` element.
```js
assert.exists(document.querySelector('p'));
```
Your paragraph should have the text `Learning to code is hard, but as Quincy Larson says, You can become a developer.`. Double check your spelling.
```js
assert.equal(document.querySelector('p')?.textContent.trim(), "Learning to code is hard, but as Quincy Larson says, You can become a developer.");
```
Your paragraph should be below the `h1` element.
```js
assert.exists(document.querySelector('h1 + p'));
```
# --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>Quincy's Tips for Getting a Developer Job</title>
</head>
<body>
<h1>Quincy's Tips for Getting a Developer Job</h1>
--fcc-editable-region--
--fcc-editable-region--
</body>
</html>
```

76
curriculum/challenges/english/blocks/workshop-quincys-job-tips/68e90335bd53a901c41dfc13.md Normal file
View File

@@ -0,0 +1,76 @@
---
id: 68e90335bd53a901c41dfc13
title: Step 3
challengeType: 0
dashedName: step-3
---
# --description--
In a previous lesson you learned that the `q` element is used to distinguish quoted text from the surrounding content.
Here is an example:
```html
<p>
Quincy said, <q>Happy coding!</q>
</p>
```
Most modern browsers will add quotation marks around an inline quote automatically when you use the `q` element.
Inside the paragraph wrap `You can become a developer.` in an inline quotation element, keeping the rest of the paragraph unchanged.
# --hints--
You should have a `q` element.
```js
assert.exists(document.querySelector('q'));
```
Your `q` element should be nested inside the paragraph that is below the `h1` element.
```js
assert.exists(document.querySelector('h1 + p > q'));
```
Your `q` element should have the text `You can become a developer.`.
```js
assert.equal(document.querySelector('h1 + p > q')?.textContent.trim(), 'You can become a developer.');
```
Inside your `q` element, the text must not have leading or trailing whitespace (no spaces, tabs, or line breaks before the first character or after the last).
```js
assert.equal(document.querySelector('h1 + p > q')?.textContent, 'You can become a developer.');
```
You should only add `q` tags around the appropriate part of the sentence without changing the original text. The `p` element should still read: `Learning to code is hard, but as Quincy Larson says, you can become a developer.`
```js
const pElCleanedText = document.querySelector('h1 + p')?.innerText.trim().replaceAll(/ {2,}/g, ' ');
assert.equal(pElCleanedText, 'Learning to code is hard, but as Quincy Larson says, You can become a developer.');
```
# --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>Quincy's Tips for Getting a Developer Job</title>
</head>
<body>
<h1>Quincy's Tips for Getting a Developer Job</h1>
--fcc-editable-region--
<p>Learning to code is hard, but as Quincy Larson says, You can become a developer.</p>
--fcc-editable-region--
</body>
</html>
```

65
curriculum/challenges/english/blocks/workshop-quincys-job-tips/68e964b84f954c322376e592.md Normal file
View File

@@ -0,0 +1,65 @@
---
id: 68e964b84f954c322376e592
title: Step 4
challengeType: 0
dashedName: step-4
---
# --description--
If the source of a quote is a website, you can cite it with the `cite` attribute. The value of this attribute should be a valid URL. While this attribute doesn't change the presentation of the block quote, it's very helpful for giving screen readers and search engines more information about the quote.
Here is an example of an inline quotation element with a `cite` attribute:
```html
<p>
Quincy said,
<q cite="https://www.freecodecamp.org/news/quincys-5-worth-your-time-update/">
Happy coding!
</q>
</p>
```
Add the `cite` attribute to the inline quotation element with this URL:
`https://www.freecodecamp.org/news/learn-to-code-book/`
# --hints--
Your `q` element should have a `cite` attribute.
```js
const qEl = document.querySelector('h1 + p > q');
assert.exists(qEl?.getAttribute('cite'));
```
The `cite` attribute of your `q` element should have the value `https://www.freecodecamp.org/news/learn-to-code-book/`.
```js
const qEl = document.querySelector('h1 + p > q');
assert.equal(qEl?.getAttribute('cite'), 'https://www.freecodecamp.org/news/learn-to-code-book/');
```
# --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>Quincy's Tips for Getting a Developer Job</title>
</head>
<body>
<h1>Quincy's Tips for Getting a Developer Job</h1>
<p>
Learning to code is hard, but as Quincy Larson says,
--fcc-editable-region--
<q>You can become a developer.</q>
--fcc-editable-region--
</p>
</body>
</html>
```

54
curriculum/challenges/english/blocks/workshop-quincys-job-tips/68e96ce52087043b0e999296.md Normal file
View File

@@ -0,0 +1,54 @@
---
id: 68e96ce52087043b0e999296
title: Step 5
challengeType: 0
dashedName: step-5
---
# --description--
Below the paragraph element, add a `main` element and nest three `section` elements inside it.
# --hints--
You should have a `main` element below the paragraph element.
```js
const mainEl = document.querySelector('p + main');
assert.exists(mainEl);
```
You should have three `section` elements inside of your `main` element.
```js
const sections = document.querySelectorAll('main > section');
assert.lengthOf(sections, 3);
```
# --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>Quincy's Tips for Getting a Developer Job</title>
</head>
<body>
<h1>Quincy's Tips for Getting a Developer Job</h1>
<p>
Learning to code is hard, but as Quincy Larson says,
<q cite="https://www.freecodecamp.org/news/learn-to-code-book/"
>You can become a developer.<
/q>
</p>
--fcc-editable-region--
--fcc-editable-region--
</body>
</html>
```

63
curriculum/challenges/english/blocks/workshop-quincys-job-tips/68ea5ccc1229b85eca38a3e8.md Normal file
View File

@@ -0,0 +1,63 @@
---
id: 68ea5ccc1229b85eca38a3e8
title: Step 6
challengeType: 0
dashedName: step-6
---
# --description--
Inside the first `section` element, add an `h2` element with the text `Envisioning Success`.
# --hints--
Inside the first `section` element, you should have an `h2` element.
```js
assert.exists(document.querySelector('section:first-of-type > h2'));
```
Your `h2` should have the text `Envisioning Success`.
```js
const firstH2El = document.querySelector('section:first-of-type > h2');
assert.equal(firstH2El?.innerText.trim(), `Envisioning Success`);
```
# --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>Quincy's Tips for Getting a Developer Job</title>
</head>
<body>
<h1>Quincy's Tips for Getting a Developer Job</h1>
<p>
Learning to code is hard, but as Quincy Larson says,
<q cite="https://www.freecodecamp.org/news/learn-to-code-book/"
>You can become a developer.<
/q>
</p>
<main>
--fcc-editable-region--
<section>
</section>
--fcc-editable-region--
<section>
</section>
<section>
</section>
</main>
</body>
</html>
```

74
curriculum/challenges/english/blocks/workshop-quincys-job-tips/68ea7e7b916e8270483689b6.md Normal file
View File

@@ -0,0 +1,74 @@
---
id: 68ea7e7b916e8270483689b6
title: Step 7
challengeType: 0
dashedName: step-7
---
# --description--
Below the `h2` element, you will add another quote by Quincy. This time, the quote won't be part of a larger paragraph. Instead, the whole paragraph will be a quote. In order to distinguish quoted text like this, you should use the block quotation element: `blockquote`. In the browser, you'll see that the text is slightly indented.
Here is an example of a block quotation element with quoted text:
```html
<blockquote>
The first thing you should consider about education is this is an economic decision.
</blockquote>
```
Now, inside the first section, add a block quotation element below the `h2` element with the text `Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?`.
# --hints--
Inside the first `section` element, you should have a `blockquote` element below the `h2` element.
```js
assert.exists(document.querySelector('section:first-of-type > h2 + blockquote'));
```
Your `blockquote` element should have the text `Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?`.
```js
const firstBlockquoteEl = document.querySelector('section:first-of-type > h2 + blockquote');
assert.equal(firstBlockquoteEl?.innerText.trim(), 'Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?');
```
# --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>Quincy's Tips for Getting a Developer Job</title>
</head>
<body>
<h1>Quincy's Tips for Getting a Developer Job</h1>
<p>
Learning to code is hard, but as Quincy Larson says,
<q cite="https://www.freecodecamp.org/news/learn-to-code-book/"
>You can become a developer.<
/q>
</p>
<main>
--fcc-editable-region--
<section>
<h2>Envisioning Success</h2>
</section>
--fcc-editable-region--
<section>
</section>
<section>
</section>
</main>
</body>
</html>
```

77
curriculum/challenges/english/blocks/workshop-quincys-job-tips/68ea9d23318b6481ac3de777.md Normal file
View File

@@ -0,0 +1,77 @@
---
id: 68ea9d23318b6481ac3de777
title: Step 8
challengeType: 0
dashedName: step-8
---
# --description--
Exactly like the inline quotation element, you can also add a `cite` attribute to a block quotation element.
Here is an example of a block quotation element with a `cite` attribute:
```html
<blockquote cite="https://www.freecodecamp.org/news/is-college-worth-it/">
The first thing you should consider about education is this is an economic decision.
</blockquote>
```
Now, add a `cite` attribute to the block quotation element with the URL `https://www.freecodecamp.org/news/learn-to-code-book/`.
# --hints--
Your `blockquote` element should have a `cite` attribute.
```js
const firstBlockquoteEl = document.querySelector('section:first-of-type > h2 + blockquote');
assert.exists(firstBlockquoteEl?.getAttribute('cite'));
```
The `cite` attribute should have the value `https://www.freecodecamp.org/news/learn-to-code-book/`.
```js
const firstBlockquoteEl = document.querySelector('section:first-of-type > h2 + blockquote');
assert.equal(firstBlockquoteEl?.getAttribute('cite'), 'https://www.freecodecamp.org/news/learn-to-code-book/');
```
# --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>Quincy's Tips for Getting a Developer Job</title>
</head>
<body>
<h1>Quincy's Tips for Getting a Developer Job</h1>
<p>
Learning to code is hard, but as Quincy Larson says,
<q cite="https://www.freecodecamp.org/news/learn-to-code-book/"
>You can become a developer.<
/q>
</p>
<main>
<section>
<h2>Envisioning Success</h2>
--fcc-editable-region--
<blockquote>
Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?
</blockquote>
--fcc-editable-region--
</section>
<section>
</section>
<section>
</section>
</main>
</body>
</html>
```

67
curriculum/challenges/english/blocks/workshop-quincys-job-tips/68eaa3593b6ffd019d772a1f.md Normal file
View File

@@ -0,0 +1,67 @@
---
id: 68eaa3593b6ffd019d772a1f
title: Step 9
challengeType: 0
dashedName: step-9
---
# --description--
Below the block quotation element, add a paragraph element with the text `—Quincy Larson, How to Learn to Code and Get a Developer Job [Full Book]`.
# --hints--
You should have a `p` element below the `blockquote` element.
```js
assert.exists(document.querySelector('section:first-of-type > blockquote + p'));
```
Your `p` element should have the text `—Quincy Larson, How to Learn to Code and Get a Developer Job [Full Book]`.
```js
const pEl = document.querySelector('section:first-of-type > blockquote + p');
assert.equal(pEl?.innerText.trim(), '—Quincy Larson, How to Learn to Code and Get a Developer Job [Full Book]');
```
# --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>Quincy's Tips for Getting a Developer Job</title>
</head>
<body>
<h1>Quincy's Tips for Getting a Developer Job</h1>
<p>
Learning to code is hard, but as Quincy Larson says,
<q cite="https://www.freecodecamp.org/news/learn-to-code-book/"
>You can become a developer.<
/q>
</p>
<main>
<section>
<h2>Envisioning Success</h2>
<blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?
</blockquote>
--fcc-editable-region--
--fcc-editable-region--
</section>
<section>
</section>
<section>
</section>
</main>
</body>
</html>
```

91
curriculum/challenges/english/blocks/workshop-quincys-job-tips/68eaa9ef8a0867071f195f59.md Normal file
View File

@@ -0,0 +1,91 @@
---
id: 68eaa9ef8a0867071f195f59
title: Step 10
challengeType: 0
dashedName: step-10
---
# --description--
So far you have been using the `cite` attribute to attribute the source of the quotation, but the attribute doesn't really show the source to the user.
If you want to attribute the source visually, you can add a citation element, `cite`, outside the block quotation element. The citation element is an HTML element that you can use to mark up the title of a referenced creative work, like a book, article, song, film, website, or research paper.
Here's an example:
```html
<div>
<blockquote cite="https://www.freecodecamp.org/news/is-college-worth-it/">
The first thing you should consider about education is this is an economic decision.
</blockquote>
<p>—Quincy Larson, <cite>Is College Still Worth it? Tips from my 20 Years in Adult Education</cite></p>
</div>
```
Inside the `p` element below the block quotation element, wrap `How to Learn to Code and Get a Developer Job [Full Book]` in a `cite` element.
# --hints--
You should have a `cite` element inside the `p` element below the `blockquote` element.
```js
assert.exists(document.querySelector('blockquote + p > cite'));
```
Your `cite` element should have the text `How to Learn to Code and Get a Developer Job [Full Book]`.
```js
const citeEl = document.querySelector('blockquote + p > cite');
assert.equal(citeEl?.innerText.trim(), 'How to Learn to Code and Get a Developer Job [Full Book]');
```
Ignoring the `cite` element you just added, the text of the `p` element should still be `—Quincy Larson, How to Learn to Code and Get a Developer Job [Full Book]`.
```js
const pElCleanedText = document.querySelector('blockquote + p')?.innerText.trim().replaceAll(/ {2,}/g, ' ');
assert.equal(pElCleanedText, '—Quincy Larson, How to Learn to Code and Get a Developer Job [Full Book]');
```
# --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>Quincy's Tips for Getting a Developer Job</title>
</head>
<body>
<h1>Quincy's Tips for Getting a Developer Job</h1>
<p>
Learning to code is hard, but as Quincy Larson says,
<q cite="https://www.freecodecamp.org/news/learn-to-code-book/"
>You can become a developer.<
/q>
</p>
<main>
<section>
<h2>Envisioning Success</h2>
<blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?
</blockquote>
--fcc-editable-region--
<p>
—Quincy Larson, How to Learn to Code and Get a Developer Job [Full Book]
</p>
--fcc-editable-region--
</section>
<section>
</section>
<section>
</section>
</main>
</body>
</html>
```

97
curriculum/challenges/english/blocks/workshop-quincys-job-tips/68eab45aceb7c00fd8de4fed.md Normal file
View File

@@ -0,0 +1,97 @@
---
id: 68eab45aceb7c00fd8de4fed
title: Step 11
challengeType: 0
dashedName: step-11
---
# --description--
Inside the second `section` element, nest an `h2` element with the text `Importance of Networking`.
Below this heading, add a block quotation element with a `cite` attribute with the value `https://www.freecodecamp.org/news/learn-to-code-book/`.
# --hints--
Your should have an `h2` element nested inside the second section.
```js
assert.exists(document.querySelector('main > section:nth-of-type(2) > h2'));
```
Your `h2` element should have the text `Importance of Networking`.
```js
const h2El = document.querySelector('main > section:nth-of-type(2) > h2');
assert.equal(h2El?.innerText.trim(), 'Importance of Networking');
```
You should have a `blockquote` element nested inside the second section.
```js
assert.exists(document.querySelector('main > section:nth-of-type(2) > blockquote'));
```
Your `blockquote` element should be below your `h2` element.
```js
assert.exists(document.querySelector('main > section:nth-of-type(2) > h2 + blockquote'));
```
Your `blockquote` element should have a `cite` attribute.
```js
const blockquoteEl = document.querySelector('main > section:nth-of-type(2) > blockquote');
assert.exists(blockquoteEl?.getAttribute('cite'));
```
The `cite` attribute of your `blockquote` element should have the value `https://www.freecodecamp.org/news/learn-to-code-book/`.
```js
const blockquoteEl = document.querySelector('main > section:nth-of-type(2) > blockquote');
assert.equal(blockquoteEl?.getAttribute('cite'), 'https://www.freecodecamp.org/news/learn-to-code-book/');
```
# --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>Quincy's Tips for Getting a Developer Job</title>
</head>
<body>
<h1>Quincy's Tips for Getting a Developer Job</h1>
<p>
Learning to code is hard, but as Quincy Larson says,
<q cite="https://www.freecodecamp.org/news/learn-to-code-book/"
>You can become a developer.<
/q>
</p>
<main>
<section>
<h2>Envisioning Success</h2>
<blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?
</blockquote>
<p cite="https://www.freecodecamp.org/news/learn-to-code-book/">
—Quincy Larson, <cite>How to Learn to Code and Get a Developer Job [Full Book]</cite>
</p>
</section>
<section>
--fcc-editable-region--
--fcc-editable-region--
</section>
<section>
</section>
</main>
</body>
</html>
```

110
curriculum/challenges/english/blocks/workshop-quincys-job-tips/68eab6a2b37d2f13602d0c3f.md Normal file
View File

@@ -0,0 +1,110 @@
---
id: 68eab6a2b37d2f13602d0c3f
title: Step 12
challengeType: 0
dashedName: step-12
---
# --description--
You can write quoted text directly within the block quotation element, like you did in the first `section` element. Alternatively, you can wrap it within one or more paragraph elements. This is helpful when the text has multiple paragraphs, but you want to keep them within the same block quotation element.
Here's an example with two paragraphs:
```html
<blockquote cite="https://www.freecodecamp.org/news/is-college-worth-it/">
<p>So many people ask me each week: is college still worth it? In this 1-hour video I answer this question and other commonly asked questions about university.</p>
<p>I've been in adult education for two decades at this point, and even though I'm not a labor market economist, I do feel confident enough to answer these questions.</p>
</blockquote>
```
In the second section, inside the existing block quotation element, add four `p` elements with the following texts, in order:
1. `So much of getting a job is who you know.`
2. `It's OK to be an introvert, but you do need to push your boundaries.`
3. `Create GitHub, Twitter, LinkedIn, and Discord accounts.`
4. `Go to tech meetups and conferences. Travel if you have to.`
# --hints--
You should have four `p` elements nested inside the `blockquote` element inside the second section.
```js
const pElements = document.querySelectorAll('main > section:nth-of-type(2) > blockquote > p');
assert.lengthOf(pElements, 4);
```
Your first `p` element should have the text `So much of getting a job is who you know.`.
```js
const firstPEl = document.querySelector('main > section:nth-of-type(2) > blockquote > p:nth-of-type(1)');
assert.equal(firstPEl?.innerText.trim(), 'So much of getting a job is who you know.');
```
Your second `p` element should have the text `It's OK to be an introvert, but you do need to push your boundaries.`.
```js
const secondPEl = document.querySelector('main > section:nth-of-type(2) > blockquote > p:nth-of-type(2)');
assert.equal(secondPEl?.innerText.trim(), "It's OK to be an introvert, but you do need to push your boundaries.");
```
Your third `p` element should have the text `Create GitHub, Twitter, LinkedIn, and Discord accounts.`.
```js
const thirdPEl = document.querySelector('main > section:nth-of-type(2) > blockquote > p:nth-of-type(3)');
assert.equal(thirdPEl?.innerText.trim(), 'Create GitHub, Twitter, LinkedIn, and Discord accounts.');
```
Your forth `p` element should have the text `Go to tech meetups and conferences. Travel if you have to.`.
```js
const forthPEl = document.querySelector('main > section:nth-of-type(2) > blockquote > p:nth-of-type(4)');
assert.equal(forthPEl?.innerText.trim(), 'Go to tech meetups and conferences. Travel if you have to.');
```
# --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>Quincy's Tips for Getting a Developer Job</title>
</head>
<body>
<h1>Quincy's Tips for Getting a Developer Job</h1>
<p>
Learning to code is hard, but as Quincy Larson says,
<q cite="https://www.freecodecamp.org/news/learn-to-code-book/"
>You can become a developer.<
/q>
</p>
<main>
<section>
<h2>Envisioning Success</h2>
<blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?
</blockquote>
<p cite="https://www.freecodecamp.org/news/learn-to-code-book/">
—Quincy Larson, <cite>How to Learn to Code and Get a Developer Job [Full Book]</cite>
</p>
</section>
<section>
<h2>Importance of Networking</h2>
--fcc-editable-region--
<blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
</blockquote>
--fcc-editable-region--
</section>
<section>
</section>
</main>
</body>
</html>
```

194
curriculum/challenges/english/blocks/workshop-quincys-job-tips/68ebe9cd7523d340c0b343d3.md Normal file
View File

@@ -0,0 +1,194 @@
---
id: 68ebe9cd7523d340c0b343d3
title: Step 13
challengeType: 0
dashedName: step-13
---
# --description--
In the third and last `section` element, you are going to create the same HTML structure as you did in the preceding section.
First, inside the last section, add an `h2` element with the text `Importance of Building a Reputation`.
Then, below the `h2` element, add a block quotation element with a `cite` attribute set to `https://www.freecodecamp.org/news/learn-to-code-book/`.
Lastly, nest three paragraph elements inside the block quotation element with the following texts, in order:
1. `Share short video demos of your projects.`
2. `Keep applying to speak at bigger and bigger conferences.`
3. `Hang out at hackerspaces and help people who are even newer to coding than you.`
Congratulations! With this you have finished this workshop.
# --hints--
You should have an `h2` element nested inside the third section.
```js
assert.exists(document.querySelector('main > section:nth-of-type(3) > h2'));
```
Your `h2` element should have the text `Importance of Building a Reputation`.
```js
const h2El = document.querySelector('main > section:nth-of-type(3) > h2');
assert.equal(h2El?.innerText.trim(), 'Importance of Building a Reputation');
```
You should have a `blockquote` element nested inside the third section.
```js
assert.exists(document.querySelector('main > section:nth-of-type(3) > blockquote'));
```
Your `blockquote` element should be below your `h2` element.
```js
assert.exists(document.querySelector('main > section:nth-of-type(3) > h2 + blockquote'));
```
Your `blockquote` element should have a `cite` attribute.
```js
const blockquoteEl = document.querySelector('main > section:nth-of-type(3) > blockquote');
assert.exists(blockquoteEl?.getAttribute('cite'));
```
Your `cite` attribute of the `blockquote` element should have the value `https://www.freecodecamp.org/news/learn-to-code-book/`.
```js
const blockquoteEl = document.querySelector('main > section:nth-of-type(3) > blockquote');
assert.equal(blockquoteEl?.getAttribute('cite'), 'https://www.freecodecamp.org/news/learn-to-code-book/');
```
You should have three `p` elements nested inside the `blockquote` element in the third section.
```js
const pElements = document.querySelectorAll('main > section:nth-of-type(3) > blockquote > p');
assert.lengthOf(pElements, 3);
```
Your first `p` element should have the text `Share short video demos of your projects.`.
```js
const firstPEl = document.querySelector('main > section:nth-of-type(3) > blockquote > p:nth-of-type(1)');
assert.equal(firstPEl?.innerText.trim(), 'Share short video demos of your projects.');
```
Your second `p` element should have the text `Keep applying to speak at bigger and bigger conferences.`.
```js
const secondPEl = document.querySelector('main > section:nth-of-type(3) > blockquote > p:nth-of-type(2)');
assert.equal(secondPEl?.innerText.trim(), "Keep applying to speak at bigger and bigger conferences.");
```
Your third `p` element should have the text `Hang out at hackerspaces and help people who are even newer to coding than you.`.
```js
const thirdPEl = document.querySelector('main > section:nth-of-type(3) > blockquote > p:nth-of-type(3)');
assert.equal(thirdPEl?.innerText.trim(), 'Hang out at hackerspaces and help people who are even newer to coding than you.');
```
# --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>Quincy's Tips for Getting a Developer Job</title>
</head>
<body>
<h1>Quincy's Tips for Getting a Developer Job</h1>
<p>
Learning to code is hard, but as Quincy Larson says,
<q cite="https://www.freecodecamp.org/news/learn-to-code-book/"
>You can become a developer.<
/q>
</p>
<main>
<section>
<h2>Envisioning Success</h2>
<blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?
</blockquote>
<p cite="https://www.freecodecamp.org/news/learn-to-code-book/">
—Quincy Larson, <cite>How to Learn to Code and Get a Developer Job [Full Book]</cite>
</p>
</section>
<section>
<h2>Importance of Networking</h2>
<blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
<p>So much of getting a job is who you know.</p>
<p>It's OK to be an introvert, but you do need to push your boundaries.</p>
<p>Create GitHub, Twitter, LinkedIn, and Discord accounts.</p>
<p>Go to tech meetups and conferences. Travel if you have to.</p>
</blockquote>
</section>
--fcc-editable-region--
<section>
</section>
--fcc-editable-region--
</main>
</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>Quincy's Tips for Getting a Developer Job</title>
</head>
<body>
<h1>Quincy's Tips for Getting a Developer Job</h1>
<p>
Learning to code is hard, but as Quincy Larson says,
<q cite="https://www.freecodecamp.org/news/learn-to-code-book/"
>You can become a developer.<
/q>
</p>
<main>
<section>
<h2>Envisioning Success</h2>
<blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?
</blockquote>
<p cite="https://www.freecodecamp.org/news/learn-to-code-book/">
—Quincy Larson, <cite>How to Learn to Code and Get a Developer Job [Full Book]</cite>
</p>
</section>
<section>
<h2>Importance of Networking</h2>
<blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
<p>So much of getting a job is who you know.</p>
<p>It's OK to be an introvert, but you do need to push your boundaries.</p>
<p>Create GitHub, Twitter, LinkedIn, and Discord accounts.</p>
<p>Go to tech meetups and conferences. Travel if you have to.</p>
</blockquote>
</section>
<section>
<h2>Importance of Building a Reputation</h2>
<blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
<p>Share short video demos of your projects.</p>
<p>Keep applying to speak at bigger and bigger conferences.</p>
<p>Hang out at hackerspaces and help people who are even newer to coding than you.</p>
</blockquote>
</section>
</main>
</body>
</html>
```

25
curriculum/structure/blocks/workshop-quincys-job-tips.json Normal file
View File

@@ -0,0 +1,25 @@
{
"name": "Build Quincy's Job Tips Page",
"isUpcomingChange": false,
"dashedName": "workshop-quincys-job-tips",
"helpCategory": "HTML-CSS",
"blockLayout": "challenge-grid",
"challengeOrder": [
{ "id": "68e4c81577243e4db1676491", "title": "Step 1" },
{ "id": "68e65ec5348e40a739903e6d", "title": "Step 2" },
{ "id": "68e90335bd53a901c41dfc13", "title": "Step 3" },
{ "id": "68e964b84f954c322376e592", "title": "Step 4" },
{ "id": "68e96ce52087043b0e999296", "title": "Step 5" },
{ "id": "68ea5ccc1229b85eca38a3e8", "title": "Step 6" },
{ "id": "68ea7e7b916e8270483689b6", "title": "Step 7" },
{ "id": "68ea9d23318b6481ac3de777", "title": "Step 8" },
{ "id": "68eaa3593b6ffd019d772a1f", "title": "Step 9" },
{ "id": "68eaa9ef8a0867071f195f59", "title": "Step 10" },
{ "id": "68eab45aceb7c00fd8de4fed", "title": "Step 11" },
{ "id": "68eab6a2b37d2f13602d0c3f", "title": "Step 12" },
{ "id": "68ebe9cd7523d340c0b343d3", "title": "Step 13" }
],
"blockLabel": "workshop",
"usesMultifileEditor": true,
"hasEditableBoundaries": true
}

1
curriculum/structure/superblocks/full-stack-developer.json
View File

@@ -34,6 +34,7 @@
"lecture-importance-of-semantic-html",
"lecture-understanding-nuanced-semantic-elements",
"lecture-working-with-text-and-time-semantic-elements",
"workshop-quincys-job-tips",
"lecture-working-with-specialized-semantic-elements",
"workshop-blog-page",
"lab-event-hub",