⌨️ Agenda

1. Introduction
2. Lab Kickoff
3. Lecture: HTML Refresher
4. An introduction to Chrome Developer Tools

📚 Assignments

• Share your Github Page URL
• Questionnaire
  1. Describe your previous experiences with coding. What classes have you already taken where you were exposed to HTML/CSS/JS? What parts of the class resonated with you? What parts were most confusing?
  2. How excited about learning code are you? Are you nervous about learning code? If so, why? What can I do in this class to help reduce this anxiety?
  3. How do you imagine coding fitting in with the rest of your design curriculum and career after college?
  4. What text editor do you prefer to use?
  5. Have you used GitHub before? Do you know what it is? Describe your understanding of GitHub.
  6. Describe the relationship between HTML, CSS and JavaScript. Try using a unique analogy to describe this relationship. Bonus points for creative analogies.
  7. Using each HTML heading tag, list your favorite foods ranked by importance (remember, there are six levels of heading tags, `h1` through `h6`).
  8. Create an unordered list ( `ul` ) and link to some of your favorite graphic design or development related websites. Include a paragraph ( `p` ) on each site describing why it is important to you.
  9. Insert an image (`img`) that brings you joy to the page. Make sure the image includes `alt text` that describes the image.
  10. Insert a video embed into the page (for example, a YouTube or Vimeo embed tag of a video of your choosing). You have a few ways you can approach this:
      • Look into the `iframe` tag. Hint: If using a YouTube or Vimeo video, you can copy the embed code from each video’s page.
      • Use a `video` tag, though finding the URL of a video can sometimes be tricky – do you best to download, place it in your project folder, then reference its file path
  11. Nest the following series of HTML tags inside each other, where each → represents a new level. Make sure to maintain proper indentation.
      • `main` → `section` → `div` → `p` → `span`
      • No need to fill these tags with any actual content
  12. Create an ordered list of the top 5 countries you’d like to visit. Within each country, create another ordered list of the top cities you’d like to visit in that country. Maintain proper indentation and make sure you nest your ordered lists properly.
  13. Use `pre` tags to create a simple [concrete poetry](https://en.wikipedia.org/wiki/Concrete_poetry) version of a Haiku or other poem you write. The poem should represent how you feel at this moment.
      • Hint: `pre` tags respect whitespace, you can add add lots of spaces and line breaks and they will show up like that when you view the web page.
  14. Write an HTML comment that is hidden from the browser, but displays in the code.
  15. Create an unordered list of at least 6 musical artists you like to listen to. Add a class to each list item that matches the genre of music of that artist.
  16. Describe the difference between block, inline-block and inline elements.
  17. Use CSS to style the musical genre classes you added in question 15. Give each genre a color and personality using CSS.
  18. Use any CSS knowledge you currently have to style your questionnaire in a unique way. Make sure to update the font to something other than the default (use the font-family css property).
  19. In a `script` tag, use the console.log function to write a message to the console (Cmd+Opt+U). Tell me something interesting about yourself.
  20. Add a `button` to your HTML file and make it do something when clicked using JavaScript

⌨️ Agenda

1. CSS Refresher
2. Set up a sample index page together
3. Time permitting, the box model

📚 Assignments

• Create and publish your index page by next Thu, Feb 8. Use the below breakdown as a guide to structuring your repo, with the highlighted file as your index file.

📂 root/index
   📄 index.html
   📄 style.css
   📂 questionnaire
      📄 index.html
   📂 stories-as-networks
      📄 index.html
      📄 style.css
   📂 more folders as needed…

⌨️ Agenda

1. Continue where we left off with the box model
2. Learn about media queries
3. Spend some time making your new index/portfolio pages responsive. I'll come around to help.

📚 Assignments

Reverse-Engineer HTML Structure and CSS

The best way to learn how something is made is by taking it apart. So, in this week’s assignment, we are going to go out there in the wild fields of the Internet and see what we can glean from analysing a webpage’s source. We won’t be going without tools, though, since we have Chrome’s Developer Tools ( Command+Option+I ) help us with examining the HTML structure and and experiment with CSS.

Your assignment is to:

1. Find one webpage out there in the wild, whose HTML/CSS structure is reasonably legible.
2. Inspect the page via Chrome Developer Tools( Command+Option+I ).
3. Under a new folder/directory (e.g. '/html-analysis') of your local Github repository
4. Within your name folder/directory, create a new html file (e.g. index.html)
5. Paste this template into your new HTML folder. It will save you setup time and guide you through the directions.
6. Follow the guide! There are 3 distinct sections:
   1. Screenshot: Provide a visual reference to site of interest and a preview of what the source code looks like (via Dev Tools).
   2. Analysis: This comes in two parts. On the left, provide a simplified view of what the HTML structure looks like within the pre tag. On the right, try to explain the different parts of the structure. Some thought-starters:
      
      1. Why does this element have that class applied to it? What could it be used for? Does the class have semantic meaning (e.g. `article-grid`)?
      2. What is each “container” doing? Is it providing extra structure? Is it a stand-alone container for some interactive element? It is a part of the navigation? Is it part of the main content, or does it feel secondary?
      3. What are the components of the site? If it's a news site, what element represents an article? If its a fashion e-commerce site, what element represents a shop-able item? How are these structured?
      4. Poke around in Dev Tools! What happens if this class is not applied to the element (double-click the target’s class attribute in the Element Pane and remove the class)? What if I toggled off an element whose position is “fixed”?
   3. Questions:
      Well, you can’t understand everything! Take note of things you may have been curious about, but couldn’t grasp. For example, "As I was scrolling the page, I noticed that the inline styles of compass-wrapper were changing rapidly…what is that about?", or "I’m not familiar with this CSS selector…"
   4. Bonus: Simplified Prototype
      If you are feeling ambitious, then in this section, you can try to recreate the structure, but with dummy content.
7. Once done, publish your changes to Github!

Completed reference project here

If you have any questions, message me via Discord or email.

⌨️ Agenda

1. Flexbox
2. Practice some flexbox together
3. 1:1s to help with your Stories as Networks projects

📚 Assignments

• Last week's assignment has been pushed by a week! Please publish to Github before next class (Friday, Feb 23)

⌨️ Agenda

1. Advanced CSS
2. Review some "elastic collections"
   • Sonic Garbage
   • The Rap Board
   • The Roger
   • Base Design – Test Board
3. Practice some code together

📚 Assignments

• Finish your HTML Analysis assignment if you haven't already
• Study up on more Flexbox here
• If you are curious about CSS Grid, please read through the lecture here. We can study it next class if there is interest.

⌨️ Agenda

1. Continue with our JS intro
2. Take a break with IMGs
3. Review some HTML analysis questions
4. Practice some JS together

📚 Assignments

• Reminder that 3-4 of you need to finish your HTML Analysis assignment
• If you're bored, try to beat Flexbox froggy

⌨️ Agenda

1. Continue to study JavaScript
2. JSON Intro – organizing your data on the web

📚 Assignments

• Study JavaScript here (2.1 onward)!
• If you haven't already, practice your layout skills via Flexbox froggy

⌨️ Agenda

1. Virtual 1:1s – schedule them here

📚 Assignments

• Continue to work on your Elastic Collection project

⌨️ Agenda

1. Demos for JSON-to-HTML, adding hover states, adding click events, and more
2. 1:1s for your Elastic Collections

⌨️ Agenda

1. 1:1s to finalize your Elastic Collections
2. Demos as needed
3. Time permitting, work with some NYC data

⌨️ Agenda

Coding From Life

From the staged still life in class, make a drawing using only HTML and CSS! You will “draw” a still life using HTML elements and a creative use of CSS. The elements in your still life will be positioned within a frame using `absolute` and `relative` positioning. This should take about an hour.

• Getting started
  • Download this starter kit: coding-from-life.zip
  • Remember to work within your Github repo! Give the folder a name like “coding-from-life”
  • You will likely need to alter the z-index of elements if you want items to overlap.
  • You can create round borders using `border-radius`, and control each corner’s radius individually with `border-radius-top-left`, `border-radius-bottom-left`, etc.
  • You may need to `rotate` or `skew` elements by using the `transform` property.
  • Be liberal with simplifying objects and using a flat aesthetic. Don’t get hung up on details unless you have time!
  • Consider using an interesting background color for your frame.
  • Remember that all of your styles should be placed within the `base.css` file. Don’t use inline styles in your HTML. Don’t mix the structure of your page with the appearance!

• Requirements
  1. Include at least one texture, drop shadow, or gradient
  2. Draw at least four objects
  3. When done, publish the link to your class portfolio page

• Helpers and inspo
  • Shapes of CSS
  • CSS Pseudo-elements before/after
  • Clippy tool
  • Simpsons in CSS. Perhaps *too* advanced, but it makes a point!

• Examples from past students:
  • https://kurni452.github.io/coding-from-life/sketch-2/index.html
  • https://samsj948.github.io/projects/coding-from-life/sketch-2/index.html
  • https://shaha129.github.io/projects/coding-from-life/sketch-1/index.html
  • https://kims027.github.io/coding-from-life/sketch-2/index.html
  • https://lis874.github.io/projects/coding-from-life/sketch-1/index.html

Time permitting, we'll also work with NYC 311 calls or squirrel data 🐿️

Explore some JS array methods, which are helpful for playing around with big datasets

📚 Assignments

1. What topics would you like to review in our remaining classes? Take the survey here
2. The NYT has some of the most inventive data experts out there – check out their roundups for some inspiration as you design here. Between this and the more unstructured work of Giorgia Lupi, some ideas should start flowing!
3. Test your knowledge on these links and email me your results. This is an actual assignment, but your score is not a factor in grading.
   • You’ll eventually be quizzed on this stuff, so better to fail these vs. the real one!
   • Take the HTML quiz
   • Take the CSS quiz
   • Take the JavaScript quiz

⌨️ Agenda

1. 1:1s to help with your NYC Data projects

⌨️ Agenda

1. Thanks to those who filled out the survey – we'll make time to cover the popular topics during our remaining classes
2. Sophomore Work Review: From 9:30-10, we'll be joining a 30-minute Zoom overview of the process along with the details on how to submit your work.
3. Another NYC Data demo!
4. JavaScript catchup – let’s run through all of the fundamentals we’ve covered so far:
   • Variables
   • Data Types
   • Methods

     console.log()
     querySelector
     classList.add/remove/toggle()
     appendChild()
     insertAdjacentHTML()
     Math
     slice()
     replace()
     scrollBy/scrollTo

   • Conditionals

     if/else
     ternary operator

   • Arrays (and filtering!)

     split()
     pop()

   • Events

     click
     wheel
     scroll
     mousemove
     resize

📚 Assignments

1. Reminder to submit Week 12's assignment to get at least partial credit. This is an actual assignment, but your score is not a factor in grading.
   • You’ll eventually be quizzed on this stuff, so better to fail these vs. the real one!
   • Take the HTML quiz
   • Take the CSS quiz
   • Take the JavaScript quiz

⌨️ Agenda

1. SVGs + 311 data demo
2. Mix blend mode + filter + animation demo
3. NYC Data 1:1s – spend the rest of class continuing to code your projects. I’ll come around to help each of you.

⌨️ Agenda

1. Final test here: https://forms.gle/DsT4osTDD4UJk8eTA
2. Final day to submit any assignments you’ve missed is 5/10
3. Some resources to take with you to next semester and beyond:
   • https://payinterns.nyc/ for summer internships (or ask me)
   • Udemy, Codecademy, etc. for free coding courses
4. HAGS!