3 minute reading time
I’ve been teaching a small class on web development recently, and after my first lecture, I’ve gained a newfound respect for teachers. Teaching didn’t come as naturally to me as I would have imagined. I tried going in prepared: with a few outlines and a few code demos. Instead of letting my preparation go to waste, I decided to share them here with you on my site. It’s a nice break from the Animatable posts, so I hope you enjoy!
I suggest a couple short readings to check out before the lecture:
- What is CSS by Adam Roberts
- Box Model by the W3C
HTML is where the content of your site lives. It’s also the file the server returns to no matter what, the bare-bones of a webpage. This file may contain text, pictures, and/or other media.
This is where you style your content. Whether it’s through colors, layout, or typography, there are plenty of different ways for you to visually manipulate your content.
How do they all link together?
Link the CSS file
Refer to any element with class=’hello’ and change it’s text color to red.
Any element with an id=’world’ will have it’s font-size changed to 2rem
You don’t have to only use the class and id attributes in html, you can refer to any attribute. This code snippet grabs any canvas element with data=’sales’ and changes it’s border to be 5px thick, dashed, and the color blue.
To add a class to an element
To check whether a certain condition is true in the browser
And a lot more
What should handle what?
To me personally, my first lecture was a mess. Some of my examples didn’t work properly in the first type-through and I was everywhere. Though, to be sharing the little knowledge I do have, comes with it’s own joy. It must not have gone as terrible as I imagined it in my head because they seemed enthusiastic for the next lecture. So I’m excited to share this outline with you, and hopefully I’ll have many more to come. Until next time. 🙂