Help! I've Fallen! And I Can't Get Up!

Help! I've Fallen! And I Can't Get Up!

Lecture outline

You can jump to:

Project Questions

You can also watch the P4 Questions being talked through by Andrew.

How do we do group work remotely?

I am not a specialist in remote work — so please take these recommendations with that in mind:

  • Meet as you would using your preferred video/audio chat tools.
  • Share materials using Canvas or other preferred file storage/sharing tools.
  • Make sure to share materials in advance of meeting so that when you meet you can focus on discussing where things are at.

If there are specific requests or suggestions that you are looking for tools to make use of, please email Andrew.

Will there be adjustments made to the rubric and expectations for P4 considering everything has gone remote?

Yes. We have removed the 'process' grading from the rubric, and will take into consideration the remote-work situation as part of grading the project.

What will weekly deliverables look like?

For the code, we are going to move to using lecture times for code support, as well arranged office hours. Please contact Andrew directly to arrange a meeting where you can sit down and review it together.

For the 'information design', we will have you meeting with your TA at pre-arranged timeslots during your usual Thursday lab times. You will receive a weekly email reminding you of the time slots and rooms. Please bring your materials ready to discuss and share via webcam or screen sharing.

Does the final information design have to be a physical product or can it be an interactive digital material such as a game?

The final information design must include something we can interact with in our everyday space. If the game involves something that I would encounter on the Skytrain, at a public event, etc - then a game is permitted. If it is a 'I must download it or find it before I play it' then no.

Should the website look like P2?

Maybe. Because you have developed aesthetics and may redevelop structure beyond P2's consideration, the final website should far exceed P2's design quality in that regard.

What fidelity does our final information design have to be?

Depending on what you are developing, we expect different things:

  • Posters: A 'production quality' PDF.
  • Physical object: A three dimensional prototype rendered digitally, or a video of you stepping us through what you built (in foam/cardboard).
  • Motion graphics: A 'production quality' storyboard (i.e. we see clearly what the content of each keyframe is and some of the motion/action between them).
  • Event: A clear plan and drawing of the layout/organization of the event. (Do not hold the actual event)

If you are doing something else, check-in with us to clarify the fidelity.

HTML Questions

You can also watch the HTML Questions being talked through by Andrew.

How do we get a more detailed definition of elements?

For that I highly recommend HTML5 Doctor and the Mozilla Developer Network.

Different Elements, Different Meaning

The <section> element is a thematic grouping of content. Typically containing a heading and related content such as images and text.

The <div> element has no special meaning at all. It only gains meaning based on it's children and any classes applied to it.

The Ideal <table>

More on tables at the Mozilla Developer Network.

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/4b9120442069a7d1f7250c4946f50d21

Linking Pages

Unlike a link within the page, linking between pages involves knowing where files are and their names. More on linking at the Mozilla Developer Network.

Consider this file structure:

  • other.html
  • pages
    • index.html
    • review.html
    • contact.html
<!-- From the index.html page -->
<a href="review.html">Review</a>
<a href="contact.html">Contact</a>
<a href="../other.html" target="_blank">Other</a>

<!-- From the other.html page -->
<a href="pages/index.html">Home</a>
<a href="pages/contact.html">Contact</a>

Building Forms

More on forms at the Mozilla Developer Network.

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/6ec58e8a6efc95c122232453de1fce23

ID vs. Class

What is the difference?

IDs (#id):

  • Can only appear once per page
  • Each element can only have one
  • Should describe the context

A class (.class):

  • Can appear multiple times per page
  • Each element can have multiple
  • Should describe its purpose

Any lingering HTML questions?

CSS Questions

You can also watch:

The Box Model

More on the box model at the Mozilla Developer Network.

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/a63b4e018122c1404ed8ff7999cafc1f

Specificity

More on specificity at the Mozilla Developer Network.

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/61eb7c77c6f43977d1ce0063b7565800

Media Queries

More on media queries at the Mozilla Developer Network.

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/19fb18931c47e8c5064c9222d6929d02

Advanced Media Queries

We can have other media queries that look at the height and other properties of our device.

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/61ce92faccde7e89ff48ca2ab7208c40

Positioning

More on positioning at the Mozilla Developer Network.

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/6a18e8a44bdd23f133563bca9e6df8fb

Positioning in Grids

More on positioning items in grids at the Mozilla Developer Network.

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/e594846257f2bbfa8b4b587ba858ec11

Borderless Banner Demo

There were some questions about how do I have no white border on the page and how do I position text overtop of an image and control its position? Let's do a demo that explains both of these.

You can check out the code for this tutorial at CodePen.

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/773589d2631d9b037d9915ebf1f9787c

What are some ways to avoid hamburger menus at mobile sizes?

Good question. My thoughts... (listen for commentary).

Image Carousels

To build a functional (and accessible) image carousel you need to use JavaScript. There are various CSS hacks that will allow you to build a carousel without JavaScript, but these are almost always a problem for accessibility.

We will not be covering JavaScript in this course. If you want to sit and talk through how you might achieve something specific using JavaScript, please email Andrew directly to arrange a meeting.

Any Other CSS Questions?

1/1