Skip to content
OverviewSolutions
31
Comments
101
P
j5
@jmnyarega

All comments

  • j5•2,290
    @jmnyaregaPosted over 3 years ago
    • To answer your question, there shouldn't a space between the selector and the pseudo-class :hover i.e .download-primary:hover.
    .download-primary:hover{
    background-color: var(--secondary-blue);
}

    Good work on the challenge 👏

    Marked as helpful
    1
  • j5•2,290
    @jmnyaregaPosted over 3 years ago

    Nicely done, I have one suggestion:

    • Look into relative units(em/rem), this will enable users to adjust the font sizes of your app from their browser settings.
    0
  • j5•2,290
    @jmnyaregaPosted over 3 years ago

    Nice work on the challenge, I have a few recommendations:

    • You don't have to duplicate navigation HTML code for mobile and desktop. Use media queries to alter the styling depending on the screen size.

    • section should be under main not header.

    • Instead of leaving the alt attribute of the logo image undefined, you can pass the name of the company. In this case, Project Tracking will suffice.

    • Add either role="presentation" or alt="" aria-hidden="true" to a decorative image so that bots can skip it. without alt attribute, the screen readers will read out the path.

    • Add a hover state to the button and links.

    Otherwise, nicely done 👏👏

    Marked as helpful
    0
  • j5•2,290
    @jmnyaregaPosted over 3 years ago

    Hi @designmonkey714,

    • You have opacity: 0.9 on cover-overlay, it should work fine without the opacity.
    • Look into relative units(rem/em/vh/vw), they enable users to adjust e.g font sizes from their browser settings.

    Otherwise, great job on the challenge.

    1
  • j5•2,290
    @jmnyaregaPosted over 3 years ago

    Hi @Deor1496,

    Congratulations on getting this done.

    • This class w-2/3 is breaking the responsiveness on small screens. I can see the class translates to width: 66.66% which is not wide enough for mobile view. You can increase that to width: 90% => w-9/10.

    • On the background image, set background-size: 100vw 40h.

         background-image: url(./images/pattern-background-desktop.svg);
   min-height: 100vh;
   background-position: top center; // you dont need to set this
   background-repeat: no-repeat;
   background-size: 100vw 40vh;

    • Avoid setting solid heights, use min-height instead of height, i.e min-height: 100vh

    • For such a small project, I will recommend not using libraries. In fact, it can cause a lot of confusion.

    Hope this helps, happing coding!

    2
  • j5•2,290
    @jmnyaregaPosted over 3 years ago

    Hi @Victorrrocha.

    You did great on the challenge, and I can't seem to break the responsiveness 🙂. The page responds well to all screen sizes. Good job on that, I have a few suggestions:

    • Look into relative units in fact, I will encourage you to use them almost everywhere. This will allow users to change font sizes from their browser settings.

    • Add hover state on the buttons.

    Marked as helpful
    0
  • Amanda Talle•40
    @atalleSubmitted over 3 years ago

    Hello community!

    I struggled with implementing the BG pattern and am not satisfied with how the pattern transitions between breakpoints. Would love feedback on how to improve this, as well as general feedback on the structure of my HTML & CSS classes. Thank you!

    Mobile first design built with plain HTML and CSS

    2
    j5•2,290
    @jmnyaregaPosted over 3 years ago

    You can use the background CSS property to place the images on the corners, but first:

    • Center your card property, I will suggest having min-height & container width's properties be set on the body:
    • Use background properties to position images.
    • play around with background-size property to place the images in their correct positions. 
      body {
  min-height: 100vh;
  max-width: 90em;
  width: 90%; 

 background-image: url(.../top-left.png) url(bottom-right.png);
 background-repeat: no-repeat;
 background-position: <some-value some-value>,  <some-value> <some-value>
}

    
You can check out CSS background property on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) for more

Happy coding!
    Marked as helpful
    0
  • j5•2,290
    @jmnyaregaPosted over 3 years ago

    You did an impressive job on this one, I only have one suggestion:

    Marked as helpful
    0
  • Steven Abaco•65
    @stevenabacoSubmitted over 3 years ago

    Hello fellow Developers,

    This is my first challenge with Frontend Mentor. I singed up to practice my coding skills on real projects and have something to prove I've got the skills. Also to help out other developers on the same learning track.

    I built this component using plain HTML and CSS. Built with Mobile First design process. Only added one @media query point at 768px.

    If anyone has time to review and let me know what they think and any recommendations on improvement I would greatly appreciate it. I'm always interested in ways to improve and welcome any feedback from the community.

    Thanks and looking forward to your feedback and comments!

    Mobile First using HTML & CSS with Flexbox

    1
    j5•2,290
    @jmnyaregaPosted over 3 years ago

    Hi @stevenabaco you did very well on the challenge 👏👏. I have a few recommendations for you:

    • Instead of background-size: initial, you can have something like background-size: 100vw 40vh`.
    • Look into relative units, using rem/ems enables users to resize fonts and sizes from their browsers.

    Happy coding!

    Marked as helpful
    1
  • j5•2,290
    @jmnyaregaPosted over 3 years ago

    Hi @Albusflames, good job on completing the challenge. I have a few suggestions for you:

    • Everything with a main tag.
    • Looks like the font family & font colours are a little bit off, you can refer to style-guide.md for the right fonts.
    • Look into relative units, this will allow users to resize font sizes from their browser settings.

    Otherwise, this is a good start.

    0
  • j5•2,290
    @jmnyaregaPosted over 3 years ago

    Hi @AnuRobo, good job on the challenge. I have a few suggestions:

    • Avoid setting solid heights, instead of height: 100vh use min-height: 100vh.
    • To remove the horizontal scrolling, add overlow-x: hidden on the body.
    • Prefer relative units to px, this allows users to adjust font sizes from their browser settings.
    • Wrap your card with the HTML 5 tag main.

    Happing coding 🙂

    Marked as helpful
    1
  • j5•2,290
    @jmnyaregaPosted over 3 years ago

    Impressive work on the challenge @JustAFatRaccoon 👏👏

    I have a few recommendations:

    • Prefer relative units to pixels.
    • Add hove state on the button.
    • You are switching to desktop layout too late (1440px), I suggest you switch at around 500px.
    Marked as helpful
    0