Create a self-portrait using only HTML and CSS
Work by past students
Practice previsualizing a layout using tools in Figma and translating the design into HTML CSS code using positioning, the box model, and z-index.
Learning Objectives
Students who complete this assignment will be able to:
- Recall the different values of the CSS
positionproperty 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
| Points | Description |
|---|---|
| 10 | The original drawing(s) in Figma are linked, creative, and reflect research into the subject. |
| 10 | The elements of the graphic are consistent throughout the page. |
| 10 | The portrait represents the student to some degree. |
| 10 | The HTML document uses correct structure, nesting, and syntax throughout. |
| 10 | The student expanded their knowledge on their own (e.g. experimented with new tags). |
| 10 | Javascript prompts (x,y, querySelectorAll) are working as instructed. |
| 10 | The content of the page follows parameters outlined in instructions. |
| 10 | All code is working as intended. |
| 10 | All code is valid and properly structured. No missing references or errors in the console. |
| 10 | The project is online, accessible, and linked from Moodle by the deadline. |
| 100 | Total possible |
Fork this repository and clone it to the critical-web-design folder on 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,ypositions 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 your project
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent