(Note: This webpage currently works best on Firefox, and is not yet fully functional on mobiles.)
ObscuriTV is the webpage I have designed to support my application to the Founders and Coders course in JavaScript.
I decided it would be fun to try designing a small TV that the viewer could surf through some interesting video clips on.
The hardest part to design was probably the 'control box' on the right. The top button randomly changes the clip, while the bottom one allows the viewer to submit new clips by email. This allowed me to use some of the JavaScript that I have learnt on freeCodeCamp and Codewars, as well as to develop my CSS layout skills.
It was also tricky to make the design responsive. I did this using padding-top a lot of the time, so that I could use percentages to keep the TV and control box in a nice proportion to the browser/screen, and to each other. I decided to keep the TV quite small on larger screens, to draw the viewer in more, so it only starts scaling down on quite small screens. The responsiveness still needs some work, on mobile screens in particular, although I am happy to have worked out how to use media queries to move the control box below the TV, and to remove some non-functioning elements (see next paragraph), on smaller screens.
Other things that don't currently work on mobile/tablet screens are the scrolling text in the control box, and the submit button; I decided to use media queries to remove these on smaller screens. I haven't yet been able to make the video autoplay within the frame of the TV on mobiles either.
Previous iterations of the webpage can be seen on my Codepen profile, along with a couple of more standard layouts: https://codepen.io/discotechne/.
I hope you enjoy surfing through the channels!
Patrick