Lab 9 - Midterm 2 Review

Recent Topics

1. URL Paths
   1. can you embed an image from your own site in a page? (like one where the jpg or png or whatever is in your site’s directory structure, rather than already hosted elsewhere)
   2. can you link to the image with an anchor element?
   3. can you link to another page on your site?
   4. do all of the above work locally as well as if you deploy to either GitHub Pages or w3stu?
2. HTML
   1. forms
      1. text input fields
      2. submit button
3. CSS
   1. selectors (review css diner)
   2. specificity (review [specificity explainer(https://css-tricks.com/specifics-on-css-specificity/) and css specificity calculator)
   3. Styling (arbitrary short list of examples, no guarantees)
      1. color
         1. text
         2. background
         3. border
         4. link
         5. visited link
         6. link currently hovered
         7. “active” link
      2. position (review quokka)
         1. relative
         2. absolute
         3. fixed
      3. text
         1. (color)
         2. weight
         3. size
      4. units
         1. absolute vs. relative
   4. Layout
      1. padding vs. margins for spacing elements
         1. horizontal centering
      2. Flex
         1. vertical centering
         2. spacing along the primary vs. secondary flex axes
      3. grid
         1. rows
         2. cols
         3. areas
   5. Responsive
      1. media queries
      2. viewport units
4. JS
   1. Dom element
      1. selection
      2. “CRUD” operations
         1. create (and adding into the document)
         2. read
         3. update
         4. delete
   2. Event handling
      1. listening
         1. click, change, input, submit
   3. Dynamic styling
      1. via the classList attribute is preferred (why is that?)
      2. via the style attribute when necessary (e.g. Prep 7)

Review Instructions

Setup

1. Create a directory for this lab, mine’s called e2-review
2. to give yourself a chance to check your understanding about URL paths:
   1. add a subdirectory for styles (mine’s called styles)
   2. add a subdirectory for images (mine’s called images)
      1. find any (benign) image on the web and save it in this subdirectory
   3. add a subdirectory to group a few of the pages (mine’s called about)
   4. in the e2-review directory, create an index.html
   5. in the about subdirectory, create a index.html and a team.html
3. create a file called base.css in the styles subdirectory
4. add a file called script.js
   1. just have script.js console.log something for now
5. in the html pages
   1. put valid starter code (I typically use vscode’s built-in html snippet, ! + tab)
   2. link the css file
      1. for now tell the css to make the background of the body a color that’s obviously not white just so that you can easily tell styles your css file are being applied
   3. embed script.js in each of your html files
   4. add enough elements to demonstrate all the CSS. I’ll use at least:
      1. a header
      2. a nav
         1. link to all pages
      3. a main
      4. an image
         1. show the image you downloaded on every page
      5. (interrupt yourself here and jump down to Testing and test both locally and deployed)
      6. a form with a few fields (tip: for now probably have the form’s action be # and the method be get)
      7. optional additions
         1. a few divs
         2. a few sections
         3. a few links
         4. a few lists
6. in base.css add enough styles to demonstrate all the CSS topics listed above
   1. for example, you might add a rule that will change the color of the text in the nav when the link is hovered
   2. you might add a rule that will change the background color of the body when the window is less than 500px wide
   3. you might add a rule that will change the color of the text in the header when the link is hovered
   4. you might add a rule that will change the bg color and text color when the user prefers dark mode
   5. add a class that will change the color of the text in any elements that have the class to “another color”
   6. (interrupt yourself here and jump down to Testing and test both locally and deployed)
7. in script.js add code that will demonstrate all the JS topics listed above
   1. for example, you might add a button that when clicked will change the background color of the body
   2. you might add a form that:
      1. has a text input
      2. when submitted
         1. add a new list item to an existing list in the page where the new list item’s content is 2 things:
            1. text content is the value of the input
            2. a button that when clicked will remove the list item
         2. the input should be cleared after the new list item is added
         3. make it such that every click on the list item itself toggles the color of the list item between the default and “another color”
   3. (interrupt yourself here and jump down to Testing and test both locally and deployed)

Testing

1. Use the VSCode Live Server extension to test your site locally
   1. how will you know if it’s working?
      1. you should be able to be able to use your links to navigate to all the pages
      2. the css should be applied to every page (background color should be whatever you set it to in base.css)
      3. the image should be displayed on every page
      4. how will you know if the js file has been embedded and is working correctly?
2. once the site is working locally, deploy to either GitHub Pages or w3stu and confirm that the url references all work:
   1. confirm the css is applied to every page
   2. confirm the image is displayed on every page
   3. test the links to other pages from each page and ensure they’re working