Skip to content
OverviewSolutions
9
Comments
16
Atatra
@Atatra

All comments

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

    Definitely proud of getting this project to look eerily similar to the original in under a hour. Being familiar with HTML and CSS through freeCodeCamp lessons allowed me to quickly know where to start and what to do. One thing that I would do differently is not spend so much time on one problem that I'm not able to implement.

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

    There was one B I G challenge that I encountered and sadly was not able to recreate. It being the slight box shadow under the card which I spent about 15 mins at the end of everything else trying to figure how to make it. It's very subtle and faint if you notice it. Even for the fate of humanity I wasn't able to overcome this problem. sigh.

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

    One problem I would like help with is understanding the parent and child relationship css has to its core with elements. I'm not so sure if I did it completely right but eventually I settled on using the margin property to get the div holding the card to the center of the page. Knowing how and where to set up the Display, Justify-content, Text- align properties to get the style on any given area of the webpage would motivate me more than David Goggins running everyday. The other advice I would like some pointers on is how to use a computer and how to use the internet, this is a problem that has puzzled me for centuries.

    Standard Desktop QR code website using HTML & CSS

    1
    Atatra•170
    @Atatra

    Well done on finishing it so fast! Your retrospective was fun to read.😄

    I don't think it's a bad idea to take more time on stuff you're not acquainted with though. I started this journey with little knowledge of CSS & HTML, and it took me waaaay too long to accomplish my first challenge (well, it still takes me too much time... haha). The reason being I googled every single thing I didn't know. Of course if you're stuck on something for too long, it's better to move on and do what you know, then come back. Just like you did! So it's not a bad thing to do. :)

    For shadows I recommend looking at examples, this is a good start. Search for ones that look close enough to your desired shadow, then tweak it as you please.

    What helped me get of clearer view of how flexboxes work is Flexbox Froggy. It's fun to play and it is quite helpful. When I did the QR Code Component, my thought process was:

    • I need to make the card sits exactly at the middle of the page.
    • For that, my component that will contain the card must take 100% of my viewport's height. (Body or main in this case). One way is with min-height: 100vh (width: 100% for width).
    • Now that my parent component fits the entire height. I can center all its children vertically (it didn't work as expected before, bc my body's height was the height of all its children!) + horizontally. Just as you did, I used display: flex.
    • justify-content: center to align its children along the main-axis (here it is the x-axis because flex-direction is set to row by default).
    • align-items: center to align its child along the other axis.

    At each step, I inspect element my webpage to look at the boxes of each element.. So I know what I'm doing. It helps visualize stuff and realize that every elements are just little boxes with margins & paddings put inside/alongside one another.

    Hope my comment will be useful to you. I may have made some mistakes, so feel free to google it & experiment it on another challenges ! 😁

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

    I feel so confused without a design draft. Should it be 1px more or 1px less? What is this color? It makes me too confused. Forget it. I am tired. I will destroy it.

    testimonials-grid-section with tailwind

    #tailwind-css
    1
    Atatra•170
    @Atatra

    And here I am, wondering what's your workflow to be able to make such pixel-perfect solutions?

  • Atatra•170
    @Atatra

    Wow the designs look exactly the same, I'm impressed! 👍

  • Luca•140
    @TofeDev
    What are you most proud of, and what would you do differently next time?

    I'm proud to have been able to do code the cards and make them looks close as the desing. I would like to do them better next time though.

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

    I would like to know how to move the images to the right (I had to use a margin-left and I know that's probably not the correct way to do)

    Responsive Four Card Featured Section

    1
    Atatra•170
    @Atatra

    Hi, good job on your solution! It looks good. I'm amazed that it works with only flexboxes :)

    Another way to put the image to the right would be :

    • Give your .card a display: flex and flex-direction: column property.
    • Since each child of the card is now on a single row, if you want to put the img on the far end of the row, you can style your img with align-self: flex-end. We use align-self to align the img horizontally because the main axis is now the y-axis (column). So the secondary axis is the horizontal one. The div that contains the img would be unnecessary as well.

    Also you don't need to add a div for the top color of your cards, you can directly use the border-top attribute.

    Marked as helpful
  • Deep Ajay Hiwase•60
    @DeepHiwase
    What are you most proud of, and what would you do differently next time?

    My first deployment of web app is this and i am happy to be taught by Fontend Tribe and taking this this Frontend Mentor challenge and looking forward for more by myself now. Thank You! Frontend Mentor for this incredible service.

    QR-Code_Challenge using pure HTML and CSS taught by Frontend Tribe

    1
    Atatra•170
    @Atatra

    Good job on your first challenge! It looks almost identical to the original.

  • Atatra•170
    @Atatra

    Well done! It looks so close to the original. I like how you use nth-child to style each card independently. Good semantics, I didn't even know that <blockquote> existed.

  • Atatra•170
    @Atatra

    Good job!

  • Atatra•170
    @Atatra

    It looks very close to the original!

  • Dylan Heslop•2,440
    @dylan-dot-c
    What are you most proud of, and what would you do differently next time?

    This is my first time officially using both Zustand and Framer Motion so I would like so insights to how I handled the global state and how can I make it better.

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

    Global State Management and Form Validations.

    I solved the state problem with Zustand since it was fun and easy to use.

    For form validations I was thinking about React Hook form but didnt want to add more complexity.

    Another problem I had was validating the form before moving onto the next step. The form wasnt like the normal forms where you have a submit button to check, so I did an interceptor function(Thats what I call it but basically a wrapper) around the increment function so that before it moves on to the next step it validates the form and only when its correct it will go on to the next one.

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

    Global State Management and better structure of files and components

    Responsive Multi-Step Form With TypeScript, React, Framer and Zustand.

    #motion#react#typescript#zustand#vite
    3
    Atatra•170
    @Atatra

    I really love how it turned out!

  • Dylan Heslop•2,440
    @dylan-dot-c
    What are you most proud of, and what would you do differently next time?

    This was an interesting challenge overall. I'm most proud of how I was able to get the input with the extra text into a reuseable component where the developer can specify which side they want the text to be at(left/right). I would definitely use a more cleaner code approach next time.

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

    I was trying to get the form validations without using any extra state or Javascript code, but It seemed to be harder so I might just change to javascript instead for the validations. Also had a small issue with the enhanced inputs and validations.

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

    I would like help with doing the validation manually as using HTML+CSS for the validation was a bit more challenging than expected. Also cleaning up the code and making it more accessible.

    Responsive Mortgage Calculator built with Vue3, TailwindCSS and TS

    #accessibility#typescript#vue#pinia
    1
    Atatra•170
    @Atatra

    Well done, looks clean! :)

    Seems like I'm not the only one who tried to factorize the inputs into a single one. Though your code is cleaner than mine. Your CSS solution for hidding/showing the error is interesting.

    • But maybe you could hide the error messages before the user submits the form? It would make the user experience a bit better I think. But you would need to add some javascript.

    • I'm not acquainted with VueJS so it's probably not true (though it doesn't seem so different from NextJS). It looks like you could do it with @submit keyword in your <form> if you correctly named your inputs (see Using Custom Validation . Actually, I did something quite similar here Line 103. My code is ugly, but the idea is the same I suppose. So in your @sumbit, before calling calculateMortage(), or inside, you could check if the infos are empty string/null. Then update your formErrors accordingly. Finally, you will have to extract this array just like you did in MortgageResults. Well, I don't know if there's a simpler solution, or one that only uses HTML+CSS.

    (I'm still trying to wrap my head around how you managed to change the radio button's color? It looks so good!!)

    Happy coding! :)

  • Quentin Lee•120
    @ktqlee
    What are you most proud of, and what would you do differently next time?

    This time I am more familiar with CSS, the coding process is smoother. In addition, this project is divided into two . The height of the first , which contains the form will vary when error message occur. Therefore, I used JavaScript to adjust the height of the second so that the height of the two are always the same.

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

    I used Cleave library to format input number (mortgage amount) and JavaScript regular expression to format the calculated value. However, I still cannot read the regular expression.

    Mortgage Repayment Calculator

    1
    Atatra•170
    @Atatra

    Your formula actually helped me thank you, good solution! The one I used previously couldn't compute large numbers.

  • abs8090•60
    @abs8090
    What challenges did you encounter, and how did you overcome them?

    even though it was a simple card to implement, I still had to pay attention to the details found in the Figma design to re-produce the design in code.

    I also did not know how to center elements inside the container dive, so I googled "how to center an image inside a dive" and used one of the solutions I found online.

    vanilla html and css

    1
    Atatra•170
    @Atatra

    Hi, good job on your first challenge! 🎊

    If you struggle with flexboxes (really useful when you want to center something), I would advise you to check out Flexbox Froggy, it's fun and I'm sure afterwards you will understand everything.

    As per your solution, here are my recommendations:

    • You can apply a background color to your page if you apply it to your <body> (or perhaps even your <main> if you had one). If you do, you will need to set a minimum height to match the size of the viewport, and full width.
    • If you want to center the Card (your .container), you need to add to the parent component "flex, justify-content: center" (to center its children on the main-axis - the main-axis is the same as your flex-direction for that same component) and "align-items: center" (to center its children on the other axis).

    Hope it'll help, have fun coding! 😊

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

    Learned how to use the picture element.

    What challenges did you encounter, and how did you overcome them?
    • The hover color was not included in the design specs, had to guess it.
    • Responsive solution according to design specs didn't look good so I adjusted it.
    What specific areas of your project would you like help with?

    Any feedback is appreciated.

    Product Preview Card

    #sass/scss#vite#bem
    3
    Atatra•170
    @Atatra

    Good job! There is little to no difference with the initial design, codebase is clean too. 👍

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

    Not much to say about this one

    QR Code with TailwindCSS

    #next#react#tailwind-css#typescript
    2
    Atatra•170
    @Atatra

    Looks like I used the wrong background color, how come :')

  • Jani-B•370
    @Jani-B
    What are you most proud of, and what would you do differently next time?

    I created this project with Next.js and used the .map to go trough all Card data to get header, content and pictures for each card.

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

    Next.js have some different rules than older React had. For example props seems not to be a thing in Next and it made my work with original plan more difficult. I did in the end not do it with props but add the Card.map directly to the card component.

    Four Card Feature with Next.js

    #next
    1
    Atatra•170
    @Atatra

    I think it was a clever idea to create a component for the Card and map through each CardInfo like you did. You still managed to replicate the desired layout so good job! (I would have struggled a lot I think haha)

    Overall, nice solution, your codebase is well organized and easy to read too. :)

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

    So, I'm finally starting my webdev journey. What I'm not proud of is that it took me way too long to achieve this challenge, more or less. But I'm happy that I took enough time to do research, and try to really grasp what I was doing. Yeah I know.. using NextJS is probably overkill here, but I want to learn how to use this framework, so I'm glad I did!

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

    It's my first time doing responsive design, and my first attempt at really trying to organize as much as possible my html page, so I had to google a lot of stuff.

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

    It's a bit unfortunate that I couldn't make the page look right with super low width ( tag... Also, due to me flex-wrapping words, the text is unreadable at such dimensions. Finally the article gets resized and the beige background becomes visible again. If anyone has any suggestions, I would be very thankful!

    Recipe Page with TailwindCSS + NextJS

    #next#tailwind-css#react
    2
    Atatra•170
    @Atatra

    Someone knows why there is a white space at the bottom of my page? It didn't show up on my browser/phone. :'(