Skip to content
OverviewSolutions
13
Comments
4
Sujood Qureshi
@Sujood-Qureshi

All comments

  • Sujood Qureshi•190
    @Sujood-QureshiPosted almost 2 years ago

    Hey Hanzala! 🙋‍♂️

    Congratulations on completing the NFT preview card component challenge

    I also got the same problem while working on this challenge. But I did manage to solve it

    So here is a tip

    index.html

    • You can add one blank <div> element and add the <img> element with src = icon-view.svg after <img class="equilib-img" src="./images/image-equilibrium.jpg" height="250px" width="260px" alt="Equilibrium.io"> "from your code"

    index.css

    • Then make position absolute of both blank <div> element and <img> element with src = icon-view.svg and make display none for both the elements

    • Give height and width to blank <div> element and then give the background color as per requirement.

    • Then update your hover effect from .equilib-img:hover{cursor: pointer; background-color: hsl(178,100%,50%);} to .equilib-img:hover .blank-div{ display: block;} and .equilib-img:hover .img-view { display: block}

    You can take a look at my {NFT preview card component} solution

    I hope you find it useful! May your front-end journey be filled with successful 😊😊

    Marked as helpful
    0
  • Sujood Qureshi•190
    @Sujood-QureshiPosted almost 2 years ago

    Hey Harshit! 🙋‍♂️

    Congratulations on completing the Profile card component challenge

    I have some suggestions for you about your code.

    Index.html

    • Use <main> tag to wrap the page's main content instead of <div> tag. It will show the search engines that the particular content is essential on that page. You can read more about <main> tag here.

    • You should use the <h1> tag. it is a best practice to ensure that the beginning of a page's main content starts with <h1>tag element, and also to ensure that the page contains only one <h1>tag element

    Style.css

    • Use relative units like em or rem instead of the fixed unit like px. The relative units can change elements size to the parent container

    I hope you find it useful! May your front-end journey be filled with successful 😊😊

    Marked as helpful
    0
  • Kartik Pal•20
    @kartikp962Submitted almost 2 years ago

    I made this project using HTML and CSS. The main problem I faced was to center the container div but I did it using flexbox and making the height as 100vh, if there is an alternate of it without making height as 100vh using Flexbox, kindly suggest me. And also I am not sure how it's working in mobile as I haven't used media queries so give your suggestions for it as well

    QR Code Component

    2
    Sujood Qureshi•190
    @Sujood-QureshiPosted almost 2 years ago

    Hey Kartik! 🙋‍♂️

    Good job on completing the Qr code component challenge

    So here is a tip you can make your main component center without giving the parent container 100vh height.

    You can use position: absolute; to place your element where ever you want. But positioning absolute is not good practice because that will give you trouble while making your page responsive. You can learn about CSS position properties here.

    I have some suggestions for you about your code.

    • Use <main> tag to wrap the page's main content instead of <div> tag. It will show the search engines that the particular content is essential on that page. You can read more about <main> tag here.

    • You should use the <h1> tag instead of the <h3> tag. it is a best practice to ensure that the beginning of a page's main content starts with <h1>tag element, and also to ensure that the page contains only one <h1>tag element.

    I hope you find it useful! May your front-end journey be filled with successful 😊😊

    Marked as helpful
    1
  • Emanuel•10
    @swemanuelSubmitted almost 2 years ago

    I am still learning, I found difficult looking up possible ways to format the card. The areas of code that I am unsure of, is the alignment of the card being centered.

    QR code component challenge

    1
    Sujood Qureshi•190
    @Sujood-QureshiPosted almost 2 years ago

    Hey Emanuel 🙋‍♂️ ….

    Good job on completing the Qr code component challenge

    I have some suggestions for you about your code.

    index.html

    • Use <main> tag to wrap the page's main content instead of <div> tag. It will show the search engines that the particular content is essential on that page. You can read more about <main> tag here.

    • Try to define more understandable alt text inside <image> tag. It shows that your website is user-friendly. You can read more about alt text here.

    • Use the <footer> tag to wrap all the information about the author of the website instead of the <div class=” attribution”> tag. The <footer> tag defines a footer for a document or section. An <footer> element typically contains authorship information. copyright information. You can read more about <footer> tag here.

    style.css

    • Try to use Flex properties or Grid properties to make your layout clean. These layout features of CSS3 will help you to make your page layout almost responsive. It will be easier to code in CSS3 using flex or grid properties as compared to using margin and padding for every single element.

    • You should read the style-guide.md file to understand what design your challenge needs

    I hope you find it useful! May your front-end journey be filled with successful 😊😊

    0