Tough time building components of a site using vanilla CSS. What to do?

By now, I'm done with basics html,css,bootstrap coding. I can build navbar, build a hero section with image and h1 text and a footer. That's all. There are various components in a website though. I'd like to be able to build any of them whenever required if I'm in a job. I wanted to build a timeline using html and css but it's not entering my head at all. I've seen codes from multiple websites. https://imgur.com/a/L7c1Bkj

This is the timeline that I want to build. Looks pretty simple but I'm unable to build it. How do I deal with stuffs like this? How do I learn these stuffs? Is there a course that helps to deal with these stuffs? There's no point of having learn CSS if I can't build these stuffs with my visualization. Please guide me. The scary thing here is that if I can't build these stuffs then there is 0 point of me learning css. And I'm not going to get any full stack or frontend jobs like that way.

For someone of your experience, I would go to a site like Codepen and search for something you would like to build. Then I would find an example using the same tools you want to use. I would mess around and break that example until you figure out what does what. Then open a fresh pen and try to rebuild it the way you want. Rebuild: not copy.

I used Codepen as the best site because it’s very beginner and frontend friendly.

Try Josh Comeau's course: https://css-for-js.dev/

Most CSS courses just regurgitate what the various properties do. Josh does a little of that but spends most of his time showing you various patterns of use, illustrating and correcting many of the gotcha's that exist and giving you confidence that goes beyond the basics. And besides, it's fun!

Have you tried learning hours to use dev tools? I would look at the original web page source computed styles; override them and see how it breaks.

I assume the red line with circles is the hard part? Maybe each element on the timeline has a really long vertical line with circle that’s ‘overflow: hidden;’

Maybe it’s done with JS?

The best way to learn is to take apart existing examples. And dev tools is the easiest way to do that.

For this timeline there are for me at least 2 easy ways ... each point is relative and got before and after elements and both positioned absolute (one becomes the dot - the other the line).

You have to think through what you need and how you can reach your goal with at least effort as possible (in this case with virtual elements). If more complex graphics should be painted you have to think about alternatives like SVG. You always should ask yourself "how can I paint this or that" Learning CSS is IMHO something which takes a while. This means that you should look at how others did something. Than you some day got a gut feeling how something should be done so and so. There is no golden path in CSS mastery other than exercise exercise exercise and look and the ideas of others and copy them. CSS is hard but cool and many people hate it but if you know what to do CSS is a great tool.