Work by past students
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.Fork this repository and clone it to your machine.
- Start by looking at examples for inspiration
- Art history famous self-portraits
- Collections Dribble flat characters, @musketon, @thomcat23, @thomas_danthony, @vector.mob, @cecierlich, @owendaveydraws, @mister_fred_berlin, @nina_dzyvulska, @eezy
- Generative / deformations Humaaans, Rafaël Rozendaal Polychrome, Dribbble Geometric patterns in graphic design David Lewandowski Late for Meeting
- Internet Art abstractbrowsing.net, species-in-pieces.com, Form Art, Lorna Mills
- Previsualize your layout by making sketches in Figma. For example, try placing an image of yourself and tracing it with the shape tool, choosing colors as you do. (feel free to experiment an find your own method!)
- Use HTML, CSS, and JS to code your design inside
index.html
- 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.
- Create those elements with HTML
<div>
tags - Use CSS properties to adjust the background-color, position, height, width, z-index, etc. of your elements
- Also consider the CSS transform property which lets you rotate, scale, skew, or translate elements
- Use Javascript to display the current mouse
x
,y
positions on the page (this will help with your layout practice). - Use Javascript to store and log the total number of HTML elements you used in your portrait using
querySelectorAll()
. - Add link(s) somewhere on the page to your original sketches in Figma.
- 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 all deliverables to Moodle per documentation in the Assignments.
- Course references HTML, CSS, and JS
- Mozilla Developer Guide