Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
14
Comments
59
Adann Jacinto
@DanCodeCraft

All 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!

  • João Cirilo Ribeiro Luiz•60
    @CiriloRibeiro
    Submitted over 1 year ago

    Responsive Social Media Link

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

    Good job @CiriloRibeiro!

    For the design, you can add a small transition for the hovering effect. It takes one line of code, and makes a huge difference. As an example:

    .element {
    transition: all 0.2s;
    }
    

    That's it, super simple.

    For the code, I would highly suggest you have a modern CSS reset before starting any project. Since it becomes a somehow, larger file, consider having a .css only for this - and link it the same way you link your styling sheet.

    It's great to see you are using different unit measures. If one is to add to your bucket, always use em for the media queries (to not confuse with rem).

    This project didn't need a media query, thought. To avoid that on some smaller components like this one, work on the mobile design first. :)

    All the best!

  • Eríck•130
    @Erick-SL
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    .

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

    .

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

    .

    Bog Preview Card Main

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

    Nice one, @Erick-SL!

    I'm missing only the hovering state for the card (the shadow should go more off the grids when in hover status). I would like to suggest you use a transition effect for it, creating a smoother experience when hovering over most elements - in the case of your solution when passing your mouse on the title. An example that would work is as simple as:

    .element {
    transition: all 0.2s;
    }
    

    Hope it helps.

    All the best!

  • Eríck•130
    @Erick-SL
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    .

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

    .

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

    .

    Bog Preview Card Main

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

    Nice one, @Erick-SL!

    I'm missing only the hovering state for the card (the shadow should go more off the grids when in hover status). I would like to suggest you use a transition effect for it, creating a smoother experience when hovering over most elements - in the case of your solution when passing your mouse on the title. An example that would work is as simple as:

    transition: all 0.2s;
    }
    

    Hope it helps.

    All the best!

  • Yves MUHOZA•170
    @hozayves
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of how can solve this challenge in less that hour

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

    The challenge I faced was making the design to be responsive like in the design I failed to mimic the design solution. I'll overcome by learning more about tailwindcss responsiveness

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

    I'll be happy to hear any feedback and advice !

    Social links profile with ReactJs & Tailwindcss

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

    Nice work, @hozayves!

    You can do a few tweaks to it to make it even better. I would suggest a quick transition when hovering the buttons, to make it smoother.

    (this is just an example)
    .element {
    transition: all 0.2s
    }
    
  • EMMANUEL DAMILOLA•170
    @DAEM007
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?
    • I am glad, I am able to work with vanilla css. Enjoyed building this.
    What challenges did you encounter, and how did you overcome them?
    • Trying to execute a pixel perfect solution: I tried to implement what you could call a look-and-feel solution for this project.
    What specific areas of your project would you like help with?
    • How to style images in a container.
    • How to write better css.
    • How to train my eye for pixel perfect execution.

    social-profile-links

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

    Well done, @DAEM007!

    I want to help you with your questions, but your repo is private (or the link is incorrect). I can, however, point out a few things you're missing:

    The animation works pretty well, but if you see, the font color changes along with the button. It goes from white to black so it's easier to see it.

    There are many ways you can style an image within a container, and it depends entirely on your code. But you can easily have a picture element around the source, and go from there. You can modify, among other things, its size, border, position, hovering status, etc...

    Train your eyes is a hard task, and completely related to how many pages or components you build per day. Do not get too attached to it, as it can sometimes be frustrating. Still, you can always inspect different websites and check each property, in an attempt to replicate it.

  • moyo.clive•50
    @moyoclive22
    Submitted over 1 year ago

    Stats Preview Card Component

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

    Good job, @moyoclive22!

    I just completed this one as well. I think you're having some overlaps with your footer and your main container when setting the screen size to the mobile device.

    It's probably happening because you don't have a margin for it when changing the ratio.

    For your code, I would suggest you use different measure units for different properties (use rem for font-size, for example). And a proper CSS reset before you start your project is also helpful for accessibility.

    All the best!

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

    Progress .

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

    links Grid-ing .

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

    Grid .

    Responsive Blog links

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

    Hey @Thessssift, good job. It's a good starting point the way it is now.

    Design:

    • Centralize the main container on the screen. You can do that with CSS, in the body.
    • The colors are a little bit off when hovering over the buttons. The same goes for the location.
    • The font size and proportions are important to create a good hierarchy, leading your potential customer to where you want to.

    Code:

    • The first thing I noticed, is that you did not make a CSS reset. This should become a good habit of yours.
    • Giving classes to everything you write in HTML is a good idea as well. Imagine you have a longer project. It would be just too difficult to manage the styling this way.
    • The buttons could be done with a <a> or <button> element. For this page specifically, it wouldn't do much, but for accessibility purposes, and in a real-life scenario, having each as a paragraph would not work.
    • Adding small details like a transition for when hovering over buttons is one extra line, but such a good result!
    • Also, consider learning about different unit measures.

    Keep up the good work.

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

    After 3 or 4 previous attempts with similar exercises, laying out the components becomes more intuitive:

    • avoid explicit widths on blocks, only set the maximums for the containing blocks (in rem)
    • except for images and pictures - fixed width is ok
    • the rest of the content should grow & shrink as they please
    • centering is simpler to do with flex, rather than with grid's place-content. Flex will allow contents to grow if needed
    • don't overuse the semantic blocks within components, as those are mostly for higher level layouts

    Social links profile - no media queries

    #react#vite#styled-components
    1
    Adann Jacinto•790
    @DanCodeCraft
    Posted over 1 year ago

    Nicely done, @alkersan!

    The proportions are very similar to the original! If I had anything to add, I would suggest you add a smooth transition effect when hovering the buttons/links.

    Keep up the good work!

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

    I think managing the display flex and grid

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

    Trying to span the cells on display grid, It was hard to find the right cells to span it

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

    I am already working on it, display grid and flex

    using display flex and grid

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

    Well done, @Depaulaeduardo!

    You inverted the order of the cards in the middle. To avoid this, it's generally advised to work on the mobile version first, so the order is always the right one.

    I can also point out that you could consider changing your media query. It creates a weird layout in between screen sizes (the cards are not flexing, overlapping the screen, and the text in the middle becomes a huge pillar of letters. If I was seeing this on a tablet, I wouldn't be able to understand the content.

    Some points you should consider on your CSS:

    • A modern reset, so it fits every browser out there.
    • Researching different CSS measure units, to avoid issues on bigger projects - the font size is a good example: use rem, never pixel.
    • Try to use more descriptive names in your classes. If you open this same project 2 years from now, would you be able to understand it right away?

    Keep up the good work!

    Marked as helpful
  • Rabbani•260
    @rabbbani
    Submitted over 1 year ago

    Four card

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

    Hey @rabbbani, Excellent work on this one!

    I like the smooth detail you added when hovering over the cards. If anything were to improve, the proportions of the icons within each card would improve the hierarchy of elements. I would also recommend you to read about different measuring units in CSS to avoid having issues in the long run - e.g. using px for font-size.

    Keep up the good work!

    Marked as helpful
  • Bouzraa Marwa•40
    @marwa20201
    Submitted over 1 year ago

    blog-preview-card-main

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

    Hey, @marwa20201! It looks super good.

    I would suggest you go further in the challenge and add that shadow on the right side of the card, as well as its effect. Talking about effects, you can add a transition property to your hovering. It creates a super good effect for one line of code.

    Also, to keep your code cleaner, you can look for a modern CSS reset instead of the *{ margin, padding, box}.

    Keep it up!

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

    I'm fishing the challenges much faster, as my coding is improving.

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

    Did just fine.

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

    None at the moment.

    Responsive Social links profile made using HTML & vanilla CSS

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

    Hey @Choconaldo, Nice work!

    I would suggest, for improvement, a few points:

    • For accessibility, do not use font size in pixels. Use rem instead.
    • You can add a transition effect when hovering the buttons. It will take you one line of code for a super nice effect.
    • A modern CSS reset could become a good habit of yours, saving lots of lines as well, keeping your code cleaner.

    Keep up the good work!

    Marked as helpful

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

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