fix(curriculum): remove meta viewport requirement from bookstore page workshop (#64944)

2026-09-24 23:01:18 +08:00 · 2026-01-02 06:24:24 -08:00
parent 706d628641
commit 7d58ef2062
17 changed files with 3 additions and 29 deletions
@@ -38,7 +38,6 @@ assert.match(code, /<body>[\s\S]*<h1>[\s\S]*<\/h1>[\s\S]*<\/body>/i);
 <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--
@@ -38,7 +38,6 @@ assert.exists(document.querySelector('h1 + 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>

@@ -34,7 +34,6 @@ assert.exists(document.querySelector('p + 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>

@@ -40,7 +40,6 @@ assert.equal(document.querySelector('div')?.className, '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>

@@ -40,7 +40,6 @@ assert.exists(document.querySelector('.card-container div.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>

@@ -42,7 +42,6 @@ assert.equal(document.querySelector('.card')?.id, 'sally-adventure-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>

@@ -32,7 +32,6 @@ assert.equal(document.querySelector('.card h2')?.innerText.trim(), "Sally's SciF
 <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>

@@ -41,7 +41,6 @@ assert.exists(document.querySelector('.card h2 + 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>

@@ -45,7 +45,6 @@ assert.equal(document.querySelector('.card button')?.innerText.trim(), 'Buy Now'
 <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>

@@ -37,7 +37,6 @@ assert.exists(document.querySelector('.card + .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>

@@ -33,7 +33,6 @@ assert.equal(cards[1]?.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>

@@ -33,7 +33,6 @@ assert.equal(cards[1]?.querySelector('h2')?.innerText.trim(), "Dave's Cooking Ad
 <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>

@@ -44,7 +44,6 @@ assert.exists(cards[1]?.querySelector('h2 + 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>

@@ -49,7 +49,6 @@ assert.equal(cards[1]?.querySelector('button')?.innerText.trim(), 'Buy Now');
 <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>

@@ -50,7 +50,6 @@ assert.exists(document.querySelector('p + .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>

@@ -82,7 +82,6 @@ assert.equal(buttons[1]?.innerText.trim(), 'Checkout');
 <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>

@@ -118,7 +117,6 @@ assert.equal(buttons[1]?.innerText.trim(), 'Checkout');
 <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>

@@ -7,14 +7,11 @@ 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.
+Now, improve the structure of your HTML document to ensure your page is encoded correctly.

-Add a language attribute to the `html` element and set it to `en`. Then, inside the `head` element add:
+Add a `lang` attribute to the `html` element and set it to `"en"`. Then, inside the `head` element add the `<meta charset="UTF-8">` element.

- 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.
+Lastly, add a `body` element below the `head` section. This is where all of your visible page content will go.

 # --hints--

@@ -30,12 +27,6 @@ Your code should include a `<meta charset="UTF-8">` element.
 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