Summary
Using HTML and CSS skills introduced in class and online, you will create a small multi-page and multimodal (integrated multimedia) web narrative.
Multimodal Narrative– 15%
This project is for you to use the skills you have learned so far in this course to create a multimodal article, essay or narrative that combines writing with integrated multimedia in a well-designed, functional and responsive website. The term “narrative” is used loosely. This can be any work of writing – documentary, fiction, journalism, mock journalism, personal essay. However, the text should be a minimum of 1000 words and in the form of multiple paragraphs with a header title and sub-headers for different sections (optional). The media should support and be integrated with the text.
Build a responsive website for a work of multimodal writing (writing with integrated media) that is a minimum of 1000 words. Your site should have a designed navigation bar with at least two pages – the main page and an about page with information about you the author. You may break up your narrative into multiple pages with links in the nav bar. For example, if your topic is a band or musician, you might want to break up the narrative into pages of different periods or albums.
Along with the text, you should illustrate your page with images and/or other media, like audio, video or gif animations. Apply visual hierarchy in your CSS design so that color, typography, layout best expresses your content. I do encourage you to use AI tools like Chat-GPT, Bard, Midjourney or Dall-e-2 for image, text generation and some coding. Using these tools are not to replace your own ideas, but to extend and realize them. You are NOT required to use AI tools at all, but increasingly these tools will be used in the workplace so you might start to get some experience with them. It will also make this project fun!
Your grade in this assignment will be based on your effort and thoughtful consideration of:
- responsive design
- visual hierarchy
- typography
- color
- layout
- HTML and CSS syntax and formatting
- integrated media (images, sound and/or video*)
*note: if you are not hosting video on the server and using YouTube or Vimeo, you will want to use the “embed code” from the Share button of those platforms. Just paste the code into your HTML and stylize the “embed” tag as you would any other element. To make the <video> or <embed> elements responsive, just set their widths to 100% in the CSS.
Ideas:
- an article about a real or fictional business that tells the story of a product or service
- a sequential article on how to make or do something
- an article about an important issue or topic
- a current or fictional news story
- an article about a character or moment in history
- a personal or family background essay
- a work of multimedia journalism
- a multimedia biography
- a mock news article
- turn an essay/assignment from another class into a website
(permission required)
Statement with your Project:
Include in the “about” page a one paragraph statement about the project. What was the nature of the assignment? Describe the project idea you settled on and why. Describe the specific learning processes, challenges and/or outcomes in making this website. Also include information about any AI tools used. This statement is for you to properly document your work for your portfolio.
Specific Requirements:
Your project should have the following components:
- a project folder called “narrative” that contains an “index.html” as the default home page, other HTML pages, an external CSS stylesheet (“styles.css”) and a folder with media
- at least two HTML pages. for example, the narrative page (“index.html”) and an about page (“about.html”)
- a clear, designed navigation bar on each page
- at least three pieces of media integrated with the article’s content (image, video and/or audio)
- the “narrative” project folder uploaded to the server –
- be coded by hand in a basic text editor. don’t use pagebuilders, visual editors, or online sitebuilding tools/services to create your HTML
- you may use AI Tools as described in class. if you do, you should include this in your project statement
- be coded with proper and easy-to-read formatting in HTML and CSS, as reviewed in class. Use tools such as the W3C Validator. and the HTML Beautifier. to check your code.
- use visual hierarchy design principles reviewed in this course
- use common HTML5 elements such as header, footer, nav bar, etc.
- use images and media intelligently on each page. make sure you have permission to use images and media. you may use AI tools to generate text and images. BUT you must proof-read and edit to make sure the text generated reflects your ideas, not the machine’s.
- use at least one font loaded from Google Fonts. or other online font sources.
https://will-luers.com/DTC/narrativeprojects-355-01-fall2023.html
https://will-luers.com/DTC/narrativeprojects-355-02-fall2023.html
Deliverables
The only final deliverable is the URL to your functioning web site.
Grading Considerations
The Final Project will be graded on the following aspects:
- 20%: the creativity and originality of your multimodal article:
- a well-written article with no spelling or grammar errors
- thoughtful integration of media with text
- 40%: the usability and appearance of your web pages:
- the nav menu works consistently on all pages
- links go to their intended pages
- images and fonts load correctly
- images are sized well
- text and content are formatted correctly
- text is grammatically correct with no spelling mistakes
- visual attractiveness and style with applied visual hierarchy
- originality: how different does it look from class demos?
- 40%: the accuracy, neatness, and organization of your files and code:
- HTML and CSS code is formatted and indented well
- the syntax of code is consistent in terms of spaces, letter case, etc.
- code has useful comments where appropriate
- all media have “alt tags” to describe the image, video or audio
- files are organized well:
- one HTML file per web page and one external CSS file for the entire site
- HTML, CSS, and image files are meaningfully named – all lowercase with no spaces or symbols
- Remember: you can use tools such as the W3C Validator and the HTML Beautifier. to check your code!