---
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 `` declaration.
```js
assert(code.match(//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(/[\w\W\s]*[\w\W\s]*<\/head>/i))
```
Your `link` element should have a `rel` attribute with the value `stylesheet`.
```js
assert.match(code, /