Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
7
Comments
61
idukpaye alex
@Esesosa-max

All comments

  • dpiskov•50
    @dpiskov
    Submitted over 1 year ago

    QR Code Component Main

    2
    idukpaye alex•685
    @Esesosa-max
    Posted over 1 year ago

    Great Attempt, Approach Could be better (70 /100)

    1. Great Design, pretty much pixel-perfect
    2. Do not use a <main> tag to make a card because it is not semantically correct
    3. Read HTML Semantics, it is okay to use multiple divs
    4. So next time, use a <div> and give a class of container or use another tag but do not a <main>
    5. Try using CSS variables it is nice!
    6. Do you know Flexbox? or CSS Grid?
    7. if not learn it, it will make centering much much easier
    8. Not Quite impressed, with the way you centered the <main>
    9. Not Quite Responsive but the way you did it was smart
    10. Good Usage of Relative units like em or rem
    Marked as helpful
  • Vinícius Silva Santos•60
    @viniciussis
    Submitted over 1 year ago

    An age calculator using React, Hooks and SCSS

    #react#sass/scss
    1
    idukpaye alex•685
    @Esesosa-max
    Posted over 1 year ago

    Good Attempt( 65/100), but not quite right.

    1. Regarding the CSS, Great Job there.
    2. Not quite impressed with the validation there is no custom validation
    3. Do not use HTML built-in validators use your own
    4. Yeah, the custom validation is the only thing preventing you from getting a 90/100
    Marked as helpful
  • Manuel Salazar•330
    @Norwyx
    Submitted over 1 year ago

    Mobile first. Vainilla CSS

    1
    idukpaye alex•685
    @Esesosa-max
    Posted over 1 year ago
    1. Flawless, Could not find any flaws (100/100)
    2. Good HTML Structure
    3. Nicely Responsive
  • francis835•10
    @francis835
    Submitted over 1 year ago

    Mobile first recipe page in HTML and CSS

    2
    idukpaye alex•685
    @Esesosa-max
    Posted over 1 year ago
    1. Not quite flawless but pretty great 90/100.
    2. The heading should not be bold.
    3. The HTML Structure is ok.
  • Hio Fadlika Akbar•330
    @hiofadlikaakbar
    Submitted over 1 year ago

    Social links my own version

    #tailwind-css#gsap
    1
    idukpaye alex•685
    @Esesosa-max
    Posted over 1 year ago

    Completely nothing like the original design but it is pretty cool. I just hoped you put a better anime. It is even cooler than the original design but i wouldn't employ you with that anime.

  • Nasif Fuad•300
    @Nasifuad
    Submitted over 1 year ago

    Four Card Using HTML CSS

    1
    idukpaye alex•685
    @Esesosa-max
    Posted over 1 year ago

    Good Attempt, but not quite pixel-perfect because you didn't quite it right (45/100)

    1. Firstly, the paragraph text in the cards is just too much
    2. Heading text is still too much
    3. Padding in the card is just too much (reduce it from 30px to like 15px)
    4. Wrong font usage, to get the design right it is very crucial
    5. Please use <p> instead of a <h3> in the header
    6. Why is the paragraph text 20px? use the right font and reduce it to 17px
    7. Why is it NOT responsive? this made you lose points
    8. Try to collapse everything by giving the .card-holder in a media query flex-direction:column
    9. Props to getting the card layout with .middle-cards
    10. Try using CSS variables it is nice!
    11. The reason the font is not working is because you did not import the URL from google fonts, google how to do this.
    Marked as helpful
  • Giorgi•90
    @gio-cmd
    Submitted over 1 year ago

    Frontend Mentor | QR code component

    2
    idukpaye alex•685
    @Esesosa-max
    Posted over 1 year ago

    Not impressed with the HTML structure, why use a <main> tag like that? what you should do is put a <div> with a class of card-container, and then apply those styles to the main. A main tag is used to contain a lot of elements and using it for one component like a card is not ideal, say you want to have multiple cards, by your code you would have to duplicate the main tag right? but if put inside a div class of card-container to contain it duplicating is a piece of cake.

    Good Solution 80/100 (do not coky it is an easy challenge)

  • Dan•210
    @dan9h
    Submitted over 1 year ago

    Age calculator app [Responsive and functional, Sass, BEM]

    #sass/scss#bem
    1
    idukpaye alex•685
    @Esesosa-max
    Posted over 1 year ago

    Great solution, love the animation, pretty much pixel-perfect but the validation isn't quite there yet because I put it on a date that didn't exist and it gave me -1 year and something. You made it responsive, pretty impressive by the way.

    Marked as helpful
  • P
    David•1,910
    @lumiuko
    Submitted over 1 year ago

    Recipe page using Tailwind CSS

    #tailwind-css
    1
    idukpaye alex•685
    @Esesosa-max
    Posted over 1 year ago

    Okay, Completely Flawless, Perfectly Responsive. You are a Boss but a Boss like you should add animations it is required so 100/100 but -10 for not adding level animation so 90/100.

  • abelkm99•70
    @abelkm99
    Submitted about 2 years ago

    3-column-preview-card-component using flex box html and css

    3
    idukpaye alex•685
    @Esesosa-max
    Posted about 2 years ago
    1. ✅ Responsive 4/5
    2. 🆗Good HTML Structure 3/5
    3. ✅Correct font and font-sizing 5/5
    4. ✅ More Accurate than the design 5/5
    5. ❌ Failed to give the button cursor:pointer on hover (yes I know it is a small detail)
    6. ❌ Wasn't impressed by the way you centered the whole thing
  • Taruna•305
    @Tiyana19
    Submitted about 2 years ago

    Responsive Testimonials using Grid

    1
    idukpaye alex•685
    @Esesosa-max
    Posted about 2 years ago
    1. ✅ Responsive 3/5 (Look Good on Desktop)
      1. It does look on mobile because the padding of the testimonial container is too much try dropping to 2:rem for mobile
    2. ✅ Good Usage of Flexbox and CSS Grid 5/5
    3. 🆗 Pixel Perfect on Desktop but fix the Mobile 3/5
    4. ✅ Animations 4/5
    5. 🆗 HTML Structure Could be better 3/5
    Marked as helpful
  • Matias Cardoso•90
    @MatiasCardoso4
    Submitted about 2 years ago

    age calculator

    1
    idukpaye alex•685
    @Esesosa-max
    Posted about 2 years ago
    1. ❌ Responsive 2/5.

      -The Layout is not responsive for mobile devices.

    2. 🆗 Functionality 3/5

    The year is not 100% accurate but the month and day are accurate

    The Validation error does not clear out even after I enter another date

    . ✅Last but not least Good HTML Structure 4/5

    Marked as helpful
  • Amarachi Iheakam•60
    @Cozyamy
    Submitted about 2 years ago

    Responsive Testimonial Page Using Grid

    1
    idukpaye alex•685
    @Esesosa-max
    Posted about 2 years ago

    Great Solution, super responsive (impressive) but I noticed a few things

    1. You Struggled with the profile images on the card
    2. The whole <main> is not perfectly centered.
    3. I wasn't satisfied with the font sizing and coloring If I were to score you I'd give you a 75/100
  • Vijay K Naik•940
    @KruzadeR-VictoR
    Submitted about 2 years ago

    Age Calculator using react & Chakra UI

    #react#chakra-ui
    2
    idukpaye alex•685
    @Esesosa-max
    Posted about 2 years ago

    it is more accurate than the design

  • Lisa Allen•570
    @CrypticMango
    Submitted about 3 years ago

    Fylo Landing Page Two Column Layout - Vanilla CSS and HTML

    1
    idukpaye alex•685
    @Esesosa-max
    Posted about 3 years ago
    1. Good Looking Design (desktop 3/3,mobile 2/3) 5/6
    2. HTML is somewhat structured 2.5/5
    3. deadly responsive (impressive !!) 5/5
    4. Good Application of CSS Variables and mobile first (impressive !!) 5/5
    5. Fixes and personal suggestions
      • i do not think you should put everything into the main
      • instead of using <header> use <nav> or just put the nav inside the header
      • <header><nav></nav></header>
      • your header is a bit mess up
    • input is not properly styled
    1. Great Job : 18/21
    Marked as helpful
  • AbdeRaouf Zemmal•680
    @abdraoufx
    Submitted about 3 years ago

    Mobile 1st Interactive Pricing Component With SASS

    #sass/scss
    1
    idukpaye alex•685
    @Esesosa-max
    Posted about 3 years ago
    1. ✅ Good looking Design (both mobile, and desktop) 5/5
    2. ✅ Application of Mobile 1st Design and scss 5/5
    3. ✅ Perfectly Responsive (No overflows, No problems ) 5/5
    4. ✅ Readable, well structured, reusable (could have been better) 4.2/5
    5. ✅ Good Animation (Nice Creativity) 4/5
    6. ✅ Pixel Perfectness
    7. ❌ 2 Accessibility issues, 1 HTML Issue -2
    Marked as helpful
  • Priya Aggarwal•160
    @pa-aggarwal
    Submitted about 3 years ago

    Responsive desktop-first Huddle Page with HTML/CSS

    1
    idukpaye alex•685
    @Esesosa-max
    Posted about 3 years ago
    1. ✅ Good Looking Design 5/5
    2. ✅ Very Responsive 4.65/5
    3. ✅ well-structured, readable, and reusable 4.5/5
    4. ✅ Readable HTML 4/5
    5. ✅ Good Application of The CSS Background property (Required for this Project) 5/5
    6. 🥇 Pixel Perfect 4.9 /5
    Marked as helpful
  • Viktor Kovács•310
    @victorsonet
    Submitted about 3 years ago

    Huddle landing page

    1
    idukpaye alex•685
    @Esesosa-max
    Posted about 3 years ago
    1. ✅ Good Looking Design 5/5
    2. ✅ Perfectly Responsive 5/5
    3. ✅ OK HTML Structure 3.94/5 . I Think You should put the .hero-section and text-section in one div, this will make it easier to give display grid
    4. ❌ Background disaster i. @media only screen and (max-width: 500px) and (min-width: 300px){ ii. body::after{ background-repeat: no-repeat; /* This will remove the disaster*/ } }
    5. ✅ Readable HTML 4/5
    6. 🥇 Pixel Perfect 4.9 /5
    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