Skip to content
OverviewSolutions
20
Comments
20
Anna
@NitaLewska

All comments

  • Anna•545
    @NitaLewskaPosted over 2 years ago

    Hi there! =)

    1. If it's okay, I'd recommend you to try using PixelPerfect browser addon so to make your projects closer to the design, as, when we don't have a Figma or Photoshop prototype, it's hard to check if everything is as in the given pictures =)
    2. You don't really need to use <br> tag =) try to make words wrap automatically setting right paddings and margins =)
    Marked as helpful
    0
  • Anna•545
    @NitaLewskaPosted over 2 years ago

    Hey! =) you've done a great work completing this challenge!

    1. If it's okay, I'd suggest you to read about semantic HTML though =) Tags like <header>, <main>, <footer>, <section> and so on are really important for the aссessibility! https://www.w3schools.com/html/html5_semantic_elements.asp https://stackoverflow.com/questions/1729447/what-are-the-benefits-of-using-semantic-html

    2. What's for your question - try to follow some tutorials on Youtube, for example, so to see, how other people do it. I can't really advise you any particular vids, as I mostly watch tutorials in Russian. Anyways, in the beginning, tutorials can be a great help, as we need to learn from the best =) Just remember the main rule - not only watch, but repeat everything yourself, too!!!

    Also you can look how other people here or on GitHub solved the same challenge and try to understand what they've done and how it works =)

    Marked as helpful
    0
  • Anna•545
    @NitaLewskaPosted over 2 years ago

    Have you tried this guide?

    https://github.com/gitname/react-gh-pages

    Marked as helpful
    1
  • Anna•545
    @NitaLewskaPosted over 2 years ago

    If it's okay, I'd recommend you to try using PixelPerfect browser addon so to make your projects closer to the design, as, when we don't have a Figma or Photoshop prototype, it's hard to check if everything is as in the given pictures =)

    Marked as helpful
    1
  • Anna•545
    @NitaLewskaPosted over 2 years ago

    1. You can try and use <picture> tag to display different images =)

    2. You'd better use semantic tags other than endless divs =) <section>, <article>, <aside> and other tags like that are really important for the aссessibility!

    Marked as helpful
    1
  • Anna•545
    @NitaLewskaPosted over 2 years ago

    Hi!

    you can try and use <picture> tag to display different images instead of changing background. I'm a beginner,too, but I've read that it's okay to use background method with images that aren't really necessary for a user, like different design elements and so on, but those that ARE to be seen no matter what, like product photos, should be definitely put into an <img> or <picture> tags.

    If for some reason CSS file fails to upload, our clients will get the image wrapped in <img> anyways, and those in the background won't load =(

    So, i recommend you to read about <picture> and srcset property for <img>!

    Marked as helpful
    0
  • Anna•545
    @NitaLewskaPosted over 2 years ago

    If it's okay, I'd recommend you to try using PixelPerfect browser addon so to make your projects closer to the design, as, when we don't have a Figma or Photoshop prototype, it's hard to check if everything is as in the given pictures =)

    Also, you haven't done that purple tint, and that's quite a challenge to implement it with CSS =)

    Marked as helpful
    0
  • Anna•545
    @NitaLewskaPosted over 2 years ago

    You can try and use <picture> tag to display different images instead of changing background. I'm a beginner,too, but I've read that it's okay to use background method with images that aren't really necessary for a user, like different design elements and so on, but those that ARE to be seen no matter what, like product photos, should be definitely put into an <img> or <picture> tags.

    If for some reason CSS file fails to upload, our clients will get the image wrapped in <img> anyways, and those in the background won't load =(

    So, i recommend you to read about <picture> and srcset property for <img>!

    Marked as helpful
    1
  • Anna•545
    @NitaLewskaPosted over 2 years ago

    If it's okay, I'd recommend you to try using PixelPerfect addon so to make your projects closer to the design, as, when we don't have a Figma or Photoshop prototype, it's hard to check if everything is as in the given pictures =)

    1
  • Anna•545
    @NitaLewskaPosted about 3 years ago

    Hi! I'd recommend you to read about CSS Grid and to try to rebuild this project using it. Using absolute positioning for each isn't really the best idea, as it kills responsiveness at some point.

    Marked as helpful
    0
  • Anna•545
    @NitaLewskaPosted over 3 years ago

    Hi! =)

    It seems that on your PC styles.css file was in a folder "style", so, when you uploaded your project on GitHub, link stopped working.

    Marked as helpful
    0
  • Anna•545
    @NitaLewskaPosted over 3 years ago

    Hi! =)

    1. It seems you've forgotten to add active button states
    2. When screen width is about 700 px, there is no free spaces on the sides, check it =)

    Nevertheless, you've made a good job =)

    Marked as helpful
    0
  • Anna•545
    @NitaLewskaPosted over 3 years ago

    Hi!) If you want, you can use CSS Shadow Generator (just google it) to make shadows more close to the design

    0
  • Anna•545
    @NitaLewskaPosted over 3 years ago

    Hi! =) You can use CSS Shadow Generator (just google it) to make shadows more close to the design

    0
  • Anna•545
    @NitaLewskaPosted over 3 years ago

    Hi!

    1. Why haven't you used the suggested fonts?
    2. Obviously, it's not pixel perfect, you should try to adjust width and height to make it close to the design, even considering that you've done a responsible version
    3. You haven't added "hover" version of buttons
    0
  • Anna•545
    @NitaLewskaPosted almost 4 years ago

    Hi!) You can't separate "footer" from "body" as "body" is the main container for everything else, but you could insert everything (except footer) into a "main" or just in a "div". Hope this will be helpful!)

    Also, as it was mentioned before, read about semantic tags - "header", "main", "footer" are some of them and they are really helpful

    1
  • Anna•545
    @NitaLewskaPosted almost 4 years ago

    There is one tricky thing in this challenge: on the design images there is no circle on the background, so I think we are supposed to delete it by editing the .svg file

    0
  • Anna•545
    @NitaLewskaPosted almost 4 years ago

    Hi! Why haven't you used the given background images?

    0