Build a Video Compilation Page

#community #learning #programming #webdev

Moving on from the previous workshop, the next lab on the Responsive Web Design certication at freeCodeCamp had me building a video compilation page.

This lab had seven user stories to complete, mainly surrounding adding elements, including an iframe. The first step being to add a main element.

The example project was on Front End Web Development, which I did not want to copy. Therefore, I created a page on the Python programming language.

The completed lab is below:

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

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

<body>
    <main>
        <h1>The Python Programming Language</h2>
        <p>Python is a versatile and beginner-friendly programming language used in many fields, including artificial intelligence and data science. This video compilation introduces Python fundamentals, explores building an AI agent with Python, and demonstrates how Python is used in data science applications.</p>
        <section>
            <h2>Learn Python</h2>
            <p>This course will give you a full introduction into all of the core concepts in Python.</p>
            <iframe width="640" height="480" src="https://www.youtube.com/embed/rfscVS0vtbw?si=--PCAXlFt-TcKaMz" title="Learn Python" frameborder="0" allow="accelerometer encrypted-media gyroscope web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        </section>
        <section>
            <h2>Guide to Agentic AI</h2>
            <p>Build your own functional AI coding agent from the ground up using Python and the free Gemini Flash API.</p>
            <iframe width="640" height="480" src="https://www.youtube.com/embed/YtHdaXuOAks?si=1NpMdAyczv9fshEG" title="Guide to Agentic AI" frameborder="0" allow="accelerometer encrypted-media gyroscope web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        </section>
        <section>
            <h2>Learn Python for Data Science</h2>
            <p>Get started with data science using Python! This course covers essential tools like Pandas and NumPy, plus data visualization and much more!</p>
            <iframe width="640" height="480" src="https://www.youtube.com/embed/CMEWVn1uZpQ?si=KLNMeaInJ4moCNGJ" title="Learn Python for Data Science" frameborder="0" allow="accelerometer encrypted-media gyroscope web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        </section>
    </main>
</body>

</html>

With the lab completed and uploaded to GitHub, I moved onto four theory lessons about Working with Links. After that, I'm left with just a review and a quiz within the Basic HTML section of the curriculum. Wish me luck!

DEV Community

Build a Video Compilation Page

Top comments (0)