Skip to content
OverviewSolutions
11
Comments
17

Kendpr

@RealKendpr310 points

👋Hi, my name is Ken and I am a self-taught front-end web developer🕸 - I have not yet discovered the whole web development, but I am constantly learning to improve my front-end development knowledge and the web as a whole.

I’m currently learning...

⚛️ React and Typescript, and Tailwind CSS

Latest solutions

View more solutions

Latest comments

  • iyedoo•120
    @iyedoo
    What are you most proud of, and what would you do differently next time?

    This challenge seemed hard without the figma files. And that pushed me to creating a figma account and check the challenge files there. Doing that for like 1 hour taught me indirectly the basic use of Figma and the fundementals!

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

    I had some thinking about the shadow of the container. I got an idea of making another div and making it position: absolute; so I can place it in the right place. But that didn't work out, but then I realized how easy it was to just use box-shadow.

    Blog Preview Card

    3
    Kendpr•310
    @RealKendpr

    Hey its a great solution you got. Here are some things I can suggest:

    1. Avoid jumping to using <h2/> tags if there is no <h1/> tag or a possible way to have it.
      • Using headings in a page should always start with <h1/>
      • and there should always be one <h1/> tag per page
    2. You can try using an external stylesheet
      • It is a file with and extension of .css
      • can be included with the <link/> tag
  • Kendpr•310
    @RealKendpr

    Well done. You can improve your solution by changing the link color while hovering and focusing on it, just like the active state provided in the design files.

  • Nathan Katshi•190
    @iam-inath
    What are you most proud of, and what would you do differently next time?

    Completed the challenge in less than an hour

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

    Nothing serious

    Blog Preview Card

    1
    Kendpr•310
    @RealKendpr

    Nice work. You can center the card vertically with css grid or position: absolute;. Also, both can center the card vertically as well.

    And instead of setting a fixed height on the card(<main />), you can remove it and let the contents define the height.

  • imshahil09•20
    @imshahil09
    What are you most proud of, and what would you do differently next time?

    understand the code

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

    Responsive

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

    Responsive Tool

    1
    Kendpr•310
    @RealKendpr

    It hard to do something if you know what your doing. If you want to understand more about your code, you can look up their documentation. MDN has good docs.

  • mkhantk•200
    @mkhantk
    What are you most proud of, and what would you do differently next time?

    I'm proud of doing most of the work done by myself. I'll try to improve to handle this kind of work single-handedly.

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

    I did encounter my html body only taking half of the height and I got to google how to fix it. Only then, I was able to start with the flexbox.

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

    I would like to ask seniors for feedbacks. My code is a mess as it seems to be. So... How can I make it better overall? I appreciate it, thanks.

    QR code component page using flexbox

    2
    Kendpr•310
    @RealKendpr

    I suggest to use a fluid size for your .wrapper. Instead of using a 300px fixed width you can try to use %.

    Marked as helpful
  • Okunaiya Daniel Oluwatimilehin•20
    @OkunaiyaDanielOluwatimilehin
    What are you most proud of, and what would you do differently next time?

    i finally got the card to be well aligned and what i would do is to tackle repsonsiveness next

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

    Getting the card to be well centered and aligned, still not sure it is even aligned well.

    Updated: Finally got the card to be well centered horizontally and vertically.

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

    Well aligning the card well on the screen and also adding more effects to the page later on using JS

    Social-links-profile design using HTML and CSS

    1
    Kendpr•310
    @RealKendpr

    To center your card both vertically and horizontally, you can use grid: 1.Make sure that your card is wrapped inside one div:

    <div class=container> //this can also be the body tag directly
    <div class=card>...</div>
</div>

    2.And then the .card in CSS:

    .card {
    display: grid;
    place-items: center; //this is a shorthand for:
    //justify-content: center; and align-items: center; 
}
View more comments