Looking for HTML/css tutorial which shows how to make a nice site

May 15, 2022 3:41 AM

Asking for a friend, though I'll be wanting this sooner than later. We have a solid understanding of basic HTML/css, but have no real idea how to make a nice looking website using them. Looking for resources to help bridge the gap. For example, it'd be really cool to have an explainer where someone builds a nice website from scratch and explains all of the steps/decisions involved...or even just takes an existing website and explains the specifics of what goes into it.

That's about the extend of it. A friend of mine is struggling to go from understanding basic HTML/css to knowing how to make an actual nice looking website using it. I realize that people make their careers doing this, but this person is looking to become a more sophisticated programmer and is willing to invest time in this, so if there are multiple relevant resources to help build up the necessary skills, that is of course fine. While my friend has the idea of a site that explains how it achieves what it achieves, we are open to any resources that you think can help bridge the gap between being able to do basic HTML/css and being able to use them with more intentionality to create nice looking websites.

posted by wooh to Technology (7 answers total)

It's somewhat uncommon these days to find websites that are designed with the readability of their HTML/CSS in mind. Here's one example that has that goal at least somewhat.

I think in general, the answers will depend on what kind of website you want to build — if you have a specific goal, I could probably recommend a website to copy a bit from, but there are a ton of different kinds of websites.

There are maybe two main things to focus on: layout, and visuals. Layout tends to be one of the more difficult and confusing things, since the web does not have very good tools for it.

Getting a good understanding of flexbox would probably be helpful — that's one of the most powerful layout tools available right now. CSS-Tricks has a good reference for it, and Flexbox Froggy might be good as well.

CSS Grid is another tool, Grid by Example has lots of good examples.

CSS Zen Garden is sort of old at this point, but probably still useful. It's the same HTML with a bunch of difference CSS stylesheets to make it look very different.

bettermotherfuckingwebsite.com shows that you don't need much CSS to make a nice and simple website.

My experience has been that just jumping in and trying to build something is generally more productive than spending a lot of time with less-interactive resources — I'm curious if your friend has been trying to do that and running into obstacles/problems they can't solve, or if they're just unsure about taking the leap from what they know currently to trying to make a whole website? In particular, I'd give pretty different advice if the problem is not being able to translate ideas into code, vs if the problem is being unsure what they want the site to look like in the first place (it can be helpful to sketch out on paper what you want the site to look like, before you start designing it on the computer)
posted by wesleyac at 4:48 AM on May 15, 2022 [3 favorites]

I think it's good to get exposed to a front-end framework like Bootstrap. It's everywhere on the internet; it involves pre-styled elements that are also heavily customizeable; and there are a jillion templates that you can look at to get a sense of how nice-looking webpages are put together.
posted by entropone at 5:12 AM on May 15, 2022 [2 favorites]

I think you and your friend have to define "nice looking website" first. I'm an unfrozen caveman, so I personally like minimalist sites. I use the "classic" setting on this website, for instance, because I like to see a lot of text all at once. But other people think, oh god, Twitter or Reddit are nice looking. What do you like?

In caveman times, you could find a site you liked and View Source to see how it was made. Don't try this on Twitter or Reddit! But (say) you could look at that bettermotherfuckingwebsite.com site and make sure you understand everything in it. Heck, you can View Source on Metafilter and actually figure it out.
posted by zompist at 5:28 AM on May 15, 2022 [1 favorite]

Shay Howe.
posted by kevinbelt at 5:35 AM on May 15, 2022 [1 favorite]

HTML and CSS by Jon Duckett covers the basics with an eye towards nice design. It’s older but I think the content is still relevant.
posted by firefleet at 5:59 AM on May 15, 2022 [1 favorite]

To me this is two questions: how do you design a good website, and how do you make that design using HTML and CSS.

They’re related skills, and you can be good (or bad!) at both. Or only one of them. You can be brilliant at the coding side but not understand the basics of design. Or brilliant at design but not know how to code it. Good web designers or front-end developers will usually have a strength in one but have an understanding of the other too. A rare few people will be good at both.

This previous Ask has some good pointers for books etc about the basics of design, which sounds like it would be useful for that side of things.
posted by fabius at 6:02 AM on May 16, 2022

There were some great answers to a similar question I asked last year: Basic, practical web design guides and tutorials. For me, the recommendation of How to Make Your Site Look Half-Decent in Half an Hour was especially helpful.
posted by kristi at 8:05 PM on May 17, 2022