I’ve started learning HTML, CSS and JS from FCC course and started doing sample projects.
Frankly I'm finding CSS hard to grasp as to do single thing there are minimum 100+ ways.
Also there are ready made solutions available on https://freefrontend.com/,https://codepen.io/
My question are as below
how much I should learn CSS if there are so many ready made code available ? Shouldn’t I put majority of my time and efforts learning JS and related frameworks instead ?
In real world isn’t designer suppose to give HTML and CSS to the developers ?
CSS is ugly annoying, no doubt about it. But if you’re a front-end developer, you have to learn it. Not every single nook and cranny, which is practically impossible, but at least the basics of visual styling, the box model, specificity and cascading, how block and inline elements work, and perhaps the most common layouts of flexbox.
In smaller shops, you are both developer and designer. When I design a new UI, I’m quite blunt that I’m no designer and that the CSS will need some attention from one, but my colleagues do expect at least something to work from – they have their own tasks to do too.
Yes, you can rely only on code other people have written, only if you want to remain in the bottom tier of wordpress theme designers forever. It’s crap pay and zero respect. If you prefer to focus on code like JS (I certainly do) then primarily using third party libraries is just fine, but you still have to know enough to find your way around the DOM inspector in the dev tools if and when something goes wrong.
So much that you are able to solve the company’s/client’s problems.
This depends on the company or the client, so:
sometimes you are allowed to use a full component framework (e.g. Bootstrap) with ready-made components
sometimes you are allowed to use a CSS toolkit (e.g. TailwindCSS)
sometimes you have to write all CSS manually.
Depends on the company/client. There are designers who give you the “screen/view” and you have to translate this into code, sometimes the designer already translated it for you.
Just to give you a sense of what I’ve been working on recently at work:
We have a platform built with React and Ant Design (a CSS framework).
The Ant styling has been pretty heavily augmented with custom styles.
Just last week our designer (no CSS or HTML skills at all) gave me 3 mock ups (jpgs, produced in Adobe Illustrator) for a complete UI redesign.
So my current task is figuring out how to reskin everything with this new vision, without throwing Ant away (we rely heavily on the functionality of their components) and by overriding / removing previous custom styles.
It requires a lot of careful consideration of the existing CSS and a pretty solid understanding of the cascade.
I don’t really consider myself a CSS whizz by any means, but grappling with the curly parts of CSS is just part of the job.
My opinion is to use float for images when text should flow around them or drop caps.
Use positioning when you need something stuck to a spot on the page or when things need to line up in relation to each other like different levels of a big menu or when you need a z-index.
For the rest I mentally divide the page up into a few big blocks and separate them mostly with margin and padding. Then do that inside each big blog with the little pieces. Sometimes I need a css grid framework.
Now that I’ve embraced flex-box I use the grid systems less and keep the flex-box to simple sub-division like I described above.
For example, the header at the top of this page is three big blocks. Flex-box defaults to row so you can skip specifying the direction. It’s either space-around or space-between to get the horizontal spacing seen here and align-items center for the vertical. Then you can make the navigation block a flex row container to space the links or use padding and margin if that’s more comfortable. The nice thing about flex-box is it’s just for the immediate children no grandchildren or great grandchildren.
These are the broad brush-strokes to get a lot done. Obviously if you need a font or a color you learn that. I like hexadecimal for color but if I have to use rgba then there’s an online converter or browser extension to help. If I need shadows there are generators just a Google away and I can experiment to get different looks.
Pretty soon you’ll know the settings you prefer. There’s also good css-tricks articles for shadow effects like text outlines or fake 3-d fonts.
Just relax and do more projects or different versions of the same one but with different techniques. Whatever you want to conquer next.
I love CSS! So, I’m not much help, but try watching random youtube tutorials for CSS projects and work with them to help you understand what you’re doing. Use codepen so you can easily see your work as you go.
That’s what I used to easily learn CSS. In the beginning, I had nooo idea what I was doing. The more you use it, the easier it becomes. And the easier it is to grasp it.
I don’t know if this answers any of your questions, but good luck!
@codeofdreams , @tlc35us thanks a ton for your useful suggestions. I think I was rushing a bit and feeling frustrated, but forgot old saying slow & steady wins the race.
This is a bit late but here are my 3 cents. You need to learn vanilla CSS before diving into frameworks (like Bootstrap or other ways of doing CSS like SCSS). This will help you termendously when working with frameworks because without the basic knowledge, you might find frameworks confusing or not understand why certain classes behave the way they do and how to customize them for your own use.