Ask HN: Learning modern web design and CSS

194 points by themanr 8 years ago | 53 comments

So I've been mostly doing back end stuff for a few years. My ability to fix float issues in IE6 just isn't relevant any more. What's the best way to get an understanding of modern CSS and web design? Preferably simple approaches that don't involve horrible, huge, redundant class names or bloated, overbearing frameworks.

This is for a couple of personal projects. I may ultimately end up hiring designers but I want to know what I'm taking about and I'd want to be able to maintain their output.

bbx 8 years ago |

Web Design is easy! You can learn it in 4 minutes: http://jgthms.com/web-design-in-4-minutes/

More seriously, if you fancy some reading, I wrote a free HTML and CSS tutorial: http://marksheet.io/

Before you dive into specific frontend feature like Flexbox or Grid or even a full CSS framework, I believe you should first understand the basics of markup and styling, which are very simple but not easy.

Because otherwise, you will start using tools you don't fully understand, and will struggle extending or fixing your design.

After that, you can simply Google whatever style you want to implement, or problem you're facing, "just in time", and end up on CSS Tricks or Stack Overflow.

mattmanser 8 years ago | |

If he's talking about being able to fix float issues, he doesn't need to be told what an <img> tag is.

One of the frustrations with tutorials like yours is that it's assuming no knowledge, where I (and I assume he) has plenty of knowledge of HTML/CSS, it's just we don't have knowledge of modern css.

tootie 8 years ago | | |

Yeah, I'm in the same boat as OP. I thoroughly understand the tech stack and even the modern wave of npm build tools. Where I am completely lost is if you ask me to match a comp. Like what do I with Photoshop or Sketch and how do design CSS rules to make it real?

CM30 8 years ago | |

That first link is nice if you're creating a simple informational page about one topic, and it's part of a website without much in the way of a header, navigation, footer, or widget elements.

But as useful as that is at some level, that's not the problem most people struggling with design have. They struggle to make a full website where everything logically fits together and where the structure of the site makes it easy for people to navigate between pages. One which also looks nice and modern compared to large platforms like say, Facebook, Twitter, Medium, etc.

For example, I could design a simple page about a single topic easily enough, but I struggle trying to create a full platform with a flat design aesthetic (or what not).

existencebox 8 years ago | |

It's funny re: that "web design in 4 minutes" link; while the page got "prettier" over the course of the demo, I found it to get progressively less readable. I'll openly admit I have an astigmatism and have been having more and more trouble with pale/small letters, but I had no idea I had gone over the fold into things like high contrast mode being useful for me.

I'm curious as to if that's just my eyesight falling over as I get older, or trends in "modern design", as I still find the original text-on-canvas, 90's garage style of websites to be much more readable to me, as well as containing much less wasted whitespace.

RUG3Y 8 years ago | | |

We don't treat websites like documents anymore. Instead they're interfaces. The old document style is much more readable.

Lord_Zero 8 years ago | |

Do you have anything about the new flex or grid systems in some modern browsers like FF on marksheet.io/?

afarrell 8 years ago |

If you find yourself wanting to get a solid mental model of CSS, I highly recommend blocking out a few evenings to work through The Pedantic Guide to CSS [1] as if you are a university student studying the complexities of cellular metabolism. A Spaced Repetition app like Anki [2] is really helpful here. EDIT: I've found that for best effect, write flashcards that lead you to think through some reasoning about how a layout attribute works.

You might also find the games Flexbox Froggy[3] and Grid Garden[4] useful.

[1] http://book.mixu.net/css/

[2] https://apps.ankiweb.net/

[3] http://flexboxfroggy.com/

[4] http://cssgridgarden.com/

kraitis 8 years ago |

Work through this:

https://learn.shayhowe.com/html-css/

followed by this:

https://learn.shayhowe.com/advanced-html-css/

and you'll be good to go. The tutorial, while covering the essentials, is working towards creating this:

https://learn.shayhowe.com/practice/organizing-data-with-tab...

zichy 8 years ago |

Read this:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://css-tricks.com/snippets/css/complete-guide-grid/

baby 8 years ago | |

I was going to post the same. I think the learning has to be split in three components:

* CSS: learn how to use flexbox and grids, the rest will follow.

* HTML5: this is pretty straight forward to learn IMO, maybe someone has a good resource? (that does not talk about JS at all preferably)

* JS: This one is tricky, if you really want to learn more about JS it is its own big world. Two advice I would give: learn the latest JS version and use a transpiler. The most popular framework seems to be React, so learn how to use that.

franciscop 8 years ago | | |

http://html5doctor.com/ is a great resource for semantic HTML5

scottmf 8 years ago | | |

Simply use create-react-app and don’t worry about setting up Babel and Webpack

thinkMOAR 8 years ago | |

<3 css grid

It works quite nice, only some old browsers that don't support it properly. Still advised to check for grid support via css, but don't think this will be required for long.

https://caniuse.com/#search=grid

hacking-n-stuff 8 years ago |

I used Codecademy to learn HTML and CSS essentials. Once you have that down, you'll want to learn a responsive grid CSS framework like Bootstrap or Materialize. Then learn some basic javascript to make the page behave in cool ways (making elements appear/disappear, scroll and animate, etc). I recommend learning jQuery for that (a javascript library) but avoid any bloated frameworks like React or Angular when you're first starting out.

Once you understand those three foundational concepts (basic HTML/CSS, a CSS framework, basic javascript) try just building some websites from scratch or editing templates to make them look how you want. It'll be tough at first but you'll gradually get the hang of it!

arsalanb 8 years ago |

Build actual websites. Code a lot. Pick a website every week that fits your definition of "modern web design" and try to clone it. This will be exponentially better than joining an online course and reading/watching a video about building something.

Actual learning happens when you're applying knowledge, not merely ingesting it.

z3t4 8 years ago |

If you are not good at the CSS basics, then learn the CSS basics, for example where in the CSS file you should place something for it to override something else. Then read through the CSS spec. there are a lot of nice new features like border-radius, linear-gradient, box-sizing, and finally display: inline-block is now a standard feature! Then there are animations and SVG support! You can make a lot with just CSS now a days, no need for JavaScript. Speaking of JavaScript a lot of back-end stuff has now moved to the front-end. You can now have the database on the client side. And you can develop a web app like if it where an off-line native app, blurring the lines of what a "native" app is, as users doesn't have to notice a difference.

gexla 8 years ago |

Just like you learned the back-end stuff. Practice, practice, practice. Just as you went through multiple levels of understanding with the back-end, you'll do the same with the front-end.

Here's an idea. Do you do any sort of journaling? Maybe make a daily scratch-pad in HTML / CSS and just include whatever junk you happen to feel like throwing in there through the day. Think of it as web doodling. Screw around with different layouts, images, colors, emoji's and maybe even some actual doodles you put together in a graphics editor. Do this every day and you'll probably get pretty quick at making HTML / CSS changes.

The design part is another rabbit hole. Are you talking about making it look good? UI? UX? Probably the answer is more practice there also.

herbst 8 years ago |

I would suggest getting into Bootstrap and try to understand their paradigm. Many other CSS Frameworks work like that, and you should do your own in a similar way to keep it clean. Bootstrap will also help you makeing pretty things in a standard way fast, plus the examples and templates all come with the typical modern layouts.

weavie 8 years ago | |

Following the pareto principle, learning Bootstrap (or equivalent other framework) will let you design 80% of your site in 20% of the time..

singletoon 8 years ago |

A recent and very valuable resource for modern web design : https://internetingishard.com/html-and-css/

morgunkorn 8 years ago |

My first step would be to learn both the display: flex and display: grid syntaxes. They eliminate the need of 90% of the hacks of floats/clearfixes, and table layouts. For this you can get familiar with the overall possibilities with these games: - http://flexboxfroggy.com/ - http://www.flexboxdefense.com/ - http://cssgridgarden.com/

The next big bite to take is responsive web design, using Media Queries, which involves getting mostly rid of any fixed width and rely on %, calc() and modern units like vw and vh to size your content.

CSS Tricks has a great article to get started: https://css-tricks.com/css-media-queries/

Good luck to you on this new adventure!

hacker_9 8 years ago |

For my site [0] I found downloading a modern HTML5 template, and tweaking it as needed from user feedback, helped me learn a lot. Just using the dev tools and toggling CSS styles on and off helps a lot for intuitive understanding.

Also learning techniques when you need them helps with retaining knowledge. For example on desktop the features list alternates the image on the left and right per row, but for mobile when everything becomes one column I wanted the image to always be underneath the text. A few google searches later led me to the flex box which can easily reorder the cells by just changing the 'order' property. That's now a piece of modern CSS I can recall again for later use.

[0] http://www.waveform3d.com

teniutza 8 years ago |

I would recommend starting with [0]. It takes you on a progressive ride from "no layout" to "modern" layout (apart from "grid", but after learning the "classical" stuff, "grid" is not so complicated and there are a ton of resources around).

I would also suggest getting acquainted with specificity, early on. Other resources I can recommend are the Almanac[1] and the Snippets[2] from CSS Tricks.

[0] http://learnlayout.com

[1] https://css-tricks.com/almanac/

[2] https://css-tricks.com/snippets/css/

ezero 8 years ago |

I think http://bulma.io/documentation/overview/start/ might be what you are looking for. Flexbox based framework, clean class names, no JavaScript.

a_w 8 years ago | |

I would add Pure as well: https://purecss.io/

KGIII 8 years ago |

Covered previously:

https://news.ycombinator.com/item?id=11048409

The answers should still be salient.

I used to be able to say, "Right-click and read the source." I'm not sure that's realistic anymore.

fenwick67 8 years ago | |

For CSS you can still inspect elements with devtools, fortunately, and that will show you the style properties, even if the styles are set programmatically.

themanr 8 years ago | |

Thanks. That was two years ago. I wonder how much has changed since then?

blauditore 8 years ago | | |

I'd say not too much from a high perspective. Browser support for new HTML5/CSS3 specs got better, so it's safer to use stuff like flexboxes now. But resources for learning the basics from then should still be relevant, and potentially got updated anyway.

Regarding JS, there's an ongoing shift of hype between various front end frameworks like React, Angular or Vue. Others go back to vanilla JS, as it has better standardization and more power nowadays. But maybe that's not too relevant for you.

extra88 8 years ago | | |

CSS Grid is now available and constitutes a major change in how layout can (should) be done. Of course there should be fallbacks so older browsers can still get a page that can be used (not pixel perfect).

Writing JavaScript using newer ES5, ES6 features and transpiling it has become more common.

herbst 8 years ago | | |

This is pretty much the time Bootstrap 4 is in beta now. So not much has changed actually

thirdsun 8 years ago |

I like the Learn Enough tutorials and recommend them particularly for newcomers that like to find an introduction and overview to a topic. In this case the HTML and CSS / layout courses should be relevant:

- HTML: https://www.learnenough.com/html-tutorial

- CSS & Layout: https://www.learnenough.com/css-and-layout-tutorial

However the CSS tutorial doesn't include CSS Grid yet, which is pretty much essential these days and therefor requires further reading elsewhere. CSS Grid is a major milestone for layout on the web. Don't miss it.

Additionally another important aspect that is often overlooked: Naming things in CSS. Since you're working with a global namespace it's important to find a sane naming system. I recommend BEM, which is easy to grasp: https://csswizardry.com/2013/01/mindbemding-getting-your-hea...

mattbee 8 years ago |

http://www.htmlandcssbook.com/ taught me the groundwork despite its age. Lea Verou's CSS Secrets is a great book to pair it with - will show you lots of avenues of CSS and layout ideas that you'd never have found on your own. You probably also need some reference on Flexbox & Grid but depends how far you want to go!

teniutza 8 years ago | |

CSS Secrets is wonderful but I wouldn't consider recommending it for learning CSS as it assumes at least a solid base. What I do believe someone new to CSS or currently learning would find useful is the overall approach. Until reading it, I did not really take any interest in being DRY with my CSS.

tudorw 8 years ago |

You could start by reading the specifications to get up to speed on the scope of contemporary HTML, not quite sure where you are coming from technically so if it sounds condescending just fill me in with where you stand now ;)

https://www.w3.org/standards/techs/html#w3c_all

steindavidb 8 years ago | |

Going straight to the spec is really great for HTML/CSS. Also worth looking at the CSS snapshot from w3 https://www.w3.org/TR/css-2017/

thehoneybadger 8 years ago |

Do the same thing you might do when browsing open source code on github. Go to websites of well known companies or by people that provide web design services, view source, look at a feature that doesn't make sense at first, and then search on Google or Mozilla Developer Network or Stackoverflow for more details, and then write a practice page in a basic text editor.

As far as design, you cannot go wrong with bootstrap. However, to really learn design, do not study web design. Study things like Bahaus, billboard design, marketing and messaging and PR, how to compose for simplicity, SEO optimization techniques and their influence on design, etc. Seriously, the people that learn how to make websites and want to tell you how to make websites absolutely and hilariously SUCK at design.

a_w 8 years ago |

"Learn Enough CSS & Layout to Be Dangerous" by Lee Donahoe and Michael Hartl

https://www.learnenough.com/css-and-layout-tutorial/

have_faith 8 years ago |

On the CSS side you'll want to learn Flexbox, Sass, Auto-prefixer (life saver), and maybe something like BEM naming conventions for "regular" websites. There are CSS-in-JS options if you're building large web apps with something like React or Angular but it's still up for debate if this approach is better.

On the design side it's difficult to know what to recommend. I would learn simple UI/UX principles. Lots of designers use either Sketch or Adobe Experience Design as opposed to something like photoshop these days. Makes for much quicker prototyping of designs.

amirouche 8 years ago | |

I tried sass on rather big project where several people contribute to it. It seems like Sass doesn't help keep the code clean. A scheme like css-architecture [1] or oocss is required to keep the css code manageable.

[1] https://github.com/jareware/css-architecture

larzang 8 years ago | | |

Sure, SASS is just a power-tool, it still requires a sane architecture.

CSS of any flavor should be modular and semantic, it's just that SASS gives you a big leg up once you're comfortable with those concepts. It's still on you not to shoot your leg off with criss-crossing @extends and deeply nested selectors and and snowflake components.

jmkni 8 years ago |

Pluralsight has a new feature called Paths which I think is pretty good, I would recommend working through their HTML5 path - https://www.pluralsight.com/paths/html5

ollerac 8 years ago |

Pick a few CSS frameworks, say Bootstrap, MDL web components, and Bulma.

Choose 5 components from each that you want to learn how to build.

Look at the source code with the goal of understanding how they're accomplishing what they're accomplishing.

Try to build a project from scratch, without a framework.

fahimulhaq 8 years ago |

Take a look at The (Complete) Practical Introduction to CSS

(https://www.educative.io/collection/5191711974227968/5641332...)

melenaos 8 years ago |

Read lea verou book 'css secrets' it's an awesome book for every web developer. http://lea.verou.me/writing/

Rakeshcetcse15 8 years ago |

i want a help for my project. suppose in indeed.com search bar we will put java,it will so us no of java related job... i need to fetch them and want to store in excel..in different row.. how to do this any idea?? what script can i use except python..

Lordarminius 8 years ago |

CSS: The Missing Manual by David McFarland will get you a long way.

newsmania 8 years ago |

Google “flexbox”. That is the single biggest new thing replacing floats in css. You’ll also want to make sure you understand css transitions (they are very simple).