Things I learned giving CSS workshops

Being so frustrated at the capacity of modern day Frontend Devs to write 'proper' HTML and CSS, I decided to host a worskhop. For everyone interested, individually, minimal 3 hours each. These are the things I learned. About the devs, but also about myself and frontend in general.

The setup

• Bring a design you like. A magazine, a dashboard, some conference site, whatever motivates you to build;
• We'll start writing some meaningful HTML as we walk through the design, no wrapper <div>s allowed without purpose;
• After the HTML is (mostly) done, we start writing CSS;
• Work until satisfied or energy has run out.

The lows

• Devs writing <input /> elements without <label> and without <form> (No description of the field, no place to send the data to…)
• Devs wanting to write their own event handler to listen for keydown on said input to check if enter was pressed. (Please use a regular <form> instead, because hitting enter in the input field or pressin enter/space while the submit button is focused will submit the form)
• Apply display: flex until it looks good(Trust me: flexbox is great, but not the solution for all your problems)
• Wrap a div around pretty much anything because it might come handy when starting to write the CSS(No it doesn't and using a particular CSS framework put you in a mindset that you need to wrap every single element if you want to somehow align them. Even though the framework didn't advertise that at all.)
• Nobody seems to have an idea about how position: absolute works. Like it's some kind of magic box and tinkering with it will eventually solve their issue;
• Devs didn't recognise that their DevTools were telling them why their properties/values weren't working. DevTools do an excellent job these days of showing a warning when a declaration isn't applied because a parent element is missing a certain property, or some other reason. Clearly folks had never heard of this option;
• Some folks thought it's only possible to create rows and columns using <div>s.I don't even…

The highs

• We got to spend roughtly ~50% on writing the HTML in workshop that was supposed to teach them about CSS and everyone loved it, no exceptions! Folks were generally unaware of all the options available in HTML. Also, they were very open to the idea of building the HTML first and then solving the styling with CSS, instead of trying to let their HTML match the design as closely as possible;
• Devs were really grateful for doing a walkthrough of these things together, as they felt it's so different from what they've always done but faster and with better results;
• Folks are pretty excited when they see what's prossible in modern CSS (with pretty good browser support): CSS Grid, Flexbox "magic", accent-color and way more;
• Devs were pretty much aware that images need an alt attribute 👍, but what to write in it is a mystery to them 👎;

Frequently asked questions during the workshop

• How do I know when to use px, em or even something else? A recent article from Josh Comeau answers most of their questions: rem in most cases, em for some and hardly ever anything else (in our field, at least);
• How does CSS Grid even work? It looks way too magical to me! Usually I refer them to either CSS Tricks or Wes Bos' excellent course on the topic;

Comments

[Nicholas Stimpson]

Great stuff. Not too much there that surprised me to be fair, except absolute positioning. I would have thought that was one of the easier things in CSS to grok.

[Bart Veneman]

Yeah, the thing was these things kept coming back, so I'd say they're pretty common. Good to hear I'm not the only one.