Skip to content
OverviewSolutions
26
Comments
15
Stefan
@stfnpczk

All comments

  • Stefan•690
    @stfnpczkPosted over 1 year ago

    Looks great Jiwon!

    An other way to approach the input validation is to use a loop for the nodelist elements of the form. That way you only need to write one input verifier and can check all the fields together whether an input was made or not. To better understand what I mean, you can see my js of the challenge here .

    Happy coding :)

    Marked as helpful
    1
  • Kiyoomi•480
    @JukiyoomiSubmitted over 2 years ago

    I did my best on this challenge and really tried to do it pixel perfect, but I couldn't understand why my carousel keeps cutting the photos... if anyone can help me about this, I did it using Glider.js !

    Manage landing page using HTML,CSS,JS

    1
    Stefan•690
    @stfnpczkPosted over 2 years ago

    Hi Kiyoomi,

    I think the issue can be fixed, if you use padding-top instead of margin-top within testimonials .cards

    1
  • Stefan•690
    @stfnpczkPosted over 2 years ago

    Hey Paulina,

    for the icons to change the color on hover, they need to be in a dynamic format like for example svg. As far I know, you can’t do that with jpg/png as they are static and you can’t access any color properties within <img> itself.

    So instead of the png format, you should get svg icons or import them from some icon library like Font Awesome and apply the respective color properties for it to change the color.

    Marked as helpful
    1
  • DanielK•440
    @DanK1368Submitted over 2 years ago

    Hi guys,

    Appreciate any feedback, especially on the following:

    • the way I wrote my JS. I'm not sure if that is the right way, but since certain elements needed to be changed while others not, I made use of an array and filtered it as well in order to apply classes to certain elements only. Is this the right way? or is it too work-intensive?

    • I'm getting an issue when checking the accessibility in the browser devtools. "Clickable events must be focusable and should have interactive semantics" The arrow icon is inside an my button though. How do I fix this?

    • HTML5 markup, especially from an accessibility stand point. I feel like I need to still work on that a lot.

    Responsive Faq Accordion Card using SASS with partials/vanillaJS

    1
    Stefan•690
    @stfnpczkPosted over 2 years ago

    Hi Daniel,

    in regard to the js, I was asking myself the same question and stumbled upon the details element. It has a built in open state that can be toggled. So you can loop through all detail DOM elements and disable the open attribute for all except the one you clicked. For my solution, I was referencing the js in this post here.

    0
  • Evan Parker•200
    @evancp87Submitted over 2 years ago

    Hi all,

    I think i did ok with this one. Things that could be improved are the implementation of the shadow as a background image on mobile devices. The shadow moves when the accordion is expanded. I positioned it so it still looks ok, but i feel it's not ideal.

    I also went round in circles with using overflow: hidden on the illustration. I got the main image and background how it should be, but i couldn't get the illustration box to escape this. I could only get overflow: hidden to work on the parent container, but nowhere else. If i removed it here then the other images wouldn't work. I'd appreciate tips on refactoring this.

    I also am trying to refine my styles for really small devices, such as Galaxy Fold, so any tips on this would be handy also!

    Overall i enjoyed making this component!

    thanks, Evan

    FAQ Accordion Component- responsive mobile first, styled with Sass

    1
    Stefan•690
    @stfnpczkPosted over 2 years ago

    Hi Evan,

    one way to make the box float a little bit outside the card, is to put the box in a separate div that is outside of the accordion-container and put the z-index property on it.

    Marked as helpful
    0
  • HutHut•310
    @j-hutchisonSubmitted over 2 years ago

    Parts that i think could be improved:

    • How the stars are printed in the reviews at the top of the page, i used a repeating background image to avoid duplicating html img tags, is there another better solution here?
    • Testimonials, when i removed the height attribute, the purple background filled to the bottom of the parent ul element removing the indentation, is there a better solution than hardcoding height?

    Thank you for your feedback and help!

    Social proof solution using HTML / CSS / Flexbox

    1
    Stefan•690
    @stfnpczkPosted over 2 years ago

    Hello HutHut,

    using background-repeat: repeat-x is certainly a very good and efficient way to display the stars. Although there's nothing wrong with using multiple svgs here. As you put the stars in a flex container, you have more control over the gaps between them. But either way is fine, I think.

    As far as the indentation goes, I also struggled with that one. Instead of an explicit height, I used the n-th child selector in combination with align-self and flex-start/ center / end. Have a look here if you like.

    Happy coding!

    Marked as helpful
    0
  • Louise Norrsén•140
    @louisenorrsenSubmitted over 2 years ago

    I have problems with getting the image overlay the correct shade/color. Feedback on how to improve that image is very welcome!

    Thanks!

    Stats preview card component

    2
    Stefan•690
    @stfnpczkPosted over 2 years ago

    Hi Louise,

    one way to get the image closer to the color of the design is to put the properties mix-blend-mode: multiply and opacity:0.79 on the image and use a div with the purple background-color as specified in the style guide.

    Marked as helpful
    0
  • Nicholas Tapia•60
    @tapzx2Submitted over 2 years ago

    The fonts are always off in my solutions compared to figma or screenshot. I double checked everything and still not correct. Any ideas why this is happening?

    The solution screenshot is not what is being displayed in any browser I look at. Suggestions on how to fix this?

    Thanks!

    Meet landing page

    2
    Stefan•690
    @stfnpczkPosted over 2 years ago

    Hi Nicholas, I also have the impression that the font in Figma appears crisper than in the browser. I believe, this is because they both run different rendering engines. For more details see this figma forum post.

    As for the screenshot, you compare two jpg images against each other. Jpg is a lossy image format which is why it also looks different from what you see in the browser.

    Marked as helpful
    1
  • Rosi•440
    @strosiSubmitted almost 3 years ago

    Hi everyone :) In this challenge I tried to add some short effects (to the texts and the button) on page load. I'm not sure if that's the right way to do this so any advice on the subject would be very welcome.

    Landing page with Sass and JS - mobile first, flexbox

    1
    Stefan•690
    @stfnpczkPosted almost 3 years ago

    Hi Rosi, your solution looks fantastic as all of your solutions do by the way. Really great stuff :)

    In terms of animations, I unfortunately can’t contribute anything valuable yet. So far, I’ve always been lazy to incorporate any sort of animation, it’s on my list of things to look into though ;)

    But look-wise, I think, you put a really nice touch on your animations, it’s nice and smooth to look at.

    Once again keep up the great work!

    Marked as helpful
    1
  • Rosi•440
    @strosiSubmitted almost 3 years ago

    I had some tough time with positioning the image in this. It works now but was frustrating because I thought I knew that well enough and the only challenge will be the tooltip. I found some new attributes and played a little more with JS.

    Any suggestions on code improvement are very welcome.

    Article preview component (with Sass and JS)

    1
    Stefan•690
    @stfnpczkPosted almost 3 years ago

    pixel perfect awesome job 👍

    1
  • Stefan•690
    @stfnpczkPosted almost 3 years ago

    Well done Neha, your solution looks very good and responds well. In order to prevent the box to be cut off, you can place the box in a different container than the images of the shadow and the woman. I suggest you also put position: relative on that separate container so the box doesn’t move around with different screen sizes.

    Once again, well done and happy coding.

    Marked as helpful
    1
  • Volodymyr Balashov•510
    @volod-oneSubmitted almost 3 years ago

    Hello community of front end mentor. It's been a while. Here is my solution for this small challenge. I tried to focus on correct naming for classes and use BEM. And one more important thing, our components have to be clean enough to be able insert in section or other component without change our styles or do minimum of changes. This is one of the most important things which I've learned for last half year. So if you will try to inceare number of this cards, just uncomment some styles for parent component and our cards will display better. Please feel free to keep your comment and your doubts about my solution. And see you next time.

    NFT preview card

    2
    Stefan•690
    @stfnpczkPosted almost 3 years ago

    Looks great Volodymyr!

    Your code is nicely structured and well done in seeking a modular component approach.

    If you mind getting rid of the accessibility warnings in the report, you can do so by adding a main tag.

    Have a good one!

    1