Skip to content
OverviewSolutions
17
Comments
18

AReactDeveloper

@AReactDeveloperhttps://www.instagram.com/brutal.workout/340 points

Iam pixel perfect kinda guy i gym i like 90s 80s cars and web dev

I’m currently learning...

html/css scss js git react

Latest solutions

View more solutions

Latest comments

  • P
    Daniel 🛸•44,810
    @danielmrz-dev
    What are you most proud of, and what would you do differently next time?

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

    🛠️ Built with:

    • Vite ⚡
    • React + Typescript ⚛️🩵
    • SASS 🎨
    • Axios 🔃
    • Mobile first workflow approach 📲

    I'm very happy that I've finished my first challenge using React. I've been studying this amazing technology for a while now and after more than 50 projects using only pure HTML, CSS (Tailwind and SASS), Javascript and Typescript, I finally felt comfortable to take my first challenge using this framework. I've learned a lot during the process and from now on I'll be using it by default.

    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 😊

    Products list with cart built w/ React + Typescript

    #react#typescript#vite#sass/scss
    2
    AReactDeveloper•340
    @AReactDeveloper

    clean work

  • P
    Ronan•310
    @CannyRo
    What are you most proud of, and what would you do differently next time?

    I'm still proud to have completed this challenge, continuing my positive momentum.

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

    Using the Details and Summary html elements and customizing them required a certain amount of effort, which I was able to overcome with patience and th goods resources. Managing the distortion of the background according to the width of the device also required a little revision of the way the Css properties background-size and background-position work.

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

    I had to limit the size of the content of the Html Summary element so that the icon would be visible. I thought I could get away with a simple

    .childOfSummary{
display: flex;
justify-content: space-between;
}

    But the icon more or less popped out of the parent div without me really understanding why. After several attempts, I ended up arbitrarily limiting the size of the content of the Html Summary element to leave enough space for the icon.

    Mobile-first solution using pure CSS and Html

    1
    AReactDeveloper•340
    @AReactDeveloper

    good work i really like the animation on the button

  • AReactDeveloper•340
    @AReactDeveloper

    very good work i love the fact that the back button takes you back to the page you were not the home page very cool touch animations on point as well well done

    Marked as helpful
  • AReactDeveloper•340
    @AReactDeveloper

    Hello, nice job on this challenge! You have a slight problem with the way you included your image files. You used /, which works fine on your machine, but I recommend using ./ (dot slash) when deploying to GitHub to ensure your styles appear on screen.

    Here is a brief explanation of the difference between the two types of slashes:

    ./ (Dot Slash):

    • Represents the current directory.
    • Used to indicate that a file or directory is located relative to the current working directory.
    • Example: ./images/picture.jpg refers to a file named picture.jpg in the images folder inside the current directory.

    / (Forward Slash):

    • Represents the root directory in Unix-like systems (e.g., Linux, macOS).
    • In a web context or when used in URLs, / denotes the root of the domain or the base path of the website.
    • Example: /images/picture.jpg refers to an images directory at the root of the domain.
    Marked as helpful
  • soybrrraian•60
    @imbraian
    What are you most proud of, and what would you do differently next time?

    help me, i don't know why my project doesn't loading the styles

    Four card featuren section

    1
    AReactDeveloper•340
    @AReactDeveloper

    Hello nice job on this challenge you have a slight problem with the way you included your CSS file you used (/) which will work fine on your machine i recommend using (./) dot slash when deploying to GitHub in order for your styles to appear on screen

    this is a brief explanation of the difference between the the two types of slashes

    Difference Between ./ and /

    1. ./ (Dot Slash):

      • Represents the current directory.
      • Used to indicate that a file or directory is located relative to the current working directory.
      • Example: ./images/picture.jpg refers to a file named picture.jpg in the images folder inside the current directory.

    2. / (Forward Slash):

      • Represents the root directory in Unix-like systems (e.g., Linux, macOS).
      • In a web context or when used in URLs, / denotes the root of the domain or the base path of the website.
      • Example: /images/picture.jpg refers to an images directory at the root of the domain.
  • Jhones•920
    @jownsu

    A

    #accessibility
    1
    AReactDeveloper•340
    @AReactDeveloper

    hey friend i guess u post it in the wrong spot

View more comments