Skip to content
OverviewSolutions
10
Comments
11
Michael Godfrey
@michagodfrey

All comments

  • Asfer Ali•260
    @Asfer-devSubmitted over 1 year ago

    My thoughts: So although I've managed to complete the challenge, there were definitely some challenges in the way that I was not able to solve.

    One of them was working with the API. It was such a pain. This API's data fields are not consistent throughout the countries. Some don't have capital, some don't have native names, etc. I was constantly getting errors in my application.

    Also, I don't know how to display "unknown" elements inside an object in the HTML structure. Like we can use the map function for arrays, but I don't know how to display items if they are inside an object. Specifically, some fields like languages and currencies were inside an object.

    So if someone knows how to solve these problems, guidance would be appreciated.

    Edit: fixed the "displaying object children" issue!

    Responsive Countries API with react.js and tailwind css with dark mode

    1
    Michael Godfrey•340
    @michagodfreyPosted over 1 year ago

    Hi Asfer,

    Great work on the challenge! It looks good and works well despite the difficulties you mentioned.

    It sounds like you were having problems with rendering the data, I had a look at your code and I think you could try ternary operators to render the data. For example.

    <p> <b>Capital: </b> {capital ? capital : null} </p>

    Without that condition, my React app would crash whenever the component was fed an object without a capital field.

    Hope that helps :)

    Marked as helpful
    0
  • Anderson Keller•60
    @AndersonKellerSubmitted over 2 years ago

    little difficulty and verbose code CSS for me, more praticing in flex content

    CardFlexForPost

    2
    Michael Godfrey•340
    @michagodfreyPosted over 2 years ago

    Oh and well done keeping the accessibility issues to just one. I see that one is about no <h1> element. But there is no clear place to put a <h1>, is there. A cool trick to get rid of that is:

    h1 { font-size: 0px; }

    This style will make it invisible to users, but screen readers will still see it and you won't get the pesky issue on your frontend mentor challenges.

    Hope that's helpful. Good luck on your future challenges!

    Marked as helpful
    0
  • Anderson Keller•60
    @AndersonKellerSubmitted over 2 years ago

    little difficulty and verbose code CSS for me, more praticing in flex content

    CardFlexForPost

    2
    Michael Godfrey•340
    @michagodfreyPosted over 2 years ago

    Hi Anderson,

    A solid effort here. Well done. Imo, yours actually looks better than than the design due to the shadows and slightly larger text makes it more readable.

    Feedback: The desktop design is good, but it's not mobile responsive. I don't think your css is verbose, but I can see why this challenge would be tricky to do with flexbox. A simpler way might be to use flexbox for the mobile display and grid and grid-template-columns at desktop size with media-queries.

    Below is a link to my solution, it's definitely not the best example of this challenge, but it shows what I mean:

    https://www.frontendmentor.io/solutions/testimonials-grid-T_Nxd_c5z

    Marked as helpful
    0
  • Michael Godfrey•340
    @michagodfreyPosted over 2 years ago

    It's looking good Florencio!

    As for feedback, on my firefox browser, the button does not generate a new advice. But when I checked on Opera, it is working fine.

    This could be an issue on my end though, I'm using linux ubuntu. There's a lot I don't know, and it seems strange that fetch would not work with firefox, - the problem my end. Maybe give it a go on firefox on your device?

    2
  • Azhar•600
    @azhar1038Submitted over 2 years ago

    Profile card component with a little bouncy entry animation and a dark mode.

    The most difficult part for me was to position the background image. I failed to do that with background-image, so ended up using pseudo element with overflow: hidden;. Please let me know if you have any better solution (modifying the image is a good option I believe 😅)

    I also failed to apply filter on the card top image to match it with dark mode. When I applied filter to it, it covered the profile picture. If you have any idea, how to darken that image without breaking other things, do let me know!

    Profile card with entry animation and dark mode

    3
    Michael Godfrey•340
    @michagodfreyPosted over 2 years ago

    Hi Md Azharuddin, this is looking great. The bouncy feature and dark mode are working perfectly I think. A great way to enhance this project.

    As for using pseudo elements for the background, the feedback I got for this challenge was that is the best way to go. The background is the hardest part of this challenge (without doing extras) and not really newbie territory imo.

    As for the dark mode on image, I don't know how darkmode could be applied to an image, you'd need a separate image I think, or directly edit the fill property of the svg.

    Marked as helpful
    0
  • Michael Godfrey•340
    @michagodfreyPosted over 2 years ago

    Hi Cesar, this calculator is looking very close to the design nice work!

    One tip that I hope is helpful, I managed to eliminate the arrow buttons on the inputs with this code:

    /* remove default input styles Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    /* remove default input styles Firefox */ input[type=number] { -moz-appearance: textfield; }

    On my firefox those buttons appear by default, and when I checked on opera, they appear when the input is active.

    1
  • raionus•310
    @sinjin25Submitted over 2 years ago

    Is there a better way of making these components match the design beside using hardcoded widths/heights for the containers?

    Vue.js Component Solution w/ Flex

    1
    Michael Godfrey•340
    @michagodfreyPosted over 2 years ago

    Hi ralonus, Solid effort here! Answering your question, the way I did it was with padding inside the card and margins of the cards' child elements. It's a bit of trial and error, but I think it results in something that is easier to style and still ends up being close enough to the design.

    My solution is linked below, I hope it's helpful

    https://www.frontendmentor.io/solutions/3column-preview-card-component-dq4M7vC5j

    P.S. A nice little trick to deal with the h1 accessibility error is this h1 { font-size: 0px } I just learned it and it clears up that error without displaying on your live site.

    Marked as helpful
    0
  • Michael Godfrey•340
    @michagodfreyPosted over 2 years ago

    Well done completing your first challenge on Frontend Mentor!

    As for feedback, there are some handy html and accessibility issues raised. These are useful since they pick up things that would be hard for a human to notice and can help us form good habbits.

    There is a style-guide.md included in the zip file you downloaded. It gives you the exact fonts, font sizes and colors to use so we don't need to guess them. The style guide in this project has link to Google fonts, Outfit style, and Google fonts has instructions on how to use them in our projects.

    Looking forward to your next solution!

    0
  • Michael Godfrey•340
    @michagodfreyPosted almost 3 years ago

    It looks very close the design, and with no issues - great work! Your code is clean and makes this one look easier than it is. I learned a lot from it, thanks.

    Marked as helpful
    1
  • Eleana Tyradelli•180
    @eTyradelliSubmitted almost 3 years ago

    Hello everyone! This is my first project on Frontend Mentor. My aim was to hone my HTML and CSS skills while learning a bit of JavaScript on the way.

    Id love some thoughts and comments on possible accessibility issues, as I just started learning accessibility and I'm still not sure what's important and what's not. I'll update my solution with relevant fixes when I have a better grasp of what's needed.

    Also, any thoughts on my JS or other files would be great.

    Thanks!

    Sunnyside Agency responsive landing page HTML/CSS/JS

    1
    Michael Godfrey•340
    @michagodfreyPosted almost 3 years ago

    Hi Eleana,

    On desktop view your page looks great and basically identical to the design. Great work! But when I shrink the screen to mobile size sometimes the content doesn't shrink with it, but when I refresh, it looks fine.

    As for the accessibility issues, I don't think they are a deal breaker but just point out best practices. The links in the report explain them.

    Marked as helpful
    0
  • Michael Godfrey•340
    @michagodfreyPosted almost 3 years ago

    It looks really good, very close to the design indeed.

    0