Announcements

Here is roughly what your current assignments folder should look like:

assignments/
  01-constitution-text/
  02-html-practice/
  03-roygbiv/
  04-advanced-css-selectors/
  index.html
  style/
    style.css
  06-flexbox-nav/
  07-flexbox-scroller/
  08-grid-placement-exercise/
  09-narrative-no-text/
  10-multi-column-layout/
  11-wireframes/
  12-wireframe-swap/
  final-project/
    proposal/
    wireframes/
    offline-files/
    www/

Here are all of the homepage announcements to date:

Due Thu 5/14, Tue 5/19

  • Assignment: Finished Final Project
  • When you upload the final project to Google Drive, please remove any previous versions of your final project www/ folder, and any other final project files that are no longer relevant. It's also a good idea to download and test a temporary copy of the project from the Google Drive on your computer. This will help you determine whether everything uploaded correctly, and ensure that it'll work on my end as well!
  • When presenting your final project, be prepared to talk a little bit about your design process; the challenges you faced in both design and code; what aspects you spent the most time and effort on; and your favorite part(s)!

Class Notes & Recordings this week include:

  • Follow-up links and resources from guest speaker Lou Leonardis's talk
  • Finished final project assignment explanation
  • Final project help, incl. Swiper.js setup walkthrough

Post-class 4/30, 5/1

  • Class Notes & Recordings this week include web design history content. The documentary and skimming through the web history timeline are both well worth your time!
  • Continue final project work. Next week will be similar to last week and this week in terms of class. Final projects will be due midnight on the day of your scheduled final exam blocks. Our final exam meeting will be devoted almost entirely to sharing and critiquing final projects.

Post-class 4/23, 4/24

  • Class Notes & Recordings are up on Canvas. Don't forget about Mandy's 30min CSS Text Effects conference talk video, if interested in spiffy title text!
  • Assignment: Finished CSS, First Draft (just a checkpoint; will not be collected)
  • Quick tip: Upload a copy of your final project www/ folder to the Google Drive (either the shared student-work drive, or your own private Google Drive). This will serve as a backup just to be safe, and it can also be used as "poor man's version control". You can upload multiple copies as you work on your project (www01/ www02/ etc). This allows you to compare or even revert to a prior copy as you change around the code and experiment.

Due Thu 4/16, Fri 4/17

  • Assignment: Final Project Wireframe
  • Assignment: Wireframe Swap - disregard any submission instructions on the assignment page that talk about uploading these to splash pages. Just make sure that:
    • Within your 12-wireframe-swap/ assignment folder, offline/ wireframes and scratch materials are separate from the www/ web site you've built
    • Wireframe filenames include the name of the person who created that file

Class Notes & Recordings

Recordings from last class include the final project proposals. If for any reason you'd like to download the video and trim it to save your own presentation, there's a Download link in the top right corner of the page for each video.

Class Notes & Recordings

Class notes and recordings are up in Canvas Pages again this week.

Assignments

  • Due Thu 4/9, Fri 4/10: Assignment: Final Project Proposal

    Be ready to present via screenshare

  • Due Thu 4/16, Fri 4/17: Assignment: Wireframe Swap

    Because we're skipping the Splash Page Update assignment, we have room to take two weeks on the Wireframe Swap. Begin coding on it by next class, but it doesn't need to be finished. We should have some class time for extra help if needed.

Class Notes & Recordings

I turned on the "Pages" module in our Canvas courses. There is a new page posted with the itinerary and select recordings from the latest class sessions.

Thursday section - there's a recording from Friday with some example wireframe assignments, if you'd like to see a few.

Due Thu 4/2, Fri 4/3

GD Alumni Panel

I forgot to mention during class, but we have an excellent lineup for the next alumni panel. I strongly encourage everyone to come, regardless of class year or major.

Wed 3/11 ● 6pm ● AIMM226

Due Thu 3/12, Fri 3/13

  • Assignment: Grid Placement Exercise

  • Assignment: Narrative No Text

    Work in progress can be uploaded to your assignment folder for this project on the Google Drive, and I'll do my best to offer help over email.

    When submitting the final version of this assignment, make sure to separate Illustrator and other non-web files from the html, css, and images that are used in the code itself. Here's an example project screenshot from the Google Drive, under misc/.

    We'll critique all of these projects next class!

Due Thu 3/5, Fri 3/6

  • Assignment: Flexbox Nav
  • Assignment: Flexbox Scroller

  • Assignment: Narrative No Text - For next week, images and content should pretty much all be prepared, and the code started.

    The focus for our work period next class will be: 1) getting foreground/background elements set up with rough positioning; 2) organizing files in the project folder (offline/, www/, img/, style/, etc).

    In many cases, once you have the first page set up and working, the other pages will have a similar code setup and will feel a bit easier.

Due Thu 2/27, Fri 2/28

  • Assignment: Splash Page

    Create your splash page and make sure all of the links to your projects are working on your local hard drive first. Then, when everything is finished and working, try uploading to your TCNJ server space using Cyberduck. Uploading to the TCNJ server can only be done from on campus. You can replace the index.html file that's currently on the server with your own splash page index.

    Test your links through your live web site: owd.tcnj.edu/~username. If you need to make any changes, be sure to always edit the copy of the files that's on your hard drive, and re-upload and replace the files on the server.

    I'm not sure how helpful this is but Here is a marked up screenshot of how to organize the files for this assignment, which can be found on the Google Drive under misc/.

  • Assignment: Narrative No Text

    All you need on this for next week is a concept and some of the image assets you want to use. You can sketch out a rough mockup (e.g. in Illustrator) if that helps. I'll check in with everyone briefly to talk about your idea and how to get started with the code.

  • A copy of the answer key for Advanced CSS Selectors is also on the Google Drive under misc/ if you want to download it for reference!

Due Thu 2/13, Fri 2/14

  • Read/review Color and Typography pages
  • Assignment: ROYGBIV - I updated the wording and requirements on here to be a little more specific, but nothing's really changed.
  • Bring 5-10 high res image files (>1-2MB) to work with for part of the demo next class. Jpegs preferred, RAW is ok too.

Post Class 1/30, 1/31

  • An example HTML version of the Constitution Text is available for reference on the google drive.
  • The course Syllabus is available for download on both Canvas, and the google drive.

Due Thu 2/6, Fri 2/7