Files
Shaun Hamilton 393aeabc8f feat(curriculum): add css-penguin practice project (#44214)
* feat: add css-penguin practice project

* rename block name

* rename meta block

* rename necessary properties

* rename page

* add to step 25

* adjust prototype with better structure/naming

* add step adjusting .ground z-index

* fix: add position: absolute to .ground

* add to step 37

* add to step 103

* remove erm from solution

* add tests to 001-020

* add tests 021-030

* test: update 012 to use dynamic hints

* test: improve tests with dynamic hints

* fix: add position:relative to .penguin

* add tests 032-055

* add tests 056 - 103

* fix some tests

* code blocks and test fixes

Co-authored-by: Krzysztof G. <60067306+gikf@users.noreply.github.com>

* allow 0% 0px 0

* fix: add width and height step for silly firefox

* add instruction to add html element

* Tom's good suggestions, and his American suggestions

Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>

* adjust wording for - you guessed it - firefox

Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>

* add missing calc keyword

* just fix it with regex :(

* apply Nich's probably bogus suggestions

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* remove duplicate

Co-authored-by: Krzysztof G. <60067306+gikf@users.noreply.github.com>
Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
2021-12-03 17:59:32 -06:00

126 lines
2.9 KiB
Markdown

---
id: 619665c9abd72906f3ad30f9
title: Step 1
challengeType: 0
dashedName: step-1
---
# --description--
You will be building a happy Flappy Penguin, and further exploring CSS transforms and animations in the process.
Begin with your basic HTML boilerplate. Include the `DOCTYPE` declaration, `html` element, the appropriate `meta` tags, a `head`, `body`, and `title` element. Also, link your stylesheet to the page.
# --hints--
Your code should have a `<!DOCTYPE html>` declaration.
```js
assert(code.match(/<!DOCTYPE html>/i));
```
Your code should have an `html` element.
```js
assert.equal(document.querySelectorAll('html')?.length, 1);
```
Your code should have a `head` element within the `html` element.
```js
assert.equal(document.querySelectorAll('head')?.length, 1);
```
Your code should have a `body` element within the `html` element.
```js
assert.equal(document.querySelectorAll('body')?.length, 1);
```
Your `head` element should come before your `body` element.
```js
assert.equal(document.querySelector('body')?.previousElementSibling?.tagName, 'HEAD');
```
You should have two `meta` elements.
```js
const meta = document.querySelectorAll('meta');
assert.equal(meta?.length, 2);
```
One `meta` element should have a `name` set to `viewport`, and `content` set to `width=device-width, initial-scale=1.0`.
```js
const meta = [...document.querySelectorAll('meta')];
const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset'));
assert.exists(target);
```
The other `meta` element should have the `charset` attribute set to `UTF-8`.
```js
const meta = [...document.querySelectorAll('meta')];
const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8');
assert.exists(target);
```
Your code should have a `title` element.
```js
const title = document.querySelector('title');
assert.exists(title);
```
Your `title` should have some text.
```js
const title = document.querySelector('title');
assert.isAtLeast(title?.textContent?.length, 1);
```
Your code should have a `link` element.
```js
assert(/<link/.test(code))
```
Your `link` element should be within your `head` element.
```js
assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/>[\w\W\s]*<\/head>/i))
```
Your `link` element should have a `rel` attribute with the value `stylesheet`.
```js
assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
```
Your `link` element should have a `type` attribute with the value `text/css`.
```js
assert.match(code, /<link[\s\S]*?type=('|"|`)text\/css\1/)
```
Your `link` element should have an `href` attribute with the value `styles.css`.
```js
assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
```
# --seed--
## --seed-contents--
```html
--fcc-editable-region--
--fcc-editable-region--
```
```css
```