Looking to hire developers?
@Will-1-Am
@chiptaylor
Submitted
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?
@Will-1-Am
Posted
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!
@kj1999
Submitted
please give feedback.
@Will-1-Am
Posted
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! š¤
@elianiubo
Submitted
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.
@Will-1-Am
Posted
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.
@Muskan2905
Submitted
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.
@Will-1-Am
Posted
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.
@RahulKandari-Github
Submitted
My first frontend challenge as a newbie. Any improvement advice will be appreciated.
@Will-1-Am
Posted
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.
@rhonall
Submitted
Any feedback will be much appreciated :)
@Will-1-Am
Posted
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.
@muradmuradov987
Submitted
Hi Mentors,
Please look through my code and write feedback. Thanks in advance
@Will-1-Am
Posted
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.
@israeltristao
Submitted
That is my first challenge from frontendmentor, which i did using CSS Grid. Please, any feedback will be very welcome.
@Will-1-Am
Posted
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.
@AKurka
Submitted
That's my first challenge. I would like to know how to improve my template.
@Will-1-Am
Posted
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.
@karthisp
Submitted
Any feedback on the code's design, would appreciated.
@Will-1-Am
Posted
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!
@edycerpa
Submitted
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 :(
@Will-1-Am
Posted
Nice work. The background will become responsive by implementing flex with background images.
@kristijan-kresic-hvar
Submitted
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. :)
@Will-1-Am
Posted
Have a look also at the font color of the stats text (ie Followers, Likes and photos). That should be an easy improvement. ;)
@vickymarz
Submitted
I just completed this project. I need feedback on how to improve my code.
@Will-1-Am
Posted
Have a look at the positioning of the avatar and the background pattern at the top of the card.
@Montoya25
Submitted
SoluciĆ³n mejorada.
@Will-1-Am
Posted
Nice work Alejandro. Check out the report above for some really quick fixes for an h2 tag.
@AMLO-Bot
Submitted
I would love having feedback about the implementation of BEM arquitecture for this project. I reaaly think there is a lot of space for improvement and Im just a newbie so I do not know really what Im doing. Appreciate in advance your comments
@Will-1-Am
Posted
Nice work! Check out the report above for some easy fixes to the code. Keep on coding ;-)
@ksenia790
Submitted
I have just started learning programming through online courses. We recently completed the HTML and CSS topic(actually this course abt Python, but they include bit of frontend things in lessons) and I figured a little practice would be helpful. Lord, how difficult it turned out to be, even at the lowest difficulty level. In general, somehow I wrote the code, of course it(both the code and page) doesn't look very good, but I hope it will come out better and faster with practice.
@Will-1-Am
Posted
Hey Sena, Check your report above for the HTML errors. It is a quick and easy fix to the HTML for "Duplicate ID a". This can be fixed by updating the id in the bottom image SVG code to "b" where it is declared and called. That should clear the error for you.
@ksenia790
Submitted
I have just started learning programming through online courses. We recently completed the HTML and CSS topic(actually this course abt Python, but they include bit of frontend things in lessons) and I figured a little practice would be helpful. Lord, how difficult it turned out to be, even at the lowest difficulty level. In general, somehow I wrote the code, of course it(both the code and page) doesn't look very good, but I hope it will come out better and faster with practice.
@Will-1-Am
Posted
The card div doesn't actually contain anything and might, at least partially, explain the appearance of the card. I totally sympathise with you regarding the difficulty and you will get to where you want to be in time. Keep on coding and support others too!
