Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
9
Comments
16

Atatra

@Atatra170 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Age Calculator App with Custom CSS Property & Zod

    #next#react#tailwind-css#zod

    Atatra•170
    Submitted 11 months ago
    • If anyone has an idea on how to compute the diff between two dates accurately without a library, I'm eager to know!
    • I'm still unsure about my animation. I'm afraid it may crash my browser again.
    • Does anyone have any suggestions on how I should organize my CSS (especially with TailwindCSS) & structure my components?

    0 comments
  • Expenses chart using a dataviz library (D3.js)

    #d3

    Atatra•170
    Submitted 11 months ago

    0 comments
  • Testimonials using CSS Grid


    Atatra•170
    Submitted 11 months ago

    1 comment
  • Four Card section with Grid CSS


    Atatra•170
    Submitted 11 months ago

    1 comment
  • Product preview

    #react#tailwind-css#next

    Atatra•170
    Submitted 11 months ago

    1 comment
  • Responsive Mortgage Calculator using TailwindCSS & Zod

    #react#tailwind-css#zod#next

    Atatra•170
    Submitted 11 months ago

    0 comments
View more solutions

Latest comments

  • univxrse•50
    @univxrse
    Submitted 11 months ago
    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
    Posted 11 months ago

    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
    Submitted 11 months ago
    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
    Posted 11 months ago

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

  • mofada•340
    @mofada
    Submitted 11 months ago

    news-homepage with tailwind css

    #tailwind-css
    1
    Atatra•170
    @Atatra
    Posted 11 months ago

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

  • Luca•140
    @TofeDev
    Submitted 11 months ago
    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
    Posted 11 months ago

    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
    Submitted 11 months ago
    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
    Posted 11 months ago

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

  • Jose Sebastian•300
    @wolf2lyon
    Submitted 11 months ago

    testimonials-grid-section-main

    1
    Atatra•170
    @Atatra
    Posted 11 months ago

    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.

View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub