8 ms·

Author mentions this took a long time to arrive at. I recommend "Web Design in 4 Minutes" from the CSS guru behind Bulma: https://jgthms.com/web-design-in-4-m

Author mentions this took a long time to arrive at. I recommend "Web Design in 4 Minutes" from the CSS guru behind Bulma: https://jgthms.com/web-design-in-4-minutes/ https://jgthms.com/web-design-in-4-minutes/

tarruda 8y ago
This is the best CSS/design tutorial I've seen, thank you for sharing.
boomlinde 8y ago
That is an interesting format. It's encouraging to see small, incremental changes to the style sheet result in so vast improvements in legibility.
- kbenson 8y ago
  I agree, but I found the first half much more useful (so far) than the last half. The second half was honestly a little overwhelming it what it felt like it was assuming about my capabilities. Less of "this small change or some slight variation will help a lot" and more "use your design experience to choose something visually pleasing here", which honestly, the lack of such experience is why I was reading such a guide.
- Narishma 8y ago
  For me it started being less legible after the font change to Arial and kept going downhill from there.
  - boomlinde 8y ago
    At the point where the contrast of the text was reduced, I was off the hook. I'd rather do that the way OP did, by changing the background to a pleasant pastel. Either way, I'm impressed with the format.
JoshuaRLi 8y ago
Oh wow, great read... I wish I had seen that earlier. Thanks for sharing! To elaborate, the rabbit hole I remember going down was something like googling "how to center css", then after being confused by a number of horrible incantations, arrived at flexbox then CSS grid, which was slightly less confusing, and then I took some time to really study the basics/fundamentals. It also doesn't help that so many websites, even personal sites/portfolios these days, have so much markup goop and cruft that makes it quite hard to learn by example :(
- victorvation 8y ago
  Although Jeremy Thomas' design might be more complete, I do like the minimalism of your approach - a few lines that can be dropped into a page to quickly take it from unreadable to a pleasant experience. The only things I'd add are font-family: "San Francisco", "Helvetica", sans-serif;, and perhaps line-height: 1.5.
ainar-g 8y ago
Disclaimer: I am not a graphic designer. I am merely a programmer with an interest in well-crafted, understandable, and readable text. So, read this as an outsider rant rather than an informed opinion. Black text on a white background can be harsh on the eyes. I have to disagree about the problem here. Black text has been fine since the first printing press. And if you do want to make a page less in-your-face with regards to contrast, then it would be much better to dim the background. After all, the paper we read is mostly this grey-ish, yellow-ish colour. The accent color can be complemented with more subtle shades, to be used on borders, backgrounds, or even the body text. The colours they've used in the syntax highlighting just made everything a confetti explosion. I am not against syntax highlighting, but it shouldn't be this colourful, unless you give every identifier a computable colour to make misprints more noticeable. Since text is the main content of a webpage, using a custom font gives the page even more noticeable identity. Not a big fan of @font-face. Another host to visit. Another asset to download. My fonts are fine. If I have the font you like, then great! If I don't, please make it look reasonable with system defaults. Let's enhance our header with a nice background image from Unsplash. Let's not. Massive headers are nothing but a waste of space. Again, this is a rant. I am just very tired of “designers” doing “pretty” stuff instead of solving a problem. And that problem is an aesthetically pleasing, not-eye-hurting, reasonably dense text.
- zamalek 8y ago
  > Black text has been fine since the first printing press Keep in mind that paper is not an emissive surface, like an LCD panel is. Black-on-white is fine for e.g. e-ink displays or calibrated brightness (~15-30% on most displays, which is not the default).
  - altfredd 8y ago
    Smartphones tune down brightness in power saving mode (and so do e-ink books). Most websites are barely legible under those conditions, because web designers have been so heavily corrupted by backlight.
  - tomjakubowski 8y ago
    Further, book paper - particularly for non-technical books, where diagrams are rare and reading is done in long, uninterrupted stretches - is often intentionally off-white, to lower the contrast and make it easier on the eyes.
clydethefrog 8y ago
If you search for "motherf--ing website" you also have many examples of a very simple but readable website. (I hate the edgy language though.) https://news.ycombinator.com/item?id=6791297 https://news.ycombinator.com/item?id=6791297
- reificator 8y ago
  > (I hate the edgy language though.) I understand where you're coming from, but I do think it serves an important purpose here. The language is chosen to underscore the message and ensure virality. The goal was to get the point in front of as many people as possible, and it did that quite well IMO. I'm not sure that message could have spread as far and wide as it did without that language. Perhaps if FAANG pushed it...
- creinhardt 8y ago
  A SFW version: https://www.goshdarnwebsite.com https://www.goshdarnwebsite.com
ar_lan 8y ago
Wow, that's nearly definition of a great tutorial.
bbx 8y ago
Haha, thanks for sharing this. It's been a while since I wrote that! You're right to mention it because in the 2nd step "Centering", I use the same technique: adding a max-width and using auto margins for the left and right sides. On a side note, this reminds of the "Doing it more vs. doing it better" thread that was here on HN yesterday [1], and how the JS code of "Web Design in 4 minutes" is quite bad… I just wrote those 50 lines directly in the HTML, at the end of the page, and tested it manually a few times. As a result, it is tightly coupled to the markup, and still has lots of bugs. But I imagine that if I had focused on writing "beautiful" code instead, I probably wouldn't have shipped the project in the first place. [1]: https://news.ycombinator.com/item?id=19600440 https://news.ycombinator.com/item?id=19600440
- mushufasa 8y ago
  Thanks for shipping it! Last year I started to build a web app without knowing how to code -- I started not knowing the difference between CSS and JS. You can imagine how confusing the current ecosystem is to beginners. (My co-founder and I taught ourselves to be the technical co-founders). Your tutorial really helped, and I'm using Bulma :).
- RobertKerans 8y ago
  Bloody hell, I've been trying to find for this for ages. I knew there was _something_ I'd read that gave a great step by step overview that I knew at the time would be helpful whilst teach beginners, but I couldn't remember what it was called or who wrote it, and it's nearly impossible to search for when the details of it were sketchy ("step by step web design tutorial"??). Just want to say thank you for writing this (and thank you to OP for posting the link)
optymizer 8y ago
Once the text goes to gray, it is objectively harder to read.
admax88q 8y ago
As the contrast keeps getting lower that page keeps getting harder to read. We don't all have super bright macbooks turned to full brightness.
avip 8y ago
This is a wonderful tutorial. I wish back worked though.
- justusthane 8y ago
  Agreed. I keep wanting to compare the differences between two steps.
craftyguy 8y ago
> I recommend "Web Design in 4 Minutes" from the CSS guru behind Bulma There's irony in the fact that this website is completely non-functional and no content is displayed when JS is disabled. You'd think a CSS guru would not rely on JS to display text.
- buzzerbetrayed 8y ago
  > You'd think a CSS guru would not rely on JS to display text The reason people love this website is because the content changes as you learn each concept. The way you "change" content in web development without reloading is through javascript. It is about as close to a perfect use case as you can find. There is nothing ironic about that.
- vkaku 8y ago
  I'm sure he could do that by navigating to a new page every time. But the tutorial is about styling one step at a time without getting distracted, and I think that is solid teaching.
ngold 8y ago
Looks promising for a Web Development quicky.
jeltz 8y ago
The text just becomes harder and harder to read the more it progresses.
Myrmornis 8y ago
That's really cool and will help me a lot with CSS I think. However, as others have mentioned, the change from black to a gray text color #555 makes things slightly worse and would be better if it were a darker gray. It does make one trust the article less.
sfusato 8y ago
Thanks for sharing this. * I clicked your link * closed the HN tab * was completely blown away by the article * "Reopen closed tab" and up-voted your comment
To1ne 8y ago
> What is the first thing you need to work on? Your hyperlinks need to work without Javascript.

tarruda 8y ago

This is the best CSS/design tutorial I've seen, thank you for sharing.

boomlinde 8y ago

That is an interesting format. It's encouraging to see small, incremental changes to the style sheet result in so vast improvements in legibility.

kbenson 8y ago
I agree, but I found the first half much more useful (so far) than the last half. The second half was honestly a little overwhelming it what it felt like it was assuming about my capabilities. Less of "this small change or some slight variation will help a lot" and more "use your design experience to choose something visually pleasing here", which honestly, the lack of such experience is why I was reading such a guide.
Narishma 8y ago
For me it started being less legible after the font change to Arial and kept going downhill from there.
- boomlinde 8y ago
  At the point where the contrast of the text was reduced, I was off the hook. I'd rather do that the way OP did, by changing the background to a pleasant pastel. Either way, I'm impressed with the format.

JoshuaRLi 8y ago

Oh wow, great read... I wish I had seen that earlier. Thanks for sharing! To elaborate, the rabbit hole I remember going down was something like googling "how to center css", then after being confused by a number of horrible incantations, arrived at flexbox then CSS grid, which was slightly less confusing, and then I took some time to really study the basics/fundamentals. It also doesn't help that so many websites, even personal sites/portfolios these days, have so much markup goop and cruft that makes it quite hard to learn by example :(

victorvation 8y ago
Although Jeremy Thomas' design might be more complete, I do like the minimalism of your approach - a few lines that can be dropped into a page to quickly take it from unreadable to a pleasant experience. The only things I'd add are font-family: "San Francisco", "Helvetica", sans-serif;, and perhaps line-height: 1.5.

ainar-g 8y ago

Disclaimer: I am not a graphic designer. I am merely a programmer with an interest in well-crafted, understandable, and readable text. So, read this as an outsider rant rather than an informed opinion. Black text on a white background can be harsh on the eyes. I have to disagree about the problem here. Black text has been fine since the first printing press. And if you do want to make a page less in-your-face with regards to contrast, then it would be much better to dim the background. After all, the paper we read is mostly this grey-ish, yellow-ish colour. The accent color can be complemented with more subtle shades, to be used on borders, backgrounds, or even the body text. The colours they've used in the syntax highlighting just made everything a confetti explosion. I am not against syntax highlighting, but it shouldn't be this colourful, unless you give every identifier a computable colour to make misprints more noticeable. Since text is the main content of a webpage, using a custom font gives the page even more noticeable identity. Not a big fan of @font-face. Another host to visit. Another asset to download. My fonts are fine. If I have the font you like, then great! If I don't, please make it look reasonable with system defaults. Let's enhance our header with a nice background image from Unsplash. Let's not. Massive headers are nothing but a waste of space. Again, this is a rant. I am just very tired of “designers” doing “pretty” stuff instead of solving a problem. And that problem is an aesthetically pleasing, not-eye-hurting, reasonably dense text.

zamalek 8y ago
> Black text has been fine since the first printing press Keep in mind that paper is not an emissive surface, like an LCD panel is. Black-on-white is fine for e.g. e-ink displays or calibrated brightness (~15-30% on most displays, which is not the default).
- altfredd 8y ago
  Smartphones tune down brightness in power saving mode (and so do e-ink books). Most websites are barely legible under those conditions, because web designers have been so heavily corrupted by backlight.
- tomjakubowski 8y ago
  Further, book paper - particularly for non-technical books, where diagrams are rare and reading is done in long, uninterrupted stretches - is often intentionally off-white, to lower the contrast and make it easier on the eyes.

clydethefrog 8y ago

If you search for "motherf--ing website" you also have many examples of a very simple but readable website. (I hate the edgy language though.) https://news.ycombinator.com/item?id=6791297 https://news.ycombinator.com/item?id=6791297

reificator 8y ago
> (I hate the edgy language though.) I understand where you're coming from, but I do think it serves an important purpose here. The language is chosen to underscore the message and ensure virality. The goal was to get the point in front of as many people as possible, and it did that quite well IMO. I'm not sure that message could have spread as far and wide as it did without that language. Perhaps if FAANG pushed it...
creinhardt 8y ago
A SFW version: https://www.goshdarnwebsite.com https://www.goshdarnwebsite.com

ar_lan 8y ago

Wow, that's nearly definition of a great tutorial.

bbx 8y ago

Haha, thanks for sharing this. It's been a while since I wrote that! You're right to mention it because in the 2nd step "Centering", I use the same technique: adding a max-width and using auto margins for the left and right sides. On a side note, this reminds of the "Doing it more vs. doing it better" thread that was here on HN yesterday [1], and how the JS code of "Web Design in 4 minutes" is quite bad… I just wrote those 50 lines directly in the HTML, at the end of the page, and tested it manually a few times. As a result, it is tightly coupled to the markup, and still has lots of bugs. But I imagine that if I had focused on writing "beautiful" code instead, I probably wouldn't have shipped the project in the first place. [1]: https://news.ycombinator.com/item?id=19600440 https://news.ycombinator.com/item?id=19600440

mushufasa 8y ago
Thanks for shipping it! Last year I started to build a web app without knowing how to code -- I started not knowing the difference between CSS and JS. You can imagine how confusing the current ecosystem is to beginners. (My co-founder and I taught ourselves to be the technical co-founders). Your tutorial really helped, and I'm using Bulma :).
RobertKerans 8y ago
Bloody hell, I've been trying to find for this for ages. I knew there was _something_ I'd read that gave a great step by step overview that I knew at the time would be helpful whilst teach beginners, but I couldn't remember what it was called or who wrote it, and it's nearly impossible to search for when the details of it were sketchy ("step by step web design tutorial"??). Just want to say thank you for writing this (and thank you to OP for posting the link)

optymizer 8y ago

Once the text goes to gray, it is objectively harder to read.

admax88q 8y ago

As the contrast keeps getting lower that page keeps getting harder to read. We don't all have super bright macbooks turned to full brightness.

avip 8y ago

This is a wonderful tutorial. I wish back worked though.

justusthane 8y ago
Agreed. I keep wanting to compare the differences between two steps.

craftyguy 8y ago

> I recommend "Web Design in 4 Minutes" from the CSS guru behind Bulma There's irony in the fact that this website is completely non-functional and no content is displayed when JS is disabled. You'd think a CSS guru would not rely on JS to display text.

buzzerbetrayed 8y ago
> You'd think a CSS guru would not rely on JS to display text The reason people love this website is because the content changes as you learn each concept. The way you "change" content in web development without reloading is through javascript. It is about as close to a perfect use case as you can find. There is nothing ironic about that.
vkaku 8y ago
I'm sure he could do that by navigating to a new page every time. But the tutorial is about styling one step at a time without getting distracted, and I think that is solid teaching.

ngold 8y ago

Looks promising for a Web Development quicky.

jeltz 8y ago

The text just becomes harder and harder to read the more it progresses.

Myrmornis 8y ago

That's really cool and will help me a lot with CSS I think. However, as others have mentioned, the change from black to a gray text color #555 makes things slightly worse and would be better if it were a darker gray. It does make one trust the article less.

sfusato 8y ago

Thanks for sharing this. * I clicked your link * closed the HN tab * was completely blown away by the article * "Reopen closed tab" and up-voted your comment

To1ne 8y ago

> What is the first thing you need to work on? Your hyperlinks need to work without Javascript.