I’ve written CSS code before using the help of the Internet, but I was never intentional about learning it and knew there were significant holes in my understanding. There still are but I have a much clearer picture of the elements of CSS and how to write it about 4 hours of study.
Learn Something New
In may episodes of the Side Hustle podcast, I’ve heard Chris Guillebeau advertise Skillshare as a resource to learn something new, with an offer of 2 months for $1. I’ve heard the offer many times, and told myself that I would sign up for it in March. Well, March is here. As I am working more with WordPress, I figured that it’s time to get more comfortable with CSS, so I decided to start with a course on that topic. There are a wide selection of courses to choose from!
Getting Started
I first started with a course estimated to take about 10 hours. I planned to spend 2 hours on it the first day. However, I had to stop fairly early on to wait for an offer code to set up a new website. I probably could have just used one of my existing sites, but I like to have a similar interface for reference and comparison when exploring content for the first time. But I didn’t want to give up on the time that I’d set aside so I found a course focused on CSS with WordPress, my platform of choice for all my sites. The course is Introduction to Basic HTML and CSS for WordPress Users. (If you sign up with my hyperlink, I get one more month of free access to Skillshare.)
Introduction to Basic HTML and CSS for WordPress Users by Alexander Oni
CSS is used for styling web pages, while HTML is used for writing web content. You can think of HTML as the ingredients and recipe to make a cake, and CSS as the equipment that you use to get it to look the way that you want. Not a perfect analogy but that’s the main idea.
I’ve played around with HTML for years, but rarely use CSS. Basically, I use CSS when I have no choice, like I really, really want something on my website and I cannot do it with HTML. I’m probably a bit spoilt from using WordPress because many themes and plugins allow customisation without much coding. But I finally decided to (start to) learn it.
I just finished the course. I ended up doing it in 3 sittings. Some of the content was not new to me, but I didn’t want to simply skip any content (remember my goal was to plug existing holes in my knowledge). My solution was to listen/watch familiar content at double speed, sometimes while multitasking e.g. washing dishes. I did most of the exercises. Some of them were similar to other exercises, but just involved playing with new properties and I decided that those wouldn’t improve my understanding. I would have liked another exercise/project that was not simply follow along. There was only one. However, perhaps that’s an unrealistic expectation given the short duration of the course.
What I Learned
Whenever I take a class, I take notes in a Google Document. I have a page and a half of notes from this course. My intention was to have a quick reference for the situations that I expect to encounter. I also recorded anything that I thought was really cool. Alexander says Wow a lot, and is enthusiastic about CSS. I found his enthusiasm a bit infections, and appreciated his obvious delight in the topic. Here are a few things that learned that you may find of interest:
- The text-transform property can be used to change the case of text
- This page from W3Schools is a great resource for the names of colours. This is very useful for me.
- span and div are elements used for grouping content into sections. span is inline and div is not
- In WordPress, you can create a child theme to ensure that you won’t lose your customizations when the theme updates
- Class and id are used to identify elements. id is usually used to apply unique properties to elements (Aha moment for me)
- The display property can force a block element to act like an inline element (useful to remove excess spacing, for example)
- Cool tasks: increase/decrease a logo size, apply styling to list elements for example use an image instead of the default dot in an unordered list, change hover effects to create quick animations.
If you’re interested in learning how to do any of those things, try out Alexander’s course here. There is also a more advanced class, that I may take after first taking some courses on different topics.
Featured Image Source: html CSS by cenango, License CC BY-SA 2.0
First published at dpresident.net.