HN Explorer

How to Polish CSS?

10 points by shivajikobardan ↗ HN
I've came to deep realization that CSS is the most important thing for building a website. It holds the key to becoming full stack developer or just a backend developer. It's everything in frontend.

Sooner or later, you'll need vanilla css. You can't depend on bootcrap or failwindcss. Your site looks like same if you do so. And many components aren't available there.

There are components like carousel, cards hover etc etc..How to polish all these skills?

Is there a course for it?

I try to practice it like randomly, but there are no tutorials. I'm not at a phase where I can read complex long code and decode it.

11 comments

[ 2.3 ms ] story [ 269 ms ] thread
nullish_signal
I make good use of my F12 button and Layout debugging in Chrome. Most browsers should have a debug mode, and then allow you to hover over CSS elements to select them. You can even edit CSS/ HTML on an a page to test edits. I'm fond of selecting a setting and then hitting arrow down to cycle through all options to see what they do.

w3schools.com has a lot of useful info and interactive thtorials.

chatGPT it also fairly knowledgable, but I've definitely been left in useless chat loops 2-3 times if chatGPT is outdated/not knowing something important is relevant. In those cases, formatting my chatGPT questions into Google-compatible (simpler) questions got me better answers.

culi
I think the future of components like carousels, tabs, etc is web components.

https://www.webcomponents.org/

In my experience, the only real way to practice CSS is to just use it. Start a bunch of projects. Keep track of any sites you come across that achieve good aesthetics or fun gimmicks. Get an idea for a site, preferably a static site so you can focus more on FE, and just start making these sites. I do this all the time and almost never finish my projects but always have fun making them and definitely improve on my HTML/CSS knowledge each time. Here's some examples of unfinished sites I've played with mostly just to experiment with styling:

https://dontplay.netlify.app/compost

https://ascii.dataviz.gallery/

https://dontplaywithculi.netlify.app/readlater

https://dontplaywithculi.netlify.app/partisanlean

https://culi.page/play/

Lastly, I'd say keep a close eye on accessibility. If you really wanna set yourself apart, the biggest impact you can have in setting yourself apart is learning to use a screen-reader, accounting for all different screen sizes/orientations, etc.

meitros
/ If you want to improve your skills with css then https://css-for-js.dev/ is a great course.

/ the above doesn’t help you in figuring out what you want to make something look like, only the ability to implement a design in css. If you want to be able to design different things or understand designs better (e.g. how/why do we choose to round corners), then https://shiftnudge.com/ is a terrific design course.

/ Will also throw out refactoring ui as a course to help developers understand design more, as opposed to shiftnudge which is full bore learn to design.

galgot
I starred at the tittle for 20sec, with my foggy mind trying to understand why translate CSS in Polish... must sleep.
qxmat
Modern frameworks rely on components and the shadow DOM. If you understand how these are implemented you'll go far.

One of the trickier things to grasp is where your CSS begins and ends. CSS is quite leaky here but there are ample style guides that illustrate pitfalls.

zerobrainwash
In my experience layouts is consistently the hardest and most important part of CSS. I’ve tried to master it and am pretty good but still struggle sometimes. So simply creating smaller prototypes to see how a certain layout should be implemented, and then applying it to the real app after, has done wonders. Then pretty visual side i.e. colors, fonts, etc. makes up for the rest but individually is not that hard. I just look up what’s needed in case I need a complex box-shadow, some fancy background, etc.
frankzander
I only try new things if i really need them ... nothing in advance because often it's useless because you forget it so quick. I also read about new features in CSS from time to time. So I remember what's possible with actual browsers. In new projects I try to incorporate new CSS features if they fit and if it's useful ( caniuse.com ). Becoming better in CSS is always exercise on real use cases. What you also can do is to solve others CSS problems. Maybe you know someone who has CSS as an arch enemy so you can say that he can call you if he has problems and you can try to solve his problems together.

This helps a lot with understanding and getting better.