Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
14
Comments
59

Adann Jacinto

@DanCodeCraftMontreal, Canada790 points

💻 Changing my life through coding || 👨‍💻 Developer in development 🇨🇦

I’m currently learning...

Improving: HTML, CSS || Learning: JavaScript, React

Latest solutions

  • Price Grid - HTML/CSS


    Adann Jacinto•790
    Submitted over 1 year ago

    I'm always open to feedback.


    0 comments
  • Background challenge!


    Adann Jacinto•790
    Submitted over 1 year ago

    I'm open to different ideas on how to handle the background. Although my application worked, I always enjoy learning new ways to solve similar puzzles.


    1 comment
  • It's all purple! z-index play


    Adann Jacinto•790
    Submitted over 1 year ago

    I'm open to feedback!


    0 comments
  • NFT Card Solution - Transition w/ opacity


    Adann Jacinto•790
    Submitted over 1 year ago

    I'm open to feedback!


    0 comments
  • Order Summary - HTML/CSS only


    Adann Jacinto•790
    Submitted over 1 year ago

    Open for feedback!


    0 comments
  • 3 Columns Component


    Adann Jacinto•790
    Submitted over 1 year ago

    I'm open to feedback, and also open to help you if you ever need anything. :)


    0 comments
View more solutions

Latest comments

  • Yrwin Avellona•70
    @CoderExplore365
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    What I am mostly proud of is that I figured out how to do the CSS part when it comes to coding the buttons and learn how to design them. I will just start doing things the same while I figure things out by myself instead of doing things differently.

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

    I did not encounter challenges because I already overcome them by figuring out how to center the container.

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

    There are not any specific projects I do not need help with because it is good to go.

    Social-links

    #accessibility#backbone#contentful#express#foundation
    1
    Adann Jacinto•790
    @DanCodeCraft
    Posted over 1 year ago

    Nice one, @CoderExplore365.

    I think the colors and the font are a bit off, and it takes away the hierarchy of the elements displayed. You can also centralize the main container on the screen when working on a page like this since this is the only element to focus on. All the elements within the container are also not centralized and heavy on the right side.

    I like you added the transition for when hovering each button.

    I don't really understand why you have a CSS file, and also a local CSS. The idea is to have it separate in files to make your life easier, and the project better organized.

    Last but not least, I would strongly recommend you only use IDs when is a very unique element. Other than that, always aim to have classes.

    All the best!

  • TheGroshin•30
    @TheGroshin
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    Just finishing the project with it looking as close to the final solution as possible. I know there are better ways of achieving the final product, reducing unnecessary code and making the product mobile friendly are the goals for the next project.

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

    Aligning the overall product to the center and making sure everything looked as close to the final product as possible, there were a lot of margin and padding tweaking.

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

    Making the project mobile friendly. While I have a faint grasp of media queries, I'm not to sure on how to actually make things accessible on mobile devices/different screen sizes.

    Qr code using flexbox for alignments

    2
    Adann Jacinto•790
    @DanCodeCraft
    Posted over 1 year ago

    Good job, @TheGroshin.

    Let me highlight a few points I believe you can work on in this, or on your next project.

    Design:

    • The background color is a bit off, making the component fade out a little bit. The padding at the top is way different from the ones on the side. This gives the impression that the QR code is off-center.
    • You're not using the right font, nor the correct colors for each section.
    • You can/should have your footer outside the container, so the focus would be on the component only.

    Code:

    • Your whole container is not centralized on the screen. If you make your display 3000px, for example, it will go all the way to the top. Here's a quick way to centralize it:
    body {
        min-height: 100vh;
        display: flex; 
        justify-content: center;
        align-items: center;
    }
    
    • You should always do a modern reset on your CSS before starting any project. I recommend the one by Josh Comeau - although, there are others you can check out.
    • You're using weird units of measure for your styling. Fonts should be set in rem, not px. And the same goes for the border-radius, and so on. Kevin Powell has a cool video talking about measures on YouTube.
    • When you set your screen to mobile view, then the whole right margin is gone.

    Hope it helps. Keep up the good work!

  • Kauê Lima•290
    @KaueACLima
    Submitted over 1 year ago

    HTML CSS

    #accessibility#animation#astro#django#chai
    1
    Adann Jacinto•790
    @DanCodeCraft
    Posted over 1 year ago

    Good one, @KaueACLima!

    I see you're missing a few things that will make your project even better! First things first, there's a simple way to centralize your component in the screen:

    body {
        min-height: 100vh;
        display: flex; 
        justify-content: center;
        align-items: center;
    }
    

    The hovering states are missing for the header of the card, and the box-shadow. To solve this, you will simply have:

    .class:hover,
    .class:active {
        color: your_color_of_choice;
    }
    

    The above is just an example. You can change the properties you want to, like color, size, font, or whatever your project demands you to. Also, do not forget to add a transition property in its parent element. It takes you one line:

    .class:link {
        transition: all 0.2s;
    }
    

    And you have a good, smooth experience.

    Keep up the good work!

  • Sean•210
    @UFXtrendscalper
    Submitted over 1 year ago
    What challenges did you encounter, and how did you overcome them?

    I struggled with this one. It took a few tries over a few days. But finally was able to get through it.

    Stats Preview Card

    1
    Adann Jacinto•790
    @DanCodeCraft
    Posted over 1 year ago

    This one is, indeed, a hard challenge. Yet you nailed it.

    Good job. :)

  • gthtawfiq•10
    @gthtawfiq
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    im proud that i used flex and it worked , i would definitely use a framework next time

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

    to be honest i didn't encounter any challenges

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

    i would like the help in css, i think that my css code is too long

    QR code component using display flex

    1
    Adann Jacinto•790
    @DanCodeCraft
    Posted over 1 year ago

    Good job on completing the challenge, @gthtawfiq.

    I will give you a few tips I learned along the way related to your CSS.

    • First of all, do not use a local CSS, create a different file and link it to your HTML (shortcut is link:css).

    • The same goes for the font: avoid importing, and link it instead.

    • To centralize your component to the screen without trouble, add this to your body:

    body {
        min-height: 100vh;
        display: flex; 
        justify-content: center;
        align-items: center;
    }
    
    • I know you're asking for a way to simplify your CSS, and this is the opposite of it, but make a CSS reset before every project. This will make your page run smoothly in every browser. My personal recommendation is the reset from Josh Comeau.

    • Do not use font size in pixels, this is for accessibility issues.

    • Since this project uses only one font, you can declare it once in the body, and don't forget to set a fallback just in case.

    • For the header, you can simply use H1 -> H6. Therefore, you won't need to declare its size, unless you have to.

    Marked as helpful
  • LucaRiver0n•10
    @LucaRiver0n
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am proud of me becasue I think this challenge was easy and the next time I will start with mobile-first

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

    I had some problems with change the color of the list, I dont know how to do that but I will learn in another challenge!

    Responsive recipes web created with Html and SASS

    #sass/scss
    2
    Adann Jacinto•790
    @DanCodeCraft
    Posted over 1 year ago

    Good job overall, @LucaRiver0n!

    To change the color of the list, is this simple:

    li::marker {
      color: your_color_of_choice; -> change the color
      font-size: x.xrem; -> change the size of the marker
    }
    

    I would recommend you pay a bit more attention to the size of fonts, and spacing in general. It will give your pages a whole different look and improvement.

    As well, you should consider using different measuring units, other than px. They do have a purpose and help with accessibility.

    Keep up the good work!

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