DSD-4708-A
Week 5

Questions

  • I do not know how to add facebook or instagram small symbol on the footer. Plus, whenever I change for different device for design coding, it showed differently.
  • 1. How can I perfectly copy my design from photoshop to html (width, image positioning, size..etc) because I sometimes assumed the width or size. Is there easy way to figure out exact size of elements?
  • What is a proper way to select an id or stylize id? I use #id, and live weave has suggested not to do that.
  • Can px go negative excluding margin?
  • What is Em/rem ?

In class review: LiveWeave eBlasts

Introducing Font Awesome

  • Font Awesome is actually kinda awesome
  • You can include it in your Liveweave sketches by selecting it under the Library tab
  • If want to use Font Awesome icons in your print designs (or Sketch files), you'll need to install the font and copy and paste icons from this cheatsheet

The HTML/CSS Box Model

  • Here's a quick video tutorial to help explain the box model.
  • Here's the diagram you need to know
  • Remember:
    • All HTML elements are rectangular
    • When you set the width and height of an element in CSS you're setting the width and height of the Content
    • background-image and background-color will only apply to the content and padding parts of the box
    • margin is used to move elements in relation to other adjacent elements (within the same parent container)
    • margin is transparent by default, though it will take the background-image or background-color of its parent container
    • Note that the total width (or calculated width) of an element is the width of the content + padding + border + margin
    • As it says on the W3 site: Total element width = width + left padding + right padding + left border + right border + left margin + right margin

CSS Grid

Design Assignment

Deliverable: Publicly accessible PDF

  • Using the feedback from class, redo the design we focused on
  • Remember: at least one section of your design must have two columns

Coding Assignment

Deliverable: LiveWeave URL (Remember: always have TextEdit open for questions)

Submitting Your Work

Due Monday, 10/15 @ 10AM

Make sure all links are publicly accessible (your grade will be lower if I cannot access your work). To make sure, open up a new private/incognito browser window and test all links before submitting. After the links have been tested, submit them to this Google Form.

Further reading

Cool links