Skip to content
OverviewSolutions
20
Comments
20
Anna
@NitaLewska

All comments

  • Anna•545
    @NitaLewskaPosted about 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
  • Justin Green•2,770
    @jgreen721Submitted about 2 years ago

    Just some more practice using Figma specs. Feels frustrating sometimes in that, doesn't always feels consistent to CSS conventions?? and in making changes with the responsiveness I found a few instances where it felt they just change the parent-child container relationship entirely and in a manner that doesn't feel reasonable/necessary. Invariably I'm almost finding the entire thing to be an absolute/left/top game and in some ways container/divs be damned, which doesn't really feel right. Would appreciate advice with anyone experienced in the design conversion process, or just any feedback/suggestions in general!

    HTML,CSS, Figma

    1
    Anna•545
    @NitaLewskaPosted about 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
  • Xiang•210
    @000xzhouSubmitted about 2 years ago

    The most difficultly part is installing react. Since I'm just learning react here is a simple static page made from it.

    Thank you everyone for helping me deploy this react project on github. The problem all along was because I type my /<repo>/ wrong

    Product preview card component

    2
    Anna•545
    @NitaLewskaPosted about 2 years ago

    Have you tried this guide?

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

    Marked as helpful
    1
  • Anna•545
    @NitaLewskaPosted about 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
  • Michael Santos Masanet•100
    @AwesomeWolf22Submitted about 2 years ago

    I had some difficult in use an img tag instead of background-image style in a div, if anyone know an easy way to use an img tag inside of a div without break I would love to learn it!

    Responsive Product Card

    1
    Anna•545
    @NitaLewskaPosted about 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 about 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 about 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 about 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 about 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
  • Goran•500
    @GoranK89Submitted almost 3 years ago

    This challenge was harder than expected, especially the first card, which was glued together with absolute positioning (not sure if thats good). Another issue is the spacing below the paragraphs in the 2nd row, not sure currently how to approach that. Overall it feels like I also used a lot of unnecesary CSS selectors, so any future changes to this challenge might be a bit confusing.

    Testimonials grid section solution - with Grid and Flexbox

    1
    Anna•545
    @NitaLewskaPosted almost 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
  • Dan•90
    @gawnadSubmitted over 3 years ago

    Hi fellow coders, I am pretty new to the coding game and would very much appreciate any advise, constructive criticism on my code. This is my 1st project on Frontend Mentor. I have been on a few Udemy courses as well. Thank you in advance for your responses.

    Single price grid project using Flexbox

    2
    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