>Tags (Download HTML Files)
positionProperty (Download HTML/CSS Files)
floatProperty (Download HTML/CSS Files)
border-radiusProperty (Download HTML/CSS Files)
transformProperty (Download HTML/CSS Files)
:hover(Download HTML/CSS Files)
transitionProperty (Download HTML/CSS Files)
transitionProperties (Download HTML/CSS Files)
@keyframesRule Animations (Download HTML/CSS Files)
.stellar();Parallax Scrolling Effect (Download HTML/CSS Files)
.stellar();Parallax Scrolling Effect
.stellar();Parallax Scrolling Effect
@mediaRule Media Queries (Download HTML/CSS Files)
@mediaRule Media Queries
@mediaRule Media Query Breakpoints
Becoming acquainted with web browser developer tools is an important skill in learning how to read markup and navigate HTML and CSS documents. Start making a habit of looking at the source documents for websites that you regularly visit (for example Craigslist, Facebook, Wikipedia, etc.).
Read the following article: Tom McCormack, “Emoticon, Emoji, Text II: Just ASCII,” Rhizome (2013).
ASCII art (ASCII Art Instructable) is just one example of information that you can find “hidden” in website markup. Spend at least one hour visiting as many major websites as you can, viewing the source markup in the browser developer tools, and taking note of ASCII marks, logos, art, or other hidden messages in the source comments. ASCII logos are generally found inside of
<!-- comment tags --> and often are near the top of the document.
Collect at least three (3) examples that you find. Then, using SublimeText, design your own ASCII mark as a brand for yourself (you can design the logo yourself, or use an online ASCII generator). You will include your ASCII mark at the top of all of the website HTML and CSS documents that you create throughtout the semester as a way of “branding” your projects.
Here are a few examples of sites that display ASCII logos, marks, and messages as comments in their source files:
Create your personal website for the class. Create a link to a sub-page called
just-ascii-about-me.html and in the
<!-- comments --> on that page paste:
Create a simple, multi-page website with a consistent navigation interface as a way of introducing yourself to the rest of the class. The pages should be organized so that there is one webpage for each of the following prompts:
Getting to Know U(RL) Example Website (Download HTML/CSS Files)
Use only HTML5 Semantic Tag DIV (Document Division) elements with background-color, border, height, margin, padding, and width specifications in a linked CSS stylesheet to create at least three (3) digital works of art forgery on three (3) separate webpages.
The dimensions of the work must be responsive to the browser window (i.e. they should not be composed with fixed-width wrappers) and all of the elements on the page should be interactive with a background-color change in response to the user's hover.
Peter Halley, Laws of Rock,
You must choose three (3) of the following examples from the list below to recreate or “forge” in markup.
Upload your HTML and CSS files to your class directory and make sure that the documents are properly linked from your main index HTML.
Create a single page scrolling website that communicates a narrative or gives step-by-step instructions for some process or procedure. The design should take into account both image and text, and respond to the pacing and structure of the source material.
Your scrolling site must effectively and correctly implement:
@font-faceRule (or Google Fonts)
“Go with the Scroll” Project Precedent
Gather 20–30 images as a set or series that tells a story, conveys a message, or evokes a series of emotions in the viewer. The images can be photographic, illustrative, digital, or created through some other means. These can be images that you have created, or they can be appropriated, but you must credit the original creator of the images if you are using appropriated images.
Design an interactive photo gallery that showcases that series of images. Your interactive photo gallery must make use of the concepts of Functional Animation, and appropriately implement CSS3 Transforms, CSS3 Transitions, and CSS3 Animations.
Design a website to showcase your web design portfolio (feel free to use this website as a showcase for projects from other classes, as well, such as graphic design, fine art, photography, music, etc.) You will need to include:
<!-- comment tags -->in the
>on all pages
%units or viewport width
vwand viewport height
@font-faceRule embedded fonts (at least two)
@mediaRule media query breakpoints (at least two)
transformProperty (at least one)
transitionProperty (at least one)
@keyframesRule animation (at least one)
Prerequisites: DES 203 - Digital Tools for Design & DES 202 - Design II
Grading will be based on the following:
This is a studio-based class. Attendance is crucial to the success of the student. Please note that the design area adheres to the following attendance policy:
Plagiarism – presenting someone else’s ideas as your own, either verbatim or recast in your own words – is a serious academic offense with serious consequences. Please familiarize yourself with the discussion of plagiarism in SCampus in Part B, Section 11, “Behavior Violating University Standards”. Other forms of academic dishonesty are equally unacceptable. See additional information in SCampus and university policies on scientific misconduct.
Some elements of the syllabus may be changed at the instructor’s discretion. If there is any aspect of this syllabus which you do not understand, or to which you take exception, please let the instructor know within the first week of class.
This syllabus was developed from curricula originally created by Jeff Cain, with additional material developed from curricula by Jamie Cavanaugh and Aaron Siegel.