Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
14
Comments
14
P
wideirp
@wideirp

All comments

  • P
    Dan Marius•1,275
    @danmlarsen
    Submitted 11 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

    #bem#typescript#sass/scss
    1
    P
    wideirp•280
    @wideirp
    Posted 10 months ago

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

  • P
    marcel-schmidt-dev•480
    @marcel-schmidt-dev
    Submitted 12 months ago

    Password-Generator-App

    #react#vite#tailwind-css
    1
    P
    wideirp•280
    @wideirp
    Posted 11 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!

  • Sonja Krafft•310
    @sonmikrafft
    Submitted about 1 year 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

    #sass/scss
    1
    P
    wideirp•280
    @wideirp
    Posted 11 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.

  • ShivamRajput57•170
    @ShivamRajput57
    Submitted 11 months ago

    fetching data json #Dynamic HTML #js

    #fetch
    1
    P
    wideirp•280
    @wideirp
    Posted 11 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

  • P
    Paul•520
    @mayor-creator
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of building this project with vanilla javascript.

    Newsletter sign-up form with success message

    #sass/scss
    1
    P
    wideirp•280
    @wideirp
    Posted 11 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!

  • Sonja Krafft•310
    @sonmikrafft
    Submitted about 1 year 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

    #sass/scss
    1
    P
    wideirp•280
    @wideirp
    Posted 11 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

  • Eugen•200
    @psdesignro
    Submitted 12 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

    #sass/scss
    1
    P
    wideirp•280
    @wideirp
    Posted 11 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
  • ChristianM•130
    @DevXtianM
    Submitted 12 months ago

    Responsive Testiomonial Grid Section (SaSS)

    #sass/scss
    1
    P
    wideirp•280
    @wideirp
    Posted 11 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!

  • Elle00•90
    @Elle-ye
    Submitted 12 months ago
    What are you most proud of, and what would you do differently next time?

    Using keyframes.

    Four card feature section

    #sass/scss
    1
    P
    wideirp•280
    @wideirp
    Posted 11 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!

  • HagarRagab•270
    @HagarRagab
    Submitted 11 months ago

    Product preview card component

    #sass/scss
    1
    P
    wideirp•280
    @wideirp
    Posted 11 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
  • M.A.B•80
    @MohamedAbdelBAQIMo
    Submitted 11 months ago

    Recipe-page

    1
    P
    wideirp•280
    @wideirp
    Posted 11 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:wght@100..900&family=Young+Serif&display=swap');
    

    Then use them by setting the font family line so:

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

    Happy coding :)

  • AlvaroSBernucci•180
    @AlvaroSBernucci
    Submitted 11 months ago

    Resolution Social links profile

    1
    P
    wideirp•280
    @wideirp
    Posted 11 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!

  • Tamilselvic•40
    @Tamilselvic
    Submitted 11 months ago

    Blog Preview Card using only HTML and CSS

    1
    P
    wideirp•280
    @wideirp
    Posted 11 months ago

    Well done overall! You could replace the <div class="container"> with <article> to be more semantic. Also, consider using the CSS clamp function to reduce the font and width on smaller screens.

    Marked as helpful
  • AlvaroSBernucci•180
    @AlvaroSBernucci
    Submitted 11 months ago

    QR code component solution

    1
    P
    wideirp•280
    @wideirp
    Posted 11 months ago

    Well done! Nice use of semantics also by using the <picture> element.

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub