(Original, at least 100 unique hand-written lines.)
For this milestone, I was naturally inclined to use paper and pencil to draft my
Doggo drawing. However as I
began drawing the Dog, it became clear that I could draw much cleaner and tidie
r curves on code than on paper. To this point, Eric Rosenbaum, a PhD graduate fr
om MIT writes in his "On the Value of Making in Learning" about the perfectionis
t approach some people may take towards learning to create. In his writing about
"mastery learning", he says, "A goal of this type of learning is to ensure that
all students have a chance to reach the same level of learning by giving more t
ime to those who need it." In many ways, I'm more familiar with Illustrator tha
n with the pen and pencil I used to draft my preliminary image of Doggo. Like ma
stery learning, I was able to achieve the curved lines and shapes that I was loo
king for, without having to hone in my pen + paper illustration skills.
Utilizing FRIEND
S to help describe, with a bit more detail, what makes up a simple illustration
of a doggo,
I ended up with a short list of attributes:
A Doggo has 1 ear.
A Doggo has 1 eye.
A Doggo has a mouth.
A Doggo has a nose.
A Doggo has a head which is oval shaped.
A Doggo has a body which is like a lowercase "b".
A Doggo has a tail that curls a bit.
Many of these attributes involve curves by nature, so I used the quadraticCurve
To and bezierCurveTo vector
commands as well as the ellipse in p5js to help create these shapes. For this m
ilestone, I covered the concept of body + tail for Doggo. Here's how it looks so
far: As I continue learning,
I find myself referring to the Examples from the p5js website to see in-use scri
ptin
g of commands. (All my doggos on his website are pretty cute and it gives me ano
ther incentive to keep on working in this library!)
CSS can be tricky. Given
something tricky, I often struggle to enjoy parts of it until I truly understan
d it
. To understand it, I decided to take on every single lesson that Codecademy had
to offer on the subject. I use their lessons as a way to replace the how-to tex
tbook that most CS students obtain to learn patterns/logic from.
I've come across the abstraction that is CSS many times not just as a web de
veloper, but as a web designer.
It's a language that I recognize, a concept that I've interacted with for numero
us years, and previous to beginning my journey at ITP I thought I knew a lot abo
ut CSS. Little did I know, there are added features to the language that have be
en built into the browsers, unheard of by me. It's obvious to me now there is an
endless world of information on the subject, and its time for me to prioritize
the content covered in these Codecademy courses with the supplementary articles
I'll share below. Throughout my studie
s of CSS, I've referenced a variety of supplemental education. I'd like to share
some of
the resources that I found to be useful in my journey of learning CSS:
A Designer's Guide to Flexbox
Responsive Web Design: What It Is & How to Use It
Lastly, here is the code.html file based on the self-portrait I've taken, via Co
deSandbox: https://cfryolq
3yw.codesandbox.io/ .
Creative Coding is a course at ITP, where we gather
to make sense of code and some of its complexities. I'm
starting this journey confident in some of the logic of programming, as well as
understanding syntax that comprises ideas that builds into the array of programs
that solve problems around our built environment. I had assumed that entering t
he course, I would pick up a programming language and get down and dirty pretty
quickly from my previous knowledge of traditional, procedural programming.
Unexpectedly Challenged
When we began with HTML , I was presented with new challenges: lots of memorizat
ion through the use of Seman
tic elements ( How can I think of all of these different values?! ), a lack of t
ruly automated concepts ( Though the browser does automate quite a bite in human
ity's perspective, admittedly ), and a sense of free form building that I haven'
t been able to apply even in Javascipt ( Whoever said creative coding is can't b
e done in Javascipt clearly hasn't made it down to this line of text! ).
An Unexpected Love Affair with
Though this ancient language lacks conditional statements, a complex IDE, and a
sisterly language to help st
yle it (Hello CSS! 👋), I gravitated towards truly understanding the ...<div
, the ..., and the tables that comprise ancient HTML.
Following Another's Time
-Worn Teachings
I made use of many resources from online HTML Tutorials , to Codecademy Lessons
, and even piecing together
my previous knowledge to defining the scaffolding for what my site is today. The
biggest challenge I found was in making sense from elements that don't need to
be closed, to elements that do require closing tags. For now, I'll try to follow
in the footsteps of Semantic HTML and keep things consistent where possible.
The table below can adapted in many ways. I'm using it to send a message to
my instructor Allison and my T.A
. Sarah!
The Best Resources on HTML Tables
I found myself using all of the above resources during this assignment, to make
sense of the complexities/li
mitations that making a table on HTML can present. Below the illustrated table
shows what CSS surprisingly can do and what HTML alone needs help from CSS to ma
ke happen in terms of visuals. There are other neat features to play around with
that I haven't explored entirely. Needless to say, I find the image file to be
a humorous, illustrative piece!
https://cdn-images-1.medium.com/max/14000/1*e6Os
SIHWKzHwNDZrGNL45w.jpeg
An Unexpected Finish Line? (Am I finished?!)
Lastly, I left myself a challenge. I've always wondered how add a favicon to sit
es. I wasn't confident that
I could create the file in HTML until I took Daniel Shiffman's code, and applied
it (Copied in Dan's Code) and produced this cute memory of a dog head. Courtesy
of GIPHY. All in all, I thought I
may jump ship from this Canonical language for the web. I'm here now, heeding it
s he
avy trodden path hopefully guiding me to continued success in my studies at ITP!
Some links to Files Used
The .ico file for the favicon.
