Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
19
Comments
19
jonathanudeh
@jonathanudeh

All comments

  • dullarzee•600
    @dullarzee
    Submitted 6 months ago

    Room homepage

    1
    jonathanudeh•340
    @jonathanudeh
    Posted 6 months ago

    This is good and identical too. Kudos.

  • calvinvin•1,060
    @calvinvin
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    This challenge seems to be more desktop-based, and I seldom style such these cases. So it took me more time on the styling of this challenge.

    The given example of mobile version design image is 750px in width but the instruction is to build a mobile version of 375px. As a result, I build a display on 750px viewport width based on the given example, and another display for smaller viewports just the way I like it to be.

    loopstudios-landing-page

    1
    jonathanudeh•340
    @jonathanudeh
    Posted 6 months ago

    Nice job, you really did great

  • Raozhaizhu•580
    @raozhaizhu
    Submitted 7 months ago

    Nft Preview

    1
    jonathanudeh•340
    @jonathanudeh
    Posted 7 months ago

    Great Job, it looks really nice. Is that Tailwind css you used?

  • P
    Mukarram Haq•440
    @MukarramHaq
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I'm really proud of two things:

    1. The slider
    2. The lightbox design

    I think writing cleaner code would be very beneficial in the future.

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

    I think the main challenge I encountered was the positioning of the cart. For some reason, it would only go as far as the middle of the page.

    So to tackled that I learned a little about position and I was able to solve it after that.

    Another challenge that I faced was that whenever I would click an image in the lightbox the lightbox would close. In order to tackle that I put the following code if(e.target !== e.currentTarget) return in the addEventListener for the lightbox.

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

    I would really like some help with how I chose the elements in JavaScript. Do you guys think that was the only way to do it or is there a better and cleaner way to go about it? Maybe create a new .js file and get them as objects?

    Ecommerce Product Page Main w/TailwindCSS

    1
    jonathanudeh•340
    @jonathanudeh
    Posted 7 months ago

    Based on how your coded is structured I think using if(e.target !== e.currentTarget) return for the solution was a good choice. overall you did a very good job.

  • Zeey76•200
    @Zeey76
    Submitted 8 months ago

    News Homepage

    1
    jonathanudeh•340
    @jonathanudeh
    Posted 8 months ago

    great work mate, you did well

  • Jstickz•330
    @Jstickz
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    This project was quite difficult but it was worth it.

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

    I encountered a lot of challenges with javascript as I not very conversant with the programming language yet.

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

    None for now.

    Contact Form Validation

    1
    jonathanudeh•340
    @jonathanudeh
    Posted 8 months ago

    Overall everything is solid and looks really nice, I love it.

    Though i noticed a bug, which is i can submit the button without consenting (when every field is filled but the checkbox is not). Hope this helps.

  • omar kamal•340
    @omarkl95
    Submitted 8 months ago

    FAQ-accordion

    1
    jonathanudeh•340
    @jonathanudeh
    Posted 8 months ago

    good job and good code also, keep going.

  • omar kamal•340
    @omarkl95
    Submitted 8 months ago

    interactive rating component

    1
    jonathanudeh•340
    @jonathanudeh
    Posted 8 months ago

    You did a nice job

  • aarontark•50
    @aarontark
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of my work with the Javascript. I learned many different concepts, such as the different kinds of event listeners for forms. I am also proud of making a functioning calculator that makes accurate calculations.

    I would do the CSS a lot differently, and try to write it in a more structural way next time.

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

    It became difficult to determine which kinds of events to use on each of the interactable elements. Eventually I just gave each of the different elements multiple event listeners to cover all use cases.

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

    I would really like help with writing better CSS. I would like to know ways I can reduce the amount of lines I use, and how I can make it more neat and structured.

    I would also like to know how to better name classes, as I have been struggling with that as well.

    Tip Calculator App

    1
    jonathanudeh•340
    @jonathanudeh
    Posted 8 months ago

    This is good and as for writing better class names or id(s), I'll tell you that every developer faces this same issue, from clasnames to variables, etc. But what I do is i normally name the poular ones section-name-container, for the parents then like section-name for the child, or children. (ps. replace section-name with the actual name). I think i once saw a video on vscode tiltok account talking about an extension that helps with naming, I suggest you check it out.

  • P
    Y39WebDeveloper•620
    @Y39WebDeveloper
    Submitted 8 months ago

    Time tracking dashboard

    1
    jonathanudeh•340
    @jonathanudeh
    Posted 8 months ago

    You did good, I looked at your code and noticed you used a very unique approach at least to me though, making the daily, weekly or monthly option and input was quite different I enjoyed reading it.

  • P
    Suraj Khatri•450
    @SurajCasey
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud that I have completed this project. I tried to go with mobile screen first in this project. I would like to make seperate html file for similar projects next time.

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

    I had challenges to design for desktop screen as I used to do that first. I had trouble validating the email too. But I did my research online and found out the way to overcome the difficulties.

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

    I would like help with figuring out easy way to do the css. It consumes a lot of time to design and I feel exhausted while doing it.

    Newsletter Signup using Css Flexbox and JS

    1
    jonathanudeh•340
    @jonathanudeh
    Posted 8 months ago

    Your result is very good and what i love most about it is that its identical. And about the css i don't know how long you've been coding but one thing i know for sure is that it gets easier with time, I also am going through the same thing as you and i just hope i am right, lol. you did very well though, how did you know the exact sizes to use to match the design perfectly?

    Marked as helpful
  • P
    Aminpatra•350
    @Aminpatra
    Submitted 8 months ago

    Responsive card + using some JS

    1
    jonathanudeh•340
    @jonathanudeh
    Posted 8 months ago

    You really did good, I'm jealous.

  • nrdygrnma•160
    @nrdygrnma
    Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    This was a bit tricky but I mastered it in the end :)

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

    To style the different cards with all the colors and backgrounds was not easy. Also to position the cards in the desktop layout also was a bit challenging. After quite some bit of trial and error I did it :)

    Testimonials Grid

    1
    jonathanudeh•340
    @jonathanudeh
    Posted 8 months ago

    Congratulations on finally doing it, it shows growth. I just finished this project and I had similar problem as you but I also mastered it at the end. cheers to learning.

  • zzdevs•130
    @zzdevs
    Submitted 9 months ago

    responsive grid layout section

    1
    jonathanudeh•340
    @jonathanudeh
    Posted 9 months ago

    Looks great! although the calculator's card icon should be a monitor. outside that everything else looks good.

  • Youssef M.•60
    @WiiDevYouSef
    Submitted 9 months ago

    media query

    1
    jonathanudeh•340
    @jonathanudeh
    Posted 9 months ago

    You did good, it looks great.

  • Henry Ihenacho•40
    @henrychris
    Submitted 9 months ago
    What challenges did you encounter, and how did you overcome them?

    There were a lot of challenges.

    • I could not get the font to work right, despite using an import from Google Fonts, a @font-face rule & referring to the font files in the directory. I had to ask for help before I got them to display correctly.

    • I did not know how to move text away from bullets in a list. I Googled and found this solution:

      .list-text {
        position: relative;
        left: 1rem;
      }
      

      By surrounding text with a span, and assigning this class, the text would indent away from the bullet. However, this led to another issue because I had set list-style-position to inside. To fix this, I removed that rule and changed how I padded lists to this:

      ul,
      ol {
        display: block;
        padding-inline-start: 1.5rem;
      }
      

    With this, the list text is formatted & indented correctly.

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

    I used a single media query, kicking in once the screen width surpasses 568px. The reasoning is the rest of the code is responsive & I don't need many breakpoints (for multiple screen sizes).

    A recipe page for an Omelette.

    1
    jonathanudeh•340
    @jonathanudeh
    Posted 9 months ago

    To move text away from bullet you just have to give the ol or ul ul { list-style-position: outside; padding-left: 20px; }

    ul li { padding-left: 5px; }

    at least thats how i did mine

    list style position put the bullet outside the ul/ol and then the padding moves it left or right depending on your taste and the padding for li moves the text away left or right also depending on your taste

  • Manisha3196•120
    @Manisha3196
    Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I completed this project more easily this time.I would like to check if there any major changes i can do to the code so that it can be more efficient.

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

    I didn't encounter too much challenges in this project.

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

    I would like help on to make my code more efficent and less code. I also want know through accessibility perspective of my code.

    Socila-links-profile-main using HTML and CSS

    1
    jonathanudeh•340
    @jonathanudeh
    Posted 9 months ago

    It looks great and the code is clean, kudos.

  • daurygg•170
    @daurygg
    Submitted 9 months ago

    A responve card

    1
    jonathanudeh•340
    @jonathanudeh
    Posted 9 months ago

    It looks really good. The only thing I have to say is do not leave the alt attribute empty.

    Marked as helpful
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

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