Skip to content
OverviewSolutions
9
Comments
10
P
Achi Gyuse Achi
@Achigyus

All comments

  • Srijan Manandhar•470
    @srijanssSubmitted 6 months ago
    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

    1
    Achi Gyuse Achi•160
    @AchigyusPosted 1 day ago

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

    0
  • Achi Gyuse Achi•160
    @AchigyusPosted about 2 months ago

    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.

    1
  • Daniel 🛸•44,310
    @danielmrz-devSubmitted 2 months ago
    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

    3
    Achi Gyuse Achi•160
    @AchigyusPosted about 2 months ago

    pixel perfect. nice work

    1
  • mkhantk•200
    @mkhantkSubmitted 5 months ago
    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

    1
    Achi Gyuse Achi•160
    @AchigyusPosted 5 months ago

    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
    1
  • Achi Gyuse Achi•160
    @AchigyusSubmitted 5 months ago
    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

    2
    Achi Gyuse Achi•160
    @AchigyusPosted 5 months ago

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

    0
  • ha308ing•90
    @ha308ingSubmitted 6 months ago
    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

    1
    Achi Gyuse Achi•160
    @AchigyusPosted 5 months ago

    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.

    0
  • Ashish Vaidya•90
    @Ashish-619Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Gaining confidence

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

    Nothing as such

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

    responsiveness & design

    Recipe page in react

    1
    Achi Gyuse Achi•160
    @AchigyusPosted 5 months ago

    Hey Ashish Vaidya.

    Congrats on completing the recipe challenge. I looked through your jsx and the structure of your site looks solid but your css is where the issue is, one issue I can point out is that you can use media queries to ensure that the styles display the way you need them to on desktop(build for mobile first, then use media queries to get the desktop design).

    One other thing I noted was that the background of the page was black on my device, I'm not sure if it's because I use dark mode, but you should probably check it out.

    Congrats once again

    0
  • Florian Frosch•60
    @ffroschSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I really like trying out different approaches for CSS-in-JS. I think my style objects worked well, but it becomes clear that a component based approach will be necessary for larger projects to keep things simple.

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

    I used absolute positioning to center the element and I enjoyed learning a bit more about this method. But I also found it quite hard to get everything right and had to make countless small adjustments to fix inconsistencies in the design.

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

    Nothing specific right now.

    Social links profile | react, emotion, css custom properties

    1
    Achi Gyuse Achi•160
    @AchigyusPosted 6 months ago

    Hi Florian.

    I love your submission, your attention for details is really nice. However I noticed something.

    1. On mobile, there are some gaps in the responsive design, I mean that some mobile screens don't have some padding between the edge of the screen and the social-links-card. You can check using your devtools and slowly resize down to see what I mean.

    2. On desktop screens, there are horizontal and vertical scroll bars, funny thing is they don't show while the devtools tab is active, so maybe that's how you missed it. I identified the culprit code:

    .css-13cezar {
    position: absolute;
    overflow: scroll;
    inset: 0px;
    min-width: 320px;
    min-height: 580px;
    width: 330px;
    height: 580px;
    margin: auto;
    border-radius: 1rem;
    background-color: var(--colors-darkgrey);
    display: flex;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
}

    The overflow property on your main tag is set to scroll, you can set it to hidden or remove it to fix the issue.

    Kudos for your work once again.

    Marked as helpful
    1
  • dynamic109•230
    @dynamic109Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I was able to build the project

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

    Encountered problem with css but i was able to resolve it using stack overflow

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

    None

    blog card landing page using react

    1
    Achi Gyuse Achi•160
    @AchigyusPosted 6 months ago

    Hi mate.

    Congrats on finishing the challenge, you did a good job. I just have a few recommendations

    1. The link you submitted to view your code doesn't actually link to the code, making sure the proper link is posted would make it easier to review your submission and for you to receive feedback.
    2. For the image component, you used a div and set it's background to the image, it would have been more appropriate to use an img tag.
    3. You wrapped the learning element in a b tag, it would be more appropriate to use the font-weight css property to achieve the desired effect. This element could also have been a button or an a tag.
    4. It would be more appropriate to set the title as a h1 tag rather than a h2.
    5. The text-shadow property added to the blog description makes the text difficult to read, you could consider removing it as it is not part of the design.

    Thank you.

    Marked as helpful
    0
  • Josh Pickard•130
    @joshpickardmeSubmitted 11 months ago
    What are you most proud of, and what would you do differently next time?
    1. Animation
    2. More animation
    What challenges did you encounter, and how did you overcome them?

    Quite a simple challenge

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

    N/A

    QR Code Component

    1
    Achi Gyuse Achi•160
    @AchigyusPosted 6 months ago

    Really great solution. I love the animation

    1