Day 3 — CSS
After the morning briefing on immersive education and what to expect in terms of our learning, we went straight into styling content with CSS.
Create a basic index.html and style.css and see how to apply different selectors. It really helps to think about how the DOM is structured and what the rules are in terms of CSS specificity. I don’t know that I’m the best at being able to predict which selector takes precedence, but I know where to look and how to figure it out.
We also briefly discussed how to use Dev Tools Inspector in Chrome to look at a page. There is a lot to unpack in terms of the functionality of this tool, and I’m sure we will do more as the course unfolds.
After a mid-morning break, we split into two groups and looked at a couple of exercises involving CSS. Basically, all we had to was think about what selectors were used and which styles were applied. Again, I wouldn’t say I’m a natural at this kind of thing, but I know how to figure it out. Many of my fellow classmates were expressing a bit of frustration. It is definitely a lot to take in.
After lunch was the daily project. Here, we were given a PNG image of what a page should look like along with just the HTML. We were responsible for writing the CSS to style the page accordingly. I’ll admit that when I first looked at this I wasn’t precisely sure where to begin. It was slightly overwhelming. But here’s the thing — you just jump in and start. Focus on the nav bar. Or focus on the table. Try something, see if it worked. If it did, great. If it didn’t, try something else. That’s really all there is to it. Once you figure out the small things, the page comes together very nicely.
The idea that I always hold in the back of my head is this: a solution exists for the problem I’m looking at, all I need to do is find it.
It took me about an hour and a half to finish the site. After getting some feedback, I refactored my solution a bit. There are some other things I could change, but I’m pretty happy with where I left it. One of the key take-aways that I realized is that you really have to study the structure of the HTML file first and think about what the DOM tree looks like. That helps you understand what kind of CSS selectors you need to use to target the desired elements. Also — you should strive for low specificity at all times. In other words, provide the minimum needed to target the elements and no more.
I think today was a good day to reflect on the idea of having a growth mindset vs. a fixed mindset. As I have observed in the past six years of teaching Calculus, when people are presented with a problem they can’t solve, the mindset they adopt plays a critical role in whether they can overcome the challenge. Instead of being frustrated, try and react with surprise and interest in what has happened after a failure.
I’ll leave this post with an idea from George Polya. If you can’t solve a problem, find a smaller problem inside it and solve that first. Repeat as needed until your problem is so small it is easy to solve.
