Sharing Commonalities
A Collaboration with Xinyu Qiao and Chichi Zhao
Lab Assignment brief
Use Glitch.com to create a communal website that tells your group’s story. Your story should be unique to your group, and your website should reflect this. The story that you tell and the way in which you tell it are open-ended, but it should give the class some insight into who you are and a snapshot of what you have in common. Try to leverage the medium of the web – how can you tell a story online in ways you can’t do in print?
Typography on the Web
Wikipedia Layout 1
Wikipedia Layout 2
Lab Assignment brief
For the first layout (in-class), choose a Wikipedia article and copy the basic content of the article into your own HTML file. Use custom fonts and CSS to style the text. For the second Wikipedia Layout – Use the same HTML from your in-class typography exercise, but create a completely new layout for it using CSS. You should use different fonts, different type styles, etc. Try to make this second version as different as possible from your first layout.
Structure and Animation
Event Poster
Lab Assignment brief
Create a digital poster for an event that can’t exist. Think about what an event means to you now, when group activities are so limited. The poster needs to be visually captivating. It should immediately grab the viewer’s attention and make them want to know more about the event. The poster must function well when viewed at a variety of screen sizes. Think about what you can do in a digital environment that’s not possible in print.
You must include the following techniques: Flexbox, Grid, CSS animations, Media Queries and Positions.
Music Collection
Assignment
Lab Assignment brief
Create an online collection of music using traditional layout components of a website (otherwise known as the 'Holy Grail' layout). You may choose to organize artists, albums, songs, record labels, music genres, etc., but the collection you choose must be comprised of distinct types of data. There should be a theme to your collection. Try to come up with a bigger narrative to tell based on what you choose to collect. In your catalog you must have at least 25 types of data to organize (25 artists, or 25 albums, or 25 songs, etc.) Your catalogs must include images and/or other rich media. Consider using embedded content to enhance your catalog. YouTube videos and Spotify playlists are easy to embed using 'iframe' tags.
Javascript Intro Exercise
Original submission
Re-submission
Lab Assignment brief
Create a new HTML file and create a link to a `main.js` JavaScript file. Use that JavaScript file to complete each of these tasks in class. For each task, use `console.log()` to log the result of the task to your DevTools JavaScript console. You will not be able to see the results of your JavaScript code without looking at the DevTools console.
AirTable Setup
Lab Assignment details
Create an AirTable and add a series of 20 different rows that represent your book records. Each row should have a book title, description, cover image, and URL to view more info about the book.
Codecademy: Introduction to JavaScript
Completed courses include: Introduction, Variables, Conditions, Functions, Arrays, and Loops.
JavaScript DOM Manipulation
Lab Assignment details
Create a simple HTML/CSS page for your JavaScript sandbox. Complete each of the tasks (specfied in the assigned dropbox document) that involve interacting with your webpage via JavaScript.
Airtable API
Lab Assignment details
Create a page that pulls data from one of your Airtable bases and inserts content into the page. You must also make the code your own and do something new and interesting with the data.
Documenting Work Activity
Studio Assignment details
Create a single page website that presents your partner’s Stories as Network project. Consider all the relevant information necessary to have on the page – for example, the author, a link to the project – as well as what makes the project special. Experiment with some of the techniques we looked at in class.
Websockets: Real Time Interactions
Attempt 1
Attempt 2
Re-Submission
Lab Assignment details
Choose one of the Glitch demos to remix. Use the demo as a starting point to reinterpret the demo and experiment with the possibilities of that technology (either persistent storage or websockets). You’ll need to make changes to the HTML, CSS and JavaScript in order to make the demo your own.