--- id: 6193d8081ec2531581ea7b98 title: Step 1 challengeType: 0 dashedName: step-1 --- # --description-- A balance sheet is used to track the state of an organization's finances. You'll be building a mock balance sheet for AcmeWidgetCorp to explore the use of various CSS selectors. Begin with your basic HTML boilerplate. Include the `DOCTYPE` declaration, an `html` element, the appropriate `meta` tags, a `head`, `body`, and `title` element, and `link` your stylesheet. Give the `title` element the text `AcmeWidgetCorp Balance Sheet`. # --hints-- Your code should have a `` declaration. ```js assert(code.match(//i)); ``` Your code should have an `html` element. ```js assert(document.querySelectorAll('html')?.length === 1); ``` Your code should have a `head` element within the `html` element. ```js assert(document.querySelectorAll('head')?.length === 1); ``` Your code should have a `body` element within the `html` element. ```js assert(document.querySelectorAll('body')?.length === 1); ``` Your `head` element should come before your `body` element. ```js assert(document.querySelector('body')?.previousElementSibling?.tagName === 'HEAD'); ``` You should have two `meta` elements. ```js const meta = document.querySelectorAll('meta'); assert(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 project should have a title of `AcmeWidgetCorp Balance Sheet`. ```js const title = document.querySelector('title'); assert.equal(title?.text?.trim()?.toLowerCase(), 'acmewidgetcorp balance sheet') ``` Remember, the casing and spelling matter for the title. ```js const title = document.querySelector('title'); assert.equal(title?.text?.trim(), 'AcmeWidgetCorp Balance Sheet'); ``` Your code should have a `link` element. ```js assert(//.test(code)); ``` # --seed-- ## --seed-contents-- ```html --fcc-editable-region-- --fcc-editable-region-- ``` ```css ```