Core 1 Interaction

September 19, 2023

Reading Discussion

Link to

Exercise: How to give Feedback

Before we critique our entries, let's practice giving each other constructive feedback.

  1. Let's start with a cold critique of craigslist.
  2. Then, I'll give you some ideas on how to give feedback and critique
  3. And we will do a second round of website critique, on

Entry 2 Review

After we warmed up, we can give each other feedback.

10 people will present today. Each presenter gets assigned a note-taker and two first responder that kick-off each round of feedback.

Unlike in our previous website critique, we now have the designer with us in the room. Which gives us an advantage, because they can give us guidance on how they want to be critiqued.

When you show your work:

  1. Re-iterate your theme
  2. Explain what you tried to do for your entry
    • How does the form and content correspond to your theme?
  3. What was difficult, or where are you stuck?
  4. Where do you hope to take it next?
  5. How do you want us to give you feedback?
    • Do you have a technical problem?
    • Do you need a pat on the back?
    • Do you need references?
    • Do you want to be asked question?
    • Are you unsure how to specify your concept?
    • Are you unsure about the form?
    • Are you happy with how it went?

Let’s take a look at some of your entries for this week.

L4: Boxes!

After that, I will talk about The Box model.


And we’ll do a little CSS layout work, together.

  1. Let’s briefly go over some hosting terminology, as a little appetizer.
  2. Let’s install the Live Server plugin, to give us quick/auto reloading!
  3. Let’s add in our reset to start with a “clean slate”:

Copy from here:

Or here:


The new CSS reset - version 1.9 (last updated 19.6.2023)

GitHub page:




Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property

- The "symbol *" part is to solve Firefox SVG sprite bug

- The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (


*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {

all: unset;

display: revert;



/* Preferred box-sizing value */



*::after {

box-sizing: border-box;



/* Reapply the pointer cursor for anchor tags */

a, button {

cursor: revert;



/* Remove list styles (bullets/numbers) */

ol, ul, menu {

list-style: none;



/* For images to not be able to exceed their container */

img {

max-inline-size: 100%;

max-block-size: 100%;



/* removes spacing between cells in tables */

table {

border-collapse: collapse;



/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */

input, textarea {

-webkit-user-select: auto;



/* revert the 'white-space' property for textarea elements on Safari */

textarea {

white-space: revert;



/* minimum style to allow to style meter element */

meter {

-webkit-appearance: revert;

appearance: revert;



/* preformatted text - use only for this feature */

:where(pre) {

all: revert;



/* reset default text opacity of input placeholder */

::placeholder {

color: unset;



/* remove default dot (•) sign */

::marker {

content: initial;



/* fix the feature of 'hidden' attribute.

display:revert; revert to element instead of attribute */

:where([hidden]) {

display: none;



/* revert for bug in Chromium browsers

- fix for the content editable attribute will work properly.

- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/

:where([contenteditable]:not([contenteditable="false"])) {

-moz-user-modify: read-write;

-webkit-user-modify: read-write;

overflow-wrap: break-word;

-webkit-line-break: after-white-space;

-webkit-user-select: auto;



/* apply back the draggable feature - exist only in Chromium and Safari */

:where([draggable="true"]) {

-webkit-user-drag: element;



/* Revert Modal native behavior */

:where(dialog:modal) {

all: revert;

  1. And I’ll demo a few common layout properties from today’s lecture.

    • Space between our elements with margin-top
    • Controlling our line lengths with max-width
    • Centering a content block with margin: 0 auto;
    • Adding background-color with padding
    • position: fixed; for a navigation element
    • Whatever anyone else wants, if we have time!
  2. Lastly let's talk about how we can use Figma for sketching and prototyping. Use this to join our team.


  1. Read the full box model lecture, above! There are lots of specific examples there for you to use in your work.

  2. Complete the Entry 3 for your project and submit your entire Harmonic Collection folder on Canvas.

    The base structure for your collection should look like this:


  1. If you are still struggling with GitHub, take a look at this GitHub tutorial.

  2. If the GitHub tutorial just won't work for you, sign up for an account on and remix this template. This is how you get started on

  3. You can also look at the template on GitHub Pages,or download it from GitHub.

  4. Make use of the CD Tutors and schedule and appointment, via the CD@Parsons app

  5. Some notes on process. Please go over this if your are unsure how much time to spend on your entry.

    As a rule of thumb:

    • Don't obsess over one particular feature of your entry,
      • try to find alternatives
      • or shift tasks if you get stuck.
    • Take a break and revisit the problem later.
    • If you can't get a code feature to work, make a sketch in Figma or work on the content of your entry. Use this Figma invite link to join our team