Skip to content
OverviewSolutions
11
Comments
17
Ken
@RealKendpr

All 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
    Ken•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
  • Ken•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
    Ken•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
    Ken•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
    Ken•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
    Ken•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; 
}
  • Ken•310
    @RealKendpr

    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 ash@loremcompany.com

  • Ken•310
    @RealKendpr

    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
  • Ken•310
    @RealKendpr

    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
  • Ken•310
    @RealKendpr

    Nice you used your own profile 👍

    Marked as helpful
  • vicky2805vky•70
    @vicky2805vky
    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
    Ken•310
    @RealKendpr

    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

  • Ken•310
    @RealKendpr

    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
  • jrgenweb•450
    @jrgenweb
    What are you most proud of, and what would you do differently next time?

    not for much

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

    spacing

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

    accessebility, i'm still learning

    Social links profile main

    #sass/scss
    1
    Ken•310
    @RealKendpr

    Well done. You might want to try centering it vertically as well, instead of just horizontally. That would be much better. You can use grid or flex or absolute positioning to center.

    Marked as helpful
  • Alexworldwid•540
    @Alexworldwid
    What are you most proud of, and what would you do differently next time?

    i had problem with the sidebar and the problem was making it span the full length when i scroll down. please any help on that will be apprietiated

    news-homepage

    #react
    1
    Ken•310
    @RealKendpr

    was making it span the full length when i scroll down

    Your sidebar is extending its height, you could fix this by giving your sidebar a position:fixed; and min-height:100dvh; also you can give your menu button a cursor: pointer; when hovering over it

  • ivara21•120
    @ivara21
    What specific areas of your project would you like help with?

    Check it out , also leave some comments below for improvement or just your opinion , maybe there's a better way to the things i did. All will be appreciated thanks :)

    newsletter-signupform

    2
    Ken•310
    @RealKendpr

    Its great, here are somethings that could get more improvement:

    1. It would be great if the dismiss button on the confirmation popup would also dismiss the popup. And you could also clear the email input after successful submission.
  • Ken•310
    @RealKendpr

    I checked your code on github and I see that you used margin: auto; to center your .container horizontally, but based on the design you still have to center it vertically.

    To do that you can use one of the following: First remove the auto margin then proceed

    1. Absolute positioning You can add this code inside your .container: position: absolute; top: 50%; left: 50%; transfrom: translate(-50%,-50%);
    2. Centering it with grid or do this instead: Make the parent element of your .container (which in your case is body ) a grid: body {display: grid; place-items: center;} Just take note that by using this every sibling of your .container will also be centered, so they might be covered by the other sibling

    It should center it both horizontally and vertically

    Marked as helpful
  • Ken•310
    @RealKendpr

    It would be nicer if the email thats been submitted is displayed inside the confirmation box after submission; replace the daria@net.com to submitted email.