Skip to content
OverviewSolutions
14
Comments
60
Adann Jacinto
@DanCodeCraft

All comments

  • Yrwin Avellona•70
    @CoderExplore365Submitted 7 months 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

    1
    Adann Jacinto•790
    @DanCodeCraftPosted 7 months 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!

    1
  • TheGroshin•30
    @TheGroshinSubmitted 7 months 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
    @DanCodeCraftPosted 7 months 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!

    0
  • Adann Jacinto•790
    @DanCodeCraftPosted 7 months 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!

    0
  • Sean•210
    @UFXtrendscalperSubmitted 7 months 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
    @DanCodeCraftPosted 7 months ago

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

    Good job. :)

    0
  • gthtawfiq•10
    @gthtawfiqSubmitted 7 months 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
    @DanCodeCraftPosted 7 months 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
    1
  • LucaRiver0n•10
    @LucaRiver0nSubmitted 7 months 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

    2
    Adann Jacinto•790
    @DanCodeCraftPosted 7 months 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!

    0
  • Adann Jacinto•790
    @DanCodeCraftPosted 7 months 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!

    1
  • Eríck•130
    @Erick-SLSubmitted 7 months 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
    @DanCodeCraftPosted 7 months 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!

    0
  • Eríck•130
    @Erick-SLSubmitted 7 months 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
    @DanCodeCraftPosted 7 months 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!

    0
  • Yves MUHOZA•170
    @hozayvesSubmitted 7 months 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
    @DanCodeCraftPosted 7 months 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
}
    1
  • EMMANUEL DAMILOLA•170
    @DAEM007Submitted 7 months 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
    @DanCodeCraftPosted 7 months 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.

    0
  • Adann Jacinto•790
    @DanCodeCraftPosted 7 months 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
    1