Skip to content
OverviewSolutions
4
Comments
4
Kerwin
@KerwinAngeles

All comments

  • Dan P.•250
    @DanielfwwSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I initially submitted this on Thursday - few days ago but the scaling wasn't up to date, so I wanted to redo the project. I'm proud that I didn't give up on this - this one was probably the most detailed project I did so far..

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

    I understimated this project really badly. Looking at the projects I did in the past this actually looked easy in my eyes. It wasn't - atleast for me it wasn't. -I struggled with making a table on the bottom of the page; -I have to definetly refresh on my Semantic HTML - using main & picture its definetly not enough; -I looked at the design they made for 375px but I do not have a device like that so I went with 430px+ so I can actually see the mobile version of this on my phone.

    • scaling was also an issue, had to go over this project again.
    What specific areas of your project would you like help with?
    • Semantic HTML
    • Scaling, will have to start using Ems and rems,
    • Any comments and suggestions are more than welcome.

    Responsive Design - Recipe Page

    1
    Kerwin•80
    @KerwinAngelesPosted 6 months ago

    Incredible job guy.

    1
  • Gunal K•80
    @Gunal-kSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I've just completed a front-end coding challenge from @frontendmentor! 🎉

    You can see my solution here: https://www.frontendmentor.io/solutions/social-media-profile-t65PHk6lcU

    Any suggestions on how I can improve are welcome!

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

    One challenge I encountered was ensuring that the layout and styling were responsive across various devices and screen sizes. To overcome this challenge, I utilized media queries to adjust the styles based on the viewport width. By testing the layout on different devices and using tools like browser developer tools to simulate various screen sizes, I was able to identify areas that needed adjustments and fine-tune the CSS accordingly.

    Another challenge was selecting an appropriate color scheme that not only looked visually appealing but also provided good contrast and readability. To address this, I experimented with different color combinations and tested them in the context of the preview card layout. I also considered accessibility guidelines to ensure that text and interactive elements had sufficient contrast for easy readability.

    Lastly, integrating external fonts from Google Fonts posed a minor challenge in terms of correctly importing and applying the font styles. However, by following the documentation provided by Google Fonts and ensuring proper syntax in the CSS import statement, I was able to successfully integrate the desired font into the project.

    Overall, by leveraging testing, experimentation, and attention to detail, I was able to overcome these challenges and create a visually appealing and functional front-end design for the eMentor challenge.

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

    If I were seeking help with this project, I might ask for feedback on specific aspects such as:

    1. Visual Design: Are the colors, typography, and overall layout aesthetically pleasing and appropriate for the content?

    2. Responsiveness: Does the layout adapt well to different screen sizes and devices? Are there any specific breakpoints or adjustments that could improve the responsiveness further?

    3. Code Optimization: Is the CSS code well-organized, maintainable, and efficient? Are there any redundant styles or opportunities for optimization?

    4. Accessibility: Are the colors and contrast levels suitable for users with visual impairments? Are interactive elements accessible via keyboard navigation?

    5. Browser Compatibility: Have I tested the layout across different browsers to ensure consistent rendering and functionality?

    6. User Experience: Is the user experience intuitive and seamless? Are there any improvements that could enhance usability or interactivity?

    7. Performance: Are there any performance bottlenecks, such as large image files or excessive CSS/JavaScript? Are there optimizations that could improve page load times?

    Receiving feedback on these areas can help me refine and improve the project, ensuring it meets both functional and aesthetic requirements.

    social media profile

    2
    Kerwin•80
    @KerwinAngelesPosted 6 months ago

    Set more height to the card container.

    Marked as helpful
    0
  • Lyle Patterson•60
    @Squing0Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    The overall responsiveness at smaller sizes.

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

    Again, mainly making the container respond to smaller sizes here. Getting the container to work in a desktop view didn't take long.

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

    The challenge said it was possible to make text smaller without using media queries but I was unable to do this. I also had a lot of trouble scaling the image down and I'm not sure if the way I've done it is good practice. I also noticed that in the mobile design that the challenge gave that the image appears to be zoomed in but I was unable to achieve this effect. I also only used hover and not focus as the challenge listed as it was unclear where to use this.

    Blog page using flexbox and a media query.

    2
    Kerwin•80
    @KerwinAngelesPosted 6 months ago

    You need add more padding inside the card, after that look great

    0
  • Danilo Lucban•60
    @dannnluvsSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    a display flex

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

    a center

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

    ,

    QR code compoment

    1
    Kerwin•80
    @KerwinAngelesPosted 6 months ago

    As you can see, your solution has a lot of padding inside the card, reduce a litte, you can play with that is not necesary that have the same padding but, is good if you try to look a bit similar that the correct solution. The image in the example is more bigger than you solution, I think that you going to fix that.

    Marked as helpful
    0