Skip to content
OverviewSolutions
11
Comments
11
Dustin Knie
@nullpuppy

All comments

  • grgrnkoo•520
    @grgrnkooSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Proud to get rid of all possible bugs and fix all the minor things like uncheck radio buttons when focusing on "Custom field", adding ternary conditional operators to a total sum outputs, so it always shows right data or "$0.00" etc.

    Also proud to level up my skills totally and apply my new knowledge from "Refactoring your Code" topic on JS Path

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

    Figuring out how to get data from all inputs. Overcame it understanding that I can apply only one event listener on the whole form. It helped a lot!

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

    Just want to get an honest review on my project. Thanks a lot. Happy Coding!

    Tip Calculator App No Figma

    1
    Dustin Knie•210
    @nullpuppyPosted 5 months ago

    I only really skimmed through the code, but looks good!

    A couple things I noticed while poking around though: it looks like the only validation is checking if the number of people input is zero. I'm able to put in random text, and there's no errors presented. Same with the bill amount. I know it's not really clearly called out from what we're given for the challenge though, so maybe that's all ok.

    Also, nothing gets calculated until focus is cleared from an input. You could register a handler for the 'input' event and get live updates!

    0
  • marcel-schmidt-dev•480
    @marcel-schmidt-devSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    none

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

    First time i used grid

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

    none

    Time tracking dashboard

    1
    Dustin Knie•210
    @nullpuppyPosted 5 months ago

    Looks good! I'd suggest looking into using em/rem for widths and font sizes and such to allow for better accessibility with resizing.

    Also, FYI, I believe the previous line should reference a similar time period to what's in current, and right now it always shows Last week.

    Marked as helpful
    0
  • Ola•150
    @ladibanks1Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    Nan

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

    Nan

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

    Nan

    Sign up

    1
    Dustin Knie•210
    @nullpuppyPosted 5 months ago

    Looks good!

    A couple minor notes, there are a lot more domains those that end in com|net|org|io etc. I'd recommend just checking the general form of the email address, instead of restricting the TLD.

    Also the dismiss button on the success view doesn't do anything. It'd be nice if it returned to the previous signup form or something.

    0
  • Manny Verma•230
    @mverma45Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of the fact that I completed the challenge.

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

    I had issues with the JS, I searched YT, stackoverflow, google for the answers and asked on the discord to figure out how to get the project done.

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

    I know my project isn't 100% correct, if anyone has suggestions on how to improve the project let me know.

    Frontend Mentor - Article preview component

    1
    Dustin Knie•210
    @nullpuppyPosted 6 months ago

    Right now everything is just in the body. I'd recommend putting the preview "card" in it's own div or section (I'd recommend getting familiar with semantic html, mostly for accessibility). That'll allow you to better position and style the component on the page. Depending on your experience with flexbox and grid, it might be worth experimenting more with them to get a better understanding of how they work, and what kind of nesting/etc is/isn't required.

    Your javascript isn't working at the moment because you're using getElementById, but then using a classname. You'll want to add something like id="shareButton" to the element you want to use as the share button in the html, and reference in the css as #shareButton.

    Hope that helps!

    Marked as helpful
    0
  • Matthew•200
    @MattJM1007Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Getting the formatting write with grid and applying the css reset to make adding padding and margins easier.

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

    The fonts and spacing didn't quite match up with the design file, so made some adjustments on my own to better match the design.

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

    Can someone help me make this responsive? I noticed the grid was not being responsive and I could not get the media query to work with grid as well. How can I do this?

    Testimonial Grid Section with HTML, CSS Grid

    1
    Dustin Knie•210
    @nullpuppyPosted 6 months ago

    Looks good! Very clean!

    A few things that can help with overall layout and centering:

    body {
  display: flex;
  flex-direction: column;
  align-items: center; /* center content in column horizontal */
  justify-content: center; /* center content in column vertically */
  margin: auto;
}

    For the responsive bit, don't use fixed widths (you're grid is repeat(cnt, size). Use something like 1fr in place of your size instead, which will tell the browser to evenly divide each column into 1/4th of the available space). And then maybe add a max-width to your wrapper (main in your case). You can also likely reduce your rows to 2, unless you have a specific reason for wanting that many.

    Then in your media queries, you'll want to redefine (or remove, depending) the grid/row setting for each card.

    Hope that helps!

    Marked as helpful
    0
  • Bakhtiar•380
    @b4khtiarSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    _

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

    Using mobile first approach

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

    anything welcome

    Four card section using CSS grid

    1
    Dustin Knie•210
    @nullpuppyPosted 6 months ago

    Looks good! Consider using em/rem for widths, and maybe add some margins to the card grid so the cards don't hit the edge when things start shrinking under the max width.

    1
  • Felipe•60
    @typingfeSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    i'm proud of my project.

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

    none

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

    null

    Responsive preview card

    1
    Dustin Knie•210
    @nullpuppyPosted 6 months ago

    Looks good! I might suggest looking into using em/rem more rather than px, and consider using semantic html a bit more.

    1
  • JmsLpz•80
    @JmsLpzSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    The things that I am most proud of are that I have applied those learnings I have read.

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

    The challenging part I have encountered while creating this page is estimating the right sizes.

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

    I would like to have feedback on how to estimate approximately the right size of those things to be included on a page.

    Recipe Page

    2
    Dustin Knie•210
    @nullpuppyPosted 6 months ago

    I'd recommend looking at semantic html a bit, and trying to use things like article and section and such instead of relying on divs for everything. I might also recommend rethinking the naming of the CSS classes to reduce duplication, there's a few areas where at least some of the styling can be shared between sections.

    Regarding your request no how to estimate sizes of things, what I've done is pull the design or preview images were given into an image editor (like inkscape), and drawing boxes around various elements or features to figure out sizing. I've then started converting pixel sizes to rem by way of through font-size on a html, body and using that as my conversion unit. Hope that helps!

    0
  • Justin•120
    @andrew-j-brownSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Not much to say on this one, though I am proud of the focused styling of the links.

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

    As mentioned above, the styling of the focused links. The idea was for the links to display the same whether hovering over them, or tabbing through them. I went with the following solution:

    li:hover {
    opacity: 80%;
    cursor: pointer;
}

li:has(a:focus) {
    opacity: 80%;
}

a:focus {
    outline: none;
}
    What specific areas of your project would you like help with?

    The background image I used loads slowly, most likely due to the resolution. I plan on returning and fixing this. I'd like a way to load higher res images as needed based on the screen resolution.

    On the topic of resolutions, I should probably switch from px to rem if I will be developing for resolution compatibility sake.

    Social Links Profile

    1
    Dustin Knie•210
    @nullpuppyPosted 6 months ago

    Looks good! The contrast for the hover/focus could be better, in my opinion, as it's kind of hard to notice.

    Regarding your large background image, that reminded me of a video I saw recently by Kevin Powell for larger images using the background-url as a lower res image https://www.youtube.com/watch?v=345V2MU3E_w You might be able to do something similar (maybe with javascript?)

    0
  • TPAIN22•390
    @TPAIN22Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    .....

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

    .........

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

    ..........

    Profile-Card

    2
    Dustin Knie•210
    @nullpuppyPosted 6 months ago

    Looks pretty good to me. The text looks a little too bold, but the styling looks right. Looks like the card is missing the thin border.

    0
  • Onlyy-Ram•20
    @Onlyy-RamSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    i still got issues with strengthening my skills !!

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

    the hardest thing for me is design. and by doing this project i gained much deeper understanding of how to solve your solutions in the shortest-yet productive way.

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

    i still have this diziznes over making website responsive. even though i know how to set all the properties. can someone please help me how to make it should work ?

    QR code first solution using CSS Flexbox

    2
    Dustin Knie•210
    @nullpuppyPosted 6 months ago

    I'm still learning the ins and outs of responsive design as well, so I, unfortunately can't provide much help there at the moment. That said, looking at the code, a couple things come to mind based on what I can into while implementing myself.

    Your container is only styled in your @media query and I don't think it's working as expected. If you look at the design, the width of the card is 320px, and the QR code is around 288px. I'd recommend updating the styling to enforce those sizes more explicitly.

    Also, it looks like you're not actually loading the Outfit google font. If you go to https://fonts.google.com/specimen/Outfit and look at the upper right corner, there's a button to Get font, which then loads another page with an option to download or Get embed code. Checking that out more closely should help you out.

    0