Skip to content
OverviewSolutions
17
Comments
18
AReactDeveloper
@AReactDeveloper

All comments

  • P
    Daniel 🛸•44,790
    @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

  • AReactDeveloper•340
    @AReactDeveloper

    Does the solution differ considerably from the design? I GUESS SO

  • AReactDeveloper•340
    @AReactDeveloper

    Very good job looks exactly identical just wanna note that u might wrote your github repo url wrong https://github.com/Kim291712/Social-links-profile/tree/main/social-links-profile-main/social-links-profile-main double check that if you may

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

    I enjoyed adding a shadow the background of my container. I would put my style in a style.css file instead of the html file. Using the space-between flexbox option makes the most sense for pages like this because the content at the bottom and top need to be equally spaced from the edges.

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

    I was trying to make the yellow leaning text box only as big as the text but it was very large. It turned out to be an issue with default margins of the h1 header.

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

    Is my code deviating from any best practices?

    flexbox and containers

    2
    AReactDeveloper•340
    @AReactDeveloper

    very nice I agree splitting the code into files solves a lot of headache and helps organizes stuff too

  • Emal•110
    @syeero7
    What are you most proud of, and what would you do differently next time?

    I am proud that i was able to make the project look almost identical to the design without using the design file

    QR code componet

    1
    AReactDeveloper•340
    @AReactDeveloper

    wow that actually looks very close well done

  • P
    Sergiu Grosu•200
    @sergrosu
    What are you most proud of, and what would you do differently next time?

    I used this project as an introduction into SASS. It took me a little longer, as I became familiar with SCSS syntax, but it worked perfectly in the end.

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

    I couldn't center the card vertically - nothing seemed to work. I tried both flex and grid. In the end, I realised I had missed to set html & body height to 100%. Once added, it worked perfectly.

    Responsive product card using HTML & SCSS

    #sass/scss
    1
    AReactDeveloper•340
    @AReactDeveloper

    sass is a powerful tool design looks good well done , later when you work on bigger projects you can experiment with partials and putting sass on separate files really helps me a lot you can also put variables resets and base code for your application in partials

  • P
    Julien Gilbert•500
    @juliengDev
    What are you most proud of, and what would you do differently next time?

    I learned new things, such as the possible styling of ordered and unordered lists. I was able to apply more responsive design in this project compared to previous ones.

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

    The styling of lists and tables presented challenges.

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

    No help needed here either.

    Recipe_page Responsive design with HTML/Css-Sass

    #sass/scss
    1
    AReactDeveloper•340
    @AReactDeveloper

    you design is the most accurate ive seen so far i like your point of the styling of list-style i never knew that was possible before this project as well i think you used ::marker as well pretty nice stuff id like to ask you what tool you use to get your design to look this close to the original one

  • AReactDeveloper•340
    @AReactDeveloper

    Great job i also experimented a lot with #sass/scss doing this site projects

  • AReactDeveloper•340
    @AReactDeveloper

    excellent work they look identical

  • Charles ASSOGBA•30
    @Charles-La-Gratte
    What are you most proud of, and what would you do differently next time?

    next time i try to improve more the responsive

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

    The challenge for me is how to put the 2 cards together and justify the text

    responsive QR-Code card in HTML and CSS

    1
    AReactDeveloper•340
    @AReactDeveloper

    excelent work

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

    a good practice in this entry level project , I tried to get it to match as much as possible like my previous challenging , I have experience in sigma UI design but i'm realizing the pain of the implementing it into CSS html thank you for passing by if you like then like really motivates me to continue my learning processes thank you

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

    trying to practice more the pixel perfect approach learning to let go when its close enough , chasing perfect implementation of the design provided but in realistic terms

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

    i would like my designs to follow accessibility rules better

    Qr code component (as pixel perfect as i could manage it to be)

    1
    AReactDeveloper•340
    @AReactDeveloper

    also I implemented a sass workflow to this project considering the QR card as a component that can be reusable fi this was a bigger site I know using a preprocessor is an overkill for this project but its good practice nevertheless

  • James.•460
    @Jimztech
    What are you most proud of, and what would you do differently next time?

    The project brought about my implementation of CSS padding and also CSS box-shadow, which I have never implemented in any project.

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

    The challenge I faced was implementing the padding and border-box on the html element "Learning". Took me a while to solve but I got it right later on.

    Blog-Preview-Card component with Box-shadow.

    1
    AReactDeveloper•340
    @AReactDeveloper

    very nice i like that you mentioned implementation of CSS padding , padding and margin are part of css box model which one of the oldest features it can be tricky at first but once you get than hang of it is magic i recommend using dummy borders in your css in order to see the box model in action during the design and remove them later when your ready for production well done i like it

    Marked as helpful
  • Dylan de Bruijn•3,220
    @DylandeBruijn
    What are you most proud of, and what would you do differently next time?

    Everything went pretty well. I would appreciate feedback on general code structure and accessibility. Also I tried to make the font-size responsive without media-queries using clamp(). However the title scales down sooner than the rest of the elements. Is there another way to achieve this? I tried container queries and cqw units but that didn't work. Would be much appreciated if someone could point me in the right direction!

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

    Making the font-size responsive without the use of media queries.

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

    General code structure, semantics, accessibility and making the font-size responsive without the use of media queries.

    Blog Preview Card

    #sass/scss#vite#bem
    3
    AReactDeveloper•340
    @AReactDeveloper

    very clean I'm impressed what did you use to get the design in such pixel perfect accuracy ?