diff --git a/site/introwebdev/abbeyroad.jpg b/site/introwebdev/abbeyroad.jpg new file mode 100644 index 0000000..fb53c22 Binary files /dev/null and b/site/introwebdev/abbeyroad.jpg differ diff --git a/site/introwebdev/empirestrikesback.jpg b/site/introwebdev/empirestrikesback.jpg new file mode 100644 index 0000000..ab87883 Binary files /dev/null and b/site/introwebdev/empirestrikesback.jpg differ diff --git a/site/introwebdev/index.html b/site/introwebdev/index.html index 5575d6f..72e5da0 100644 --- a/site/introwebdev/index.html +++ b/site/introwebdev/index.html @@ -56,7 +56,7 @@ TBD. Will post an announcement when this is worked out.
  • Week 6 Homework (due on February 20th)
  • Week 7 spring break
  • Week 8 Homework (due on March 13th)
    • -
  • Week 9 Homework (due on March 13th)
    • +
  • Week 9 Homework (due on March 13th) - walkthrough available here

    • Lecture notes

    diff --git a/site/introwebdev/lionking.avif b/site/introwebdev/lionking.avif new file mode 100644 index 0000000..c609964 Binary files /dev/null and b/site/introwebdev/lionking.avif differ diff --git a/site/introwebdev/week-9-walkthrough.html b/site/introwebdev/week-9-walkthrough.html new file mode 100644 index 0000000..af3b609 --- /dev/null +++ b/site/introwebdev/week-9-walkthrough.html @@ -0,0 +1,140 @@ +[!] +[=title "Week 9 Homework Walkthrough"] +[=content-] +

    + Sorry for how confusing week 9 was! To make it more doable, I've written up this step-by-step walkthrough to complete the whole thing. + The homework can be found here; you'll need to have it open to follow this effectively. +

    +
      +Part 1 +
    1. +Read through Grid 1 and Grid 2 - +they're useful throughout this entire assignment, so I recommend keeping them open for reference. +
      2. +
    2. +Use what we've learned about grid to set up a very simple grid with 5 rows and 5 columns. You can use repeat if you want; +there are quite a few different ways to do this. +
      3. +
    3. +Set up your grid elements (how you do this is up to you - you could write 25 individual divs, for instance - but there +is a trick to minimize how much work it takes). +
      4. +
    4. +Finally, pick colors for the grid. Note that at least a few of these should be shared between cells: you should have a real +collage, not just a strange checkerboard. See the graphic in the main homework page. +
      5. +
    5. +Goal 1: Check your collage. Make sure it has at least a few distinct colors, arranged in grid cells properly to give the impression +of a few large squares that fit together perfectly. It's okay if it isn't "perfect", as long as it's recognizably a grid collage. +
      6. +Part 2 +
    6. +Search up some websites and pick a good one! While you can use any website you like, here are a few suggestions: + +Remember that you don't have to replicate anything but the layout - you don't have to do content or images or anything. +A very simple grid with some words describing the purpose of each cell (or area) would be fine. +
      7. +
    7. +Set up your page. Use a large grid covering the whole screen (you may set this up with any technique you like - +display: grid; height: 100vh; on your grid element is perfectly fine). +
      8. +
    8. +Use grid-template-rows, grid-template-columns, and the other properties to replicate +the major parts of your target website's layout - e.g. the main content area, etc. You do not have to use +grid-template-areas if you don't want to, but it makes this a lot easier. +
      9. +
    9. +Add elements to the grid and label them: a div containing "this is the header/footer/main content/sidebar/whatever" +is quite sufficient. You may set borders, background colors, fonts, or any other styles you want on these, but you +aren't required to. +
      10. +
    10. +Using whatever technique you can think of, add in some detail - things like the position of links +in a header (hint: Flexbox is useful for this!) or the padding in a central panel. +
      11. +Goal 2 +
    11. +Make sure the layout is close enough to be recognizable - it doesn't have to be perfect, but it should be +clear enough where major elements (e.g. a header, a sidebar) are supposed to go. +
      12. +Goal 3 +
    12. +Include a link to the website you're replicating somewhere, to make it easier for me to tell +what the layout does. +
      13. +Goal 4 +
    13. +Stretch the screen a bit to see how it performs on different sized devices! It doesn't have to work exactly, but +try to make it consistent across sizes. Note that many websites use various techniques to change their layout +on different screen sizes - you do not have to implement anything like that. +
      14. +
    14. +If you need to change something to fix how it behaves on different screen sizes, make sure to +think about Flexbox: it makes many such problems much simpler! +
      15. +Part 3 +
    15. +Search for a scene from pop culture that you like. This can be absolutely anything! Some possible examples are, + +
      16. +
    16. +Use our normal sources (P4L, Wikimedia, etc) to find 1-2 images representing the setting. They don't have +to be identical to the real scene - or even anything like it at all! - but go for the same "vibe". For instance, +much of Avatar's setting could be represented with some images of the Amazon rainforest. +
      17. +
    17. +Do the same to find 2-3 images of props - things in the scene that aren't actually the main focus. +For instance, this could be boulders on the ground, or a bunch of tropical fruit in the trees, or +meteors against the starscape. +
      18. +
    18. +Pick out 2-3 images of the actual subject: the people and/or things that make up the main focus of the scene. +
      19. +Goal 6 +
    19. +While you do not have to exactly match the numbers of images described above, make sure there are at least 3 total. +
      20. +
    20. +Plan out where on the page they should go. Aim for a scene big enough to fill your screen, but not big enough to scroll much. Print out +the images and do paper cutouts to arrange them, if you want to! You should get a good feel for where on the screen everything should go. +
      21. +
    21. +For each image, set an absolute position. You can read about absolute positions in Week 8: Position. +Use the absolute positions to arrange them on the page in a rough approximation of the original scene. +
      22. +
    22. +Optionally, change the sizes of the images (through whatever technique you like - width in CSS or in the HTML works fine) +to better fit the goal. If the images are very large, you'll have to do this. +
      23. +Goal 5 and 7 +
    23. +Set up a text blurb to briefly describe the scene (as short as "Super Mario stomping on a goomba" is fine, this doesn't need to be detailed). +
      24. +
    24. +Explain where the scene is from; ideally give me enough information to find the actual scene with a quick Google search. You can +link to an image of the actual scene if you want, but don't include such an image in your page. +
      25. +
    25. +Properly attribute all of the images. +
      26. +
    +

    +At this point you'll have a passable result for Week 9. This deliberately doesn't cover the extra credit - you can still attempt +the extra credit even having followed this guide, but I won't explain how to do it in detail. +

    +

    +Make sure to submit it by emailing me once you're done. +

    +[/] +[#template.html]