We are joined by a special guest for Weeks 3 & 4 of Fall 2021 PNG: SIU TECH DAWGS! They’ll be teaching us how to make “digitally printed art” with HTML and CSS.
We’ll be using the platform CodePen to create our CSS Art projects, which are called Pens. Liz will provide the login info for the shared account in Discord. This account has several example collections. You can “Fork” a Pen made by another person, which makes a full copy of the project that you can edit. MAKE SURE TO RENAME YOUR PEN AND INCLUDE YOUR NAME IN THE TITLE.
Watch YouTuber CJ do a self portrait challenge!
Guides & Project Tutorials
General Guides
- Drawing with code: an intro to CSS art
- Intro to creating CSS Art
- Diana Smith’s Top 5 CSS Properties She Uses to Produce CSS Art
Project Tutorials
Documentation & Reference
CSS
- W3Schools CSS Reference
- cssreference.io – A visual guide to CSS.
CSS Grids
HTML
SVG
CSS Art Examples
- Diana Smith – the original HTML/CSS artist, includes Pure CSS Francine and other projects
- A Single Div – a CSS drawing project by Lynn Fisher (also check out this amazing livestream of Lynn Fisher at work!)
- Pure CSS Art Gallery
Chew on this!
How do browsers “print”?
What is HTML? What is CSS? How do they “print” content? Are they programming languages?
Why use HTML and CSS to make art? Why not SVG? What are the differences and similarities between HTML, CSS, vector images, and raster images?