FCC - 01 - Build a Video Compilation Page

Building out the 'Build a Video Compilation Page' project in FreeCodeCamp, while talking about learning to code and aspirations for the year.

I've been learning software development for probably a decade or more, much longer if you include incursions into BASIC in the 80s and 90s, without ever really mastering anything. The key challenge for most aspiring developers (and triathletes) is probably moving on to shiny things rather than mastering the fundamentals properly.

I'm not starting from the beginning, that makes it relatively easy to get going following something like The Odin Project, FreeCodeCamp, Scrimba, AppAcademy and many more. It's difficult to get excited about working through the relatively simple early phases of any of those though. My development skills might not be the strongest, but I've just managed to hack this Kirby CMS install into a data structure built completely around my content structure, without ever actually studying php.

So exercises like this one are a pretty straightforward test, throw a basic html boilerplate together with three sections, each containing a header, a paragraph, and an iframe containing a video with width, height and title properties. It doesn't look pretty, but passes the FCC validator.

I guess my objectives for this year are probably to exit the year with a much greater degree of mastery of the fundamentals - especially as I won't need to spend anywhere near as much time rebuilding this site and cleansing its content this year (as I'm absolutely not moving again!). I'm hoping to complete the new FreeCodeCamp full stack curriculum (still in beta) and Scrimba's front-end bootcamp simultaneously - so expect to see me flitting between the two through the year. If I find some time to keep my Python up to date too using the Talk Python courses, even better.

I do have a project that I want to build using React Native - more on that once I get started later in the year.

I did toy with using codepen embeds, but I'm working really hard to avoid cookies in iframes (or anywhere else) on this site. So here's my source, with link through to Netlify deployment.

Deployment

Netlify

Source

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

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

<body>
    <main>
        <h1>Waterfalls</h1>
        <p>Lorem ipsum odor amet, consectetuer adipiscing elit. Consequat ac montes luctus dui dis vestibulum risus sagittis. Orci tincidunt nisl; molestie ornare tellus finibus sollicitudin ipsum iaculis. In nunc per ridiculus euismod ipsum nisi vehicula. Ante conubia vulputate hac vehicula torquent urna sem. Hendrerit maximus integer suscipit laoreet nullam euismod. Mattis eget a egestas ullamcorper porttitor nulla. Non accumsan dis hac etiam tortor congue est per eleifend. Lacinia nullam pretium maecenas pretium a varius urna. Ipsum nulla fermentum mauris duis consequat sit fames consectetur tristique?</p>
        <section>
            <h2>Waterfall 1</h2>
            <p>Introducing waterfall 1.</p>
            <iframe src="https://cdn.pixabay.com/video/2023/04/10/158229-816359520_tiny.mp4" title="Waterfall 1" height="300px" width="100%"></iframe>
        </section>
        <section>
            <h2>Waterfall 2</h2>
            <p>Introducing waterfall 2.</p>
            <iframe src="https://cdn.pixabay.com/video/2023/09/01/178732-860527368_tiny.mp4" title="Waterfall 2" height="300px" width="100%"></iframe>
        </section>
        <section>
            <h2>Waterfall 3</h2>
            <p>Introducing waterfall 3.</p>
            <iframe src="https://cdn.pixabay.com/video/2024/12/04/244870_tiny.mp4" title="Waterfall 3" height="300px" width="100%"></iframe>
        </section>
    </main>
</body>

</html>