Put A Bird On It
Learning how to code a responsive website from scratch with help from Portlandia
As a designer, I wanted to learn how to code basic websites for a few key reasons:
- As a web designer, I think it is important to understand how websites work “under the hood.” Just like I would expect a filmmaker to know how a camera works or a fashion designer to know how to sew, I needed to learn the basics of front-end coding.
- Learn basic syntax to communicate better with developers on future projects.
- Learn enough HTML and CSS to be able to build light-weight prototypes for user testing and product sprints.
Introducing my first website — Put A Bird On It
For context, Portlandia is a TV show starring Carrie Brownstein and Fred Armisen. If you haven’t seen the “Put a Bird On It” skit before, brace yourself for 1 minute and 40 seconds of bird-themed comedic gold:
Learning Objective #1 — Use a cover video
You see these everywhere from Airbnb to Uber’s controversial redesign. Cover videos are trendy, making landing pages more dynamic and engaging with fresh video content. I personally love them, so wanted to make one for myself. I found a swan video on Coverr.co; they’re a great resource because they provide starter code and free videos.
For those working on cover videos, I also recommend this Stack Overflow article for more insights how to style your videos.
Learning Objective #2 — Use a static background image for mobile in place of the cover video
I found out that websites typically do not use cover videos on mobile. My guess is that cover videos have slow, buggy loading speed issues. To swap out my cover video for a background image, I did the following:
- HTML — Added image with class “.mobile-background” after video in same div
- CSS Part 1 — Styled the image with “display: none;” to the class “.mobile-background”
- CSS Part 2 — To make responsive, I added a media query to “display: block;” to show the static background photo once the screen was 500px wide or less. I horizontally positioned the static background photo with a simple “margin-left”
Learning Objective #3 — Place divs with text on top of the cover video
With the swan-themed cover video in place, another challenge I had was placing two divs on top of the video, which contained a header (H1) and subheader (p) text. Keeping the two divs on top of Making the cover video responsive by keeping the two divs with text within the cover video area was surprisingly challenging.
25 media queries later, the cover video and the two divs with text were ready for showtime. I learned from this CSS-Tricks “Logic in Media Queries” article to use media queries with “max-width” and “max-height” to solve for various screen sizes. Due to the cascading nature of stylesheets, I put the media queries for the smallest screen sizes after larger screen sizes.
Responsive results, from little to big thanks to 25 media queries:
Learning Objective #4 — Use the iframe element
To learn how to use the HTML inline frame element ( <iframe> ), I embedded the YouTube clip from Portlandia right onto my site.
To make the YouTube clip responsive, I wanted to make sure the height and width dimensions would stay intact, no matter what the screen size. I gave the entire div a class of “.youtube-container” and nested the iframe within a “.youtube-container” class to get the styling just right. The iframe video was “positioned: absolute;” and was the child to a parent div, “.youtube-wrapper;” that was “positioned: relative;”.
This way, viewers can watch the entire YouTube clip on any screen without issue of styling or proportions acting up.
- HTML — I used two images per item: 1) the first showing the item with a target icon (the target indicates where to click), and 2) the second showing the item with a bird on it
- HTML — All three non-bird items had the class “image-swap”
- HTML — All three bird items had the class “hide” so that only the first item would be visible
The site starts out with three non-bird images showing to the user. By clicking each image, a new bird-image would replace the target and appear in the same spot.
By clicking on the item, a pink bird appears for the user. The user is asked to click all three items to add birds to everything to win the game.
To tell the user when they successfully completed the game, I wanted a confirmation message to appear.
- HTML — I created a section called “finale” after the three items with the class of “hide.” This section included a success confirmation that I wanted to appear once the user clicked on all three items… ya know, to put birds on everything!
- Each time a new images was clicked, I added the “1” to the value of the counter
- When the counter equaled (“===”) three, I had the “.finale” section show, by scrolling the user directly to the success confirmation message. I then added one more button to “Reset” the game so that users could play it again, if they wanted. It’s all about giving the user the optimal bird experience…
Learning Challenge #7 — Styling background photos over a div
Another challenge I had was styling an image over the entire background of the “.finale” section, shown above. I created a div and wanted to give it a background of an image instead of a simple color.
Before and After:
To fix these styling issues, I simplified my code and moved the image from the HTML to the CSS stylesheet. Before, the image lived in the HTML file and was styled in the stylesheet. But I was having issues positioning the image and centering both the text and reset button.
To fix this, I moved the image to the stylesheet, shown below, as a “background-image” for the “.finale” class.
Thanks for checking out my work. Don’t forget that you can put a bird on anything!
And just in case you didn’t get enough birds today…