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.
- 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.
- Devs writing
<input />elements 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
keydownon said input to check if
enterwas 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)
display: flexuntil it looks good(Trust me: flexbox is great, but not the solution for all your problems)
- Wrap a
divaround 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: absoluteworks. 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…
- 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-colorand way more;
- Devs were pretty much aware that images need an
altattribute 👍, but what to write in it is a mystery to them 👎;
Frequently asked questions during the workshop
How do I know when to useA recent article from Josh Comeau answers most of their questions:
emor even something else?
remin most cases,
emfor 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;
Top comments (2)
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.
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.