Skip to content
OverviewSolutions
8
Comments
20
Melwyn
@melwynt

All comments

  • Melwyn•250
    @melwyntPosted over 2 years ago

    Hi Erick! 👋 Congrats for your first challenge! 🥳

    There's only one minor issue in your report: Page should contain a level-one heading.

    You can easily fix this by replacing the h2 tag with an h1 tag.

    In your CSS, try to replace all the pixel units with rem unit. This will improve accessibility if the user is zooming the page in or out.

    You could for example add this in your CSS:

    html {
  box-sizing: border-box;
  font-size: 62.5%; // 1rem = 10px, 10px/16px = 62.5%
}

    Then, instead of using font-size: 15px;, you can do:

    font-size: 1.5rem;

    For more information regarding this trick, this stackoverflow answer is perfect: stackoverflow.com/a/58421428/7246315

    Cheers and happy coding!

    Marked as helpful
    0
  • James•390
    @neenrevaSubmitted over 2 years ago

    APIs. First go at using one. I quickly came across the fetch() method and ran with it. Will continue to work on more complicated API data integration. Noticed that firefox might not fetch more than once and I'll need to figure that out.

    Advice generator app

    1
    Melwyn•250
    @melwyntPosted over 2 years ago

    Hi! Great job on the integration of the design and API.

    Regarding the issue with fetch not retrieving a fresh advice, it has to do with the fact that the data is being cached.

    One way to overcome this is to make sure the API URL you're requesting is always unique. This can be done by adding a timestamp in the URL.

    And if you would like to view the solution directly, you can checkout my solution here.

    I'm using React and Axios but the JS logic can be reused in your project.

    Cheers and happy coding!

    PS: by always changing the URL, you'll also be able to bypass the 2-second rule of the API

    Marked as helpful
    0
  • Melwyn•250
    @melwyntPosted over 2 years ago

    Hi 👋

    Changing the color was definetely a challenge for me too.

    To do this, your img tag needs to be in a div with the purple background color. Meaning that the layer behind your image needs to hold the purple color.

    In the HTML, you would have:

    <div class="stats-card__hero-img">
<img src="path/to/image" alt="">
</div>

    And in your CSS file, you would:

    • apply the purple background color to the div.
    • and for the img, you need to use mix-blend-mode: multiply with 0.75 opacity.

    For more details, checkout my code here on Github.

    And for more information on CSS blend modes, I found this article very helpful: getflywheel.com/layout/css-blend-modes/

    Happy Sunday and happy coding!

    0
  • Melwyn•250
    @melwyntPosted over 2 years ago

    Hi 👋

    You might want to check again how you display your footer.

    For now it's broken as your footer is not appearing below your card.

    This might be a flex issue where you would need to put the flex direction.

    Have a great weekend and happy coding!

    1
  • Melwyn•250
    @melwyntPosted over 2 years ago

    Hi 👋 The Github link to view the code is not working in this Frontendmentor page.

    Otherwise your version is perfect. On mobile, the margins are nice and they give a nice breathing space.

    Good weekend and Happy coding!

    0
  • Melwyn•250
    @melwyntPosted over 2 years ago

    Hi Andy 👋 Your solution is really good. I like the animation on the text placeholders. Some people might argue that it's too distractive but for the purpose of the challenge, it's a nice touch.

    And the toast is definitely a good UX decision. This way you avoid the user into thinking that the form is not submitting anything.

    My only comment would be on the readme file. Even if we are not the ones that created the designs, it might be good to add in the Readme file those UI/UX decisions and introspections 😃. Especially if those are decisions you took on your own and were not provided in the requirements.

    Cheers and have a great weekend.

    Marked as helpful
    0
  • Joshua•130
    @dyntbnSubmitted over 2 years ago

    Hi everyone, 👋

    Happy with how the responsiveness came together in this project. However, I came to wonder what "real world" media queries are targeted in a professional project. 🤔

    My current method I'm going by is targeting 1400px and 375px. In between those targets, I've developed a pattern of targeting: 900px, 700px or 800px, based on where it breaks in these challenges.

    Is my method normal (fix it as it "breaks")? Should I standardize my approach by targeting specific sizes? For example, common screen sizes mentioned by a blog.

    Would really like to hear your thoughts. Thank you for reading, have a great weekend! 🙂

    Responsive Stats preview card component

    3
    Melwyn•250
    @melwyntPosted over 2 years ago

    Hi 👋 I would also think that the "fix it as it breaks" approach is enough.

    Otherwise this solution looks quite popular on Stackoverflow:

    @media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

    Hope this was helpful.

    Cheers and have a great weekend too 😀

    Marked as helpful
    1
  • Kristina225•260
    @Kristina225Submitted over 2 years ago

    Hi, everyone! I didn't have any significant difficulties with this challenge, so I have nothing specific to ask about. However, if you have the time to check out my solution and give me any pointers on how to improve my code, I would appreciate it very much. :)

    3 column preview card component with HTML and CSS

    3
    Melwyn•250
    @melwyntPosted over 2 years ago

    Hello Kristina,

    The desktop version is nicely done.

    However you might want to check again the responsiveness for the mobile version. I think there is an issue with the height of the container or card because the site is partially truncated. A media query with the correct pixel width will most likely resolve this.

    Happy coding!

    Marked as helpful
    1
  • Gareth•410
    @Gareth-MooreSubmitted over 2 years ago

    Hey everybody!

    This one was pretty easy. I mostly struggled with getting the colours right. Do you have any tools that you could point me in the direction of to use the eyedropper to get colours (to match)?

    Thanks every, have a great day!

    Order Summary Component with HTML and CSS

    4
    Melwyn•250
    @melwyntPosted over 2 years ago

    Hi Gareth! 👋

    Some more tips to make your life easier 🙂

    These are the tools that you can use to make pixel-perfect versions:

    • Pixel Perfect Pro - This helps me to display a screenshot on top of the webpage to easily check if dimensions were accurate. This is super useful is you need to create pixel perfect work.
    • PX: Viewport Dimensions - This add-on will show you the dimensions of your viewport while resizing your browser.

    Other tools:

    • Figma - This helps me create a rapid mockup to get dimensions of components. I also use Figma to pick the colors from the screenshots to create a color palette.

    Cheers

    Marked as helpful
    0
  • Francisco Prado•80
    @franciscoprado4Submitted over 2 years ago

    Attempt 3. Of matching my work with the preview slider of Frontend Mentor. If you have any tips on how to match the projects with the slider of the preview of frontend mentor would be apreciated.

    Order Summary challenge - Flexbox and Grid

    5
    Melwyn•250
    @melwyntPosted over 2 years ago

    Hi! 👋

    These are the tools that you can use to make pixel-perfect versions:

    • Pixel Perfect Pro - This helps me to display a screenshot on top of the webpage to easily check if dimensions were accurate. This is super useful is you need to create pixel perfect work.
    • PX: Viewport Dimensions - This add-on will show you the dimensions of your viewport while resizing your browser.

    Other tools:

    • Figma - This helps me create a rapid mockup to get dimensions of components.

    Cheers

    1
  • Adambentleyio•60
    @AdambentleyioSubmitted over 2 years ago

    A recurring question is how do you know if a component is "pixel perfect". What methods do you use to translate the mockup to development? Thanks!

    QR code component

    4
    Melwyn•250
    @melwyntPosted over 2 years ago

    Hi!

    These are the tools you can use to create a pixel perfect website:

    • Pixel Perfect Pro - This helps me to display a screenshot on top of the webpage to easily check if dimensions were accurate. This is super useful is you need to create pixel perfect work.
    • PX: Viewport Dimensions - This add-on will show you the dimensions of your viewport while resizing your browser.

    Other tools:

    • Figma - This helped me create a rapid mockup to get dimensions of components.

    In case you have a screen smaller than the designs provided (usually they have 1440px in width), you can open the developer tools in Chrome or Firefox and display the page with the exact dimensions you need (desktop or mobile).

    0
  • Navid Dev•140
    @navidabdiSubmitted over 2 years ago

    Actually finding the exact font size and also the exact width of elements is kind of frustrating. But it was a great challenge. if you have any suggestions to make my code better I really appreciated if you share it with me. Thank you.

    Stats preview card component By Navid Dev

    1
    Melwyn•250
    @melwyntPosted over 2 years ago

    The image overlay is perfect. if I may ask, how did you find the correct parameters for the overlay?

    There is nothing much to add here. Just one minor thing: the stat headings should be in uppercase.

    Cheers!

    0