Web Design in 4 minutes
Learning and science
web design tutorial
SHOW HN2016
How HN took it
33 positive, 21 neutral or asking, 13 mixed, 24 critical, out of 91 comments about the project. Thread score +0.14.
Design: 6 for, 16 againstIdea: 10 for, 4 againstExecution: 2 for, 2 againstDocs: 2 for, 0 againstPerformance: 1 for, 0 against
The thread, comment by comment
Each row is a top-level comment and its replies, in HN's order. Select a cell to open that comment on HN.
positive neutral or mixed critical about another commenter or something else the maker
What HN said
What people liked
Clear, simple step-by-step explanation that shows rather than tells
From 3 comments
Clear, quick and simple. It would be interesting to have such elegant introduction for other topics. Well done !
mknocker on HNLove this! Step by step explanation of how to do something which literally shows rather than tells.
johnm1019 on HNWonderful! For a moment at the start though, I wondered how such a poorly designed page, could teach anything about web design. Then I clicked the first link... :)
pitchups on HN
Helpful for web beginners
From 2 comments
For a web noob like me, I thought this was pretty awesome. I'm trying to build myself a website now, in 2016, when the last time I legitimately did it was 1999. This actually…
SmellTheGlove on HNThis is really well done, kudos! It actually feels a little like I'm learning by doing here as the design firms up in place as I proceed. Very cool idea!
rralian on HN
Objections
Low contrast gray body text hurts readability and accessibility
From 3 comments
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…
primigenus on HN> 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…
virtualized on HNI could not agree with this more. 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…
antisthenes on HN
Navigation and back button are broken
From 2 comments
The back button is broken. Also, not sure if changing the fragment identifier is the right abstraction.
konschubert on HNLove it except when I came back here to upvote the navigation was totally broken!
chejazi on HN
Specifying Arial/Helvetica in font-family is a poor choice
From 1 comment
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.…
tracker1 on HN
Requests
Use a serif or monospace font for code instead of gray blocks
From 1 comment
Very nice, but I have to disagree on two points: First using grey blocks for code, while widespread, in my opinion is a visual interruption to reading flow. Indentation is…
vegabook on HN
Questions
Why not split into multiple pages?
From 1 comment
Can't go back. Usability points: -1 Why not make it into multiple web pages?
webscalist on HN
Alternatives named
Motherfucking Website and Better Motherfucking Website
From 2 comments
Reminds me of a Motherfucking Website[1], and a Better Motherfucking Website[2] [1] - http://motherfuckingwebsite.com/ [2] - http://bettermotherfuckingwebsite.com/
Cbeck527 on HNLovely! 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…
K0nserv on HN
Typography.js
From 1 comment
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…
kylemathews on HN
Bulma and Tachyons CSS frameworks
From 2 comments
A good framework to help you build response, accessible design with proven typography: http://tachyons.io/
cel1ne on HNHis longer tutorial http://marksheet.io is great, and his CSS framework, http://bulma.io, is also really handy.
abglassman on HN