CSS Self Portrait

^{Work by past students}

Introduction

Create a self-portrait using only HTML and CSS

Learning Objectives

Students who complete this assignment will be able to:

• Recall the different values of the CSS position property and appropriate uses for each
• Describe the CSS box model and its components
• Compare methods for changing the color of web elements with CSS
• Use HTML, CSS, JS to code a web page with a creative self-portrait

Preparation

Complete the following to prepare for this assignment. See Resources for additional information as needed.

• Figma Tutorial: Pen Tool Basics & Vector Networks (3:47)
• Codecademy: JS 1-1 Introduction to Javascript (1–8)
• Codecademy: CSS 2-1 The Box Model (1-17)
• Codecademy: CSS 2-2 Changing the Box Model (1-5)
• Codecademy: CSS 3-1 Display and Positioning (1-12)
• Quiz 2 - Document Standards
• Course content listed on the schedule

Rubric

See Moodle.

Concept

• 📚 "View Source" (chapter 2) in Critical Web Design

Inspiration

• Chapter examples: Poem (Shake), Poem (Think), After Gerhard Rühm, Poem (Click), Poem (Chaos)

See the Critical Web Design Index for examples tagged with #visual poetry or #color, including...

• Historical examples of self-portraits in art
• Modern pure CSS examples like Diana Adrianne's francine and vignes; Sarah Fossheim's polaroid and casio
• Collections of chracters on Dribble, @musketon, @thomcat23, @thomas_danthony, @vector.mob, @cecierlich, @owendaveydraws, @mister_fred_berlin, @nina_dzyvulska, @eezy
• Generative / deformations Humaaans, Dribbble Geometric patterns in graphic design, David Lewandowski Late for Meeting, species-in-pieces.com, Lorna Mills
• abstractbrowsing.net (2014) or Polychrome by Rafaël Rozendaal

Design

1. Start by looking at examples for inspiration
2. Previsualize your layout by making sketches in Figma. Try placing an image of yourself and tracing it with the shape tool, choosing colors as you do.
3. Experiment to find your own style!

Code

1. Fork this repository and clone it to your machine.
2. Use HTML, CSS, and JS to code your design inside index.html
3. Use only hand-typed HTML and CSS for graphics; Do not add image or SVG files to the code. Do not use Figma to export code from your drawing.
4. Create those elements with HTML <div> tags
5. Use CSS properties to adjust the background-color, position, height, width, z-index, etc. of your elements
6. Also consider the CSS transform property which lets you rotate, scale, skew, or translate elements
7. Use Javascript to display the current mouse x,y positions on the page (this will help with your layout practice).
8. Use Javascript to store and log the total number of HTML elements you used in your portrait using querySelectorAll().
9. Add link(s) somewhere on the page to your original sketches in Figma.

Publish

1. Save and refresh your work in the browser often to see your changes.
2. Commit changes regularly.
3. Confirm valid HTML and CSS ^(?)
4. When finished, push, publish, and post all deliverables to Moodle per documentation in the Assignments.

Resources

• Course resources HTML, CSS, JS, Figma, Bootstrap
• Mozilla Developer Guides
• See this article Clipping and Masking in CSS which describes how to use CSS clip-path maker to create very specific shapes.

Past examples

• 2023 Jeremy David Erika
• 2022 Zoe Gaby Awais Lillian
• 2021 Owen Drew Annelise Evan Anh Erina Caroline Henry
• 2017 Katie Ted Lauren
• 2015 Colson Connor Jacob Felicia
• 2014 Scott Ashley Michele