About
- This project started with me realizing that there's a lot about CSS that I don't really understand. I wanted to go through everything and create examples, because that helps me to understand how stuff works. I also wanted to teach this stuff, because teaching also helps me to understand how it works.
- I don't think that this is the best resource for a beginner. For someone who is new to CSS, I think you should go through some tutorials and stuff. But once you've gotten a survey and know the basics, I think that this is a good resource to use as a reference when you have questions, and as something to go through to make sure you understand all of the edge cases.
- I want to demonstrate discrete things. I could have had a demo for "Block elements have vertical and horizontal margins", but instead I chose to separate it into two demos: "Block elements have vertical margins" and "Block elements have horizontal margins".
- To someone who's experienced, it may seem obvious that they have veritcal and horizontal margins, but to someone who's new, it isn't obvious. I think that to someone who's new, it's helpful to separate the demo into two, because doing so makes it clearer and more explicit that they're both true.
- I think of this like a unit test.
- I want to be thorough. A lot of documentation and tutorials say a lot of words, but only include a few demos. I wanted to demonstrate everything. I think that doing so is very effective and reduces the chances of things "falling through the cracks".
- This project is definitely aligned with the "learning through examples" philosophy.
-
I could have added more CSS to the examples to make them look nicer, but I didn't. I wanted to keep the CSS as minimal as possible.
- Extraneous CSS might confuse/mislead the viewer. Even if it isn't actually effecting the example, it may not be clear to the viewer that it isn't effecting the example.
- And even if the viewer can figure it out that the extra CSS is just for aesthetics rather than being relevant to the example, it'd take the viewer time to figure that out. I don't think that viewers want to spend any more time understanding something than they have to.
- That said, sometimes I judged it to be worth adding a little extra CSS to make it look better visually.
- CodePen is cool, but it's hard to inspect the HTML/CSS with the dev tools when you use CodePen. So I wanted to provide an HTML page that is stripped down to the absolute essentials for you to play with.
- That said, CodePen is definitely cool, so I wanted to include it as well.
- Video explanations are awesome! Sometimes they're the best tool for the job. I think they're very very underused in documentation and tutorials.
- I think that it's nice to have the option to see the YouTube videos + CodePens inline.
- You get to see both at the same time.
- You don't lose track of where you were in the page.