Skip to content
OverviewSolutions
8
Comments
9
Sam
@wotanut

All comments

  • Vincenzo Marcovecchio•1,175
    @VincenzoMarcovecchioSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I would do different the tablet version

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

    I made a lot of errors but the overall solution looks decent

    Time tracking dashboard

    #vue#animation
    1
    Sam•140
    @wotanutPosted 2 months ago

    This is an amazing solution, well done. The animated fly-in's are awesome. Here's a few tips to improve:

    • Try putting your javascript in a seperate file to make your code easier to read
    • Add more of a border radius around the report for card to be consistent with the rest of the border radiuses
    • It isn't clear what the active state is (weekly, monthly, daily), try adding a hover effect so that it's clearer

    Overall, this is an exemplary solution, well done.

    1
  • Sam•140
    @wotanutPosted 5 months ago

    An excellent attempt, here's how you can improve:

    • Add a bit of padding between the outside of the boxes and your content by adding
    display: grid;
place-items: center;

    To your body, it will also deal with centering your content.

    • Try to use git more to version control your code instead of just having one commit.
    • Your CSS has inconsistent spacing, try using a formatter such as prettier.

    It may be of interest to you but Kevin Powell has a good tutorial on this solution. Other than these minor things, you did an excellent job, well done. :)

    0
  • Sam•140
    @wotanutSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Most proud of the fact that I completed this challenge in under an hour, although I was aiming for 30 minutes. My emmet usage and skills has improved significantly which pleases me and i'm nearly there on remembering how to use favicons

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

    Writing the box shadows and how I can use pseudo elements like ::before for the box shadows

    Responsive Four Card design

    #vanilla-extract#pure-css
    2
    Sam•140
    @wotanutPosted 6 months ago

    Can you please leave some useful feedback @AVARUSJOSE , I don't think you've understood the point of the site and the feedback function. Everytime you finish a challenge you're supposed to leave some constructive feedback about how the other person can improve instead of post good job etc so that you can move on in the learning paths.

    0
  • Sam•140
    @wotanutPosted 6 months ago

    An excellent attempt, well done. Here's how to improve your solution:

    • Consider using an alternative to <div> such as <article> to improve semantics and accessibility.
    • You can centre the whole block text inside your HTML like so
    html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

    This also includes some resets that you should be performing

    • Consider using CSS variables to reuduce repetitive code and to make variables easier to modify. CSS Variables Tutorial
    • Consider adding six grid areas instead of what you have now to make it easier to align such as grid-template-areas: "one two three" "four five six"; then add grid-row: span 2; to your rows that need to span two or more rows and change the grid-area to be of this syntax grid-area: one / four;. This works as the text doesn't need to follow the same grid shape as the cards.

    Well done though, an excellent attempt :)

    Marked as helpful
    0
  • Sam•140
    @wotanutPosted 6 months ago

    An excellent attempt, well done. Here's how you can do better:

    • Align the card itself to the centre of the screen. You can do this by adding this snippet to either your App class or HTML/Body
    display: flex;
align-items: center;
justify-content: center;
    • Try not to use div's and prefer other semantic elements like <Section> or <Article> and include a <Main> as well for every document. Here's a couple of useful articles as to why it's important. Dev.to FreeCodeCamp
    • Your media query needs adjusting to have effect on a slightly bigger screen or you need to increase your padding on your product text so it does not flow off the card.
    • I think you can benefit from using a naming convention like BEM (Block, Element, Modifier) is beneficial because it makes your CSS more organized, readable, and easier to maintain. BEM helps you clearly understand the purpose of each class, avoid naming conflicts, and create reusable components, leading to a more scalable codebase. For more details.

    Your media query's are very well written, and the attempt extremely polished, well done :)

    0
  • iruburu•100
    @IruburuSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Eu me orgulho de conseguir ter feito de forma que ficasse igual/quase igual, e também por ter ficado bonito. Tentaria fazer de outras comidas e usar variedade de cores.

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

    Quase não encontrei desafio. Porem tive uma quebra de cabeça com umas das folhas de estilo que criei que estava atrapalhando a responsividade da página.

    Página responsiva usando tamanhos relativos e @media screen`s

    #pure-css
    1
    Sam•140
    @wotanutPosted 6 months ago

    An excellent attempt, just a couple of small tweaks:

    1. Your github repo is private (show it off, it'll look good on your CV)
    2. You missed a border radius on the preparation time section

    Other than that, well done

    Marked as helpful
    0
  • Mohamed•320
    @ameencodingSubmitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I loved the images and the style guides that frontendmentor provided. That makes my progress very smooth.

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

    Once i finished the project, the first idea comes into my mind was to add social media icons, but i changed my mind and i replaced a better hover animation.

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

    Once i finished the project i deleted all pre-installed fonts, assets and all un-wanted things, so i would like to know if that was a mistake!

    Social links profile With HTML and CSS

    #pure-css
    1
    Sam•140
    @wotanutPosted 6 months ago

    First off, excellent job, your site and animations look amazing.

    Deleting unused assets and fonts is absolutely valid. If they're not going to be used by the browser, why keep them?

    Social media icons would be an excellent idea however your hover animation is already amazing, don't let the enemy be the perfection of good.

    <img src="./assets/images/avatar-jessica.jpeg" alt="">

    Try to always inhclude alt's for every picture you include. Sometimes images won't load and then users will be staring at nothing, not knowing what the image should show.

    For your links, you've written a lot of CSS code, it could've been achieved using the same effects using a grid/flexbox. For example:

    .media {
  display: grid;
  grid-auto-columns: 1fr;
  gap: 20px;
  width: 100%;
}

    Would have achieved mostly the same thing

    0
  • Sam•140
    @wotanutPosted 6 months ago

    An excellent attempt at the challenge, good semantics and CSS, only criticism is the difference in word wrapping (assuming you're going for picture perfection)

    The button also appears to have some left and bottom padding in the original screenshot wheras your design does not account for this.

    1
  • Sam•140
    @wotanutPosted 6 months ago

    an interesting way to use this challenge

    0