Skip to content
OverviewSolutions
9
Comments
4
RogeanCosta
@RogeanCosta

All solutions

  • Submitted 25 days ago

    My Solution for single price grid component!

    #pure-css
    • HTML
    • CSS
    0

    Hello! I'm excited for share with you my solution for the single price grid component challenge! 😁

    In this challenge, I didn't face any major problems building it. 🥳

    Despite this, I am open to opinions that help me improve!😊

  • Submitted about 1 month ago

    My solution for Stat Preview Card Component Challenge!

    #pure-css
    • HTML
    • CSS
    0

    Hello! 👋

    I'm excited for shared my solution with you! 💕

    In this challenge, I learned how to add an overlay to the image.😲 This was challenging and exciting!😀

    Other than that, I didn't experience much difficulty... except for a single point: for some reason, even using the same font-family, font-size, font-weigth, ...., specified in Figma, the result obtained, in some points, doesn't seem the same as the design....😭

    I tried to make it as similar as I could, but it wasn't perfect. 😓

    Can anyone help me understand why? I did a lot of research but nothing helped me. 😣

  • Submitted about 1 month ago

    My Solution for Product Preview Card Component

    #pure-css
    • HTML
    • CSS
    0
  • Submitted about 2 months ago

    My Solution for Order Summary Component Challenge!

    #pure-css
    • HTML
    • CSS
    1

    Hello! 👋

    I'm excited to share with you my solution for the order summary component challenge. 💕

    In this challenge, I've learned how to stretch a image in background with the background-position property.😁

    I don't think I had many difficulties, but I have two more general questions:

    1. Is there any way to more easily identify when I will and will not need to work with flexbox? 🤔

    2. I know that it is recommended to work with font-size using rem/em for responsiveness reasons, but what about other properties such as paddings, margins, borders? Should I work with rem/em or can I work with px? 🤔

    By the way, any suggestions or recommendations are welcome.😊

  • Submitted about 2 months ago

    My Solution for the Profile Card Component Challenge!

    #pure-css
    • HTML
    • CSS
    0

    Hello! 😁

    I'm excited for shared with you my solution of the profile card component challenge! 💕

    In this challenge, I learned that it is possible to use the background property to add not only colors, but also images and even position them! 🤯

    By the way, one of my difficulties was precisely regarding how to position the images in the background. Unfortunately, the way I did it, as you reduce the width of the browser tab, the images will move in the background. Is there any way to keep them fixed but responsive? 😅

    Another problem I encountered was the positioning and distancing of the round image with round edges. I saw that it was possible to use outline instead of border, however, I still had some difficulty distancing myself from the elements that came below, is there a "correct" way or better than the one I tried to do? 🤔

    Any other recommendations, suggestions, will also be welcome! 😊

  • Submitted 2 months ago

    One more Challenge: NFT Preview Card Component

    #pure-css
    • HTML
    • CSS
    0

    I had some difficulty in building the mobile design. The h1, right below the larger image container, seemed to be much further away than it should be. The only solution I saw was to reduce the margin bottom of the image container to 1rem/16px. By doing this, my mobile solution matched Figma's. However, I wonder what I could have done wrong, I couldn't figure it out. Or was the problem somewhere else? 🤔

  • Submitted 2 months ago

    Third Challenge: Social Links Profile!

    #pure-css
    • HTML
    • CSS
    2

    In particular, I would like help with the part where I had the most difficulty, in the nav. 😅

    Is there a better or alternative way than the one I used to get the appropriate background for the links? 🤔

    Also, is there a way to center the link text vertically and horizontally within its parent container (li)? I only managed to do it after defining that the anchors would be flex-containers. 😣

  • Submitted 2 months ago

    My Second Challenge: Blog Preview Card!

    • HTML
    • CSS
    3

    I have some questions about my solution e about this challenge 🤔...

    1. Is the way I used @font-face correct? Most of the examples I saw did not include more than a single file, as is the case in this example. 😕

    2. Is there any way to optimize my CSS code? I think it is too long, but I have the impression that it would be possible to be more precise and reduce the number of lines. 😅

    3. This was the first project in which I decided to work with box-sizing:border-box and I had some difficulties. One difficulty was that I could not get the border to be exactly 1px, as the design showed. When adding the 1px border, the content area became a decimal and the border as well (0.800). How could I solve this problem? 😭

    4. Another difficulty I had, and I think it may have been because of the border-box as well, was that I could not increase the height of the image to 501px in the mobile design, it was 484px, if I am not mistaken. Is there any way to achieve this? 😣

    5. At the end of the challenge page there was a text like this in the ideas section: "The font sizes in this project are slightly smaller in the mobile layout. Find a way to reduce font size for smaller screens without using media queries.". I can't think of a way to do this. I even looked it up, but it seemed complex to me, using a calc function with calculations involving different units. Is there another, simpler way to get the result of this idea? 🤯

  • Submitted 2 months ago

    My First Challenge: QR Code Component

    #pure-css
    • HTML
    • CSS
    2

    Hello!

    I'm proud to share with you my first challenge of Frontend Mentor. Particularly, I'm happy with the result since I'm a beginner but I feel there are things that I can improve.

    Are there any point you think I could do better?

    I didn't feel comfortable defining the width and height of the container in order to limit its dimensions and also limit the image to 100% width, but would this be a valid approach?

    Also, it might have been better if I used flexbox to fully center the container on the screen instead of setting width and height and using margin: 50px auto;. However, I think this approach I used, despite not having centered it correctly vertically, works well. What did you think?

    Also, it seems to me that there is no need to change styles when switching from desktop to mobile, the margin 50px auto works fine... or am I wrong?