Fall 2021 - Course Website
| Home | Schedule | Assignments | Resources | Demos |
Due August 31, 2021 Take a piece of writing you have done in the past. It may be a poem, blog post, or essay of at least 1,000-1,500 words. Format and structure this content using HTML tags, and style it with CSS for readability and style, keeping in mind the content, tone, and reader context(s), as discussed in the Web Typography reading.
Feel free to add images or other multimedia content, but make sure to consider how you want to position these elements with text.
If you’re not comfortable sharing your own writing, you may excerpt writing you find elsewhere, but please remember to credit and link to the original.
Things you should consider
Add a link to this file from the index.html file we created in class (your home page) and upload it (along with any necessary .css files) to your CIFS server space.
Due September 7, 2021 Using the techniques discussed in class for layout (grid, flexbox, and css frameworks) and either:
Post your .html file to your web space and create a link to it on your landing page.
Due September 16, 2021 This is your time to start planning the site you want to build for the midterm project. This could be a personal website, a site presenting a project you’ve done, or an early demo of the possible pages or elements in your final project.
Wireframes: For this first part of the assignment you need to map out the basic concept and information architecture (how any subfolders, pages, or contents are related to one another) and basic wireframe sketches for your page designs. At this point, think about basic and general questions like: where does the navigation go? What pages or sections does the navigation link to? What goes on each page? And, generally, how is this laid out? Sketch your wireframes out by hand or in one of the tools discussed in class, and either capture a digital image or save these as an image file. Finally, draw, map, or outline your folder/file structure for the project.
Proposal: Please explain in a paragraph or two the basic point of your site, whether it’s a basic personal website, a site to display a project, a standalone web art work, or a design for a future web app. Explain the flow of the information architecture you mapped out in your provisional wireframes, and describe the user interactions you imagine on the site. How do you get around the site? Are there any text input fields? Buttons to click? Links to follow? Etc.
Write this proposal up as a .html file, embed your wireframe images. You can add your file/folder structure as images or an unordered list (ul with li’s). Make sure to add structure (headings, paragraphs), layout, and design to this proposal. Upload your finished version to your web space, and link to it from your class landing page.
Though you do not need to attend to all of these details now, in the end, the midterm website should have:
Be ready to discuss in class on September 28 For this assignment you’re going to iterate through the wireframes and design ideas from your proposal to 1) start gathering and adding real content like titles, text areas, and any media (images, videos) you will use and 2) define and refine your colors, fonts, and layout. You may want to try more than one color scheme with the same design elements, or different fonts.
At this point, you may be working in Adobe XD, Figma, or the Wireframing tool of your choice, or directly into CSS/HTML with dummy content or real content.
For your deliverables for this assignment please either screenshot your working pages or save images of your working wireframes. Write up an .html file with a title, images of your iterations, and labels or brief descriptions of each of the images. Please link to this page from your course homepage. We’ll also be discussing your plans and iterations in class.
Due online (posted to/as your main website at people.duke.edu) Sept. 30
The midterm website can be either a website of your conception and creation: a personal site, a site displaying a project, an “experimental artwork” delivered via website, or a site architecture and design for a js-enabled application you plan on building in the second part of the class. The point of this assignment is to get you quickly building and working with real content on the web.
Your completed midterm site should have:
Due Online Oct 7 Find one or a combination of APIs and libraries you may want to implement for a final project.
For example, I may want to use P5.js, a database service, and the Twitter API to allow visitors to my app to tweet drawings they make in the browser. You may have a more abstract idea, or be just starting research on what kinds of resources are available. In this case, you can write about a tool you’re interested and may want to use in your work.
Do some research on your libraries/APIs. Locate the documentation, perhaps find some tutorials on youtube and resources to get yourself started.
Write up a brief of either ideas for your proposed use or the tool itself, and add links to any resources you’ve found that may be helpful to you as you build. Create an HTML page with this content and post it to your web space.
Due Nov 9
This should follow the basic guidelines for the midterm project proposal and should include information about your
You may not have thought this far ahead on all of the details for your front-end, but this is designed to get you to start thinking about them, so please include the plans you have so far, even if they are basic or may change in another iteration.
Details TBA.