ContextQMD
Back to Freecodecamp

Build a Video Compilation Page

curriculum/challenges/english/blocks/lab-video-compilation-page/669e81368e52b3a5c35a2dc5.md

latest7.6 KB
Original Source

--description--

Objective: Fulfill the user stories below and get all the tests to pass to complete the lab.

User Stories:

  1. You should have a main element as the only child of the body element.
  2. You should have an h1 element with the topic of your page.
  3. You should have a paragraph introducing the topic of your page below your h1 element.
  4. You should have three section elements below your first paragraph.
  5. Each section should contain an h2 element, a paragraph, and an iframe element, in this order.
  6. The three iframe elements should have a src attribute set to a valid video.
  7. Each iframe element should also have a title attribute to describe the embedded content, and a height attribute and a width attribute to set the element to a proper size.

--hints--

You should have a main element inside your body element.

js
assert.equal(document.querySelector('body :first-child').tagName, 'MAIN');

Your main element should be the only child of the body element.

js
assert.equal(document.querySelector('body').children.length, 1);

You should have an h1 element with the topic of your page inside the main element.

js
assert.isAbove(document.querySelector('h1')?.innerText.length, 0);

You should have a paragraph introducing the topic of your page below your h1 element.

js
const p = document.querySelectorAll('p')[0];
assert.equal(p?.previousElementSibling?.tagName, 'H1');
assert.isAbove(p?.innerText.length, 0);

You should have three section elements below your first p element.

js
assert.equal(document.querySelectorAll('section')?.length, 3);
assert.equal(document.querySelectorAll('section')[0]?.previousElementSibling?.tagName, 'P')

Each section element should start with an h2 element that serves as the title for that section.

js
const sections = document.querySelectorAll('section');
assert.equal(sections?.length, 3)
for (let section of sections) {
    assert.equal(section.children[0]?.tagName, 'H2');
    assert.isAbove(section.children[0]?.innerText.length, 0);
}

Each section element should contain a p element to introduce the video content as its second child.

js
const sections = document.querySelectorAll('section');
assert.equal(sections?.length, 3)
for (let section of sections) {
    assert.equal(section.children[1]?.tagName, 'P');
    assert.isAbove(section.children[1]?.innerText.length, 0);
}

Each section element should contain an iframe element as its third child.

js
const sections = document.querySelectorAll('section');
assert.equal(sections?.length, 3)
for (let section of sections) {
    assert.equal(section.children[2]?.tagName, 'IFRAME');
}

Your first iframe element should have a src attribute set to a valid video.

js
assert.isAbove(document.querySelectorAll('iframe')[0]?.src.length, 0)

Your first iframe element should have a title attribute to describe the embedded content.

js
assert.isAbove(document.querySelectorAll('iframe')[0]?.title.length, 0)

Your first iframe element should have a height attribute.

js
assert.isAbove(document.querySelectorAll('iframe')[0]?.height.length, 0)

Your first iframe element should have a width attribute.

js
assert.isAbove(document.querySelectorAll('iframe')[0]?.width.length, 0)

Your second iframe element should have a src attribute set to a valid video.

js
assert.isAbove(document.querySelectorAll('iframe')[1]?.src.length, 0)

Your second iframe element should have a title attribute to describe the embedded content.

js
assert.isAbove(document.querySelectorAll('iframe')[1]?.title.length, 0)

Your second iframe element should have a height attribute.

js
assert.isAbove(document.querySelectorAll('iframe')[1]?.height.length, 0)

Your second iframe element should have a width attribute.

js
assert.isAbove(document.querySelectorAll('iframe')[1]?.width.length, 0)

Your third iframe element should have a src attribute set to a valid video.

js
assert.isAbove(document.querySelectorAll('iframe')[2]?.src.length, 0)

Your third iframe element should have a title attribute to describe the embedded content.

js
assert.isAbove(document.querySelectorAll('iframe')[2]?.title.length, 0)

Your third iframe element should have a height attribute.

js
assert.isAbove(document.querySelectorAll('iframe')[2]?.height.length, 0)

Your third iframe element should have a width attribute.

js
assert.isAbove(document.querySelectorAll('iframe')[2]?.width.length, 0)

--seed--

--seed-contents--

html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Video Compilation Page</title>
</head>

<body>

</body>

</html>

--solutions--

html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Video Compilation Page</title>
</head>

<body>
    <main>
        <h1>Front-End Web Development</h1>
        <p>Front-End Web Development involves designing and building user interfaces of websites using HTML, CSS, and
            JavaScript. It focuses on creating visually appealing, interactive, and user-friendly websites. Front-end
            developers ensure accessibility, performance optimization, and
            adherence to web standards, blending creativity with technical expertise.</p>
        <section>
            <h2>HTML</h2>
            <p>HTML, or HyperText Markup Language, forms the backbone of web pages by defining their basic structure and
                layout. It uses a series of elements to display text, images, lists, tables, and other static content on
                a web page.</p>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/GDGejH3SDNQ?si=KJYLgcz4kyyroYMB"
                title="html and coding introduction video" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        </section>
        <section>
            <h2>CSS</h2>
            <p>CSS, or Cascading Style Sheets, is used to control the visual presentation of HTML elements on a web
                page. It allows for customized styling, including colors, fonts, layouts, and spacing, making websites
                visually appealing. CSS also supports responsive design, ensuring web pages look good on
                all devices.</p>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/OXGznpKZ_sA?si=s3KDSZvrhU_PU9XL"
                title="css tutorial video" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        </section>
        <section>
            <h2>JavaScript</h2>
            <p>JavaScript is a programming language that adds interactivity to static web pages, enabling dynamic
                content updates, form validations, animations, and responsive behaviors based on user interactions and
                events.</p>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/jS4aFq5-91M?si=zKQhHEYwU4tnMmVm"
                title="javascript programming video" frameborder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        </section>
    </main>
</body>

</html>