Skip to content
OverviewSolutions
10
Comments
10
P
Anonymous Coder
@AnonymousCoder323

All comments

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

    I’m proud of successfully implementing real-time validation and creating a seamless transition between the form and success modal. Next time, I’d focus on modularizing the JavaScript for better readability and enhancing cross-browser testing for consistency.

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

    Debugging form validation took time, but breaking it into smaller functions helped simplify the process.

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

    I’d like feedback on improving the responsiveness of the modal, optimizing form validation functions, and ensuring accessibility compliance.

    Newsletter sign-up form with success message

    #tailwind-css
    1
    P
    Anonymous Coder•200
    @AnonymousCoder323

    Great job! Looks similar to the design. It's mostly responsive, but between mobile and desktop the card seems smushed against the sides. You can fix this by adding padding to the body. It seems like you're missing the "Valid email required" text on error. You might find this article helpful in validating emails - specifically the "A more detailed example" section.

  • Youmna•650
    @Youmnaelzany
    What are you most proud of, and what would you do differently next time?

    In this front-end project, I'm most proud of the clean and efficient use of various technologies and plugins like Prettier, Astro, and Tailwind. The code is well-structured and organized, and media queries have been effectively used to provide a responsive design. I would appreciate any advice or feedback you could provide to help me improve my front-end development skills. Please feel free to share your thoughts and ideas. I appreciate any help you can provide.

    Article preview component using astro, tailwind and JS

    #accessibility#astro#tailwind-css
    1
    P
    Anonymous Coder•200
    @AnonymousCoder323

    Great job! Looks very similar to the design. I noticed how the share button icon doesn't have a light grey background. Was this intentional? Also, I noticed how on screens larger than 1440px the card is not centered. You can fix this by adding the grid and place-content-center classes to the body element. I also noticed that there is not triangle pointing down on the share toast on tablet and mobile. I use this resource to generate a triangle and then positioned it accordingly relative to the share toast. You can check out what I did here.

  • P
    Anonymous Coder•200
    @AnonymousCoder323

    Pretty close to the design and is responsive. However, the alignment for the hero is off and middle images are small on desktop.

  • P
    Anonymous Coder•200
    @AnonymousCoder323

    Great job! I really like the layout you used for devices between mobile and desktop. I like how you used the article and blockquote tags - it makes the HTML more semantic. The code for the testimonial cards is a bit repetitive. Since you are using Astro, the duplicate code could be extracted into its own component. You can check out something similar that I did here

  • P
    Anonymous Coder•200
    @AnonymousCoder323

    Looks close to the design but the color and font is a bit off. I noticed that your page is not using the Poppins font. This could be because in your tailwind config you have sans under the fontFamily key instead of poppins.

    Marked as helpful
  • P
    SuiteMel•170
    @SuiteMel
    What are you most proud of, and what would you do differently next time?

    I decided to try giving myself an estimate of how long it would take to build this component, and even with extra distractions and a few segues, it took me less than 2 hours to complete. Which was my initial estimate before starting this project.

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

    I wanted to use modern methods for changing the image at different screen sizes, so I researched responsive images on mdn's website. Eventually found this tutorial and learned the best method for including different images for the sake of art direction.

    Product preview card w/ Tailwind CSS & Svelte

    #tailwind-css#svelte
    1
    P
    Anonymous Coder•200
    @AnonymousCoder323

    Great job! Responsiveness is good. I really like the hover transition on the button. Is there a reason you used an <a> element instead of a <button> element for the button? Also, it seems like you're missing the cart icon on the button.

  • P
    Anonymous Coder•200
    @AnonymousCoder323

    Great job! Looks like the design but just larger. Are you able to update the link to the repo? That way I can review the code.

  • Muhammad Zubair•160
    @Mini-Elliot
    What are you most proud of, and what would you do differently next time?

    Social Links Profile - Frontend Mentor Project

    I recently completed the Social Links Profile project from Frontend Mentor, and it was a fun and rewarding experience. This was a beginner-level project where I focused on creating a simple yet responsive layout using HTML and CSS. I did not use any frameworks or JavaScript for this project, relying purely on the fundamentals.

    What I Learned

    • HTML Basics: I reinforced my understanding of structuring content using semantic HTML elements.
    • CSS Styling: I applied styles using CSS to make the layout clean and visually appealing.
    • Responsive Design: The project adapts well to different screen sizes, making it mobile-friendly.

    Project Features

    • Responsive Design: The profile layout adjusts to different screen sizes for a seamless experience across devices.
    • Clean Layout: Focused on presenting user information and social media links in a simple and elegant design.
    • Accessibility: Used basic HTML structure to ensure content is properly organized.

    Tools Used

    • HTML5
    • CSS3
    • Visual Studio Code for coding

    What’s Next?

    Although this was a beginner project, I’m excited to continue improving my skills and learning more about CSS, layout techniques, and adding interactivity with JavaScript in future projects.

    View the project on Frontend Mentor

    Frontend Mentor | Social links profile

    1
    P
    Anonymous Coder•200
    @AnonymousCoder323

    Great job overall! It looks similar to the design.

    I would suggest instead of using buttons for the links to use <a> tags so you can link to other sites when clicking on the button/link.

    Marked as helpful
  • ophintherain•40
    @ophintherain
    What are you most proud of, and what would you do differently next time?

    I got more comfortable with css and html, and I hope to do better next time and add some imagination of my own

    A solution with Chatgpt

    1
    P
    Anonymous Coder•200
    @AnonymousCoder323

    Good job using semantic HTML! I like how you organized everything in the card using <header>, <section>, and <footer> as well as using the <time> element for the publish date. Is there a reason you decided to use <section> instead of <main> for the description?

    I noticed that the card isn't responsive below screen sizes with a width of around 400px. You may want to use media queries to update your content size. Alternatively, check out this article on how to use min, max, and clamp CSS functions to make your content responsive.

  • P
    Anonymous Coder•200
    @AnonymousCoder323

    Really good job! It basically looks exactly like the design. However, I noticed that it's not so responsive on screen sizes with a width below 320px. It could be that's okay if there are not any actual devices below 320px. I noticed that the main content is not included in a main element. Perhaps it would be better to include the main content in a semantic main tag.

    Marked as helpful