Skip to content
OverviewSolutions
7
Comments
7
P
Kiara523
@Kiara523

All comments

  • lordag•130
    @lordagSubmitted 1 day ago
    What specific areas of your project would you like help with?

    I'm trying to get better with semantic HTML and aria attributes

    HTML, Css, VsCode

    1
    Kiara523•100
    @Kiara523Posted 1 day ago

    Great work! I found your CSS very organized and clean! More relatives units could have been applied though.

    The HTML it's good, for Semantic you did very well using section and article where you could, it's important for browsers and screen readers to use headings starting from h1(only 1 per page) and then the others, as many as you need.

    Happy coding 😎

    0
  • Kiara523•100
    @Kiara523Posted 3 days ago

    Your solution looks good and pretty close to the original one. The variable are very well organized and easy to read, also you ahve named the classes is pretty clear way. I would suggest to keep specificity on the same level as much as possible to avoid rules to be overridden by using more specific name for the element itself, an example the ".header h2 " it has an higher specificity, but giving it a class name would lower it, example header__title.

    Giving specifics width and height it can be dangerous as you did here.. '#container { width: 1272px; height: 735px; display: flex; flex-direction: column; justify-content: space-between; }' give a max-width and let the browser figure out the height can be a possibility, it helps with responsiveness.

    Great job over all. Well done!! I enjoying seeing how the same project can have different solution...

    0
  • Kiara523•100
    @Kiara523Posted 5 days ago

    Very nice looking solution...

    You could implement it using BEM naming convention, its a way of naming classes that helps with organization, readability and reusable component (https://www.geeksforgeeks.org/understanding-the-css-bem-convention/ this is just a link to an article, but there are plenty out there)

    Also..It is good to have general reset at the beginning of the css style sheet like setting margin and padding that comes with the browser default to zero (*(this selects all) { margin:0; padding:0; box-sizing:border-box}), another very useful one is to reset the img (img { diplay:block;}) this will help with the white space showing below the img that is because it is an inline element.

    Marked as helpful
    0
  • Kiara523•100
    @Kiara523Posted 9 days ago

    It has some differences from the original design but it looks good and efficient on large screen and also on mobile.

    I do have some suggestion to avoid the white space below the image, set the image display:block or inline-block and it will make it disappear.

    The html article tag should be used with an article that can stand alone in an other web page and still make sense on his own. It's ok if it is not possible to use all the semantics tags when the content doesn't allowed (lack of headings for example).

    Something I use to check the html and CSS file is the w3validator page, it's very useful, for CSS go to: https://jigsaw.w3.org/css-validator/, for html go to: https://validator.w3.org.

    0
  • Suleiman Oz•100
    @Suleiman-OzSubmitted 16 days ago
    What are you most proud of, and what would you do differently next time?

    design to code

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

    to understand readme-temp;ate.md

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

    #flexbox

    Social links profile

    1
    Kiara523•100
    @Kiara523Posted 16 days ago

    Hello, overall the project looks good, although there is always room for improvement.

    I can only see one of the three layout, I believe there was a different layout for mobile, desktop and laptop, try using relative units (rem, em, %) and media queries can help you make the page more responsive.

    Setting a width and a height (.card) to something can compromise the responsiveness of the page, if you can try to go for min-width/min-height or max-width/max-height instead.

    I believe that using a display: flex for the body it would have made it easer to center the card and also to align the items within. Make sure that the flexbox has enough room to move if you want to center something. You can have a flexbox inside another flexbox and so on..

    For CSS there are very good resources out there, here are some that I use: w3schools webpage, MDN Mozilla developers webpage, Kevin Powell has a you tube channel with plenty of CSS explanation.

    The readme-template is a guide on how to fill it up, you have to modify the generic text with your own info, for example replacing the live URL link etc. If you use VSCode when you open the readme file at top right corner there is a button that looks like a book with a magnifier, press it to see the preview of the file, it might be helpful.

    I hope that my feedback was useful... let's keep up the good work! 👍

    0
  • Kiara523•100
    @Kiara523Posted 20 days ago

    Well done on the mobile Version. I like the fact that it does not scroll at all, beautiful!

    0
  • Kiara523•100
    @Kiara523Posted 25 days ago

    It looks a bit different from the original one because I kept the additional copyright message.

    0