Member-only story

HTML Illiteracy (Part 2 of 2) Styling And Failwind Stupid

Jason Knight
CodeX
Published in
24 min readMar 18, 2024
The Mandalorian, “One does not speak unless one knows”
Then perhaps this lesson is for you.

Right out of the gate let me show you the finished template that I started in part 1, as I’d like to discuss numbers and methodology before I break down the how/what/why of the CSS.

You can find it here:
https://cutcodedown.com/for_others/medium_articles/failwindUI/shotlight/shotlight.html

As with all my examples the directory is unlocked for easy browsing:
https://cutcodedown.com/for_others/medium_articles/failwindUI/shotlight/

And there’s a .rar of the whole shebang in there so you can play around with it.

And yes, that’s not a perfect 1:1 because I fixed what I consdier to be layout issues, waste of whitespace hampering UX, inaccessible font sizes, the ugly use of those garbage “system font” stacks that result in cross-platform inconsistency, and all the illegible colour contrasts to the point I could barely even see that it had a flipping light/dark toggle. Though that last part I suspect is my astigmatism making me WAY more sensitive about accessibility

CodeX
CodeX

Published in CodeX

Everything connected with Tech & Code. Follow to join our 1M+ monthly readers

Jason Knight
Jason Knight

Written by Jason Knight

Accessibility and Efficiency Consultant, Web Developer, Musician, and just general pain in the arse

Responses (7)

What are your thoughts?