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

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.

Definitely this;

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)

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!

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.

And stay away from this frameworks like Bootstrap or Tailwind because with that you only learn to build something fast but you do not know how it works. But you can use this frameworks for studying how something can be done.

I highly recommend to use https://tailwindcss.com/, because it has a very small abstraction layer so is easier to understand. And it means you work only need a single .html file with everything you want so near zero context-switch.

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>

You wanna see at the code and have 100% clear what is the order of things. Also make spaces that separate components, so is easier to see when something end/start.

--

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.

Would have thought starting with vanilla anything is the way to learn new languages before working with frameworks.

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

Sure, but in the case of tailwind is so a tiny of a layer on top that is not bad to use it.

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

If you want to learn how to build websites, start with React and a component library like mui.com or chakra-ui.com. These give you the building blocks to build complex layouts and you'll naturally pick up CSS details as you go.

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.

> The scary thing here is that if I can't build these stuffs then there is 0 point of me learning css.

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.

> 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.

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.

The timeline you linked can be learnt fairly quickly. You just need to learn how to ask google, or even chatgpt, for what you want. Can you describe the thing you want? If so you’ll find enough along the way to build it.

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.

Hey I literally just built one of these! Web Inspector is going to be your friend moving forward. Find a major site that's built one, inspect the code, and learn how the pros do it (top tip: not all pros do it right, so find multiple examples).

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.

The first thing I thought of was the old simile widgets[0]. There is still a timeline demo online[1]. I think they're fascinating, but they are a bit of a challenge (for me at least) to understand how they work - I don't know JavaScript very well and that's what makes them work. Still, they're cool. Note that the timeline demo doesn't work over https, only over an http link. Good luck.

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

Number one, realize that CSS is challenging. And this task with the lines and circles on the left is not a normal CSS task. Some people might even decide to do it a different way with JavaScript or SVG or something.

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.

You're asking to jump straight from basic HTML/CSS to advanced. That's not a reasonable assumption. Instead, you'll have to invest the time to make incremental progress from where you are. Fortunately you can do that by studying other people's code.

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

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.

I took a few courses from Lynda.com to learn more css. It helped immensely and was free with my library card.

I think the key to building components like this id learning a few key tools in CSS. The first is Flexbox. Take a look at CSS Tricks' guide. You will give you the structure.

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?

what was the course name?

hey just saw this, sorry - I think I watched the most recent full course for CSS and then the 2 or 3 hour course on flexbox. As well I watched the start of a few courses on website design.

This isn’t stack overflow.

Tailwind is way to go.

Atomic CSS solves many problems though that also means you learn.

Atomic CSS at least ties code and visuals together ... not a good idea IMHO

Not enough tailwind