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:

  1. 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.
  2. Learn basic syntax to communicate better with developers on future projects.
  3. Learn enough HTML and CSS to be able to build light-weight prototypes for user testing and product sprints.

I completed a front-end boot camp at General Assembly in San Francisco, so wanted to share some progress. I created a “Portlandia”-themed website from scratch in February 2016, hosted on Github, to polish my new HTML5, CSS, and JavaScript skills. Take a look:

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.

One big challenge was styling and positioning the cover video to be responsive. I learned that “min-height” (previously set at 800px tall) was causing issues with my CSS and JavaScript (shown below in detail). I initially wanted the video to have a minimum height so that the two divs with text sitting on top of the video would be easier to style. But as I found out, min-height created unwanted spacing issues (white bar, circled in red below) above and below the cover video.

For those working on cover videos, I also recommend this Stack Overflow article for more insights how to style your videos.

“Min-Height” on the cover video was causing serious styling issues when you changed the screen size for responsivness.

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:

Baby Bear —How cute!
Mama Bear — Note this screen size features the static image since it’s less than 500px wide
Papa Bear — Featuring the cover video on autoplay

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.

Learning Objective #5 — Using JavaScript to turn the website into a game

I made this site a simple game to learn more about JavaScript.

The point of the bird game is to click each of the three images to “put a bird on it.” The goal was to have a “bird” appear on each image once a user clicked the targeted image. To do this, I used JavaScript:

  • 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
  • JavaScript — I used jQuery and created an event listener to change out the non-bird image with a bird image to simulate “putting a bird on it
  • JavaScript — By passing in “image-swap” into the click function, I used the “addClass” method to hide the non-bird image. Then, I used “removeClass” on the same event to remove “hide” and hence show the bird image

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.

Learning Objective #6 — Use a counter in JavaScript

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!
  • JavaScript — I created a variable called “counter” and declared the starting value = 0
  • 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…

Hence, I used JavaScript to keep track of when a user successfully clicked on all three images, which satisfies the game’s objective and shows the success confirmation message.

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:

Left shows “Before” and the right shows “After” — Fixed!

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…

Storyboarding from left to right — 1) Tragic, 2) Hot, and 3) Nailed it. Put a bird on everything!

Many thanks to my support network over the past two months, including my teacher, Noah; my General Assembly TA’s Christine and Sebastian; my JavaScript expert, Ted; and my sherpas up “Supportive Friend Mountain,” Becca, Rebecca, David, Cecilia, Andrew, Erik, Mo, and Jeff. Coding is fun, thanks to you all. Cheers!