drdibble / dig245-css-self-portrait

CSS Self Portrait

Create a self-portrait using only HTML and CSS

^{Work by past students}

Learning Objectives

Students who complete the following 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

• 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

Instructions

• Fork this repository and clone it to your critical-web-design folder on your machine.

Design

• Plan your process and make sketches in Figma
• Look for inspiration - famous self-portraits, Dribble flat characters, @musketon, @thomcat23, @thomas_danthony, @vector.mob, @cecierlich, @owendaveydraws, @mister_fred_berlin, @nina_dzyvulska, @eezy, abstractbrowsing.net, species-in-pieces.com, Form Art, Lorna Mills
• For example, try drawing over an image of yourself in Figma with the shape tool, choosing colors as you do. (feel free to experiment an find your own method!)

Code

• Use HTML, CSS, and JS to code your design inside index.html
• Create those elements with HTML <div> tags
• Use CSS properties to adjust the color, position, rotation, height, width, z-index, etc. of your elements
• Use only HTML and CSS for graphics; Do not add image or SVG files to the code.
• Use Javascript to display the current mouse x,y positions on the page.
• Use Javascript to store and log the total number of HTML elements you used in your portrait using querySelectorAll().

Publish

• Save and refresh your work in the browser often to see your changes.
• Commit changes regularly.
• Confirm valid HTML and CSS ^(?)
• When finished, push, publish, and post your project

Grading

Points	Description
4	Concept
4	Originality
4	Execution / Technical
4	Project is online, accessible, and linked from Moodle by the deadline
4	Valid HTML and CSS
20	Total possible

Resources

• Course references HTML, CSS, and JS

Past examples

katie ted lauren

colson connor jacob felicia

scott ashley michele