Skip to content
OverviewSolutions
14
Comments
14
P
wideirp
@wideirp

All comments

  • Dan Marius•885
    @danmlarsenSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm happy that I was able to make a working app without relying on frameworks.

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

    I just learned typescript so I had some challenges adjusting to the somewhat stricter rules. But it was mostly enjoyable and a great learning experience.

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

    I appreciate any helpful feedback.

    Frontend Quiz using Typescript & SCSS

    1
    wideirp•280
    @wideirpPosted 2 months ago

    Very nice. This is production quality! It scales really well and the transitions are amazing.

    1
  • wideirp•280
    @wideirpPosted 2 months ago

    Nice job! I like the error message in the button if you don't select any options. I also "borrowed :)" your slider css code. The solution I used was much more complicated and messy than yours. Thanks!

    0
  • Sonja Krafft•310
    @sonmikrafftSubmitted 4 months ago
    What challenges did you encounter, and how did you overcome them?

    The Tip Selector is not optimal. I used a Radio Button Group for the given percentages and a number input field for the custom option and tried to patch them together.

    Tip Calculator App with HTML, SCSS and JS

    1
    wideirp•280
    @wideirpPosted 2 months ago

    Nice Job! The code is easy to read and well organized.

    You should add error states to the inputs and error handling in the javascript. Also, using the keyup event instead of change will allow the app to update as keys are pressed giving it a very reactive feel but thats a matter of choice.

    Overall it's well done and functions well.

    0
  • wideirp•280
    @wideirpPosted 3 months ago

    The javascript functionality works great!

    Consider adding flex-direction: column to your <div class="time"> and change the grid-template-columns to 1fr on the <div class="card"> element when at smaller screen sizes for some responsiveness. You can use @media screen and (max-width: **px or rem size**): and add rules below. Check out CSS Tricks for an awesome explanation of media queries: CSS Media Queries Guide

    0
  • wideirp•280
    @wideirpPosted 3 months ago

    Nice job! I see you have updated this with react as you've progressed through the learning paths. This is a very important part of learning. There are a few issues with your screen sizes under 1020px on the signup page you could fix with some media queries. Keep up the good work!

    1
  • Sonja Krafft•310
    @sonmikrafftSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I like that the site's status returns to its initial state whenever the width changes.

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

    Implementing the tooltip was the hardest part because it overlaps the white card component. I guess I cheated a lot but I is okay-ish in the end.

    I still do not know why the image in the desktop version does not take 285px when I define it. I cheated with setting it to 90%. Not happy with that.

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

    How would I normally implement a tooltip inside an "overflow:hidden" component?

    Article Preview Component with HTML, SCSS, and JS

    1
    wideirp•280
    @wideirpPosted 3 months ago

    Well done! To imitate the design, the font should be a shade lighter but your version looks fine. Also, many <div> elements could be replaced with more semantic elements such as article and section. Your sass is very clean and easy to read.

    For the tooltip, I made it the last element of the card and toggled it with a data attribute.

    P.S. : Never gonna give you up, Never gonna let you down, Never gonna run around and desert you

    0
  • Eugen•200
    @psdesignroSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    This time I decided to dig deeper in SASS and create a more complex structure for the styles files (even if it wasn't the case), but just for training purpose.

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

    I got stuck because of the wrong path for assents and of a typo in my scss which was overwritting my styles (because } was closed too early) so I sholoud be more carefull next time.

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

    I'm good for now. The discord community helped me with the first path issue and the the with media query, I've debugged by myself

    Meet Landing Page

    1
    wideirp•280
    @wideirpPosted 3 months ago

    Well done! I see you're using Sass and are trying to better organize your CSS code. If you haven't tried, check out:

    • CUBE CSS - "CUBE CSS is a CSS methodology that’s orientated towards simplicity, pragmatism and consistency."
    • Kevin Powell's CUBE CSS in Action - (VIDEO) Great to see how this would work in the real world

    This is helping me by providing a separation of concerns while also utilizing the "Cascading" part of CSS instead of trying to avoid it.

    Happy Coding!!!

    Marked as helpful
    1
  • wideirp•280
    @wideirpPosted 3 months ago

    The sematics of the HTML are good. The code is structured well and readable. It looks good on most screen sizes but there is an issue from 1024px to 728px. You could go to a two column layout in these middle sizes. Overall, well done!

    0
  • wideirp•280
    @wideirpPosted 3 months ago

    The HTML is semantic and the layout looks good on all screen sizes. You used Sass and the code is readable and well-structured. I love the keyframe on load and the hover effects. Nice Work!

    0
  • wideirp•280
    @wideirpPosted 3 months ago

    I know I'm suppose to be reviewing your code but I can tell you've done this before. This was my first project using Sass and I learned a lot by seeing your structure. Thanks and keep up the excellent work!

    Marked as helpful
    0
  • wideirp•280
    @wideirpPosted 3 months ago

    Well done!

    Consider importing the fonts from google by adding an import statement in your CSS

    @import url('https://fonts.googleapis.com/css2?family=Outfit:[email protected]&family=Young+Serif&display=swap');

    Then use them by setting the font family line so:

    h1 {
    font-family: "Young Serif", serif;
}

    Happy coding :)

    0
  • wideirp•280
    @wideirpPosted 3 months ago

    Well done!

    On possible improvement you could make is to add the :active and :focus pseudo selectors along with :hover. That way you get the green color when tabbing and with mobile finger presses. Also you can outline: none; to remove the blue focus outline.

    Keep up the good work!

    0