{"id":1276,"date":"2020-02-13T17:06:32","date_gmt":"2020-02-13T22:06:32","guid":{"rendered":"http:\/\/newmediaproduction.mynmi.net\/?page_id=1276"},"modified":"2022-02-09T21:03:43","modified_gmt":"2022-02-09T21:03:43","slug":"study-like-an-artist","status":"publish","type":"page","link":"https:\/\/nmi.cool\/web\/study-like-an-artist\/","title":{"rendered":"Study like an artist"},"content":{"rendered":"\n
\"Paintbrushes
Photo by Khara Woods<\/a><\/figcaption><\/figure>\n\n\n\n

When you’re learning a new skill\u2014like, say, oh, I don’t know, front-end web development\u2014, it can be immensely useful to conduct artist’s studies along the way. What’s an artist’s study?<\/p>\n\n\n\n

In art, a study is a drawing, sketch or painting done in preparation for a finished piece<\/span>, or as visual notes. Studies are often used to understand the problems involved<\/span> in rendering subjects and to plan the elements to be used in finished works<\/span>, such as light, color, form, perspective and composition.<\/p>https:\/\/en.wikipedia.org\/wiki\/Study_(art)<\/cite><\/blockquote>\n\n\n\n

In this course, a study is a small exercise you undertake simply for the goal of better understanding a thing you’re learning. It’s informal and directed by your curiosity.<\/p>\n\n\n\n

Let’s work through an example together. Let’s say that you’re interested in learning more about styling text with CSS. Maybe you’ve completed a few FreeCodeCamp lessons<\/a>, or maybe you’re getting ready to start work on Project One<\/a>.<\/p>\n\n\n\n

For this study, let’s spin up a little throwaway project folder, called scratch<\/code>. You can save this on your Desktop, in your Dropbox, wherever. Since you’ll likely just delete it when you’re done, it doesn’t really matter.<\/p>\n\n\n\n

In your new scratch<\/code> folder, make a second folder called css<\/code>. Then, fire up Visual Studio Code, create a new file, and save it as index.html<\/code> inside your scratch<\/code> folder. Then, open up a vertical split view, and in your right pane, create another new file, this one named style.css<\/code>, and save it in your css<\/code> folder within your scratch<\/code> folder. Finally, back in your index.html<\/code>, use the html5 Intellisense complete to drop in your HTML boilerplate. Finally, add <link href=\"css\/style.css\" rel=\"stylesheet\"><\/code> to your <head><\/code> to link your stylesheet to your HTML file. When you’re done, you’ll see something like this:<\/p>\n\n\n\n

\"Visual<\/figure>\n\n\n\n

Let’s throw in a couple paragraphs of hipster ipsum<\/a>, so that we have this:<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n    <title>Document<\/title>\n<\/head>\n<body>\n    <p>Lorem ipsum dolor amet biodiesel pickled whatever, butcher echo park lumbersexual raclette drinking vinegar salvia brooklyn sriracha freegan. Photo booth trust fund small batch palo santo disrupt kombucha pickled plaid. Succulents portland blue bottle, live-edge austin selvage food truck literally squid mumblecore. Cloud bread twee swag, meggings tbh kale chips whatever activated charcoal.<\/p>\n    <p>Trust fund whatever DIY edison bulb YOLO mlkshk, vinyl photo booth cold-pressed. Yuccie YOLO food truck gluten-free, banh mi man braid poke mustache try-hard cold-pressed listicle woke. Pinterest cold-pressed blue bottle meditation vegan godard, fanny pack humblebrag offal edison bulb wayfarers seitan tilde keffiyeh.<\/p>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Now that we have our materials set out, so to speak, it’s time to start playing around. Disciplined play<\/em> is an essential component of a study. Pla<\/em>y in the sense of relaxed, unconstrained, and curious, disciplined<\/em> in the sense of careful, diligent attention to what you’re doing.<\/p>\n\n\n\n
What might your next steps be?<\/p>\n\n\n\n