Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
51
Comments
62
P
John Mirage
@john-mirage

All comments

  • Rino raj•260
    @rinoraj6
    Submitted over 1 year ago

    article preview component solution

    1
    P
    John Mirage•1,590
    @john-mirage
    Posted about 1 year ago

    Hello, nice work

    Here some ways you can improve your project:

    • The button has no hover effect
    • The social media links have no hover effects
    • You should add a feature that close the tooltip when you click outside of it.
    • You should add a button for the share button instead of a div so users can select and open the tooltip with a keyboard.
  • kaoutar ouadih•830
    @kaoutar-ouadih
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I proud of completing this challenge!

    What challenges did you encounter, and how did you overcome them?

    how to make the row height dynamic and fit the content.I solved that using grid-auto-rows: auto

    What specific areas of your project would you like help with?

    Anything that can help me improve.

    Testimonials grid section

    1
    P
    John Mirage•1,590
    @john-mirage
    Posted about 1 year ago

    Hello, nice work

    Here some ways you can improve your project:

    • You should consider moving your css in a different file, it is more clean this way.
    • You should add a container for the cards so the width is fixed and the cards dont stretch.
    • In the <head> you forget to rename the <title>
    • To help you start a project, you can add a css reset file. It defines some rules to ease your workflow.
    • You can add meta tags in your <head> element to display informations and an image for Google and the social medias like facebook and twitter.
    • The images can be converted in webp format, webp format compress images more so you get less loading time.
  • lij110397•230
    @lij110397
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    1. How to use flex box and grid to build responsive layout

    • Use flex box. Be familar with attributes like "flex-wrap","align-items","justify-content" and so on.
    form {
      display: flex;
      align-items: flex-end;
      flex-wrap: wrap;
      gap: 16px;
    }
    .name {
      flex-grow: 1;
      flex-basis: 160px;
    }
    .email {
      flex-grow: 3;
      flex-basis: 200px;
    }
    button {
      flex-grow: 1;
      flex-basis: 80px;
    }
    
    • Use fluid type and space This makes the font size changing accordingly. It is based on a useful tool - utopia. But in this case, I only use "--step-0".
    :root {
        --step--2: clamp(0.6rem, 0.5032rem + 0.4128vi, 0.8748rem);
        --step--1: clamp(0.75rem, 0.629rem + 0.5161vi, 1.0935rem);
        --step-0: clamp(0.9375rem, 0.7863rem + 0.6451vi, 1.3669rem);
        --step-1: clamp(1.1719rem, 0.9829rem + 0.8063vi, 1.7086rem);
        --step-2: clamp(1.4648rem, 1.2286rem + 1.0079vi, 2.1357rem);
        --step-3: clamp(1.8311rem, 1.5358rem + 1.2599vi, 2.6697rem);
        --step-4: clamp(2.2888rem, 1.9197rem + 1.5749vi, 3.3371rem);
        --step-5: clamp(2.861rem, 2.3996rem + 1.9686vi, 4.1714rem);
      }
    
    • Use relative unit like rem
    • Use media quires when necessary.
    What challenges did you encounter, and how did you overcome them?

    How can I develop the desktop design without using media quires, but using flex box or grid only?

    I added one media query and in larger screen I used grid and specifically put different elements in different columns.

    What specific areas of your project would you like help with?

    How can I develop the desktop design without using media quires, but using flex box or grid only?

    responsive four-card-feature-page

    1
    P
    John Mirage•1,590
    @john-mirage
    Posted over 1 year ago

    Hello, nice work !!

    Why do you want to avoid using media queries ?

  • Thedgmz98•60
    @Thedgmz98
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm proud the way I did this and the excellent time management doing this. That was great!!

    What challenges did you encounter, and how did you overcome them?

    I have some problems with the H1 because in desktop was supposed to be with some line jumps, and on mobile just two. But i barely fixed showing another H tag to make it work.

    What specific areas of your project would you like help with?

    Responsive design and font styling

    Responsive web using Flex-box

    1
    P
    John Mirage•1,590
    @john-mirage
    Posted over 1 year ago

    Hello, nice work !!

    Here some ways you can improve your project:

    • In the <head> of your project, you loaded more fonts than the project need, you can remove the links who are not needed.
    • To help you start a project, you can add a css reset file. It defines some rules to ease your workflow.
    • You can add meta tags in your <head> element to display informations and an image for Google and the social medias like facebook and twitter.
    • The product images can be converted in webp format, webp format compress images more so you get less loading time.
    • Check out the BEM methodology, it can help you for the naming of your classes
    • You forget to add a favicon in the <head> element.
    Marked as helpful
  • Timelessgreed•70
    @Timelessgreed
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    It's a great project

    What challenges did you encounter, and how did you overcome them?

    The margins and paddings

    What specific areas of your project would you like help with?

    the margins and paddings

    Recipe

    2
    P
    John Mirage•1,590
    @john-mirage
    Posted over 1 year ago

    Hello, nice work !!

    Here some ways you can improve your project:

    • Your card has a fixed width, you can make it responsive by adding a relative width of 100% and a max-width of 460px so the card will shrink when the screen width in under 460px
    • To help you start a project, you can add a css reset file. It defines some rules to ease your workflow.
    • You can add meta tags in your <head> element to display informations and an image for Google and the social medias like facebook and twitter.
    • The omelette image can be converted in webp format, webp format compress images more so you get less loading time.
    • Your page overflows on the right (on my screen) because your wrapper has a width of 100vw, removing this rule fix the issue.
    • For the nutrition section, you can use a <table> element.
    • There is a left padding on the lists by default, you can remove them by adding padding: 0 on the <ul> or <ol> elements.
    • Your project do not contains media queries, you can add some to make your project fully responsive.
  • Bhuvan•40
    @bhuvandev16
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?
    • I'm most proud of the clean and visually appealing design I created for the social link web page
    What challenges did you encounter, and how did you overcome them?
    • One challenge I encountered was aligning elements properly across different screen sizes. I overcame this by utilizing CSS Flexbox to ensure responsive design.
    What specific areas of your project would you like help with?
    • I would appreciate help in improving the user experience through advanced CSS techniques, such as animations or transitions, to make the page more engaging.

    Link Hub using HTML and CSS

    1
    P
    John Mirage•1,590
    @john-mirage
    Posted over 1 year ago

    Hello, nice work !!

    Here some ways you can improve your project:

    • You can remove the underlines of your links by adding the text-decoration: none; rule.
    • Your card has a fixed width, you can make it responsive by adding a relative width of 100% and a max-width of 350px so the card will shrink when the screen width in under 350px
    • There is no paddings around the card, you can add some horizontal paddings to make the card breathe on mobile device
    • To help you start a project, you can add a css reset file. It defines some rules to ease your workflow.
    • The card has lower paddings on mobile than on desktop, you can add a media querie to reflect this behavior.
    • The social links can be placed in <li> elements surrounded by an <ul> element.
    • You can add meta tags in your <head> element to display informations and an image for the social medias like facebook and twitter.
    • You can define the inter font on the <body> element so the font spread accross all the children elements.
    • The hover effect should only be applied to the devices who have hover feature, you can add a media querie to target those devices with @media screen and (hover: hover) {}
  • joelani•80
    @joelani
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    This project allowed me to develop strong time management skills and ensure independent completion

    What challenges did you encounter, and how did you overcome them?

    none

    What specific areas of your project would you like help with?

    media queries

    Responsive Blog Preview Card

    1
    P
    John Mirage•1,590
    @john-mirage
    Posted over 1 year ago

    hello, nice work

    here are some ways to improve your project

    • You can add meta tags for social media so your project in well represented on facebook twitter etc.. metatags
    • You can generate favicons for all the devices on this website
    • Use html semantic tags to surround your content in the body, it is better for accessibility and SEO (<main> <header> <footer> etc...).
    • You can use the BEM methodology for the name of your classes, it helps a lot.
    • You should try to use REM instead of px for the sizes, it is better.

    The project require some media queries for the texts. You can add them with:

    .text {
      font-size: 1rem;
    }
    @media screen and (min-width: 576px) {
      .text {
        font-size: 1.5rem;
      }
    }
    

    The rules defined on the text class will be apply when the screen is 576px of width minimum, so before 576px the text will be 1rem and after 1.5rem.

    Marked as helpful
  • andretrindade13•80
    @andretrindade13
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    Using flex-box to test delivery of this first challenge. For the next challenges I hope to use some CSS preprocessor and apply some development patterns to organize the classes

    What challenges did you encounter, and how did you overcome them?

    The biggest challenge now is to make up for lost time without practicing front-end development, I spent 4 years developing only in node, now I'm focusing back on full-stack web development to start new challenges as an entrepreneur

    What specific areas of your project would you like help with?

    I would like tips on patterns and tools that I can study to improve front development, with more speed and if there are other development approaches such as using react or another framework to deliver the challenges

    QR code card component with flex-box

    1
    P
    John Mirage•1,590
    @john-mirage
    Posted over 1 year ago

    Hello, nice work

    Here some ways you can improve your project

    • Use semantic HTML like <main> <header> <footer> etc... tags to surround your content so people with screen reader know where they are on the page.
    • Use a <h1> tag for the main title of your content, it is important for people using screen readers, they cannot know that this is a title unless you use a heading tag. It also help with SEO.
    • Before starting a project you can use a css reset file to have some rules to help you writting css.
    • You should add a link on the image so users who don't want to scan the qr code can visit the website anyway.
    • You used a fixed width on the card, you should use a relative width like 100% and use a max-width of 320px so the card will stay the same but shrink if the device viewport is less than 320px of width.
    • Prefer using REM instead of PX for the sizes.
    • You used a height of 100vh for the container, you should use a min-height instead so the viewport can go further than 100vh if the screen height is less than your card height.
    Marked as helpful
  • Troy Insixiengmay•110
    @Tascate
    Submitted about 2 years ago

    Responsive landing page using CSS Grid and Flexbox

    1
    P
    John Mirage•1,590
    @john-mirage
    Posted about 2 years ago

    Hello,

    This is not a bad case for grid because you can make it works like you did, but maybe flexbox is better for a simple layout like this one.

  • Clinto Bean•130
    @clinto-bean
    Submitted about 2 years ago

    First Solution - Age Calculator

    #semantic-ui#node
    1
    P
    John Mirage•1,590
    @john-mirage
    Posted about 2 years ago

    Hello,

    I strongly encourage you to learn vanilla js before any framework or meta framework you can find. I did the same at first (react before vanilla) and it was really not the best choice at all, basically, knowing vanilla js can help you a lot for everything you do in the javascript world including working with frameworks.

    Marked as helpful
  • Marius•110
    @drangam9
    Submitted about 2 years ago

    QR Code Component with HTML and CSS

    2
    P
    John Mirage•1,590
    @john-mirage
    Posted about 2 years ago

    Hello,

    yes flexbox or grid can help you center the card, they should be a better option than absolute position because the card stay in the flow, so it may be a better practice.

  • John Robert Maizo•360
    @johnmaizo
    Submitted about 2 years ago

    Easybank landing page using React JS and SCSS

    #react#sass/scss
    1
    P
    John Mirage•1,590
    @john-mirage
    Posted about 2 years ago

    Hello,

    The hero images setup is one of the hardest to achieve, so don't blame yourself if it's not perfect :) here is my project if you want to see how i did it.

  • Javier Eufracio•300
    @Javieer57
    Submitted about 2 years ago

    Job listings with filtering (Tailwind, React)

    #react#tailwind-css#next
    1
    P
    John Mirage•1,590
    @john-mirage
    Posted about 2 years ago

    Hello,

    For storybook, you can start with the official website which is great. I saw you are using nextjs so in the options at the top of the guide choose: latest version 7.0, React and Javascript. The storybook script npx storybook@latest init should automatically detect your project btw.

  • Wessel Konstantinov•350
    @WesselKonstantinov
    Submitted about 2 years ago

    Pod request access landing page using CSS Flexbox and vanilla JS

    #accessibility#bem
    1
    P
    John Mirage•1,590
    @john-mirage
    Posted about 2 years ago

    Unfortunately, i don't have the answer to your question but, my advice is to download and install NVDA (for Non Visual Desktop Access) (if you are on mac or linux there are alternatives) and try your application by yourself and eyes close (no cheating !!!) xD and see if you are able to understand what to do and where you are.

    Marked as helpful
  • Abhiram•160
    @abhiram-s21
    Submitted about 2 years ago

    stats preview card component using flexbox

    3
    P
    John Mirage•1,590
    @john-mirage
    Posted about 2 years ago

    hello,

    To display the image on top on mobile and on the right on desktop, you can use flex, first simply put the image first in html then the text section so you have the image on top, then in desktop use flex to display the elements in a row and change the order of the elements with the order css property so the image is second and the text section is first.

    Marked as helpful
  • jeffreylaichunghang•60
    @jeffreylaichunghang
    Submitted about 2 years ago

    Result summary component using gird and media query

    3
    P
    John Mirage•1,590
    @john-mirage
    Posted about 2 years ago

    Hello, did you wrote the css from mobile to desktop ?, if not it's maybe a better idea to go mobile first, it should be easier and more readable (and it's a best practice because of the mobile devices performances)

  • jmurrii•10
    @jmurrii
    Submitted about 2 years ago

    QR Code Component

    2
    P
    John Mirage•1,590
    @john-mirage
    Posted about 2 years ago

    Hello,

    Root EM watch the html element, EM watch the element itself or the first parent that has a font-size even by default.

    My guess is that if you have REM your h1 watch the html element so it will be relative to 62.5% and if you have EM it will be relative to the default size of a h1 (h1 has a default font-size)

    Marked as helpful
  • mirshod455•30
    @mirshod455
    Submitted about 2 years ago

    Website with QRCode using CSS Flex

    #accessibility
    3
    P
    John Mirage•1,590
    @john-mirage
    Posted about 2 years ago

    Hello,

    I recommend you the BEM css methodology to organize your code.

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