You did a good job but there are things you should take into consideration:
learn to write a css reset code.
don't use brut values for margin and position to place your elements, you'll cancel the default responsiveness of your website, instead use grid or flex displays.
Congrats on completing this challenge, here are things you can improve:
never use px for font-size, instead use rem.
any website is responsive by default, but when we set a value to the width of elements, that responsiveness will be affected, I saw in your code that you gave a value to the width of your elements, if you want for an element to have a proper size, give it a max-width.
you used a flex display, that's good, use all of its properties to organize the space between your elements like gap, don't use padding and margin everywhere, that's bad practice and it will cause problems
in your html try using proper tags other than div, for the card content you could use the article tag for exemple
Overall you did a great job, keep going 😁
I noticed that the font is not the same, when looked into your code, it turned out you forgot to put a ; at the end of the src in your @font-face.
You don't have to give a class name to every tag, in CSS you can select the tag itself.
there are 2 font-family in this project : 'outfit' and 'youngSerif'. You can add another @font-face for the 'outfit' font.
But overall, you did a good job!
Hi, congrats on completing this project! It looks good.
I took a look at your code, it's well written, but here are some things you can do better:
Always use rem for font-size never px.
To make a good CSS reset, I invite you to check Josh Comeau CSS Reset, It was very useful for me.
You should set a min-height : 100vh; for the body, so that it can use all the frame height.
In the HTML, I think it would be better to contain the elements in a div or more, because using values for the margin and padding to center elements is a bad practice. Check out Anamol Soman article to have a better understanding on how to do it.
I hope this feedback will be helpful for you in the upcoming challenges, keep it up 😁
Congrats on completing this project! At first glance, it seems you didn't see the design guide provided in the project folder, I invite you to take a look at it to better understand the requirements, I also took a look at your code, you should know that the attribution shouldn't be in the card (you can also take it off your website if you want), I invite you to check Josh Comeau for CSS reset, there is no need for the id; you can use other tags like h for the first p, using values for the padding and margin can be chaotic at some point, try flex box or grid and let the browser center elements for you If you have questions I'll be happy to help !
Congratulations on completing this project! Your code is good but you should fox a width and height for the panel, set max value to them and with flex box the browser will set the right dimensions.
What are you most proud of, and what would you do differently next time?
I'm really proud of making this challenge without @media (…){…}. I think It will really help me to build better website in the futur. This is a great new way of thinking.
What challenges did you encounter, and how did you overcome them?
I didn't know about the child size when you use flex-direction:column;. Tanks @gmagnenat for the help about this specific part.
What specific areas of your project would you like help with?
I need to try to use more fluid properties like min-width or min-height and also value en fonction like clamp(…). If you know some good read about it…
Great work, I noticed that in the CSS reset there are elements that don't exist in the HTML code, you may want to delete them, other than that the code is clean and well written.
What are you most proud of, and what would you do differently next time?
I think I did it pretty well. I didn't take so long to center it, lol..
Maybe next time I should use another file to write css.
What challenges did you encounter, and how did you overcome them?
For responsive, it was a little difficult for me to figure out the breakpoint. I did it just as I wanted. And I am not satisfied with that.
What specific areas of your project would you like help with?
How many breakpoint do I need for real life website? What should I do or learn to make the website more responsive? I am still the beginner and hope you could guide me.
And any other advices are also warmly welcome>>
Congrats on completing your first project, the code looks good, but I think you should take a look at the design guide provided in the project folder to come up with an output closer to the design output, also try to better center the card