Week 1: what was learning CSS through SheCodes Basics like?

So. Much. Fun. 🎨

Adding CSS made my page look pretty, and this made learning to build a webpage infinitely more fun.

Some coding newbies on the SheCodes Slack channel said their gateway drug to CSS was styling their MySpace profile last decade/century. I am too aged — pronounced ay-jed — for this (👋🏼 fellow Elder Millennials!), but my little sister said she can relate.

Here is Duncan finding the twig art learning process infinitely more fun.

For each CSS property, class, selector or tip, a short video by Matthieu (the SheCodes instructor & creator):

• explained it in simple terms
• showed live writing of its code and common errors in Visual Studio Code
• showed us the results of each addition/tweak on a webpage
• showed us how to find and understand the code for what was just created using Google Chrome developer tools
• gave us keyboard shortcuts and handy usage tips that real-world developers use for these features
• finished by summarising the concepts introduced in the video and posing a challenge for us to complete before moving on.

The former teacher in me was like 👏🏼 👏🏼 👏🏼 at all these effective learning techniques. I wish I had been that good at teaching 🤷🏼‍♀️.

Last week’s post set out some of the reasons the SheCodes learning style really helped me. Adding to this, the explanations were pitched at a level newbies could understand and apply. Handy shortcut tools were given (e.g. the ColorZilla extension, Matthieu’s own color palette picker). The tools were explained in the context of how we would use them in the work of a real-life developer.

The most powerful thing is when you do the challenges, you’re applying the code. And this is where you really learn. For me, it meant I found and fixed errors in my code. I noticed I wanted to add more flourishes or features to the button or image I was playing with. This prompted me to hunt down and experiment with how to do it.

Cue: lots of searching MDN, Stack Overflow and kind Twitter teachers’ guides, heaps of CTRL+R and CTRL+Z and … more and better learning.
A website showing weather in Toyko.
Scratching the surface: CSS styling for Week 1 homework.

I know I’m just scratching the surface of what CSS can do, but I’m not getting bogged down in detail I can’t apply yet.

I like how CSS can give a webpage the illusion of functionality with box-shadow, hover, transitions, etc.

I love how CSS makes a webpage look. The white space (not created with semantically misleading tables or paragraph breaks, hooray!). The colours. The fonts. The consistency. It must be the proofreader/editor/KidPix nerd in me.

We learned classic CSS spacing (padding, margin, border) and display (block, in-line, etc) components, how to style elements and classes with spacing, fonts, backgrounds (including gradients), colours, hovers + transitions and more.

In practical terms, this included changing, for example: the cursor to a pointer, a html button to something non-fugly, the background color as the cursor hovered over an area, an image border to a soft-edged square, the position of an image or heading on a screen.
Two websites side by side, one in html styling and one with CSS styling.

From this ↖️ to this ↗️ … CSS I 💛 you.

That’s why if you like to make things look nice (clean, consistent, colourful), you will love CSS. I’d love to hear about your journey with CSS so far, or any CSS developers you follow ⬇️ 💬.

The last step was working out how to display my code as a webpage that’s hosted externally. But that’s a whole other mini-post about getting a GitHub account 😻 and adding the right repositories. Hopefully other other newbies find it helpful. 👋🏼 🌱