responsive web design

Class Wednesday, February 15, 2017

 Today’s goals:

  • Finish the Valentine’s Day Design Challenge (click for instructions)
  • Update your online portfolio
  • Participate in second round of “How do you do that?”
  • Enjoy Valentine’s Day Design Challenge show and tell (when all are done)

 Today’s featured website:

 Class Structure

  • 1st part (10-15 minutes): Finish Valentine’s project, update portfolio, and find example for “how do you do that?”. If you’re done with all of those things, please view these responsive design examples to see how different sizes handle adapting their content to different screen sizes.
  • 2nd part (5 minutes): Valentine’s show and tell!
  • 3rd part (rest of class): “How do you do that” with examples from everyone.

 Update Your Online Portfolio

  • Add screen shots of your webpage to your online portfolio:
    1. If you used the DJ Khaled template, you will need 3 screen shots of your site- 1 each at phone, tablet, and desktop sizes. If you used the changing background image template, you will need 2 screen shots, 1 for a small screen and 1 for a large screen. Open your site in Firefox and enable responsive design mode to size your webpage for each screen shot.
    2. Log in here (user name is first name, password is whatever you chose; if you can’t log in, see me)
    3. Click Pages from the left-hand menu, then search for your name in the search box at the top right. When you find your name, your portfolio page should be right below it. Click edit to start adding content to the page.

 Second round this year of “How do you do that?

  • Each of you will find something you want to do and an example from a website. Write this example down somewhere (Notepad, Google Doc, desktop Post-it, piece of paper, your phone) and save the website link with the example so we can look at it later. We will go over all of these as a class and find out if I can do it, if we’re going to learn it this year, or if someone in class knows how to do it. Example: how does yesterday’s featured site work? Answer: WebGL- WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.