Skip to content
OverviewSolutions
19
Comments
22
Achi Gyuse Achi
@Achigyus

All comments

  • Achi Gyuse Achi•490
    @Achigyus

    Hey mate.

    Great work on the site, it looks really great. I just have one little tip

    You should set a max-width on the header, main, and footer tags along with a margin of 0 auto to center everything.

    Marked as helpful
  • Achi Gyuse Achi•490
    @Achigyus

    Hey Simon.

    Thanks for your feedback on my solution. I thought to return the favor by helping you review your solution.

    Here are some tips to improve the design.

    1. You need to properly center the contact card, this can be achieved by using flexbox or grid

    2. You need to set pointer styles on interactive elements such as the inputs, buttons, etc. You can set it using cursor: pointer

    3. It would also be a good idea to add some padding to the inputs and textarea to make it look better.

    These are some of the things I noticed. Thanks

    Marked as helpful
  • Achi Gyuse Achi•490
    @Achigyus

    Absolutely a great solution, Liz.

    I noticed that when using just the tab key to navigate the website, there was no outline on the buttons, so it seemed like it wasn't working.

    It was a small fix, and I forked your repo and created a pull request.

    You can check the pull request here

  • P
    Daniel 🛸•44,810
    @danielmrz-dev
    What are you most proud of, and what would you do differently next time?

    🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊

    🛠️ Built with:

    • Angular 🅰️
    • SASS 🎨
    • TypeScript 🔷
    • BEM Notation 🅱️
    • Mobile first workflow approach 📲

    My first GURU level project 😊

    If you have any suggestions on how I can improve this project, feel free to leave me a comment!

    Feedback welcome 😊

    Designo Multi-Page Website built with Angular + SASS 🅰️

    #angular#angular-material#sass/scss#typescript#rxjs
    4
    Achi Gyuse Achi•490
    @Achigyus

    Great work, buddy. Congrats on completing your first guru level project

  • Achi Gyuse Achi•490
    @Achigyus

    Hey @Coder-Liz,

    A really great solution; all buttons are accessible and work well. The UI looks good as well.

    The only thing I noticed is that it would be nice to add some cursor styling to the buttons apart from just the background change on hover.

    You can add that with the code below:

    .rating__submit-btn, .rating__number-btn {
    cursor: pointer;
}
  • P
    Michał•290
    @miedzygalaktycznygit
    What are you most proud of, and what would you do differently next time?

    This was my first project that makes me work with bigger json file and I feel more confident with json data and js after this one.

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

    I had some struggle with using same script on many websites but I found a way to handle this.

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

    I someone have a idea to optimize my JS please feel free to give me some advices. All help apprecise.

    quiz game

    #sass/scss
    1
    Achi Gyuse Achi•490
    @Achigyus

    Hey bro @Michał

    First up, big congrats on completing this project. It looked really small but soon became taxing. Also, congrats on becoming better at working with big JSON files; you're well on your way to data manipulation mastery.

    I have a few tips for you. But first allow me to say that there are many ways to build an app. For my solution, I used one JS file and one HTML file for all parts of the quiz and was just updating them by doing DOM manipulation. This approach was easier for me because you have access to all your variables in the same JavaScript file and can easily update them. Most times when you load a new page, the variables from the previous page may not be available again, except if you're using a framework like React or something similar to it.

    Secondly, for the project design, I'm assuming you decided to customize it with your own colors and styling, which is really great. However, there are some interactive states you can improve on, e.g., the hover-over quiz options, the selection of an option, and also indicating the correct option if the user got it wrong. These will help to increase the user's experience while using the website.

    Thanks and congrats once again. You can reach out to me if you need more specific help on my LinkedIn (in my profile), or you can check my solution or other people's solutions to get some inspiration.

    Marked as helpful
  • P
    leeport511•200
    @leeport511
    What are you most proud of, and what would you do differently next time?

    This time, I tried to be more patient, taking the necessary time to think through the solution to the problem. When I couldn't figure it out, I would Google it or ask ChatGPT, but only specific questions about how something worked, not the answer itself, as I feel that would be cheating. I don't think I would do anything differently; I believe the way I'm approaching it is helping me learn.

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

    The part of configure the password strenght with the checkboxes.

    Password Generator App using Sass and Javascript

    #sass/scss
    1
    Achi Gyuse Achi•490
    @Achigyus

    Hey Leeport

    Great work on your solution. It looks really great. I just have a few tips for you to help. 😊

    1. I noticed that when you load into the page, the password length slider has a default value of 8, and also the linear gradient is not applied. An easy way to fix this, would be to initialize the slider at 6 (which is your min value), and when the user uses the slider, it will apply the linear gradient.

    2. I also noticed that the password strength indicator only shows after the user has generated the password. I feel like it would be better user experience to update the password strength as the user selects the password options (uppercase, lowercase, etc.)

    That's all. I would love for us to connect. I have followed you on GitHub and sent a connection request on LinkedIn.

    Great work once again 🥳

  • Achi Gyuse Achi•490
    @Achigyus

    Great solution, Tarun.

    There are some things you can iron out to get the perfect submission.

    1. I noticed that the "can't be zero" error message for the number of people input field doesn't clear from the UI even after a number has been selected

    2. You should set the reset button to disabled when none of the input fields or buttons have been used by the user according to the empty state of the design

    3. You can put a general container/wrap (div) around the top image and the rest of the components; you can set that to have min-height of 100vh, flex it and center it horizontally and vertically so the content is properly centered on desktop devices

    Thanks for your submission

    Marked as helpful
  • Achi Gyuse Achi•490
    @Achigyus

    Great Solution, Mr Wraith

    All functions working well

  • Achi Gyuse Achi•490
    @Achigyus

    Great solution, bro.

    I just noticed something you can do to help get you closer to having a pixel-perfect design

    It's good practice to wrap your components in some sort of container, using styles directly on the body tag looks somehow. Something like this

    <body>
      <main>
            <div class="container">
                <div id="profile">
                    ...
                </div>
                <div id="tracking">
                     ...
                </div>
      </main>
</body>
    Marked as helpful
  • Achi Gyuse Achi•490
    @Achigyus

    Great solution, Ursa.

    I just have one little tip. I see that you check if the email is valid on input into the email field; however, there is no check/preventive measure for stopping the user from submitting the form with an invalid email.

    You can add the following code to the submitBtn event listener to fix that:

    submitBtn.addEventListener("click", function (event) {
  event.preventDefault();
  if (emailInput.value === "") {
    alert("Email required!");
  } else {
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (emailPattern.test(emailValue)) {
      firstPage.style.display = "none";
      secondPage.style.display = "flex";
      infoConf.innerHTML = `A confirmation email has been sent to <strong>${emailInput.value}</strong>.
    Please open it and click the button inside to confirm your
    subscription.`;
    } else {
      alert("Invalid email address!");
    }
    
  }
  emailInput.value = "";
});

    Then you can also improve the CSS as well.

  • Achi Gyuse Achi•490
    @Achigyus

    Hey Mohammed. Great solution, used significantly less javascript than mine. I'm glad to have learnt from your code. I followed you on GitHub and sent a connection request on LinkedIn. I'll appreciate if you follow me back as well. Thanks.

    Marked as helpful
  • P
    Srijan Manandhar•450
    @srijanss
    What are you most proud of, and what would you do differently next time?

    I got to learn about object-fit, object-position, block-size property for images. It helped me a lot to layout images and match the design for all the layouts.

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

    I had hard time figuring out how to lay the hero and footer image. In the hero image I tried different things,

    • I use transform scale, translateX to move the images in hero section
    • It worked fine, but in CSS I have to add lots of calc() functions and tweak to pixels to match the design. I since I used scaling it messed up with the horizontal size, so I have to use overflow-x hidden.
    • So, I had to redo it using object-fit and object-position property. And it fixed the overflow issue and I didn't have to tweak the pixels to make it work.
    • And then the footer image messed up. I've used object-fit to cover, so the image zoomed up. Then I found another solution to use block-size to fit the image aspect ratio.
    What specific areas of your project would you like help with?

    Open for feedback or comments

    Meet landing page using mobile first workflow

    #vite
    1
    Achi Gyuse Achi•490
    @Achigyus

    Great solution, mate. It looks really pixel perfect and I'll be use some of your methods to tweak my own solution. Kudos.

  • Achi Gyuse Achi•490
    @Achigyus

    Hi @tatasadi.

    Really great and pixel perfect submission. I loved how you created a compound component for testimonial card. It made your code very non-repetitive React sure is powerful.

    Awesome work once again. PS: I followed you on LinkedIn and Github, I will really appreciate it if you could follow me back as well.

    Cheers.

  • P
    Daniel 🛸•44,810
    @danielmrz-dev
    What are you most proud of, and what would you do differently next time?

    🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊

    🛠️ Built with:

    • Angular 🅰️
    • SASS/SCSS 🎨
    • TypeScript 🤖
    • BEM Notation 🅱️
    • Mobile first workflow approach 📲

    First Angular project. Really enjoyed working with this amazing framework, even more than React. Nice project to practice and understand the tools Angular provides. I thought I would choose React as my primary framework, but I think I changed my mind. 😊

    Again, thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. 💟

    If you have any suggestions on how I can improve this project, feel free to leave me a comment!

    Feedback welcome 😊

    Easybank Landing Page build w/ Angular, SASS and TypeScript 🅰️

    #angular#sass/scss#typescript
    3
    Achi Gyuse Achi•490
    @Achigyus

    pixel perfect. nice work

  • mkhantk•200
    @mkhantk
    What are you most proud of, and what would you do differently next time?

    I tried using frameworks and it works.

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

    With the frameworks, images didn't load after deploy. I had to tweak a little in src to make them appear.

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

    Any Suggestion, please? Thanks.

    Responsive Card Section using Flexbox

    #react#tailwind-css#vite
    1
    Achi Gyuse Achi•490
    @Achigyus

    Hi @mkhantk

    I love your solution, great use of flexbox but I noticed that your design is not so responsive at screen sizes between 766px and 1000px. Making this section responsive using css grid is really easy, but if you want to use flexbox, you can create a media breakpoint between those two dimensions and add the following css to the main element:

    main {
    flex-wrap: wrap;
    flex-direction: row;
}

    Then change flex-direction of the second div in the main element to row:

        flex-direction: row;

    Then change the flex order of the last div in the main element:

        order: -1;

    This will improve the display between these screen sizes, or alternatively you could use css-grid.

    I hope this helps. Great work on the solution.

    Marked as helpful
  • Achi Gyuse Achi•490
    @Achigyus
    What are you most proud of, and what would you do differently next time?

    I am proud at how fast I was able to get the markup setup and style the websites. I'm also proud that I was able to use more responsive properties in my css such as inline-size, block-size, and margin-block-end.

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

    My major challenge was trying to be semantically correct

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

    I would like help with my html semantics and accessibility. Thanks

    Responsive Product preview card component using ReactJS

    #react#vite
    2
    Achi Gyuse Achi•490
    @Achigyus

    @Jolijn0101 I guess it would be more proper to call it semantic JSX 😂. Thanks for the feedback

  • ha308ing•240
    @ha308ing
    What are you most proud of, and what would you do differently next time?

    not to say 'proud' but i liked to use responsive images with picture and source elements and grid-template

    next time i'd like to avoid using absolute length values

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

    📐

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

    how to move (higher or lower) the crossing line of strikethrough text? 🤔

    Product preview card react component with vite, postcss

    #react#vite
    1
    Achi Gyuse Achi•490
    @Achigyus

    Hey mate.

    Really great and pixel perfect solution. I couldn't find anything to correct, in fact I learnt some stuff from you.

    Congrats on completing the challenge.