Skip to content
OverviewSolutions
4
Comments
5
P
Shakthivel Ramesh Nirmala
@shakthivel-rn

All comments

  • Facundo Andrés De Los Rios•200
    @FacundoDLRSubmitted 14 days ago
    What are you most proud of, and what would you do differently next time?

    🛸Hello FEM Community! I'm Facundo and this is my solution for this challenge! 😊

    🛠️ Built with:

    • HTML 🧱
    • Advanced CSS (Pseudo classes/elements & combinators)🎨
    • Variable Fonts 🔠
    • Flexbox ⚒️
    • Grid ⚒️
    • Responsive Design
    • SEO 🌍
    • Mobile First 📱
    • NEW media query ranges syntax
    • Conventional commits (git) 📜

    Again, thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. 💟

    If you have any suggestions on how I can improve this project, feel free to leave me a comment!

    Feedback welcome 😊

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

    In this challenge I had a major problem when changing the preview image of the product depending on the screen size. After looking for solutions for a long time trying to use different image tags and neglecting different attributes, I decided to use two tags and using CSS I was able to solve the problem using the display property.

    Product card component Full CSS

    1
    Shakthivel Ramesh Nirmala•50
    @shakthivel-rnPosted 14 days ago

    Nice work! You have perfectly used CSS variables and Relative Units to design the styling. But I noticed that the card did not change to mobile layout when I resized the window.

    0
  • collins-ai•230
    @collins-aiSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I'm happy i could make the web page mobile responsive, i tested it on my mobile phone and it was looking great.

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

    It was very difficult to style the project correctly beacuse i couldn't access the figma file to get the design details.

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

    Responsive web design.

    recipe page using html and css

    1
    Shakthivel Ramesh Nirmala•50
    @shakthivel-rnPosted about 1 month ago

    Great job!! Just some minor improvements. The fonts and some spacings does not match with the design. The website seems to be responsive for Desktop and Tablet layout. But for Mobile layout the stylings does not match with the design. You have effectively used media queries, maybe making the width of the card container to be 100% will fill the card when media (max-width: 768px)

    0
  • Shakthivel Ramesh Nirmala•50
    @shakthivel-rnPosted about 2 months ago

    The Social Links Profile looks really good! I just found some minor mismatches with the mock. Like the size of buttons, size of images, font sizes and text color. Overall, great job!

    0
  • Shakthivel Ramesh Nirmala•50
    @shakthivel-rnPosted about 2 months ago

    Hi Ricarddo, great job on the blog preview card challenge. I just noticed some improvements.

    • I cannot see both the images
    • The card components is horizontally centered, but not vertically. For that, you make the container height 100vh and use flexbox to justify-content: center and align-items: center.
    • You can add border-left and border-top to add a small black line to the top and left of the component

    Thanks!

    0
  • Shakthivel Ramesh Nirmala•50
    @shakthivel-rnPosted about 2 months ago

    The QR Component looks good! Just some suggestions, I think instead of grid, using flexbox will make the code much simpler and satisifies the requirement as well. Instead of giving max width, I feel giving a fixed width is better, because I saw that in large screens the image is overflowing the white container.

    0