Web Design in 4 minutes

I often see people on here struggling with layouts and the general design of their projects. This resource helped me so much when starting out and thought it could be useful to people here.


Just read along with it and click the links at the end of each section to see the page transform before you. Each change is explained clearly and not just how it’s done but why it should be done.

I still refer back to this almost a year after having it shown to me. Hopefully it’ll help some people here too.

Edit: Don’t feel obliged to buy the book at the end, FCC will teach you more than enough CSS :smiley:


This is awesome! I am only on the centering section and already i’ve improved my current project! Thanks so much!
Would you know how the author picked 50em as his paragraph’s max width? (Is there any calculation involved?)

His other courses are also great.

Ideal line length for ease of reading is normally about 50-75 characters per line, so 50em is a little bit wider than the max advised (given an em is approximately the width of the “m” character in the font being used) but it’s a fairly sensible width. There are calculators for this online, but because it’s dependent on the font used it’s a trial-and-error process; not watched the video, but sounds like the author has picked a round number close to an idealised width.

thanks very much for this response! All very interesting!