September 19, 2023
Reading Discussion
Link to are.na
Exercise: How to give Feedback
Before we critique our entries, let's practice giving each other constructive feedback.
- Let's start with a cold critique of craigslist.
- Then, I'll give you some ideas on how to give feedback and critique
- And we will do a second round of website critique, on art.yale.edu.
- Let's see what other people think.
- What do the designers say?
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:
- Re-iterate your theme
- Explain what you tried to do for your entry
- How does the form and content correspond to your theme?
- What was difficult, or where are you stuck?
- Where do you hope to take it next?
- 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.
Demo
And we’ll do a little CSS layout work, together.
- Let’s briefly go over some hosting terminology, as a little appetizer.
- Let’s install the Live Server plugin, to give us quick/auto reloading!
- Let’s add in our reset to start with a “clean slate”:
Copy from here:
https://raw.githubusercontent.com/elad2412/the-new-css-reset/main/css/reset.cssOr here:
/***
The new CSS reset - version 1.9 (last updated 19.6.2023)
GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
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 (https://github.com/elad2412/the-new-css-reset/issues/36)
*/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
}
/* Preferred box-sizing value */
*,
*::before,
*::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;
}-
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-colorwithpadding position: fixed;for a navigation element- Whatever anyone else wants, if we have time!
- Space between our elements with
-
Lastly let's talk about how we can use Figma for sketching and prototyping. Use this to join our team.
Homework
-
Read the full box model lecture, above! There are lots of specific examples there for you to use in your work.
-
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:
Help!!!
-
If you are still struggling with GitHub, take a look at this GitHub tutorial.
-
If the GitHub tutorial just won't work for you, sign up for an account on glitch.com and remix this template. This is how you get started on glitch.com.
-
You can also look at the template on GitHub Pages,or download it from GitHub.
-
Make use of the CD Tutors and schedule and appointment, via the CD@Parsons app
-
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
- Don't obsess over one particular feature of your entry,