Three Card Component

Think I finally got this one down besides the text…not sure what exact text they were using. However, the layout and responsiveness seem to match. I am actually happy with this as designing and matching colors are not my strong point. I used flexbox for this, but I am going to try and redo it with normal CSS to try and strengthen my understanding. Eventually I want to add some button animation when its clicked. If anyone has any other ideas of how I could improve on this I would appreciate it.

My pen: https://codepen.io/cb_web/full/dyVYMxb

And the Challenge its supposed to match:

Just want to clarify that flexbox is “normal CSS”. In fact, I’d say it’s “essential CSS”. If you understand how to use flexbox then you already have a strong understanding of CSS layout options. If you wanted to broaden your understanding then you could switch to CSS grid.

Look in the style guide that is included with the zip for this project, it tells you exactly what font/weight they used.

1 Like

I actually noticed the text in there a few minutes ago. Made the changes to my visual studio code, just need to change the pen code because I will be making more changes to that. I would not say that I have a strong understanding of CSS exactly. I actually started another challenge, and I want to complete it without flexbox. Im already having problems getting two divs on the same line as inline-block does not seem to work. So I will be researching for a while.

There is no reason not to use flexbox or grid. To be honest, you aren’t doing yourself any favors by trying to use “old school” layout methods to accomplish what flexbox/grid can easily do. Chances are you will eventually find yourself using floats or layout tables, which you should almost never use in a professional setting, so you aren’t gaining any valuable skills by going there.

Flexbox/Grid were revolutionary for a reason. Trust me, nobody wants to go back to the days before them. Embrace these methods and become an expert in them. It will only help your career.

1 Like

I see, and I guess that is one of my issues I am having. I dont have any professional experience or seen what goes on in a professional setting. In my head, I think I need to cover every possible route. What if I get asked to do something without using flexbox or CSS grid is a question that plays in my head in some form of the question or another.

I had to put everything on hold for three years due to illness, and now that I am getting close to finishing college I guess I am just worried that I will have to do something that I dont know. If that makes sense