Modern UI implementation in CSS

[msojka]

Hello,

could anybody point to some good resources for learning how to implement modern interfaces like this one for example: https://dribbble.com/shots/2359374-Mail-client-app/attachments/452120 (mostly based on cards, using animations and transitions).

I mean in CSS, not JS layer. I spent last years more on backend and full stack development not pure modern front-ends and when I see these modern mockups I scratch my head where to start. Everything is moving so fast :)

I know bootstrap, semantic-ui etc. but these interfaces need more.

Any tips for tutorials, books or even udemy or pluralsight courses would be appreciated.

Thanks.
Martin

[mhodges44]

Pluralsight is typically my go-to, namely because my work pays for my subscription and the amount of quality content is endless.

http://uxmovement.com/
is also great for learning not only the “what”s of great UX design, but also the “why”s. Some content is better than others on that site, but there are some interesting articles and comments that will lead you in the right direction.

For bootstrap help, I’d check out bootsnip.com. They have tons of pre-built bootstrap widgets, menus, layouts, etc. that use the bootstrap library, so they are very plug and play right out of the box.

Browsing codepen.io’s top and picked pens is a great way to see beautiful ux/ui design in action and the code behind it.

Ultimately, great UI design just comes out of practice. I would suggest doing a week-long, or even 30 day challenge on codepen to push the boundaries of what you can accomplish. Really have no agenda in mind other than to try your best and see what you can learn and what you can make out of it. That experience and practice is invaluable, in my opinion. Most importantly, don’t forget to have fun with it! Try to design something YOU would be pleased to use.

[priya verma]

I am agree with you, I used to runaway from CSS work and moreover i used to assign my all CSS related work to my co-worker in office. Few months back i realized that i was wrong! without CSS a developer is incomplete. now i started practicing CSS more often and i am finding it so interesting though.
But still jQuery sucks man could you suggest me some links for that Thanks!

Priya

[Shikkediel]

Pretty sure you only responded to drop a silly link.

[Paulie_D]

Mod hammered the link. :)

[Shikkediel]

Cheerio on that! On topic, I can’t see how a UI could ultimately be accomplished without any JS. All the “modern” stuff is likely just CSS transitions and animations, probably the area where jQuery isn’t really needed anymore. But for most user interactions I would think it’s still indispensable.

[Author]

Posts