Skip to content
OverviewSolutions
10
Comments
10
P

JiaHe35354

@JiaHe35354120 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Code-S1•210
    @Code-S1
    What are you most proud of, and what would you do differently next time?

    The thing that I used JavaScript and this is my first ever project with JavaScript

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

    1-The JavaScript is hard for me as I am a newbie. I got a little help from AI to find methods like .value, .textContent, trim(), etc. 2-The buttons somehow just don’t have the transition, or is it just me? The transition only works when the mouse moves out of the button. I don’t know why. 3-I couldn’t think of making a whole other file and linking it to show after submitting. Instead, I just went for the modal. Someone said it was easy. 4-I couldn’t get the button to stop working whenever the email is not valid. That’s my weakness, and I want to improve that. But I just don’t seem to find the logic or a plan on how to do so.

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

    JavaScript definitely and how to plan the planning

    Responsive company subscription page

    1
    P
    JiaHe35354•120
    @JiaHe35354

    Hi! You're doing a great job so far. One suggestion — the success message currently appears alongside the form. You could improve the user experience by hiding the form when the success message is shown. This can be done easily using CSS in combination with JavaScript.

  • P
    JiaHe35354•120
    @JiaHe35354

    It looks good, but I think there should also be a tablet version.

  • P
    Luke Butler•90
    @lukecbutler
    What are you most proud of, and what would you do differently next time?

    The site looks proper at every width. Next time I hope to write more concise css code & media queries.

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

    Writing the media queries for the phone initially was tough. Also switching the images for the different screen sizes. I still think there is a better way to switch images for the different screen sizes.

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

    Writing more concise CSS code & media queries.

    Frontend Mentor | Meet landing page

    1
    P
    JiaHe35354•120
    @JiaHe35354

    nice

  • P
    Luke Butler•90
    @lukecbutler
    What are you most proud of, and what would you do differently next time?

    I am happy I did all positioning with grid & flexbox. Next time I hope to continue working on typography.

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

    Positioning going from desktop > tablet > mobile was a challenge. Grid helps solve this.

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

    Making my designs look more modern, and being able to add small details that create professional looking CSS.

    Frontend Mentor | LUke Butler | Testimonials Grid

    1
    P
    JiaHe35354•120
    @JiaHe35354

    Some suggestions: Using CSS variables with :root can improve readability and maintainability of your styles.

    Consider assigning a common class name (e.g. .testimonial) to all these elements: .daniel, .jonathan, .jeanette, .patrick, and .kira. Then, apply individual class names for unique styling. This will make your code cleaner and more professional.

    On larger screens, adding more horizontal spacing (padding or margin) to both sides of the container will enhance the layout and visual balance.

    Instead of setting margins individually for all four sides, you can use the shorthand margin property, e.g. margin: 100px 50px; for top-bottom and left-right spacing.

    To center a grid container horizontally, another approach is to set a max-width, then use margin: 100px auto;. This centers the container and adds vertical spacing.

    When doing responsive design, it’s better to use relative units like rem or em instead of absolute units like px. This ensures better scalability and accessibility across different devices and user settings.

  • P
    JiaHe35354•120
    @JiaHe35354

    Hello, you're doing great! I have a few suggestions:

    In the media query @media screen and (max-width: 1260px), consider using the em unit instead of px. Using em helps keep the layout proportionally consistent because em units are relative to the browser’s default font size (typically 16px). If a user changes their default font size for accessibility reasons, em-based breakpoints will scale accordingly, whereas px is fixed and doesn’t respect user scaling.

    Another point: I think the font size on smaller screens (like 375px width) is too small. You might want to increase the minimum font size for better readability on small devices.

  • P
    JiaHe35354•120
    @JiaHe35354

    I think you’re doing very well. I can learn something from you — like @media (prefers-reduced-motion: reduce). I don’t know much about accessibility yet.

View more comments