Skip to content
OverviewSolutions
20
Comments
3
AbdulMajeed
@Abdelmiged

All comments

  • Carlito•210
    @IntroxietySubmitted about 1 year ago

    I want some feedbacks on how I write my code maybe there is unnecessary things I shouldn't do, I also can't center the background image just like what is in the given example.

    Flexbox-gap-em&rem

    2
    AbdulMajeed•330
    @AbdelmigedPosted about 1 year ago

    Hello @introxiety, Congrats on completing this challenge hope it was fun.🎉🎉

    For CSS:

    You should aim to make your code DRY (Don't Repeat Yourself) by grouping elements that share same or some of the attributes together, or you can make Utility Classes which are basically one or more(usually one) CSS attributes and then assigning those classes to HTML elements.

    ex: instead of .div1{display: flex; justify-content: center; align-items: center;} .div2{display: flex; justify-content: center; align-items: center;} write like it .div1,.div2{display:flex; justify-content: center; align-items: center;}.

    Or you can use utility classes like .flex{display: flex} .justify-content-center{justify-content: center}; .align-items-center{align-items: center}; <div class="flex justify-content-center align-items-center"></div> <div class="flex justify-content-center align-items-center"></div this is the same as CSS frameworks as they are built on the notion of utility classes.

    You can organize your CSS attributes alphabetically .

    You can better organize your CSS code using Variables as they provide an easy to manipulate attribute value for elements that share the same attribute value.

    For media queries it is better to use PX as it is an absolute value and doesn't change relative to font-size such as EM or REM.

    Hope this was helpful and as always Happy Coding.😊

    Marked as helpful
    0
  • 04leslie•20
    @04leslieSubmitted over 1 year ago

    Hello guys..! just completed this challenge, all feedback welcomed!

    • I don't understand why the image doesn't fit in completely at the top, and my font isn't the same. If there is anything I could do better please let me know in your reviews :) !

    product_preview card

    3
    AbdulMajeed•330
    @AbdelmigedPosted over 1 year ago

    Hello @04leslie, Congratulations on completing this challenge.🎉

    • When I looked at the code I found that you have put the image in a div called card-image, although you set the image to height: 100%, the image will consume 100% of it's direct parent which is the div with class of card-image, while it's direct parent is not set to height: 100% of it's direct parent which is the div with class of card.

    • As for the font, you have imported different font weights than those specified in the style-guide, for Fraunces it's weight is 700 while for Montserrat it's weights are 500 and 700.

    • You can also use colors that are the same as the design which will help a lot, there are tools like Instant Eyedropper which you can use to get the exact color of the text by hovering over the design image.

    I hope this was helpful, and always remember practice makes perfect.😊

    Happy Coding

    Marked as helpful
    0
  • J.•10
    @inside-out-skiesSubmitted over 1 year ago

    Had some trouble at first but with a follow along I was able to find my mistakes and misunderstandings to finish the challenge.

    QR code challenge

    1
    AbdulMajeed•330
    @AbdelmigedPosted over 1 year ago

    Hello @inside-out-skies, Congratulations on completing this challenge.🎉

    I can see that the there is an issue with the image as it did not load, you have to make sure that you specified the correct path for the image in src attribute.

    • So I see that the image is in the same folder as your .css file so all you have to do is write the name of the image with the right extension as follows: Instead of <img src=".\image-qr-code.png"> write <img src="image-qr-code.jpg>.

    • And it is preferred to add alt attribute to images <img src="image-qr-code.jpg alt="qr-code"> as the image won't load sometimes even with the right path, so it provides text when there is a problem with the image.

    • Also alt attribute is used by screen readers to desribe images to visually impaired people.

    I hope this was helpful, and always remember practice makes perfect.😊

    Happy Coding

    0