The subject is a half-joking question in the form of a rant…
I’m going through the Applied Visual Design section, and am wondering why I’m drawing hearts and moons, when I thought CSS is supposed to be about applying style to a webpage’s elements. Why am I being taught how to draw pictures?
Is it really necessary to know how to draw hearts in CSS to be an effective front-end designer? Isn’t that why we have programs like illustrator, Corel, or Inkscape, all of which work with vector and can save as SVG, which I understand is now supported?
Kind of just a rant, but I’m honestly wondering if I’m ever going to be expected to create shapes for a website, making these particular lessons necessary.
It’s because drawing pictures in CSS is relatively good way to teach positioning, z-indices, transforms and various other things which you will definitely use. You are unlikely to use CSS for anything but creating the most basic shapes (triangles are normally very useful), there are much better methods (ie SVG), but using it as a teaching tool has the benefit of requiring some mastery of positioning and has a pretty, self-contained output; it’s more fun to draw a penguin than to put some coloured boxes in a row.
Edit: drawing a picture (and making it look halfway decent) using the primitives available in CSS is quite hard, if you can do that then positioning much more basic things, which is what you would use CSS for in reality, is trivial.
I’m pretty new myself but even fontawesome is better for hearts imo. Honestly I’m not sure how practical it is but I have heard of CSS heavy interview questions such as “how can you make a triangle in css”. I feel like, personally, I’ll use bootstrap 90% of the time so I don’t need to focus on the details of making a heart in css as much as I do just understanding css as a foundational knowledge.
Probably the challenge is meant to have you use css to manipulate shapes as practice is all.
-J
Well, when first learning, isn’t it better to use more practical, common, real-world examples - things people will likely need to do more regularly in the course of a given website design?
Fancier stuff like drawing penguins and hearts and moons and whatever would make for a cool “bonus” section.Like, “Hey, here’s come cool stuff you can do with CSS with some creativity”. But I don’t see how it’s an effective training tool when teaching the basics.
For me, the idea that I’m trying to draw a heart is detracting from the point of the lesson itself. I can imagine when I would want to put a drop-shadow behind elements in a webpage, so that’s a practcal lesson. I can’t imagine when I would want to draw fancy shapes that couldn’t just be created in a separate program, or using fontawesome like another response mentions. It just seems superfluous.