I employed flexbox in the desktop layout to ensure that the "Learn More" buttons would not be pushed out of horizontal alignment by the paragraph text. I am curious as to whether there are other ways, better ways, to solve this issue?
Nice work on submitting this challenge, Glen.
The html file has a "class" element that has been highlighted in the above report, but I think this was a typing error and it should be a "div" element?
Check-out this pen (https://codepen.io/will-1-am-the-Iceman/pen/gOgBrVP) for a suggestion on how to center everything horizontally and vertically - you can see the html and css and test til your heart's content.
The background-color set on ".btn" should be very-light-grey and not white as stated in the spec, but to be fair is very difficult to discern - I also got caught out on this one. 😅
I really like the idea that the buttons don't loose their alignment with one another. As very small viewport width the button text does wrap to additional lines and this can be resolved by applying a min-width on the cards container.
I hope this helps. Happy coding!
please give feedback.
Hey Kiran, nice work on submitting this challenge project.
You might consider using before and after pseudo elements to position the background images properly. It is definitely a bit tricky so check-out this pen (https://codepen.io/will-1-am-the-Iceman/pen/jOydXYZ?editors=1100) for an example that you can test. This will enable you to use a more declarative approach to the layout - eg specify the top left for the position of your background asset.
Consider using other element types in place of the h2 elements for the stats section. A heading really only makes sense if it has child content, and the statistics just would be better tagged with something more meaningful and will make the html more intuitive for other developers.
I hope this helps. Happy coding! 🤓
Hi everyone, this is my first ever challenge, I did 2 online courses about HTML and CSS and this is the first time I put it in to practice. It took me a long time to do, and even though it's not perfect, I am happy with the result. I still need a lot to practice and improve, so whether you see any mistake or anything I should change or improve, your help would be much appreciate it.
Hey Elia, nice work on submitting your first challenge!
Check-out this pen (https://codepen.io/will-1-am-the-Iceman/pen/gOgBrVP) for a suggestion on how to center everything horizontally and vertically - you can see the html and css and test til your heart's content. A border radius can be applied to a container wrapping the body contents to resolve the missing rounded corners.
Hopefully, this will help you along on your coding journey.
Hey, Guys, this is my second newbie challenge from frontendmentor, I made this three-column card component using HTML and CSS. Your suggestions are welcome if you find something inaccurate. Thanks.
Hey, nice work on submitting your second challenge!
You might consider wrapping your body content in another container and using flex-box to . Check-out this pen (https://codepen.io/will-1-am-the-Iceman/pen/gOgBrVP) for a suggestion on how to center everything horizontally and vertically - you can see the html and css and test til your heart's content.
Stopping the button text from wrapping to a second line could be done using a min-width on your card or col.
Hopefully, this will help you along on your coding journey.
My first frontend challenge as a newbie. Any improvement advice will be appreciated.
Hey Rahul, nice work on submitting this challenge!
You might consider wrapping your body content in another container and using flex-box to center everything horizontally and vertically. Check-out this pen (https://codepen.io/will-1-am-the-Iceman/pen/gOgBrVP) where you can see the html and css and test til your heart's content.
While the specification doesn't actually supply links, it can be assumed that they will ultimately link somewhere and so the button elements should really be anchor elements. I also made this error 😅 but this resource helped to set me straight (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a).
Stopping the button text from wrapping to a second line could be done using a min-width on your card or col.
Hopefully, this will help you along on your coding journey.
Any feedback will be much appreciated :)
Hey Rhona, nice work on submitting your challenge project.
You might consider different elements for the h2 tags you use for the numbers in the stats section of the card since they don't really make sense as headings - although I can see how one would reach for h2 as I chose it myself initially 😅.
You make use of a lot of div elements in your html and it might be useful to replace some of them with more suitable elements (e.g. the challenge is to produce a component that is reusable, possibly in other projects - check out this link which helped me (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article).
I hope this helps you along in your coding journey.
Hi Mentors,
Please look through my code and write feedback. Thanks in advance
Nice work Murad! You might consider implementing a grid layout on the cards container to fix the issue with the luxury card sliding over the middle card when the viewport is sufficiently reduced.
That is my first challenge from frontendmentor, which i did using CSS Grid. Please, any feedback will be very welcome.
Nice work Israel! On first inspection the buttons could be fully rounded by choosing a larger border radius. Also to prevent the button text wrapping to a second line (which makes the button taller) a min-width can be applied to the container class.
That's my first challenge. I would like to know how to improve my template.
Great work! Check out the above report for some quick fixes. The h2 heading, as I understand it should only follow an h1, so there might be a better choice of element there. I found this HTML reference link really useful: https://www.w3schools.com/tags/default.asp. Also, it might be more conventional to keep your css folder on the same level as the assets folder rather than inside it - I kind of see how css might be thought of as an asset, but it should be separate IMHO. ;-) I hope this helps you along your coding journey.
Any feedback on the code's design, would appreciated.
Nice work. Something to look at would be the profile card sizing - the card can get very narrow if a browser is resized along its width. You should be able to prevent that from happening. The h2 and h3 headings don't really make sense as they have no children, so they could be replaced with something more appropriate. Additionally, h1 is not in use in the HTML, so h2 and h3 shouldn't be in use. I hope that helps and good luck with your coding!
I don't know how to make the circles background responsive, so in desktop all it's ok, but in mobile the circles go to the center :(
Nice work. The background will become responsive by implementing flex with background images.
It was fun building this one. Yes its an easy one but it really cemented my css positioning skills. I welcome every feedback and critique. :)
Have a look also at the font color of the stats text (ie Followers, Likes and photos). That should be an easy improvement. ;)
