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.

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)

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!

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.

You can see is doable looking at https://duckduckgo.com/?q=tailwindcss+timeline, but the real question is how to learn it.

Apart of the other comments, a good suggestion about this:

- Your MAIN goal is to build structure/layout first, then later visual flairs

This is the most key thing.

- Start from the inside and go outward.

So, if you are doing a form field, you start with the input, put the details (like an icon at the left), then the label, then layout both (putting the label on top for example), etc.

- Make your html editor format the HTML, and try to build a good hierarchy structure

So for example:

    <div class="flex">
      <div class="flex-none w-14 h-14">
        01
      </div>
      <div class="flex-initial w-32 ...">
        03
      </div>
    </div>

--

I will put my major focus in the things that in https://tailwindcss.com/docs are on "Layout", "Flexbox & Grid".

DO THE EXAMPLES YOURSELF, not just "read the tutorial", do it with your own hand and see how things change and flow. When you get how do layout the rest is far easier.

What you gonna do when the framework can't do what is needed?

Checking the web inspector tell you what is doing and rarely is surprising.

Here is a really good tutorial series I'd recommend working through: https://www.youtube.com/playlist?list=PL4cUxeGkcC9gZD-Tvwfod...

The most important thing is to just start building. There are a million technologies out there to build web applications, and just as many tutorials, so it's easy to get stuck trying to figure out what's best. Just pick something and go with it, the skills are very transferrable.

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.

Look on sites like codepen.io for inspiration.

I disagree that you need to learn react first. It doesn’t actually enable much in this case.

Then try out different approaches. As you get further along in CSS, the thought "huh that didn't work, what about..." will become quite familiar to you. After a while you'll build up a stable of tools: flexbox, grid, absolutely position a pseudo:after element, making use of calc for things like calc(50% - 4px), and so on.

CSS feels a lot like painting, there's different techniques depending on what you're putting on canvas. You're done with school, now time to study the masters.

[0]: https://github.com/simile-widgets [1]: http://www.simile-widgets.org/timeline/

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.

Did you even try Googling "html css timeline"? There are many tutorials/examples, e.g. https://www.w3schools.com/howto/howto_css_timeline.asp

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

Then learn the position attribute thru and thru: absolute and relative will help you with pixel perfect tweaks like the vertical line and circles.

Make sure you have a mental model of the layout algorithm. If you add absolute to a div, how will its height and with change? What is the size and position of a div or span when height is specified?