Skip to content
OverviewSolutions
17
Comments
18
AReactDeveloper
@AReactDeveloper

All comments

  • Daniel 🛸•44,250
    @danielmrz-devSubmitted 3 months ago
    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

    2
    AReactDeveloper•340
    @AReactDeveloperPosted 3 months ago

    clean work

    1
  • Ronan•310
    @CannyRoSubmitted 3 months ago
    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
    @AReactDeveloperPosted 3 months ago

    good work i really like the animation on the button

    1
  • AReactDeveloper•340
    @AReactDeveloperPosted 3 months ago

    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
    0
  • AReactDeveloper•340
    @AReactDeveloperPosted 3 months ago

    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
    0
  • soybrrraian•60
    @imbraianSubmitted 3 months ago
    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
    @AReactDeveloperPosted 3 months ago

    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.
    0
  • Jhones•870
    @jownsuSubmitted 4 months ago

    A

    1
    AReactDeveloper•340
    @AReactDeveloperPosted 4 months ago

    hey friend i guess u post it in the wrong spot

    0
  • AReactDeveloper•340
    @AReactDeveloperPosted 4 months ago

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

    0
  • AReactDeveloper•340
    @AReactDeveloperPosted 4 months ago

    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

    1
  • matt2282•310
    @matt2282Submitted 4 months ago
    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
    @AReactDeveloperPosted 4 months ago

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

    0
  • Emal•110
    @syeero7Submitted 4 months ago
    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
    @AReactDeveloperPosted 4 months ago

    wow that actually looks very close well done

    1
  • Sergiu Grosu•240
    @sergrosuSubmitted 5 months ago
    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

    1
    AReactDeveloper•340
    @AReactDeveloperPosted 4 months ago

    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

    0
  • Gilbert•360
    @juliengDevSubmitted 4 months ago
    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

    1
    AReactDeveloper•340
    @AReactDeveloperPosted 4 months ago

    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

    0