Skip to content
OverviewSolutions
6
Comments
13
Veronika Palto
@JepardMay

All comments

  • RomeesaKamal•290
    @RomeesaKamal
    What are you most proud of, and what would you do differently next time?

    I’m most proud of a recent project where I work on changing theme and give unique styling to the project. This experience helped me grow because it required a lot of dedication, attention to detail, and adaptability. It was satisfying to see the impact my effort had on the outcome and how it helped others in some way. Looking back, I would focus even more on getting feedback early in the process. While the project was a success, I realized that input from others could have improved our results and made the process smoother. I’m now more proactive about asking for feedback early and throughout any project. That way, I can learn and adapt as I go, ensuring an even better final result

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

    One significant challenge I encountered was challenged during styling and changing theme of project and I overcome it by learning more about and using my mind .

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

    In this project, I'd like help with CSS grid, flexbox and DOM. I believe that having guidance in this area could help me develop a more robust approach and overcome certain challenges I’ve faced, such as how to change theme and how I use CSS grid.

    Calculator-app-main

    1
    Veronika Palto•355
    @JepardMay

    Hi! Nice work! Here are some suggestions:

    • make sure that user can't input more than one symbol in a row or more than one dot per number
    • reduce buttons gaps on mobile to give it some space to breath, overall mobile version can have a bit more work

    Hope this helps!

    Marked as helpful
  • Sameema Nasrin•130
    @SameemaNasrin
    What are you most proud of, and what would you do differently next time?

    I’m really proud of the fact that I managed to quickly find a workaround for the resizing issue in my result div. I added a max-width and set overflow: hidden, which stopped the layout from breaking when the numbers got too large. It’s not perfect, but it did the job for now. Next time, I’d probably try to come up with a more scalable solution that doesn’t limit the content visibility. Something more dynamic that adapts as the number grows would be ideal, so the layout stays intact without cutting off any data.

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

    The biggest challenge was that as the numbers in the result div grew, they stretched the container, throwing off the layout and making things look messy. To fix this, I used max-width to cap the div size and added overflow: hidden to prevent the content from overflowing. It was a quick fix, but I realized it’s not the most elegant or long-term solution, so I’d like to improve it moving forward.

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

    I'm looking for a cleaner way to handle dynamic content resizing. Currently, I'm using a max-width with overflow: hidden, but it feels like more of a workaround than a permanent solution. I’m wondering if there’s a more elegant and flexible layout approach that could better handle this, without compromising the responsiveness of the design. Any suggestions or guidance on how to improve this would be really helpful!

    Responsive Calculator App using Flexbox, Media query and DOM operation

    #pure-css
    3
    Veronika Palto•355
    @JepardMay

    Hi! Nice work on this one! I've got some notes on your solution:

    • adaptive styles are changing too early from mobile to desktop, and therefore it's very squished on 375px screen
    • you also can have max-width and width: 100%; to allow the element not to shrink when it's plenty of space available
    • I think it's better to use something like word-break: all; to allow big numbers to wrap other than cuts off by the container
  • Lubos Jurca•290
    @lubosJurca
    What are you most proud of, and what would you do differently next time?

    I am very proud to complete this challenge! It's not exactly what it should look like, but I tried to put it a little differently. A complex application - authentication, CRUD operations, light/dark mode, two languages to choose from, animations, pagination... I'm satisfied.

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

    I had to learn the complete basics of the backend, specifically the MERN stack. It was a challenge, but it gave me a lot!

    MERN stack app.

    #express#mongodb#node#react#typescript
    1
    Veronika Palto•355
    @JepardMay

    That's very impressive! I like the scale of it and everything seems to work. Screenwise also looks good, and I especially like mobile animations for the invoice.

    The only minor issue I can see is that some interactive elements like page buttons, logout button, and language buttons don't have cursor: pointer; but other than that nice work!

  • Veronika Palto•355
    @JepardMay

    Hello. The easiest way to align stats is using flexbox https://gyazo.com/66422e28c2ec3b3d4246a440957d7a48

    Marked as helpful
  • Veronika Palto•355
    @JepardMay

    Hi! Nice work with this project. Found some things that can be fixed:

    • The page doesn't look good before mobile breakpoint https://gyazo.com/b1842ccec3bd06218dd196ae0c5066e9. Maybe it's worth changing the breakpoint earlier. Also, an icon in the second input goes wild.

    • When you choose custom input whole section hops because of the border. An easy solution is to set the border by default, make it transparent, and change border-color on hover and focus.

    • In the JS file I see that you use the same code twice. Try to create a function, that contains that code, and use it when you need it. All lines of actions that can be used more than one (even only in theory) are worth putting in separate functions as an option.

    Marked as helpful
  • Veronika Palto•355
    @JepardMay

    Hello. I found that on 320px the bottom-container is going off the container https://gyazo.com/eeecf9eff43a38588d60a1c7c77f1c88. 320px is a minimum width that is worth checking. About your second question. Browser engines are quite different from one another. If you want to know more about it, read about browser rendering.

  • Veronika Palto•355
    @JepardMay

    Hello. Your solution looking very good! There're a few suggestions:

    • The image doesn't look good on width around 1100px and 800px https://gyazo.com/2573162634742bfbc02ee5be52f40d8b. To avoid it you can use object-fit: cover instead of fill.
    • On width around 800px these elements https://gyazo.com/6e8899ead82faab8795bde9232b57dec are too close to each other (margin or padding will help)
    Marked as helpful
  • Veronika Palto•355
    @JepardMay

    Hello. Not refers to the question but a notice that the avatar gets thinner if the page gets thinner but the height stays the same - it looks odd.

    Also, I don't think it's worth making card change width unless it's a mobile. It's plenty of room for the card to stay the same width, but it just a suggestion to consider.

    Marked as helpful
  • Veronika Palto•355
    @JepardMay

    I don't understand your scaling problem but noticed a problem with the page on a small height when content gets cut because of the absolute positioning. Background-color changes to white when you scroll.

    I can't open the accordion if I click on the white space between text and arrow, but the text changes color as it was clicked. You also shouldn't use a div to create a bottom line and use pseudo-element instead.

  • Veronika Palto•355
    @JepardMay

    If there's a problem you throw an error, so add else to remove the error message if an email is correct (remove style properties and set innerHTML to an empty string again). It'll be good to add an email send by entering press (you can add a new keydown event listener or change button type to submit and listen to the submit event)

    Also, I notice that the mobile version is not usable on the small height - there's no scrolling, and some content's cut.

    Marked as helpful
  • Veronika Palto•355
    @JepardMay

    Hello. You've done a great job with this one.

    I have a suggestion for your problem that you can try. Add overflow: hidden to your slider-container and add bottom: 0, left: 60vw (as image container width) for btn-container. For mobile add right: 0 and remove left. As images have no content, that can be changed, you can add height to the image and align the btn-container's top or bottom to this height.

    Marked as helpful
  • Veronika Palto•355
    @JepardMay

    Hello. Nice work with this project!

    If you wanna use min-height: 100vh, you needn't use height in % on container block. I recommend don't use height on this element and use margins and padding on container's children to get the needed height. Also don't use 'width: 10vw' and use 'width: 100%' to avoid unnecessary horizontal scroll on the page.

    I recommend don't use divs to add background images and use CSS styles instead for body or container cause these images are not given any information to the user.

    I also encourage you to think about if there will be more elements in both the top and the bottom sections. Now, if I add more cards, it wouldn't be looking nice.

    For cards offsets, you can use ':nth-child()' instead of classes, and for the top section use margin-right to avoid cards go off the container block.

    I hope my suggestions will be helpful. Keep coding :)

    Marked as helpful
  • Veronika Palto•355
    @JepardMay

    Hello, I have a suggestion for the floating block. You can use a pseudo-element for the triangle and use a clip-path on it and not on the main element. It will be looking like this https://gyazo.com/c153b108adff036e60ec445ee8191b84 . Also, to make the background image looks more like in the design, you can change "background-size" to "contain" and "background-position" to "center bottom".

    Marked as helpful