1624 points by bbx 3505 days ago | 152 comments on HN
| Mild positive
Contested
Editorial · v3.7· 2026-02-28 10:25:32 0
Summary Education & Digital Access Champions
This educational tutorial champions knowledge access and learning by providing free, step-by-step web design instruction with clear examples and links to additional resources. The content directly exercises and promotes freedom of expression, education, and cultural participation in digital spaces. The author's transparent attribution and open-source philosophy reinforce a human rights-positive stance toward knowledge sharing and community contribution.
Beautiful. Personally, I would've probably stopped at the "Custom font" step (I don't really like header images and the share buttons) to keep it simple, but hey that's just me.
Love it. One typo I noticed in the image section, "Graphics and icons can be used either as ornaments to support your content, or take actively part in the message you want to convey".
Lovely! Definitely like the style here and the focus on content first. Like other people have said it's similar to Motherfucking Website[1], and a Better Motherfucking Website[2]. I'll need to start including this when I link to those two.
For my website[3] I'm really trying to keep weight on the wire down too so I am opting to skip the custom font and header image. It's quite nice to have 10-15kb pages in the age of the web obesity crises[4]. A header image and a custom font does have a big effect on how personal the content ends up though.
This is a pretty nice demo of the process of turning a basic page into a "design" (in the sense that applying positioning, spacing, contrast, and things like typography is visual design - I might call it layout instead).
So although you claim black text is harsh on the eyes and gray is more comfortable, it in fact is not - it just makes it harder to read. The very first time you load the page and see black Times New Roman on a white background is actually a better user experience for a larger number of people, purely from the point of view of legibility.
Try having someone with less than stellar eyesight look at this page. Or someone who's trying to read it on a smartphone outside in sunlight or with the brightness of their screen set at less than maximum. Design isn't about what looks nice, it's about what works well - pages that a portion of your audience cannot read don't work well.
> Black text on a white background can be harsh on the eyes. Opting for a softer shade of black for body text makes the page more comfortable to read.
No, it doesn't. The low contrast text is definitely harder to read in direct comparison with black. This is the point where I suspected that the page might be a parody of modern web design. Unfortunately it seems to be serious.
The syntax highlighting is similarly awful and the grey background makes it even worse.
This is when you design in the browser with the medium in mind.
Problem is when someone gives you a PSD made by someone who badly ripped off someone else website with no idea about what the box model actually is, asking you to make a 1:1 replica in the browser.
Please, do not specify "Arial" or "Helvetica" in your font-family... just use "sans-serif" by itself... Just use sans-serif as your main fallback font after specific web-font. This will use the browser default (often Arial in windows, Helvetica on OSX) which is usually the best looking Helvetica-like font, or the user's preference.
Yes, sometimes it's a different font, but usually a better looking default. Helvetica looks hideous on windows, which is why it's often "Helvetica Neue", Arial, sans-serif... that said, just use sans-serif unless you want a specific font (with webfont option).
I've been working on a related project — Typography.js that vastly simplifies web design. It ships with 30 pre-built designs and I'm working on tools to make it really simple to create custom typography themes in-browser.
CSS is a very low-level language for expressing design intent. It's great if you want to set the background color but if you say: "I'd like to add white space to my typography" — it could take dozens of recalculations + css changes to test your idea.
Typography.js's goal is to create the most elegant/powerful API possible for defining your site's typography and remove a lot of the tedium/difficulty around experimenting with your design.
Interestingly, I can't reach the site because our corporate security software (Sophos) categorizes this site as "Weapons." I suppose, in a sense, good design can be a secret weapon... :/
I've wondered this for a while: does actually ever actually use those share buttons at the end? I don't think I've ever seen anyone using em.
The way I see it... You can just share the URL. And if you're the type of person that frequently shares content, presumably you'd use a browser plugin of some sort, just so you can get a consistent experience across sites.
My litmus test for web design typography is mixing fonts. For coding-related things especially mixing fixed-width with normal fonts. This page clearly fails [0]. Not even the baseline aligns due to 2px bottom padding. Usually only the x-height mismatches, which means "<code>x</code>" (fixed-width) does not have same height as "x" in normal font (serif or sans-serif).
Here is a good example from my website [1]. Note how "use" and "mu" have the same height. It is not perfect, but matching cap height as well is maybe impossible without buying fonts.
> Long lines of text can be hard to parse, and thus hard to read. Setting a limit of characters per line greatly enhances the readability and appeal of a wall of text.
I agree with this 100%.
What I don't understand is why many developers argue that this principle does not apply to code and that we shouldn't have line length limits "because it's not 1970 and we have large monitors." If long lines of prose is difficult to parse, then long lines of code are even more cumbersome to parse, especially when you are either 1) slowed down by having to scroll horizontally all the time or 2) distracted by the awkward naive line wrapping done by the editor.
I've been trying to find some opinions on the "first rule", i.e. "Centering".
Phones and tablets are already a book-like viewport. Desktop browsers are a different matter, for these presumed reasons:
- most monitors in 2016 have lots of pixels along the X axis
- most browsers are maximised or run in full-screen mode
Joe Designer also has lots of pixels and/or a maximised browser, hence squashes content into a column.
Some do it wrong, which means some websites end up looking like a thin column of text on your cinema display.
What I'm getting at is this: I run my desktop browsers already in a book-like viewport (using Spectacle.app on Mac and XMonad on Arch Linux, or a simple resize-with-trackpad when I don't) so I'm a few keystrokes away from having to parse long lines of text. I don't really like it when website authors choose my viewport width on my behalf.
Choosing your own typefaces and colours - fine. Layout? Not so much. What do others think?
I noticed this too, it's easy to fall into the trap of subtlety when designing. Subtle often ends up as low contrast which can definitely hurt accessibility. I think the first body color #555 was nice and it gets a good accessibility score too[0] whereas the second edition of the body color #566b78 is a bit too low contrast and subsequently gets a non perfect accessibility score[1].
> So although you claim black text is harsh on the eyes and gray is more comfortable, it in fact is not - it just makes it harder to read. The very first time you load the page and see black Times New Roman on a white background is actually a better user experience for a larger number of people, purely from the point of view of legibility.
I'd say this is a half truth. Yes completely black text feels unnatural and a bit off, but done correctly you can pick a color that's still legible without being #000. There is an intersection of legible black on #FFF that's not pure black.
I was going to comment the same. The first change to the text color was to #555, which IMO is way too light already. Something like #333 works much better at "softening" the sharpness of black over white while still maintaining the text pretty readable.
But after that step the tutorial redefined the text color to #566b78, which is even lighter. I understand that the blue shade is a nice touch, but decreasing the legibility of the text so much is not.
Besides these nitpicks, the article is great though :)
Yeah I found this assertion pretty troubling too. The "black" on most displays is already "soft" since even black pixels are leaking light. I've never read a page in a book and thought "you know, this ink is too black, it's straining my eyes".
As someone with less than perfect vision, I've seen far too many websites embrace the "greyness" in design, employing far too light shades of grey to display their main content.
This is especially evident if using an older monitor with a TN panel. While IPS monitors have become affordable in the last 2-3 years, there was a period of time when they carried a hefty premium, so most consumers are still probably stuck with at least 1 TN panel in their home.
I cannot describe a user experience of reading a low contrast web page on a TN panel as anything but horrible and have had to manually override CSS rules to be able to process the content.
>Gah... Do NOT specify "Arial" or "Helvetica" in your font-family... just use "sans-serif" by itself... In windows this will be an Arial font, and in OSX "Helvetica" and on other platforms the closest default alternative
You aren't wrong - but this isn't exactly true. It will be the browser default font which the user can change themselves [0]. Which is even better! For the small group that don't force their font choices by default yet change their default font settings, it is better to use serif/sans-serif instead of specifying a font family to respect the user's choices.
I force my font choices to be used everywhere, so any CSS that specifies a font-family is just mild bloat on the CSS file in the end. I understand people like to take into consideration the font choices for their design, but it really should be in the user's hands without having to jump through hoops.
Yeah, the grey coloured text was quite hard to read on this screen too.
But do you know what else was hard to read?
The code blocks themselves. Because of the syntax highlighting and pastel colours, I had to focus quite a bit to see any of the actual code. It got better with a few more lights on in the room, but someone with below average vision would likely struggle to read much of this page.
I particularly like the simple links at the top, but found the list of articles confusing - it took a while for me to realise that the articles weren't just one paragraph filler texts.
Congratulations on not using any Javascript on the front page, except for what looks like the same email-obfuscating JS that Cloudflare injected on my site until I disabled that. In my mind, external JS is one of the worst things you can do to a website, and even self-hosted JS is bad if it's affecting layout/behavior much: people without JS enabled get a crap experience.
I literally just used one of the share buttons, and I frequently use them on news sites, blogs, etc. But I might be in the minority. It never even occurred to me to use such a plugin, but that's a good idea!
I think there's no harm in adding them, some people may use them even if they are just a reminder to share. I think they should be kept fairly simple though, no JS etc.
From a single user's perspective its very easy to see how no one would use them. But yes, plenty of people do. Go to a random buzzfeed article and you'd be amazed at the numbers.
It's not as simple as that. For one thing, there is a wide range of different screens used to display text, and each screen may exaggerate or reduce contrast to a different degree. It's also important to remember that very high contrast such as pure black on pure white can cause serious problems for dyslexic readers.
This content is fundamentally educational. It teaches web design fundamentals step-by-step with clear explanations and practical examples. The article explicitly promotes learning through links to additional resources (MarkSheet, CSS Reference, Bulma). The call-to-action is 'Learn CSS!'—directly advocating for education.
FW Ratio: 56%
Observable Facts
Core content is a structured tutorial with step-by-step instructions for learning web design.
Multiple CSS code examples are provided that readers can implement and learn from.
Explicit links are provided to three additional free learning resources: MarkSheet, Bulma, CSS Reference.
Content concludes with 'Learn CSS!'—a direct call to education.
No paywall or authentication is required to access the main article.
Inferences
The author explicitly champions education as the primary purpose of the content.
Free, step-by-step instruction format is designed for learners with no prior knowledge.
Links to additional resources demonstrate commitment to lifelong learning pathway.
The tutorial format reduces barriers to entry for education access.
Content enables participation in digital/cultural life by teaching skills for web design and digital creation. Frames web design as creative practice and art form.
FW Ratio: 50%
Observable Facts
Article discusses design as both functional and aesthetic practice.
Content uses language like 'give it identity' and 'enhance your identity through text' which frames design as creative expression.
Tools for sharing content (social media buttons) enable participation in digital culture.
Inferences
Teaching design skills enables broader participation in digital creative culture.
Framing web design as creative identity suggests recognition of design as cultural contribution.
Social sharing infrastructure facilitates cultural participation and collaboration.
Content itself is an exercise of freedom of expression—sharing design knowledge and opinions. Includes social sharing buttons that encourage broader dissemination of the author's ideas.
FW Ratio: 50%
Observable Facts
Page includes explicit social media share buttons (Facebook, Twitter) that enable distribution.
Author shares code examples and design philosophy openly.
Multiple external resource links (MarkSheet, Bulma, CSS Reference) are provided for further sharing and discussion.
Inferences
The presence of share buttons suggests intent to facilitate broader expression and discussion.
Open sharing of educational content demonstrates commitment to freedom of expression principle.
Links to external resources imply a platform for collective knowledge discourse.
Free educational content implicitly supports development of skills that contribute to adequate standard of living through improved employment prospects.
FW Ratio: 50%
Observable Facts
Tutorial teaches web design skills that are employable in tech industry.
Inferences
Free educational resource can improve readers' economic prospects and standards of living.
Author shares knowledge freely with community as a contribution to collective good. The design philosophy emphasizes serving users and enhancing content presentation—framed as duty to audience.
FW Ratio: 50%
Observable Facts
Author publicly shares multiple free educational resources and code examples.
Content philosophy emphasizes that 'design is to enhance the presentation of content'—framed as service to users.
Inferences
Free sharing of expertise reflects understanding of responsibility to broader community.
Design framed as service suggests recognition of duties toward others in community.
Content implicitly affirms human dignity through knowledge sharing and educational empowerment, though not explicitly addressing the Preamble's focus on inherent rights.
FW Ratio: 50%
Observable Facts
The article is freely published and accessible to all readers without authentication or payment.
Content is presented by a named individual (Jeremy Thomas) rather than an institutional gatekeeper.
Inferences
Free educational content respects the principle that knowledge should serve humanity broadly.
Direct author attribution supports individual expression and accountability.
Website provides free, publicly accessible educational material with no paywalls or authentication barriers. Includes links to multiple free learning resources. Open sharing encourages knowledge dissemination.
Website structure supports publishing and sharing: social media integration (Facebook, Twitter share buttons), GitHub links, and open access enable others to express and share the content.
build 1ad9551+j7zs · deployed 2026-03-02 09:09 UTC · evaluated 2026-03-02 11:31:12 UTC
Support HN HRCB
Each evaluation uses real API credits. HN HRCB runs on donations — no ads, no paywalls.
If you find it useful, please consider helping keep it running.
