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