Skip to content
OverviewSolutions
4
Comments
4
nodegreecode
@nodegreecode

All comments

  • nodegreecode•100
    @nodegreecodePosted 27 days ago

    Hi, @Conte-Mouctar,

    well structured html.

    There are some tipps, which could be helpfull:

    • add some more padding to the container;
    • change image corner applying border-radius on it;
    • apply @media-queries to make you page looks similiar to the mobile-design.

    Keep coding and stay persistent.

    0
  • nodegreecode•100
    @nodegreecodePosted about 1 month ago

    Hi @devhenriquemares,

    really nice look and good customization.

    But one thing I'd like to mention is about building links and making them look like buttons. When you have something like a navigation, which consists of a couple links and they logically bind, you should use the ul element and put a elements inside of the li elements of that unordered list.

    I hope this will help you a little bit.

    Marked as helpful
    0
  • nodegreecode•100
    @nodegreecodePosted about 1 month ago

    Basically, the component is fluid and very close to the design. And you didn't forget to set a border around the entire card, as I did. But regarding semantics and CSS styling, there are some things that you could improve. So the blog card consists of <header> with image, title and link inside of this, <p> with short description and the <footer>. Instead of adding :hover pseudo class on top of the <h1> better wrap an <a> tag with <h1>. The boxing-size property should be set inside the universal selector * only, as you do not use pseudo-elements ::after and ::before. They could be removed. If you set font-size entirely to 62.5% = 10px, then stick to rem's do not use px's, however for border-radius, px's are recommended, because corners remain the same after the user changes the font size in his browser. Using width and max-width in the .card class is redundant. You can leave max-width or use flex-basis instead. I hope my comment will be helpful. Stay motivated and keep coding...

    Marked as helpful
    0
  • nodegreecode•100
    @nodegreecodePosted about 1 month ago

    HTML is valid and built semantically correct. The description of the image could be a bit longer and preciser. Something like "illustration of white qr code on the blue background". The layout looks good while changing screen size, but however the content inside is not fluid. You could try using "max-width" instead of "width" when defining the size of the container. Not so much reason to select paragraphs like this ".text > .text-second" if they have their own unique classes. There are some improvements regarding the class names, so basically, to make it reusable and meaningful, you should better use some general names, which describe the element hierarchically or in the case of some heading/title according to their function. A heading or title can be reused over the entire project. Instead of "text-first" you can write "card-title" or "qr-code-title". The solution generally looks very close to the design. Great job!

    Marked as helpful
    0