Read Introduction and Chapter 1 (to page 37 in the printed copy. Link Available online or PDF by request.

Tutorials for next week

or

Suggested Tutorial on Linkedin Learning:

Reach out to at least 3 people from your community (at home, where family is, where you want to live, where you grew up). Try to find out what internet service is available in their area. What kind of connections are offered (cable, dial-up, fiber, ?) Ask the oldest person you can get ahold of when they first remember the internet being used and, if they have access, how and what they use it for. Ask the youngest person you know the same questions. Then find at least one person in your field, or at least research to the best you can and try to determine how they use the internet, web design, or web communication. Ideally you will feel able to understand how the internet functions both for your community and in the field that you will be working in. Consider who is left out of this research and what requirements the “normal” technology obligate.

Write a short summary of these findings and submit it to the homework folder “personal history of the internet”.

Download

Visual Studio Code (free download), a code editor for creating and editing .html, .css, and .js files

or

Sublime Text

Vision Board for the Future

The about our conversation on Wednesday and our excitement about the possibilities of the internet and designing for the web differently. Can you dream about who and how and why you want to empower through your designs on the internet? What does that sound, feel, or look like? Collect up images, words, and texts that will function as the material of an archive for a future you want to design.

Find and bring to class at least 5 images and 3 texts, these can be anything you have seen, drawn, found, read, written, and mostly anything else you can collect in some way. These don’t necessarily have to be digital. We will be discussing how to digitize images and image formats in class. This is also the start of our fortune telling project, and the material you collect will be used toward our next project, so ideally the texts and images are ones you are comfortable sharing with the class.

Bring images and text to class! Have them accesible and ready to share.

Suggested Listening: Tech Won't Save Us How the Modem World Shaped the Internet w/ Kevin Driscoll

Tutorials: Have Finished Either:

Free Code Camp Lesson - Learn HTML by Building a Cat Photo App (1-68)

or

HTML & CSS Is Hard | A friendly web development tutorial Introduction, Basic Web Pages and Links and Images

Suggested Tutorial on Linkedin Learning:

HTML Essential Training

Have Downloaded and Be Familiar with:

Visual Studio Code

or

Sublime Text

Check the resources page for tutorials

Internet Inspector Imploded (10pts)

Class Critique : September 12th (Mon)

Using the "inspect element" tool, and the "web developer console" in firefox or chrome,find web pages that use html that can be modified. Pick 4 or more pages and make changes using HTML in the internet inpector console (or web developer tools) to the text, color, layout, font or any element that changes the design, and thereby our understanding of the website using only html coding . For this assignment you will screenshot the before and after layout of the website, along with the inspector that shows the modified code.

While I suggest making changes on multiple pages towrds experimenting with different formats, you may choose to make multiple changes on one single website. Just make sure to upload documentation of your work is screenshots of the before and after of both code and the site itself.

Start Reading - Class Discussion September 14th

Lupton, Ellen, et al. Extra Bold, Princeton Architectural Press, 2021.

Also Useful:

HTML Classes

Style all elements with a specified class name

Start Tutorial for September 14th: "Hello CSS"from HTML & CSS Is Hard

W3schools.com "CSS Tutorial" - from the CSS Introduction section up to and including the CSS Fonts section)

or

4 files in progress September 14th in class

Class Critique September 19th (Mon)

Future Telling Asssignment Requirements

Using the fundamentals of HTML and CSS which you have learned in the tutorials and the concepts we have been working on in class, along with your collected dream images and text you will design 4 “future telling” freestanding web pages that use unique fonts, uploaded images, gifs, patterns etc.

In doing your work, think about the pattern, color, placement of text, and the composition as communicating some sort of foretelling, the beginning of a narrative. These files should be almost completed by the time you arrive to class in order to workshop them with your peers.

You will be uploading your webpages on Wednesday the14th during class and if you have any questions about formatting we can address them Monday before they go live.

1. Overall goal: To develop 4 static web pages that function as narrative elements (building blocks) using the idea of the storytelling decks. These should have a consistent thematic aesthetic, or be 4 completely different designs with internal consistency.

2. Use HTML 5 Boiler plate to start:

3. Sample page with links for ideas of structures

   Some floating elements plus a grid

4. Use inline and block HTML elements to format text in your page: paragraphs, ordered or unordered lists, underline and highlight text.

5. Use proper html syntax and semantic markup to give your page a hierarchical structure Use proper semantic markup to give your page a hierarchical structure (e.g. an <h1> element for the main heading of the page, and <h2> and <h3> elements to designate subheadings)..

6. Develop a pattern/background from an image and upload this image to an images folder to githubpages.

7. Display this and at least one other image on your page using the <img> element.

8. Use the alt attribute of the <img> element to describe the image for those who might be unable to see it.

9. Add some CSS inside the <style> element in the <head> section of your document to modify the design of your page (text color, text font family, page background color, etc) or add a separate CSS page to format.

10. Add at least one custom google font.

11. Pick one page to be the main page and link the others from there or make a landing page that links to the 4 pages so they are viewable online for the class critique.

12. Your file should be viewable at your name.github.io githubpage.

Tutorials due for September 14th: "Hello CSS"from HTML & CSS Is Hard

W3schools.com "CSS Tutorial" - from the CSS Introduction section up to and including the CSS Fonts section)

or

Tutorials for September 21st:

Crafting Meaningful HTML Video on linkedin learning available by signing in through Duke Account - Shibboleth

We will be using our initial Coding and CSS skills to work together in a program called Twine towards developing a narrative, game, or experience using this free application. The project will employ your individual imagery and ideas from our future telling assignment, woven together with supplementary material that the group will provide to create a cohesive narrative or game.

This assignment will be graded on how well you have integrated your materials into a synthesized whole, the design motivations and execution and the level of customization and game play you program. We will be discussing the idea of choreography and the kind of spaces we create as a way of orienting ourselves towards accessibility and contending and appreciating difference. How will your group find an identity that is specific and which also addresses some of the internal differences in a way that both appreciates this task without defaulting to normalizing, or erasing the variation of aesthetics and narrative interests? The class rubric for this assignment will be developed collectively.

Tutorials for September 21st:

Download twine

See link to so many twine examples!!!!

Other Twine Game/Poem Examples:

Nanopesos by Camila Gomez (Actually simulates budgeting using Chile's wage inequality challenges

Write a Haiku by Flaminia Grimaldi

Stars by Lysander

Optional: Crafting Meaningful HTML Video on linkedin learning available by signing in through Duke Account - Shibboleth

Group Project - Collective Future Telling - In Progress Critique in Class: September 28th (Wed)

Present the project and code to another group in the class - look for feedback and share technical help.

Tuorial Due

Core Concepts, Box Model and Typography from CSS Essential Training