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 ;)
Ask HN: Learning modern web design and CSS
11–20 of 56 posts
Re: Ask HN: Learning modern web design and CSS
#12On 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.
Re: Ask HN: Learning modern web design and CSS
#13I think http://bulma.io/documentation/overview/start/ might be what you are looking for. Flexbox based framework, clean class names, no JavaScript.
Re: Ask HN: Learning modern web design and CSS
#14Just 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.
Re: Ask HN: Learning modern web design and CSS
#15On 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 desi…
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.
Re: Ask HN: Learning modern web design and CSS
#16Covered 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.
Thanks. That was two years ago. I wonder how much has changed since then?
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.
Re: Ask HN: Learning modern web design and CSS
#17My 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!
Re: Ask HN: Learning modern web design and CSS
#18http://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!
Re: Ask HN: Learning modern web design and CSS
#19Read this: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/complete-guide-grid/
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.
Re: Ask HN: Learning modern web design and CSS
#20If 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.