3 ms·

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

by hinoki 4y ago

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.

thdc 4y ago
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)

by hinoki 4y ago

thdc 4y ago

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)