Responsive Video
Content Creation

The Brief

I needed a site that would host the videos I filmed to support my A-Level students. The website builder sites wanted to charge for adding a link to a video. I knew at this stage it was worth learning to create your own sites. All that was needed was a short title and a link to YouTube.

The Build

OK, so a simple structure with a simple color scheme that looked the same on mobile as it did on desktop. I learned enough through Free Code Camp to set this up. Styling links and creating hover states was the first challenge. As I split the colours in the headline it took some time to learn how to get the hoverstate to work for both parts.

At this stage, although it wasn't necessary, I became interested in using javascript to add interactivity. jQuery was my first forary and you can see this in the modules menu.

Lastly, the use of iframes to link to YouTube created an issue as I began to learn about responsive design. After researching via Google I found how to use padding to keep the 16:9 ratio intact. This is seen in the intro video on the main page.

Inspect the Code Visit the Site