Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
16
Comments
452
Francisco Carrillo
@frank-itachi

All comments

  • Hasan Sertaç Yiğitoğlu•150
    @hsyigitoglu
    Submitted about 2 years ago

    Responsive product preview card with html & css & bootstrap 5

    1
    Francisco Carrillo•5,540
    @frank-itachi
    Posted about 2 years ago

    Hello there 👋. Congratulation for completing the challenge👍!

    I have some suggestions about your code that might interest you.

    HTML 📄:

    • Wrap the page's whole main content in the <main> tag.
    • Since the mobile design has a different image, you can use the <picture> tag that allows you to interchange the images depending of the viewport size. Red more about this awesome tag here.
    • Make sure that the <img> elements in your HTML code has an alternate (descriptive) short text. The reason for this is that screen readers can’t translate images into text. So to fix this you can do the following <img src=”…” alt=”short text” >

    CSS 🎨:

    • You can use grid or flexbox to center the content no matter the viewport size. Using Grid:
    body {
    	min-height: 100vh;
            display: grid;
    	place-content : center;
    }
    

    FlexBox

    body {
    	min-height: 100vh;
            display: flex;
    	align-items: center;
    	justify-content: center;
    }
    
    • You can also use the text-transform: uppercase; property to make the perfume word appear in upper case even though you typed it in lower case in the HTML file.

    I hope you find it useful! 😄 Above all, you did a good job!

    Happy <coding /> 😎!

    Marked as helpful
  • Qumrran•410
    @qumrran
    Submitted about 2 years ago

    Product preview card component HTML CSS

    2
    Francisco Carrillo•5,540
    @frank-itachi
    Posted about 2 years ago

    Hello there 👋. You did a good job!

    I have some suggestions about your code that might interest you.

    HTML 📄:

    • Wrap the page's whole main content in the <main> tag.
    • Since the mobile design has a different image, you can use the <picture> tag that allows you to interchange the images depending of the viewport size. Red more about this awesome tag here.

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy <coding /> 😎!

    Marked as helpful
  • MD. Sajid Hossain•90
    @sajidrec
    Submitted about 2 years ago

    Responsive card design with tailwindcss

    #tailwind-css
    1
    Francisco Carrillo•5,540
    @frank-itachi
    Posted about 2 years ago

    Hello there 👋. Congratulation for completing the challenge👍!

    I have some suggestions about your code that might interest you.

    HTML 📄:

    • Since the mobile design has a different image, you can use the <picture> tag that allows you to interchange the images depending of the viewport size. Red more about this awesome tag here.

    I hope you find it useful! 😄 Above all, you did a good job!

    Happy <coding /> 😎!

    Marked as helpful
  • MichalBobka•10
    @MichalBobka
    Submitted about 2 years ago

    Results summary component with BEM SCSS responsive for desktop and mob

    #bem#sass/scss
    1
    Francisco Carrillo•5,540
    @frank-itachi
    Posted about 2 years ago

    Hello there 👋. Congratulation for completing the challenge👍!

    • You could use the background: linear-gradient(#color1, #color2); property-value to style the pseudo class :hover of the button.
    • Also try not nest too much rules in SASS/SCSS becuase the more you nest the more time will take to the browser to load the code. This way you keep the code clean as well.

    I hope you find it useful! 😄 Above all, you did a good job!

    Happy <coding /> 😎!

    Marked as helpful
  • Shashikant•430
    @shashikantdev3
    Submitted over 2 years ago

    Huddle landing page with alternating feature blocks

    #bem#accessibility
    1
    Francisco Carrillo•5,540
    @frank-itachi
    Posted over 2 years ago

    Hello there 👋. Congratulation for completing the challenge👍!

    I have some suggestions about your code that might interest you.

    • Your code is readable and well structure but when it comes to functionality and user experience there are some aspects we’ve got to think. For instance, according to de design in the <footer> section there must be some links that should redirect the user to a different page that provides additional information. The About Us link is a good example. So, you should use a <a href=””> tag to achieve such purpose instead of using the <p> one.
    • Remember, we also gotta take into account the user experience and not only the design.

    I hope you find it useful! 😄 Above all, you did a good job!

    Happy <coding /> 😎!

  • SAVINDU SHEHAN•310
    @Savindushehan
    Submitted over 2 years ago

    Social proof section

    1
    Francisco Carrillo•5,540
    @frank-itachi
    Posted over 2 years ago

    Hello there 👋. Congratulation for completing the challenge👍!

    I have some suggestions about your code that might interest you.

    HTML 📄:

    • The icon-star images are decorative so you can add the alt="" attribute to the <img> tag and leave it empty. But the profile images aren't so in that case you need to add a short description.

    I hope you find it useful! 😄 Above all, you did a good job!

    Happy <coding /> 😎!

    Marked as helpful
  • Chamod Perera•160
    @ChamodJ
    Submitted over 2 years ago

    QR code component

    2
    Francisco Carrillo•5,540
    @frank-itachi
    Posted over 2 years ago

    Hello there 👋. You did a good job!

    I have some suggestions about your code that might interest you.

    HTML 📄:

    • Wrap the <div class="main-container" content in the <main> tag.

    CSS 🎨:

    • Avoid using absolute length units px, especially for font-size and width properties, because they are not relative to anything else so that means they will always be the same size. Instead, you can use relative lengths like em or rem. The benefit of that last one is element which has that unit will scale relatively to everything else within the page, e.g., the parent container. You can dig up about it here.

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy <coding /> 😎!

    Marked as helpful
  • Adam•20
    @adamstopinski
    Submitted over 2 years ago

    Perfume Card with HTML, CSS, SCSS, BEM

    #sass/scss#bem
    1
    Francisco Carrillo•5,540
    @frank-itachi
    Posted over 2 years ago

    Hello there 👋. Congratulation for completing the challenge👍!

    I have some suggestions about your code that might interest you.

    HTML 📄:

    • Wrap the <div class="card"> content in the <main> tag.
    • You could also use the <picture> tag that allows you to interchange the images depending of the viewport size. Red more about this awesome tag here.
    • In this case there is only one <footer> tag so you can get rid of the class="footer" attribute of it and use the selector tag in you CSS stylesheet.

    I hope you find it useful! 😄 Above all, you did a good job!

    Happy <coding /> 😎!

    Marked as helpful
  • Moinwkhan•30
    @Moinwkhan
    Submitted over 2 years ago

    reponsive page usong css

    #animation
    1
    Francisco Carrillo•5,540
    @frank-itachi
    Posted over 2 years ago

    Hello there 👋. You did a good job!

    I have some suggestions about your code that might interest you.

    HTML 📄:

    • Wrap the page's whole main content in the <main> tag.
    • The heading order is important in the html structure so try to always start your headings and/or titles with an <h1> tag and then you can increase by one if you need to use more heading in your html code.
    • The image is not decorative in this case so make sure that the <img> element in your HTML code has an alternate (descriptive) short text. The reason for this is that screen readers can’t translate images into text. So to fix this you can do the following <img src=”…” alt=”short text” >

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy <coding /> 😎!

  • NafisMahmudAyon•10
    @NafisMahmudAyon
    Submitted over 2 years ago

    Responsive QR code

    1
    Francisco Carrillo•5,540
    @frank-itachi
    Posted over 2 years ago

    Hello there 👋. You did a good job!

    I have some suggestions about your code that might interest you.

    CSS 🎨:

    • You can use grid or flexbox to center the content no matter the viewport size. Using Grid:
    body {
    	min-height: 100vh;
            display: grid;
    	place-content : center;
    }
    

    FlexBox

    body {
    	min-height: 100vh;
            display: flex;
    	align-items: center;
    	justify-content: center;
    }
    
    • Avoid using absolute length units px, especially for font-size and width properties, because they are not relative to anything else so that means they will always be the same size. Instead, you can use relative lengths like em or rem. The benefit of that last one is element which has that unit will scale relatively to everything else within the page, e.g., the parent container. You can dig up about it here.

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy <coding /> 😎!

  • Suivez•370
    @Suivez
    Submitted over 2 years ago

    Stats preview card component using HTML and CSS

    1
    Francisco Carrillo•5,540
    @frank-itachi
    Posted over 2 years ago

    Hello there 👋. Congratulation for completing the challenge👍!

    I have some suggestions about your code that might interest you.

    HTML 📄:

    • Wrap the <div class="attribution"> section inside the <footer> tag.
    • you could also use the <picture> tag that allows you to interchange the images depending of the viewport size. Red more about this awesome tag here.

    CSS 🎨:

    • Avoid using absolute length units px, especially for font-size and width properties, because they are not relative to anything else so that means they will always be the same size. Instead, you can use relative lengths like em or rem. The benefit of that last one is element which has that unit will scale relatively to everything else within the page, e.g., the parent container. You can dig up about it here.

    I hope you find it useful! 😄 Above all, you did a good job!

    Happy <coding /> 😎!

  • Ahmed abdulhamed•130
    @Ahmed-abdulhamed
    Submitted over 2 years ago

    product-preview-card-component

    1
    Francisco Carrillo•5,540
    @frank-itachi
    Posted over 2 years ago

    Hello there 👋. You did a good job!

    I have some suggestions about your code that might interest you.

    HTML 📄:

    • You could also use the <picture> tag that allows you to interchange the images depending of the viewport size. Red more about this awesome tag here.
    • The perfume images are not decorative so make sure to add a valid descriptive alternate text.

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy <coding /> 😎!

  • Saif Khadraoui•30
    @saif-khadraoui
    Submitted over 2 years ago

    QR code component

    2
    Francisco Carrillo•5,540
    @frank-itachi
    Posted over 2 years ago

    Hello Saif Khadraoui 👋. You did a good job!

    I have some suggestions about your code that might interest you.

    HTML 📄:

    • Wrap the page's whole main content in the <main> tag.
    • The heading order is important in the html structure so try to always start your headings and/or titles with an <h1> tag and then you can increase by one if you need to use more heading in your html code. So replace the <h3> by te <h1> tag.
    • Make sure that the <img> elements in your HTML code has an alternate (descriptive) short text. The reason for this is that screen readers can’t translate images into text. So to fix this you can do the following <img src=”…” alt=”short text” >

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy <coding /> 😎!

  • fdouglas27•40
    @fdouglas27
    Submitted over 2 years ago

    HTML 5, CSS

    1
    Francisco Carrillo•5,540
    @frank-itachi
    Posted over 2 years ago

    Hello fdouglas27 👋. Congratulation for completing the challenge👍!

    I have some suggestions about your code that might interest you.

    HTML 📄:

    • Wrap the page's whole main content in the <main> tag.
    • The heading order is important in the html structure so try to always start your headings and/or titles with an <h1> tag and then you can increase by one if you need to use more heading in your html code. So replace the <h2> by the <h1> and the <h4> by the <h2>.

    I hope you find it useful! 😄 Above all, you did a good job!

    Happy <coding /> 😎!

  • khaykay samuel•10
    @khaykay
    Submitted over 2 years ago

    Responsive QR code component using CSS flexbox and media queries

    1
    Francisco Carrillo•5,540
    @frank-itachi
    Posted over 2 years ago

    Hello khaykay samuel 👋. You did a good job!

    I have some suggestions about your code that might interest you.

    HTML 📄:

    • The heading order is important in the html structure so try to always start your headings and/or titles with an <h1> tag and then you can increase by one if you need to use more heading in your html code. So replce the <span class="title"> by the <h1> tag.
    • Put the the <div class="attribution"> section out of the <main> tag and wrap it inside the <footer> tag.
    • Get rid of the target="_blank" attriburte of the footer link.

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy <coding /> 😎!

  • Tomás Sousa•10
    @TommySousa
    Submitted over 2 years ago

    QR code component

    1
    Francisco Carrillo•5,540
    @frank-itachi
    Posted over 2 years ago

    Hello there 👋. You did a good job!

    I have some suggestions about your code that might interest you.

    HTML 📄:

    • Wrap the page's whole main content in the <main> tag.
    • Wrap the <div class="attribution"> section inside the <footer> tag.
    • The heading order is important in the html structure so try to always start your headings and/or titles with an <h1> tag and then you can increase by one if you need to use more heading in your html code. So replace the <p>Improve your front-end skills by building projects</p> by the <h1> tag.

    CSS 🎨:

    • You can use grid or flexbox to center the content no matter the viewport size. Using Grid:
    body {
    	min-height: 100vh;
            display: grid;
    	place-content : center;
    }
    

    FlexBox

    body {
    	min-height: 100vh;
            display: flex;
    	align-items: center;
    	justify-content: center;
    }
    

    I hope you find it useful! 😄 Above all, the solution you submitted is great!

    Happy <coding /> 😎!

  • SabrinaY123•40
    @SabrinaY123
    Submitted over 2 years ago

    Responsive Product Preview Card Component

    1
    Francisco Carrillo•5,540
    @frank-itachi
    Posted over 2 years ago

    Hello there 👋. Congratulation for completing the challenge👍!

    I have some suggestions about your code that might interest you.

    HTML 📄:

    • Wrap the page's whole main content in the <main> tag.
    • If your code has different sections that have a specific purpose like a navigation, article, sections or footer, it’s a good practice to enclose those parts with HTML5 semantic tags. For example, you could use a <footer> tag to wrap the <div class=”attribution”> section.
    • Since the mobile design has a different image, you can use the <picture> tag that allows you to interchange the images depending of the viewport size. Red more about this awesome tag here.

    CSS 🎨:

    • You can also use the text-transform: uppercase; property to make the perfume word appear in upper case even though you typed it in lower case in the HTML file.

    I hope you find it useful! 😄 Above all, you did a good job!

    Happy <coding /> 😎!

  • Simon•20
    @MokoneSA
    Submitted over 2 years ago

    Responsive product card using CSS flex box.

    1
    Francisco Carrillo•5,540
    @frank-itachi
    Posted over 2 years ago

    Hello there 👋. You did a good job!

    I have some suggestions about your code that might interest you.

    HTML 📄:

    • Since the mobile design has a different image, you can use the <picture> tag that allows you to interchange the images depending of the viewport size. Red more about this awesome tag here.

    I hope you find it useful! 😁😁 Above all, the solution you submitted is great👌!

    Happy <coding /> 😎!

    Marked as helpful
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub