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.
Ask HN: Learning modern web design and CSS
21–30 of 56 posts
Re: Ask HN: Learning modern web design and CSS
#22For 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.
Re: Ask HN: Learning modern web design and CSS
#23On 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. [1] https://github.com/jareware/css-architecture
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.
Re: Ask HN: Learning modern web design and CSS
#24Web 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.
Re: Ask HN: Learning modern web design and CSS
#25I 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!
Re: Ask HN: Learning modern web design and CSS
#26http://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!
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.
Re: Ask HN: Learning modern web design and CSS
#27"Learn Enough CSS & Layout to Be Dangerous" by Lee Donahoe and Michael Hartl
Re: Ask HN: Learning modern web design and CSS
#28Web 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…
If he's talking about being able to fix float issues, he doesn't need to be told what an 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.
Re: Ask HN: Learning modern web design and CSS
#29I 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.
Re: Ask HN: Learning modern web design and CSS
#30I 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.
Following the pareto principle, learning Bootstrap (or equivalent other framework) will let you design 80% of your site in 20% of the time..