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

You've built up a small repository of techniques, adding images/headers/etc, that can be combined to build something larger, a hero section.

Now that you're looking at a mockup of a timeline, you need to break it apart into various parts that you may or may not know how to implement. For example, I assume you could get the text, dates, and icons set up easily and may have trouble with the line on the side as OP mentioned - it's possible that this is something you haven't encountered before and finding a few examples of something similar can help. This is not uncommon early in the journey, you can ask around (I guess this counts) or try coming up with the right queries (vertical timeline css?) to search for to find some examples/info.

There are other comments with suggestions along the lines of "use a pre-made component" which I wouldn't fully support as it's a shortcut, but perhaps you could use it while also investigating how that that component implements what you were looking for.

Once you have some insight, try messing around with it on your own, this is where DevTools experience may come in handy.

Overall, the important thing is to not get discouraged!

And for my inital take that most likely won't work perfectly - circles by line of text suggest bullet points i.e ul/li elements decorated by css and the line can be achieved with a left border and some more css (I see the bullet is aligned in a different way which is why I assume it won't be perfect and the border is not too customizable)

You can build literally anything with CSS. It’s a very powerful language. To learn how to do it the only way really is to get your hands wet and try stuff. Inspect pages made by other people. Read through some courses.

To build the component you linked and basically any other component what you need to do is to look at it and visually decompose it to a bunch of primitives that you know how to do. In your example - you probably know how to place the text and icons on the right. The timeline on the left is basically a straight line (which can be drawn with a border property) and some circles on top of it (background color + border radius: 50% gives you a circle, add a border color and you have exactly what you want). Then all you’re left with is laying all these elements down, in this case I would use CSS Grid to align the dots with the text on the right properly, and relative positioning to align the colored circles in the correct place on the line.

CSS is good at what it does, but it is difficult to master. I can see where someone learning would really struggle because a lot of the techniques required to implement components aren't exactly intuitive. A lot of the advice people give reads like, OK, first, put the sandwich in the plastic bag, then assemble the fusion reactor and set it next to the refrigerator - here's a handy youtube video showing how I did it in 5 minutes! It's easy!

> Inspect pages made by other people. Read through some courses.

You are telling someone who clearly is doing exactly this to... do this.

Secondly, focus on the skill of decomposition: breaking down problems into smaller pieces.

For example, start by taking the easiest part of the timeline and reproducing it.

Then tackle the next hardest part.

When you are done, the only problem left is how to connect the parts. Take one connection at a time.

Also, its not cheating to use Google or Stack Overflow or ChatGPT etc. The same way as its not cheating for an accountant to use a calculator or spreadsheet.