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

feat(curriculum): add html boilerplate to bookstore workshop (#63743)

Browse Source 
Co-authored-by: Dario <105294544+Dario-DC@users.noreply.github.com>
Co-authored-by: majestic-owl448 <26656284+majestic-owl448@users.noreply.github.com>
This commit is contained in:
Ansh Malgotra
2025-12-15 20:49:52 +05:30
committed by GitHub
parent 83784763ff
commit eb82f97d03
20 changed files with 557 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
curriculum/challenges/english/blocks/workshop-bookstore-page/68e97fe79367ad7b5dd6c9cd.md
View File

@@ -1,16 +1,13 @@
---
id: 68e97fe79367ad7b5dd6c9cd
title: Step 1
title: Step 4
challengeType: 0
dashedName: step-1
demoType: onLoad
dashedName: step-4
---
# --description--
In this workshop, you will build a bookstore page by creating book cards that display information about different books. You'll practice organizing content using `div` elements, classes, and IDs.
Start by adding an `h1` element with the text `XYZ Bookstore`.
In this step add an `h1` element with the text `XYZ Bookstore`.
# --hints--
@@ -26,12 +23,28 @@ Your `h1` element's text should be `XYZ Bookstore`. Double check for spelling or
assert.equal(document.querySelector('h1')?.innerText.trim(), 'XYZ Bookstore');
```
Your `h1` element should be inside the `body` element.
```js
assert.match(code, /<body>[\s\S]*<h1>[\s\S]*<\/h1>[\s\S]*<\/body>/i);
```
# --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>XYZ Bookstore Page</title>
</head>
--fcc-editable-region--
<body>
</body>
--fcc-editable-region--
</html>
```

22
curriculum/challenges/english/blocks/workshop-bookstore-page/68ebdbacdd3fa474132cc975.md
View File

@@ -1,8 +1,8 @@
---
id: 68ebdbacdd3fa474132cc975
title: Step 2
title: Step 5
challengeType: 0
dashedName: step-2
dashedName: step-5
---
# --description--
@@ -34,8 +34,20 @@ assert.exists(document.querySelector('h1 + p'));
## --seed-contents--
```html
--fcc-editable-region--
<h1>XYZ Bookstore</h1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>XYZ Bookstore Page</title>
</head>
--fcc-editable-region--
<body>
<h1>XYZ Bookstore</h1>
--fcc-editable-region--
--fcc-editable-region--
</body>
</html>
```

20
curriculum/challenges/english/blocks/workshop-bookstore-page/68ec6cd5b7e8f5a8f7319e32.md
View File

@@ -1,8 +1,8 @@
---
id: 68ec6cd5b7e8f5a8f7319e32
title: Step 3
title: Step 6
challengeType: 0
dashedName: step-3
dashedName: step-6
---
# --description--
@@ -30,9 +30,21 @@ assert.exists(document.querySelector('p + div'));
## --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>XYZ Bookstore Page</title>
</head>
<body>
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
--fcc-editable-region--
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
--fcc-editable-region--
</body>
</html>
```

28
curriculum/challenges/english/blocks/workshop-bookstore-page/68ec6d9a315221aa31e54816.md
View File

@@ -1,8 +1,8 @@
---
id: 68ec6d9a315221aa31e54816
title: Step 4
title: Step 7
challengeType: 0
dashedName: step-4
dashedName: step-7
---
# --description--
@@ -36,11 +36,23 @@ assert.equal(document.querySelector('div')?.className, 'card-container');
## --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>XYZ Bookstore Page</title>
</head>
<body>
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
--fcc-editable-region--
<div>
</div>
--fcc-editable-region--
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div>
</div>
--fcc-editable-region--
</body>
</html>
```

26
curriculum/challenges/english/blocks/workshop-bookstore-page/68ec6e8d0caee3afaaf142ef.md
View File

@@ -1,8 +1,8 @@
---
id: 68ec6e8d0caee3afaaf142ef
title: Step 5
title: Step 8
challengeType: 0
dashedName: step-5
dashedName: step-8
---
# --description--
@@ -36,11 +36,23 @@ assert.exists(document.querySelector('.card-container div.card'));
## --seed-contents--
```html
--fcc-editable-region--
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>XYZ Bookstore Page</title>
</head>
</div>
<body>
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
--fcc-editable-region--
<div class="card-container">
</div>
--fcc-editable-region--
</body>
</html>
```

30
curriculum/challenges/english/blocks/workshop-bookstore-page/68ec9332a9b5b2b32487bd00.md
View File

@@ -1,8 +1,8 @@
---
id: 68ec9332a9b5b2b32487bd00
title: Step 6
title: Step 9
challengeType: 0
dashedName: step-6
dashedName: step-9
---
# --description--
@@ -38,13 +38,25 @@ assert.equal(document.querySelector('.card')?.id, 'sally-adventure-book');
## --seed-contents--
```html
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
--fcc-editable-region--
<div class="card">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>XYZ Bookstore Page</title>
</head>
</div>
<body>
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
--fcc-editable-region--
</div>
<div class="card">
</div>
--fcc-editable-region--
</div>
</body>
</html>
```

30
curriculum/challenges/english/blocks/workshop-bookstore-page/68ec98b38d83a3c28dd30efe.md
View File

@@ -1,8 +1,8 @@
---
id: 68ec98b38d83a3c28dd30efe
title: Step 7
title: Step 10
challengeType: 0
dashedName: step-7
dashedName: step-10
---
# --description--
@@ -28,13 +28,25 @@ assert.equal(document.querySelector('.card h2')?.innerText.trim(), "Sally's SciF
## --seed-contents--
```html
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
--fcc-editable-region--
<div class="card" id="sally-adventure-book">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>XYZ Bookstore Page</title>
</head>
</div>
<body>
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
--fcc-editable-region--
</div>
<div class="card" id="sally-adventure-book">
</div>
--fcc-editable-region--
</div>
</body>
</html>
```

31
curriculum/challenges/english/blocks/workshop-bookstore-page/68ec99e478211dc578699944.md
View File

@@ -1,8 +1,8 @@
---
id: 68ec99e478211dc578699944
title: Step 8
title: Step 11
challengeType: 0
dashedName: step-8
dashedName: step-11
---
# --description--
@@ -38,14 +38,25 @@ assert.exists(document.querySelector('.card h2 + p'));
## --seed-contents--
```html
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
--fcc-editable-region--
<div class="card" id="sally-adventure-book">
<h2>Sally's SciFi Adventure</h2>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>XYZ Bookstore Page</title>
</head>
</div>
<body>
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
--fcc-editable-region--
</div>
<div class="card" id="sally-adventure-book">
<h2>Sally's SciFi Adventure</h2>
</div>
--fcc-editable-region--
</div>
</body>
</html>
```

33
curriculum/challenges/english/blocks/workshop-bookstore-page/68eca11e99e3c5c894ca9d69.md
View File

@@ -1,8 +1,8 @@
---
id: 68eca11e99e3c5c894ca9d69
title: Step 9
title: Step 12
challengeType: 0
dashedName: step-9
dashedName: step-12
---
# --description--
@@ -42,15 +42,26 @@ assert.equal(document.querySelector('.card button')?.innerText.trim(), 'Buy Now'
## --seed-contents--
```html
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
--fcc-editable-region--
<div class="card" id="sally-adventure-book">
<h2>Sally's SciFi Adventure</h2>
<p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>XYZ Bookstore Page</title>
</head>
</div>
<body>
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
--fcc-editable-region--
</div>
<div class="card" id="sally-adventure-book">
<h2>Sally's SciFi Adventure</h2>
<p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
</div>
--fcc-editable-region--
</div>
</body>
</html>
```

33
curriculum/challenges/english/blocks/workshop-bookstore-page/68eca2a795b333ca5fee30a8.md
View File

@@ -1,8 +1,8 @@
---
id: 68eca2a795b333ca5fee30a8
title: Step 10
title: Step 13
challengeType: 0
dashedName: step-10
dashedName: step-13
---
# --description--
@@ -34,16 +34,27 @@ assert.exists(document.querySelector('.card + .card'));
## --seed-contents--
```html
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>XYZ Bookstore Page</title>
</head>
<body>
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
--fcc-editable-region--
<div class="card" id="sally-adventure-book">
<h2>Sally's SciFi Adventure</h2>
<p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
<button class="btn">Buy Now</button>
</div>
<div class="card" id="sally-adventure-book">
<h2>Sally's SciFi Adventure</h2>
<p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
<button class="btn">Buy Now</button>
</div>
--fcc-editable-region--
</div>
</div>
</body>
</html>
```

39
curriculum/challenges/english/blocks/workshop-bookstore-page/68eca3cfeebef2cd8cc5f814.md
View File

@@ -1,8 +1,8 @@
---
id: 68eca3cfeebef2cd8cc5f814
title: Step 11
title: Step 14
challengeType: 0
dashedName: step-11
dashedName: step-14
---
# --description--
@@ -30,18 +30,29 @@ assert.equal(cards[1]?.id, 'dave-cooking-book');
## --seed-contents--
```html
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
<div class="card" id="sally-adventure-book">
<h2>Sally's SciFi Adventure</h2>
<p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
<button class="btn">Buy Now</button>
</div>
--fcc-editable-region--
<div class="card">
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>XYZ Bookstore Page</title>
</head>
</div>
<body>
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
<div class="card" id="sally-adventure-book">
<h2>Sally's SciFi Adventure</h2>
<p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
<button class="btn">Buy Now</button>
</div>
--fcc-editable-region--
</div>
<div class="card">
</div>
--fcc-editable-region--
</div>
</body>
</html>
```

39
curriculum/challenges/english/blocks/workshop-bookstore-page/68eca4c4b0f952cf09fabe09.md
View File

@@ -1,8 +1,8 @@
---
id: 68eca4c4b0f952cf09fabe09
title: Step 12
title: Step 15
challengeType: 0
dashedName: step-12
dashedName: step-15
---
# --description--
@@ -30,18 +30,29 @@ assert.equal(cards[1]?.querySelector('h2')?.innerText.trim(), "Dave's Cooking Ad
## --seed-contents--
```html
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
<div class="card" id="sally-adventure-book">
<h2>Sally's SciFi Adventure</h2>
<p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
<button class="btn">Buy Now</button>
</div>
--fcc-editable-region--
<div class="card" id="dave-cooking-book">
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>XYZ Bookstore Page</title>
</head>
</div>
<body>
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
<div class="card" id="sally-adventure-book">
<h2>Sally's SciFi Adventure</h2>
<p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
<button class="btn">Buy Now</button>
</div>
--fcc-editable-region--
</div>
<div class="card" id="dave-cooking-book">
</div>
--fcc-editable-region--
</div>
</body>
</html>
```

41
curriculum/challenges/english/blocks/workshop-bookstore-page/68eca5412b5dd9d06b3d6404.md
View File

@@ -1,8 +1,8 @@
---
id: 68eca5412b5dd9d06b3d6404
title: Step 13
title: Step 16
challengeType: 0
dashedName: step-13
dashedName: step-16
---
# --description--
@@ -41,19 +41,30 @@ assert.exists(cards[1]?.querySelector('h2 + p'));
## --seed-contents--
```html
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
<div class="card" id="sally-adventure-book">
<h2>Sally's SciFi Adventure</h2>
<p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
<button class="btn">Buy Now</button>
</div>
--fcc-editable-region--
<div class="card" id="dave-cooking-book">
<h2>Dave's Cooking Adventure</h2>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>XYZ Bookstore Page</title>
</head>
</div>
<body>
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
<div class="card" id="sally-adventure-book">
<h2>Sally's SciFi Adventure</h2>
<p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
<button class="btn">Buy Now</button>
</div>
--fcc-editable-region--
</div>
<div class="card" id="dave-cooking-book">
<h2>Dave's Cooking Adventure</h2>
</div>
--fcc-editable-region--
</div>
</body>
</html>
```

42
curriculum/challenges/english/blocks/workshop-bookstore-page/68eca5c0065c82d256d29ca3.md
View File

@@ -1,8 +1,8 @@
---
id: 68eca5c0065c82d256d29ca3
title: Step 14
title: Step 17
challengeType: 0
dashedName: step-14
dashedName: step-17
---
# --description--
@@ -46,19 +46,31 @@ assert.equal(cards[1]?.querySelector('button')?.innerText.trim(), 'Buy Now');
## --seed-contents--
```html
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
<div class="card" id="sally-adventure-book">
<h2>Sally's SciFi Adventure</h2>
<p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
<button class="btn">Buy Now</button>
</div>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>XYZ Bookstore Page</title>
</head>
<body>
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
<div class="card" id="sally-adventure-book">
<h2>Sally's SciFi Adventure</h2>
<p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
<button class="btn">Buy Now</button>
</div>
--fcc-editable-region--
<div class="card" id="dave-cooking-book">
<h2>Dave's Cooking Adventure</h2>
<p>This is the story of Dave as he learns to cook everything from pancakes to pasta, one recipe at a time.</p>
</div>
<div class="card" id="dave-cooking-book">
<h2>Dave's Cooking Adventure</h2>
<p>This is the story of Dave as he learns to cook everything from pancakes to pasta, one recipe at a time.</p>
</div>
--fcc-editable-region--
</div>
</div>
</body>
</html>
```

41
curriculum/challenges/english/blocks/workshop-bookstore-page/68eca6364c5616d393389a30.md
View File

@@ -1,8 +1,8 @@
---
id: 68eca6364c5616d393389a30
title: Step 15
title: Step 18
challengeType: 0
dashedName: step-15
dashedName: step-18
---
# --description--
@@ -47,21 +47,32 @@ assert.exists(document.querySelector('p + .btn-container'));
## --seed-contents--
```html
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>XYZ Bookstore Page</title>
</head>
<body>
--fcc-editable-region--
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
<div class="card" id="sally-adventure-book">
<h2>Sally's SciFi Adventure</h2>
<p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
<button class="btn">Buy Now</button>
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
<div class="card" id="sally-adventure-book">
<h2>Sally's SciFi Adventure</h2>
<p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
<button class="btn">Buy Now</button>
</div>
<div class="card" id="dave-cooking-book">
<h2>Dave's Cooking Adventure</h2>
<p>This is the story of Dave as he learns to cook everything from pancakes to pasta, one recipe at a time.</p>
<button class="btn">Buy Now</button>
</div>
</div>
<div class="card" id="dave-cooking-book">
<h2>Dave's Cooking Adventure</h2>
<p>This is the story of Dave as he learns to cook everything from pancakes to pasta, one recipe at a time.</p>
<button class="btn">Buy Now</button>
</div>
</div>
--fcc-editable-region--
</body>
</html>
```

76
curriculum/challenges/english/blocks/workshop-bookstore-page/68eca6e5a6759ed4ea0034dc.md
View File

@@ -1,8 +1,8 @@
---
id: 68eca6e5a6759ed4ea0034dc
title: Step 16
title: Step 19
challengeType: 0
dashedName: step-16
dashedName: step-19
---
# --description--
@@ -79,35 +79,54 @@ assert.equal(buttons[1]?.innerText.trim(), 'Checkout');
## --seed-contents--
```html
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
<div class="card" id="sally-adventure-book">
<h2>Sally's SciFi Adventure</h2>
<p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
<button class="btn">Buy Now</button>
</div>
<div class="card" id="dave-cooking-book">
<h2>Dave's Cooking Adventure</h2>
<p>This is the story of Dave as he learns to cook everything from pancakes to pasta, one recipe at a time.</p>
<button class="btn">Buy Now</button>
</div>
</div>
--fcc-editable-region--
<p>Review your selections and continue to checkout.</p>
<div class="btn-container">
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>XYZ Bookstore Page</title>
</head>
</div>
<body>
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
<div class="card" id="sally-adventure-book">
<h2>Sally's SciFi Adventure</h2>
<p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
<button class="btn">Buy Now</button>
</div>
<div class="card" id="dave-cooking-book">
<h2>Dave's Cooking Adventure</h2>
<p>This is the story of Dave as he learns to cook everything from pancakes to pasta, one recipe at a time.</p>
<button class="btn">Buy Now</button>
</div>
</div>
--fcc-editable-region--
<p>Review your selections and continue to checkout.</p>
<div class="btn-container">
</div>
--fcc-editable-region--
</body>
</html>
```
# --solutions--
```html
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>XYZ Bookstore Page</title>
</head>
<div class="card-container">
<body>
<h1>XYZ Bookstore</h1>
<p>Browse our collection of amazing books!</p>
<div class="card-container">
<div class="card" id="sally-adventure-book">
<h2>Sally's SciFi Adventure</h2>
<p>
@@ -125,12 +144,15 @@ assert.equal(buttons[1]?.innerText.trim(), 'Checkout');
</p>
<button class="btn">Buy Now</button>
</div>
</div>
</div>
<p>Review your selections and continue to checkout.</p>
<p>Review your selections and continue to checkout.</p>
<div class="btn-container">
<div class="btn-container">
<button id="view-cart-btn" class="btn">View Cart</button>
<button id="checkout-btn" class="btn">Checkout</button>
</div>
</div>
</body>
</html>
```

51
curriculum/challenges/english/blocks/workshop-bookstore-page/69134b6cb43aa5f254950a10.md Normal file
View File

@@ -0,0 +1,51 @@
---
id: 69134b6cb43aa5f254950a10
title: Step 1
challengeType: 0
dashedName: step-1
demoType: onLoad
---
# --description--
In this workshop, you will build a bookstore page by creating book cards that display information about different books. You'll practice organizing content using `div` elements, classes, and IDs.
Start your bookstore page by creating the HTML boilerplate.
Add the `<!DOCTYPE html>` declaration and `html` and `head` elements.
# --hints--
Your code should include a `<!DOCTYPE html>` declaration.
```js
assert.match(code, /<!DOCTYPE html>/i);
```
Your code should include both opening and closing `<html>` tags.
```js
assert.match(code,/<html>[\s\S]*<\/html>/i);
```
Your code should include both opening and closing `<head>` tags.
```js
assert.match(code,/<head>[\s\S]*<\/head>/i);
```
Your `head` element should be nested inside `html` element.
```js
assert.match(code, /<\/html>\s*$/);
```
# --seed--
## --seed-contents--
```html
--fcc-editable-region--
--fcc-editable-region--
```

64
curriculum/challenges/english/blocks/workshop-bookstore-page/69134d14150d51f8066a3246.md Normal file
View File

@@ -0,0 +1,64 @@
---
id: 69134d14150d51f8066a3246
title: Step 3
challengeType: 0
dashedName: step-3
---
# --description--
Now, improve the structure of your HTML document to ensure your page is encoded correctly and looks good on all screen sizes.
Add a language attribute to the `html` element and set it to `en`.Then,inside the `head` element add:
- a `<meta charset="UTF-8">` tag
- a `<meta name="viewport" content="width=device-width, initial-scale=1.0">` tag
Now add the `body` element below the head section. This is where all of your visible page content will go.
# --hints--
Your `html` element should have a `lang` attribute set to `"en"`.
```js
assert.match(code, /<html[^>]*\blang=["']en["'][^>]*>/i);
```
Your code should include a `<meta charset="UTF-8">` element.
```js
assert.exists(document.querySelector('head > meta[charset="utf-8"]'));
```
Your code should include a viewport `meta` element.
```js
assert.exists(document.querySelector('head > meta[name="viewport"][content="width=device-width, initial-scale=1.0"]'));
```
Your code should include opening and closing `<body>` tags.
```js
assert.match(code,/<body>[\s\S]*<\/body>/i);
```
Your `body` element should be below `head` element.
```js
assert.match(code, /<\/head>[\s\S]*<body>[\s\S]*<\/body>[\s\S]*<\/html>/i);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
--fcc-editable-region--
<html>
<head>
<title>XYZ Bookstore Page</title>
</head>
</html>
--fcc-editable-region--
```

47
curriculum/challenges/english/blocks/workshop-bookstore-page/691f85085787a8c4ca589fbb.md Normal file
View File

@@ -0,0 +1,47 @@
---
id: 691f85085787a8c4ca589fbb
title: Step 2
challengeType: 0
dashedName: step-2
---
# --description--
Add the `title` element inside the `head` element.
Set the page title to `XYZ Bookstore Page`.
# --hints--
Your code should include both opening and closing `<title>` tags.
```js
assert.match(code,/<title>[\s\S]*<\/title>/i);
```
Your title should be `XYZ Bookstore Page`.
```js
assert.equal(document.querySelector('title')?.innerText.trim(),'XYZ Bookstore Page');
```
Your `title` element should be nested within `head` element.
```js
assert.match(code, /<head>[\s\S]*<title>[\s\S]*<\/title>[\s\S]*<\/head>/i);
```
# --seed--
## --seed-contents--
```html
--fcc-editable-region--
<!DOCTYPE html>
<html>
<head>
</head>
--fcc-editable-region--
</html>
```

35
curriculum/structure/blocks/workshop-bookstore-page.json
View File

@@ -5,22 +5,25 @@
"helpCategory": "HTML-CSS",
"blockLayout": "challenge-grid",
"challengeOrder": [
{ "id": "68e97fe79367ad7b5dd6c9cd", "title": "Step 1" },
{ "id": "68ebdbacdd3fa474132cc975", "title": "Step 2" },
{ "id": "68ec6cd5b7e8f5a8f7319e32", "title": "Step 3" },
{ "id": "68ec6d9a315221aa31e54816", "title": "Step 4" },
{ "id": "68ec6e8d0caee3afaaf142ef", "title": "Step 5" },
{ "id": "68ec9332a9b5b2b32487bd00", "title": "Step 6" },
{ "id": "68ec98b38d83a3c28dd30efe", "title": "Step 7" },
{ "id": "68ec99e478211dc578699944", "title": "Step 8" },
{ "id": "68eca11e99e3c5c894ca9d69", "title": "Step 9" },
{ "id": "68eca2a795b333ca5fee30a8", "title": "Step 10" },
{ "id": "68eca3cfeebef2cd8cc5f814", "title": "Step 11" },
{ "id": "68eca4c4b0f952cf09fabe09", "title": "Step 12" },
{ "id": "68eca5412b5dd9d06b3d6404", "title": "Step 13" },
{ "id": "68eca5c0065c82d256d29ca3", "title": "Step 14" },
{ "id": "68eca6364c5616d393389a30", "title": "Step 15" },
{ "id": "68eca6e5a6759ed4ea0034dc", "title": "Step 16" }
{ "id": "69134b6cb43aa5f254950a10", "title": "Step 1" },
{ "id": "691f85085787a8c4ca589fbb", "title": "Step 2" },
{ "id": "69134d14150d51f8066a3246", "title": "Step 3" },
{ "id": "68e97fe79367ad7b5dd6c9cd", "title": "Step 4" },
{ "id": "68ebdbacdd3fa474132cc975", "title": "Step 5" },
{ "id": "68ec6cd5b7e8f5a8f7319e32", "title": "Step 6" },
{ "id": "68ec6d9a315221aa31e54816", "title": "Step 7" },
{ "id": "68ec6e8d0caee3afaaf142ef", "title": "Step 8" },
{ "id": "68ec9332a9b5b2b32487bd00", "title": "Step 9" },
{ "id": "68ec98b38d83a3c28dd30efe", "title": "Step 10" },
{ "id": "68ec99e478211dc578699944", "title": "Step 11" },
{ "id": "68eca11e99e3c5c894ca9d69", "title": "Step 12" },
{ "id": "68eca2a795b333ca5fee30a8", "title": "Step 13" },
{ "id": "68eca3cfeebef2cd8cc5f814", "title": "Step 14" },
{ "id": "68eca4c4b0f952cf09fabe09", "title": "Step 15" },
{ "id": "68eca5412b5dd9d06b3d6404", "title": "Step 16" },
{ "id": "68eca5c0065c82d256d29ca3", "title": "Step 17" },
{ "id": "68eca6364c5616d393389a30", "title": "Step 18" },
{ "id": "68eca6e5a6759ed4ea0034dc", "title": "Step 19" }
],
"blockLabel": "workshop",
"usesMultifileEditor": true,