How do people make successful CSS codes?

Question

When I go on the SoloLearn coding section some of the trending codes I see are inputs, forms, divs, tables wrapped in a slick UI (User Interface) with everything looking just so perfect.

I'm just wondering how people do this. How long does it take to get good at CSS? I have a degree in Computer Science and Maths and quite frankly, CSS and presentation is not my strong point, solving problems is.

Is there a sort of "CSS builder/maker program" online that people use to build these cool User Interfaces. Or do they take something from online and use it? Because it takes me hours just to build something half as good as what they have.

Answer 1

Thanks for tagging. Yes you are right. There are several tricks for responsive design. Here is my first tutorial (for another Q&A) :
https://code.sololearn.com/W3gS00IGw160/?ref=app

I'll code a second tutorial using display flex and display grid. I'll be back.

Answer 2

A good friend of mine had made this
It is more general than just limited to COTDs.
And not only CSS…

https://code.sololearn.com/WSi2Ukzbtb5b/?ref=app

--------------
Some people have insane talent. They just need some exposure. Some people make codes with experience.

In reality you will need both. And you saying cool interfaces, it's not that difficult you might think.

Try making some codes and listen to other's comments.

It is obvious that there would be some weak point for every person. You can accept that and adapt your work(not practical everytime)
You have to know some CSS, and you wanting to be good in CSS makes you can do it.

My advise:
See others codes.
Make some code solely focus on good design.
(This can be used on your upcoming projects)
Optional : use bootstrap(I'm not suggesting my favourite foundation for starting. Giants use it)
Optional : take course (free) that looks impressive to you

Continued…

Answer 3

Thanks for replying so fast! Read that before! Its awesome! But for me there's lots trial and error involved.

Is there some sort of website out there that just builds a responsive UI for people? And is that possibly what the top UI devs on here use?

Answer 4

I see! Thanks!

Answer 5

Thanks for the reply Emoji FanBoy. I've seen Andrew's code before, I'm not exactly looking to make a COTD. Just looking to make my code look nicer and more presentable.

Answer 6

I miss Domino 😢 okay not that much 😂 but she made good responsive codes. I assumed she had years of practice. But she made the codes in like record time whereas it takes ages for me to fix just a few things

Answer 7

Theres a lot 😂 it just irritated me as I was thinking I could just do it in html5 canvas within 25% of the time it took to do it in css

Answer 8

I think a lot of experience/practice is involved. I also think that some people are just more artistic than others and that visual design is not for everyone.

Answer 9

Oh you answered my question with your second post thanks!

Answer 10

Anyone?

Gordon ? 😊

Answer 11

Sort of "CSS builder/maker program"
Yeah, there are many websites which give you non copyrighted interface for your code. Or YouTube videos making that…
But it isn't normally used in SL codes I see.

If you don't have time, you can use such. Like you want to be backend dev or programmer😃

But one thing good presentation skill can help you many times. Even outside of codes…

Answer 12

Breaking it down, the first UI assignment is:

1. Center one container in the middle of page, for any browser of any screen size.

2. Set font family (Google font)

3. A small font size with appropriate padding.

Answer 13

Yeah, fonts - I'd it in mind but forgot to write.
Select sensible fonts relevant to theme of the code.
See some of them https://code.sololearn.com/WoWOeAlUpmQ9/?ref=app

Anyway, Gordon is everyone's able savior… 😋

Answer 14

Hmm... CSS framework like Bootstrap does responsive design. And frontend developers use framework to speed up their work.

Though I have read in one of Morpheus code that good developers can write their own bootstrap-equivalent framework.

Answer 15

Based on your first reply to emoji FanBoy, if you are going to make your functional webpage looks nicer, you can begin with something like this:

https://code.sololearn.com/W4BLkAy6eqwh/?ref=app

My reference is in my reply to Arushi's comment, and again, it's a Domino's code, of course.

Answer 16

😂

I miss quite much😢

I seemed to find the "few things" that you wanted to fix. Let's see if I can do something with it.