Skip to content
OverviewSolutions
10
Comments
17
Kendpr
@RealKendpr

All comments

  • iyedoo•120
    @iyedooSubmitted 3 months ago
    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•290
    @RealKendprPosted 3 months ago

    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
    1
  • Kendpr•290
    @RealKendprPosted 7 months ago

    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.

    1
  • Nathan Katshi•150
    @iam-inathSubmitted 7 months ago
    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•290
    @RealKendprPosted 7 months ago

    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.

    0
  • imshahil09•20
    @imshahil09Submitted 8 months ago
    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•290
    @RealKendprPosted 8 months ago

    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.

    0
  • mkhantk•200
    @mkhantkSubmitted 8 months ago
    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•290
    @RealKendprPosted 8 months ago

    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
    0
  • Okunaiya Daniel Oluwatimilehin•20
    @OkunaiyaDanielOluwatimilehinSubmitted 8 months ago
    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•290
    @RealKendprPosted 8 months ago

    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; 
}
    0
  • Kendpr•290
    @RealKendprPosted 8 months ago

    Great work. How did you manage to get so close to the original design?

    And I just suggest that when submitting the email, it would be nice to see that submitted email in the confirmation box as well, instead of just the [email protected]

    0
  • Kendpr•290
    @RealKendprPosted 8 months ago

    Nice work 👍

    I just have some suggestions:

    1. Instead of using a <div> for social media list, you can use the anchor tag instead. Then you can also make them a list, like:
    <ul>
    <li><a href="#">GitHub</a></li>
    <li><a href="#">Frontend Mentor</a></li>
    <li><a href="#">LinkedIn</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Instagram</a></li>
</ul>
    1. Instead of declaring every style on each list item, you can reuse them more efficiently, tailwind have a guide for that: Tailwind CSS Guide

    Keep up the good work

    Marked as helpful
    0
  • Kendpr•290
    @RealKendprPosted 8 months ago

    Great job you made so close to the design.

    Here are some that can help with the accessibility:

    1. Don't use H2 without using H1 first. They should be in order like:
    <h1>
<h2>
<h3>
<--etc-->

    and take note, dont simply use headings just to make a text smaller or bigger than the other because they are suppose to give meaning to a content. You can instead use <div> or <p> and just add a style.

    1. Also the list of social medias in your html are buttons, I think they are more of a link. You can use the anchor tag instead of the button. Then you can also make them a list, like:
    <ul>
    <li><a href="#">GitHub</a></li>
    <li><a href="#">Frontend Mentor</a></li>
    <li><a href="#">LinkedIn</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Instagram</a></li>
</ul>

    Keep coding

    Marked as helpful
    1
  • Kendpr•290
    @RealKendprPosted 8 months ago

    Nice you used your own profile 👍

    Marked as helpful
    0
  • vicky2805vky•70
    @vicky2805vkySubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    this is my first project which I only created using an image not figma.

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

    as I use image I have some problems in finding pixel measurements I think my website is almost similar to the design but it is so small.

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

    someone please tell me how do you deal with this measurement problem. as you can see my website look similar but it is small

    social links card with simple hover effects

    4
    Kendpr•290
    @RealKendprPosted 8 months ago

    Great

    I just have some suggestion:

    1. Instead of using fixed width & height like px, try using a more fluid size like percentage %
    2. Don't use H2 without using H1 first. They should be in order like:
    <h1>
<h2>
<h3>
<!--etc-->

    and take note, dont simply use headings just to make a text smaller or bigger than the other because they are suppose to give meaning to a content. You can instead use <div> or <p> and just add a style.

    Also its great you used list for listing links

    0
  • Kendpr•290
    @RealKendprPosted 8 months ago

    Nice 👍. But the link to your github repo is pointing to a different repo.

    Also I just noticed from your HTML Your using button for social media list, I think they are more of a link. You can use the anchor tag instead of the button. Then you can also make them a list, like:

    <ul>
    <li><a href="#">GitHub</a></li>
    <li><a href="#">Frontend Mentor</a></li>
    <li><a href="#">LinkedIn</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Instagram</a></li>
</ul>
    Marked as helpful
    0