How makers stay productive

It is a really hard question to answer because these days there are different types of frontend developer and i'm unsure which type and skills you wish to learn.

If you want to create amazing UX/UI then i'd recommend to learn design before the frontend dev as that is much more important.

If it is just to be able to create interfaces that look nice and have ok UX then I'd recommend to look into any of the CSS/JS frameworks out there such as Bulma, bootstrap or one of the many others. Use their components and styles to remove the need for you to do any frontend work apart from structure the divs and add the right classes.

Then if you actually want to learn to be a good frontend developer there are two main paths. One is learning CSS and (fairly basic) JS such as jQuery etc. Here the focus is being amazing at creating responsive code that works and looks great across all resolutions.

The second would be more functional frontend development using tools like Vue.js or React. They are overkill if all you want to do is create nice frontends to websites but really come into their own when building custom applications or complicated interfaces. With these platforms you can then use styling frameworks such as Vuetify which work the same as CSS/JS frameworks to create the "look and feel" while you focus on the logic of building the interface/app.

I started with basic HTML and CSS and the transition to use Bootstrap was actually not as pleasant as other has explained it to be. I do not recommend starting with Boostrap or any other framework/libraries. Just HTML, CSS, JS.

I don't recommend starting with "being good at design" first either. It's important to understand the limits when you're coding vs when you're designing. Go to nice looking websites, ex: https://venturecost.com and look at the design & inspect the HTML code behind it.

Literally just steal anything you can, copy paste and change things around. With time you've memorized most of the syntax and you'll be able to code without having to copy paste (most of it) and THEN you'll be able to even create REALISTIC designs in Figma/Photoshop that you can convert into amazing web pages from scratch.

Once you know the basics it will be so much easier to transition into Bulma/Bootstrap etc. because even though you have the components you need, you'll for sure want to edit parts of it.

Also, CSS3 is powerful as frick. I stopped using Bootstrap after CSS Flex & Grid became fully supported, don't get fooled.

Sorry for asking something that maybe I can find some tips by Googling but I think here I can get a realtime answer. That sounds better.

You won't find a real answer there. ^^

Thomas and Jamie have already given excellent tips. I just want to expand that. Practice is the only thing that helps. How you start with practice is of course difficult at first. but if you think about it, it's quite simple.

What I can advise you to do is go to design pages and rebuild the prototypes. For example, muzli has a UI Interaction serie / newsletter (eq: https://medium.muz.li/ui-interactions-of-the-week-163-5ea0951cce1e)

Rebuild these. This is where you learn the most.

There are more Design pasges like Dribbble, Designer News, Invision Blog, Awwwards or Behance.

I started by editing full HTML template and now I'm using a UI Kit (Vuetify), don't waste your time trying to rebuild every component from scratch (select, input, etc), I did it and I regret. (too long for the result) I think the best way to learn is by copying an existing project you find inspiring and just try to rebuild it from scratch