This course will be made up of several assignments supported by in-class workshops.

  1. HTML Profile
  2. Calendar
  3. 2 Screens
  4. Web Writer
  5. Blurry Story
  6. Print.css
  7. Gardener

Please refer to the calendar for assignment due dates.

Assignment 1: HTML Profile

HTML, CSS, writing on the web

Customize the HTML profile that we cloned from this repo. You should only change the content of your profile. Don't alter the design. We want to keep our profiles consistent to create a static social network for the class. Browse all our profiles here and find a piece of writing that interests you. Create a new comment/entry on your profile referencing a fellow student's writing. Keep the writing positive and link back to their profile.

Also make sure your webring works if we don't finish it in class.

Code

Use the blockquote HTML element to quote a profile...

<blockquote>Fellow student's writing...</blockquote>

Assignment 2: Calendar

CSS grid, time-based website, writing on the web

Create a calendar using CSS grid. Play around with different grid layouts to make it flexible to the browser's width. Style your calendar and add at least three past events as subpages. These subpages should link back to the calendar. It's up to you what lives on these pages. You can post writing, images, video, or sound. Make sure to compress your files for web. If you are ambitious, you could try to use this calendar as a social media alternative. Your calendar should grow over the course of the semester as you learn more coding.

A successful calendar should address these questions...

  • How will users know that an event falls on a particular day? You could convey this through basic HTML or CSS pseudo-elements like ::before or ::after. Experiment with CSS shapes. Please don't use images or found icons to do this.
  • The calendar should be responsive and only scroll on the Y axis. How can you structure your grid layout using repeat, minmax, and @media queries so that it works seamlessly on desktop and mobile?

By the end of the course your calendar should have at least 20 subpages.

Code & Resources

A channel of example calendars we looked at in class.

Easy Layouts with CSS Grid by Jen Simmons

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))

Auto-fit vs auto-fill by Rachel Andrew

grid-template-columns: repeat(auto-fill, minmax(50px, 1fr))
grid-template-columns: repeat(auto-fit, minmax(50px, 1fr))

Credit

This assignment was inspired by everythingthathappened.today by Anna Marl.

Assignment 3: 2 Screens

HTML, CSS Media Queries, breakpoints

Create a website that displays different content when viewed on desktop and mobile. The user should browse your site on both devices at the same time to fully experience it.

Example: a website that displays images on mobile and text on desktop. Feel free to use this as a starting point but you are expected to go beyond this example.

To receive credit for this assignment place your Github repo url in this doc before next class (2/28)

Code

@media (max-width: 600px) {
    // Mobile styles here
}
@media (min-width: 600px) {
    // Desktop styles here
}

Assignment 4: Web Writer

HTML, CSS, JavaScript

Create a sentence generator similar to the one we created in class, but this time you will generate the entire sentence yourself.

Your sentence should still include 5 parts of speech: subject, preposition, modifier, object, and punctuation.

Write a function to generate your random sentence and append it to the DOM every 4000 milliseconds (4 seconds). The title of your document should also update as the text on the page changes.

Extra: Feel free to do this assignment in your first language or a second language. If you do this, please append English subtitles.

Code Examples

document.querySelector('.sentence').innerHTML = sentence;

document.title = sentence;
window.setInterval(function(){
    sentenceGenerator();
}, 4000);

Assignment 5: Blurry Story

HTML, CSS, JavaScript writing on the web

Create a website slideshow that uses at least one blur filter. Convey a sense of narrative that transports the viewer. Think like a filmmaker! The slideshow should use vanilla JavaScript arrays, functions, and for loops.

Things to note...

CSS filters often can be CPU intensive when combined with transitions or JavaScript. How can we convey our blurry story without the experience feeling sluggish? Try to give yourself some working constraints before starting.

Code

filter(blur: 20px);

Assignment 6: Print.css

HTML, CSS, JavaScript writing on the web

Create a print.css stylesheet for an existing website. Work through several iterations of your design and print them as you go. You should have at least 4 prints showing your design process to show us.

Assignment 7: Gardner

HTML, CSS, JavaScript writing on the web

What does it mean to take care of a website? Many websites have secret gardeners, caretakers, or stewards. In the first part of this assignment you will reach out to a website maintainer (gardener). Someone behind the scenes that keeps the site oiled and is on site if something breaks. Website gardeners shouldn't be in the limelight. Conduct a short interview with them about their day to day tasks and how they update the website. Create a static site of your interview.

In the next part of this assignment you will create a website for a community garden in NYC. Did you know there are over 550 community gardens in NYC? Conduct a site visit to your assigned garden and document your findings. It is up to you how you approach this project but you are expected to keep/show process work. For the final presentation you will present your process work and the final website you created.