Skip to content
OverviewSolutions
3
Comments
6
Luthfi
@kankaGate

All comments

  • P
    Destiny•130
    @DetDet91
    What are you most proud of, and what would you do differently next time?

    I'm proud to have completed this project without quitting. Since I'm new to HTML and CSS, it can be frustrating not to be able to code immediately. I would take my time, set up the main things in HTML, and then move on to CSS to polish it up.

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

    I couldn't get my live URL to work in GitHub. After two hours of research, I needed to delete some subfiles and move my files to the main.

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

    When it comes to HTML, it is essential to determine when to use classes. I know i need to do more reading and handon experience.

    VS Code

    1
    Luthfi•110
    @kankaGate

    Hi DetDet91, good job on finishing the challenge. Allow me to give you my feedback as follows:

    1. you can add flex-direction: column on body selector, so the attribution class content will go down

    2. you set max-width on the container(.card), but also set the max-width on the content, which is making unnecessary white space on the left and right side, just set the width on the container, and set the content width to 100% will do, no need to set max-width on the content

    3. i'd advice on using semantic html more, it'll make your day easier later on, start with one main and put your card class there. read here for more reading about semantic HTML it would be wise to minimize on using <div> and <span> tags as they don’t directly convey meaning

    4. it is best practice to use class selector than using element name or id, when your code grow bigger it would be easier to maintain the code, unless you really need to use id selector

    5. for consistancy, use the same measurement unit througout the code, in your code, there are some using px and percentage, better use rem or em for the sake of responsiveness for example use this preset to easily convert px to rem

    html {
    /* font-size: 10px; */
    /* 10px / 16px = 0.625 = 62.5% */
    /* Percentage of user's browser font-size setting */
    font-size: 62.5%;
}

    from the above we can convert px to rem easily:

    100px = 10rem

    75px = 7.5rem

    and so on

    cheers!

    Marked as helpful
  • Akinsola Daniel•20
    @Akd-ai
    What are you most proud of, and what would you do differently next time?

    It takes me less and less time to research each time I work on something new, although am still a newbie, it shows am learning. Working towards understanding these concept without the need to search.. If that makes sense

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

    Trying to set the container to the mid of the screen without margin. Had to research a bit to understand the value of height and width(min and max).

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

    How else can I center the container on the screen? What else can improve the page?

    Social Links Profile HTML CSS

    1
    Luthfi•110
    @kankaGate

    Hi Akinsola Daniel, please allow me to give some feedback following:

    1. from the looks, the container stuck to the bottom because of the margin-top: auto, just remove this will center the container vertically and horizontally since you implement flex with align-items and justify-content set to center.

    2. use semantic html more, it'll make your day easier later on, start with one main and put your container there

    3. it is best practice to use class selector than using element, when your code grow bigger it would be easier to maintain the code.

    4. for consistancy, use the same measurement unit througout the code, there are some using px and rem, better use rem or em for the sake of responsiveness. for example use this preset to easily convert px to rem

    html {
    /* font-size: 10px; */
    /* 10px / 16px = 0.625 = 62.5% */
    /* Percentage of user's browser font-size setting */
    font-size: 62.5%;
}

    from the snippet above we can convert px to rem easily:

    100px = 10rem

    75px = 7.5rem

    and so on

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

    I'm proud of the CSS code as it was the hardest part I've overcome

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

    The main difficulty is adaptation

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

    I want to hear your opinion about my css code

    social-links-profile-main

    3
    Luthfi•110
    @kankaGate

    Great solution! Please allow me to give some feedback:

    1. on hover & focus state, the color font should be dark grey
    2. use semantic html like main containing the main area of the page, instead of straight to div. this will help the screen reader works better
    3. reset css code on padding, margin and box-sizing on the same block of code, for example on body, html or * selector
    4. use responsive unit measurement such as em, rem, % instead of px
    5. your responsive block of code is covering most of the elements, congratulations!

    have a nice day!

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

    I am most proud of the new things that I have learned along the way. I have developed a better understanding of figma. And I have also started using Devtools better. I learned how different CSS stylings impact the final output.

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

    I had almost no understanding of figma. I also had not used the Elements tab of Devtools well so far. I figured out these things along the way by observation.

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

    I would like to know if I missed something.

    Blog Preview Card Component

    #accessibility
    1
    Luthfi•110
    @kankaGate

    well done! your solution is so good like the design, btw here are some sugestions from me:

    1. use semantic html like main containing the main area of the page, instead of straight to div. this will help the screen reader works better
    2. why you use h4 inside span element, is there any purpose to accomplish? if not just use 1
    3. declare the font-family on the body, no need to declare in each child selector except if the selector needs different typeface
    4. use the same measurement unit througout the code, there are some using px and rem
    5. adding transition for the changing propery value would be nice, like changing color on hover

    have a nice day!

  • Lucas Machado•140
    @LucasERMachado
    What are you most proud of, and what would you do differently next time?

    I'm proud about conclude the challenge with less difficult than the challeng with the QR-code. Now, I can built the website of the challenge in less time with a north about what I have to do first.

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

    I still have some problems with the distribuition of the allignment items and in wich who I apply the property to conclude the space of the items in the screen.

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

    All help are welcome. semantic, code, properties, everything :D

    Blog Preview Card

    1
    Luthfi•110
    @kankaGate

    great job on your complete challenge! it looks great.

    • Responsive i suggest to use property that support responsive like width replaced with max-width and measurement unit from px to em or rem
    • adding effect to changing state like changing color when hover would be nicer
    Marked as helpful
  • Luthfi•110
    @kankaGate

    need to add shadow like the design has