Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
21
Comments
14
why-not-phoenix
@why-not-phoenix

All comments

  • Mahmood•2,130
    @MahmoodHashem
    Submitted 6 months ago
    What specific areas of your project would you like help with?

    Any feedback is appreciated

    Chat App | ReactJS+🎨TailwindCSS+🌊Framer Motion

    #react#tailwind-css#framer-motion
    5
    why-not-phoenix•330
    @why-not-phoenix
    Posted 5 months ago

    Love your solution and all the extra features you added blew my mind Well done!

  • P
    Bruna Gonçalves•270
    @brunagoncalves
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Having completed the challenge is a great victory.

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

    I still have some difficulties with HTML and JavaScript semantics. So to focus more in correct structuring and javascript, I chose to use TailwindCSS.

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

    Any feedback that is constructive is welcome.

    Newsletter sign-up form with success message solution

    2
    why-not-phoenix•330
    @why-not-phoenix
    Posted 6 months ago

    Hi Bruna. I really like your solution. It looks pixel perfect. How did you do that? Did you use the figma? I notice a key difference was that your picture was on the left side while the Design's picture is on the right. You can easily solve this with :

    .section-newsletter {
          display: flex;
          flex-direction: row-reverse;
    }
    

    Also use a :hover on the btn to change the cursor to pointer and to change the color of the buttons when hovered on. There are different things that could've been done differently but I am really impressed with how you handled the challenge generally. Here's a link to my solution if you're interested: https://www.frontendmentor.io/solutions/mobile-first-responsive-newsletter-signup-page-REmgL-P-mw

    It's not great but its something.

    I also wanted to ask if there's a special app you used for your screenshot. Looks nice

    Marked as helpful
  • P
    roswell•520
    @welpmoz
    Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    I feel confident making responsive layouts using CSS grid and media queries.

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

    Trying to modified the initial structure that I made is painful for me! I faced this hard coding and investing much effort adding additional CSS.

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

    I need someone who help me with the transition from the success page to the form page.

    Interactive Newsletter SignUp Responsive Page with Vanilla JS and CSS

    #accessibility#pure-css#web-components#animation
    1
    why-not-phoenix•330
    @why-not-phoenix
    Posted 6 months ago

    Your solutions looks really good. I checked the preview site and I was surprised by how well you did. Well done!!!

  • P
    nikolasladic•120
    @nikolasladic
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Next time I will plan my HTML structure differently, as it is the foundation of making your like easier later on. JavaScript is my pain point but I think I've handled it well for first challange

    Article preview componenet

    1
    why-not-phoenix•330
    @why-not-phoenix
    Posted 6 months ago

    Hi Great Job. Everything looks fine but the hover active states. Clicking on the icon on desktop gives a weird pop up you should look at. I know it's quite challenging getting the popovers to work. You could check out different resources like stackoverflow. Or you could make the click active state work for both small and large screens

  • klnrox001•40
    @klnrox001
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I tried my best to recreate the design and using the basic knowledge I have of coding and CSS. I am a total beginner, so it took a while, but I hope I can get better at it with more practice.

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

    I learned more about utilizing 'flexbox' when trying to recreate the QR component design. I struggled to get the 'paragraph' font to a suitable size within the container. I found that with percentage, I could get to the closest 'font-size' as seen in the design. What really helped me was using Live Server. I would use Inspect and change things on there and once I was happy with what I saw, I added the changes to my code.

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

    I think my code may be lengthy in CSS, so any feedback on what to do differently I would greatly appreciate.

    QR code component solution

    2
    why-not-phoenix•330
    @why-not-phoenix
    Posted 6 months ago

    Nah, looks good. Maybe reduce your font-sizes especially for your h1

  • Aditya Singh•280
    @Ad7905itya
    Submitted 12 months ago

    testimonials-grid-section-main

    #accessibility#pure-css
    1
    why-not-phoenix•330
    @why-not-phoenix
    Posted 6 months ago

    HI, great job with the design. Your background quote image seems to be rounded and when I clicked on the preview site on my pc it doesn't display correctly. Maybe that's just for me. Also on Mobile display, kira comes first which isn't right. Personal I made 2 divs, one with the first 4 cards and the last with kira. That way I was able to make a grid with both divs. FOr better understanding checkout my solution:

    https://www.frontendmentor.io/solutions/mobile-first-testimonials-grid-section-with-flexbox-8-UsZahda1

  • Dias•140
    @adambeckercodes
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I’m most proud of creating a clean and responsive recipe page with accessible features like semantic HTML, and focus-visible styles. The use of CSS variables made the styling consistent and easy to maintain, and the design adapts well to mobile and tablet devices.

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

    Responsiveness: Adjusting the layout for various screen sizes was tricky, especially balancing spacing and font scaling for mobile and tablet devices. I overcame this by using a mobile-first approach and testing with multiple media queries. Still there are some things which don't work as intended.

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

    Feedback on adding animations or JavaScript for a more engaging experience would be great. Are there any specific features I could implement to make the page stand out?

    Is there a more efficient way to build this kind of layout?

    Responsive Recipe Page using HTML/CSS

    1
    why-not-phoenix•330
    @why-not-phoenix
    Posted 6 months ago

    Hi dias!! Once again another near perfect solution. I have a few questions:

    1. In line 36 to 47, why did you have to specify box-sizing: border-box; for the html? wouldn't it have same effect if it were * {box-sizing: border-box;} instead of inherit?
    /* GENERAL */
    html {
      box-sizing: border-box;
    }
    
    *,
    *::before,
    *::after {
      box-sizing: inherit;
      margin: 0;
      padding: 0;
    }
    
    1. What is the function of body { height: 100vh; } ? Wouldn't the content just overfow?

    I probably have other questions but I am sure you're too busy for them. Great solution, looking forward to more of your solutions.

  • Yousef•40
    @YOUSEF-ysfxjo
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I’m most proud of successfully completing two web development projects, where I applied responsive design principles using HTML, CSS, and Tailwind CSS. I’m also proud of how I shared my progress on social media, receiving positive feedback that motivated me to keep pushing forward. Additionally, completing a KAUST course module this week shows that I am staying consistent with my learning goals, balancing both practical and theoretical aspects of my growth.

    What would you do differently next time? Next time, I would focus more on refining the code after completing a project. I might spend additional time optimizing the performance of the website, such as:

    Reducing load times Improving accessibility I also want to experiment more with JavaScript or other interactive elements to enhance the user experience. Lastly, I would allocate more time for in-depth exploration of advanced features in web development, like:

    Animations Advanced grid layouts

    "Responsive Web Projects with HTML & CSS,Flexbox & Grid for layout

    #accessibility
    1
    why-not-phoenix•330
    @why-not-phoenix
    Posted 6 months ago

    Hi, Yousef, I just went through your site and it tested ok for responsiveness. I think you should be proud of yourself Going through your code I noticed there were some repetition e.g:

    body{
        margin: 0;
        padding:0;
        background-color: hsl(30, 38%, 92%);
    }
    

    Is that just a mistake or did you do that on purpose?

    I also personally think your @media (min-width: 1440px) could start at a lower min-width e.g for iPads etc with medium screen width.

    Thanks for sharing and goodluck

    Marked as helpful
  • Eya-ben-aziza•30
    @Eya-ben-aziza
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of delivering a result that is almost identical to the given design and that it is a smooth and responsive website.

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

    changing the layout as the screen size changes was a little bit challenging but with giving attention to details I managed to respect the given design

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

    I would like some help with the responsive image, I failed in changing the image source when shifting from desktop to mobile. plus I couldn't find the right font-family for the price

    Product preview card component

    #bootstrap
    1
    why-not-phoenix•330
    @why-not-phoenix
    Posted 6 months ago

    Apart from a few dimension issues, this looks really good

  • Trevor•590
    @TrEv0rRrRr
    Submitted 6 months ago

    Recipe-page

    #accessibility#pure-css
    1
    why-not-phoenix•330
    @why-not-phoenix
    Posted 6 months ago

    Looks great. I guess only premium can get it looking exact based on dimensions.

  • b_Root•210
    @LizunYuri
    Submitted 6 months ago

    Social links profile

    1
    why-not-phoenix•330
    @why-not-phoenix
    Posted 6 months ago

    Did you use Bootstrap? Still don't understand @font-face lol

  • Trevor•590
    @TrEv0rRrRr
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I know this is a simple exercise, but in my life I thought I would be able to use flex without getting stressed. I used it to position the profile picture and the username in the correct place, and also to center the card on the page. This is a big progress for me, and I hope I can continue like this.

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

    Unlike the exercise before, this was much easier and I didn't have a big problem while the realizing.

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

    The way I centered the card in the page is correct? In this case it worked, because it was a simply card, but in a more complex scenary like a complete page, what are others forms to center elements in a page?

    Blog-preview-card

    #accessibility#pure-css
    1
    why-not-phoenix•330
    @why-not-phoenix
    Posted 6 months ago

    Your code link is showing a 404

  • nazimansarii•180
    @nazimansarii
    Submitted 7 months ago

    html css

    1
    why-not-phoenix•330
    @why-not-phoenix
    Posted 6 months ago

    The font do not seem to match the one given in the challenge

      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet">```
    You can use the code above to link.
    
  • Dias•140
    @adambeckercodes
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time? What I'm Most Proud Of

    I’m proud of creating clean, semantic, and accessible HTML, especially with elements like , , and ARIA labels. The skip link and responsive design make the project user-friendly, and I love how the pulse animation adds a modern touch. Organizing CSS with variables also made my styles reusable and professional.

    What I Would Do Differently

    Next time, I’d focus more on optimizing the design for larger screens and testing accessibility with screen readers. I’d also experiment with more interactivity, like hover effects or JavaScript, and simplify my CSS for even better maintainability.

    What challenges did you encounter, and how did you overcome them? Challenges I Encountered

    One of the challenges I faced was positioning the card in the exact center of the screen.

    I solved this by using Flexbox on the `` element, setting display: flex, justify-content: center, and align-items: center. This allowed me to align the card both vertically and horizontally with minimal code. Additionally, I added min-height: 100vh to ensure the body always covered the full viewport height, making the centering consistent across different devices.

    This approach was simple and effective, and I’ll definitely use it again in future projects!

    What specific areas of your project would you like help with? Areas I’d Like Help With

    I’d really appreciate more feedback on accessibility, especially regarding how I can improve the user experience for those using screen readers or navigating with a keyboard. I’ve added ARIA labels, focus styles, and a skip link, but I’d like to know if there’s anything else I could refine or add.

    Additionally, I’d love advice on my code structuring. While I tried to keep my CSS organized with variables and meaningful class names, I’m open to suggestions on how to make the code cleaner, more reusable, or easier to maintain.

    Any insights would be super helpful—thank you! 😊

    QR Code Component using CSS Flex

    2
    why-not-phoenix•330
    @why-not-phoenix
    Posted 6 months ago

    Looks almost perfect!!! How'd you do it?

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