Skip to content
OverviewSolutions
7
Comments
8
Aphelion Web Development
@Aphelion-im

All comments

  • Ryan Hardy•140
    @ryyHardy
    What are you most proud of, and what would you do differently next time?

    I am proud of how close I was able to get to the design. The only difference I can see is slightly less space between the QR code image and the text. I am also proud of how I structured the HTML by taking advantage of the figure element.

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

    I struggled a bit with the text below the QR code, both in the HTML and CSS. In the end, I decided to use two paragraphs with their own classes. This made the two paragraphs easier to manage, but there is probably a better way to do it.

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

    I am still learning how to apply good CSS practices. I would like feedback on how clean it is and if I should rename any variables/classes. Also, I am sure there is a better way to handle the units. I feel like I overused rem a lot.

    QR Code Card Using HTML Figure

    1
    Aphelion Web Development•120
    @Aphelion-im

    Well done! The design was translated well to code. I have no feedback at this time.

    A minor thing:

    When I click the red "Preview site" button it gives me a 404 error. Preview site

    The link on your Github page does work correctly. Live Site URL

  • Aphelion Web Development•120
    @Aphelion-im

    I always use the HTML and CSS validator at the end of my project.

    When I pasted your html in the validator, it gave me one warning. That warning could be considered best practice.

    Your CSS does not have validation errors.

    And you could try this Web Accessibility Evaluation Tool (WAVE)

    Marked as helpful
  • Aphelion Web Development•120
    @Aphelion-im

    Love what you did with the animation!

    I see you are using Create React App.

    Have you tried ViteJS? It's so much faster than Create React App and has way less dependencies (And thus less errors/vulnerabilities. That's why I do not like NPM when compared to Maven (Java) and its pom.xml file)

    Make sure to end your files with .jsx when using Vite.

  • Aphelion Web Development•120
    @Aphelion-im

    First of all a nice translation of the design to code.

    I found out that Josh Comeau's CSS reset (Kevin Powell talked about it in that video) cuts off a part of the image on the lower (mobile) resolutions. I also see that happening in your project.

    I replaced it with Meyer's CSS reset and then it worked properly.

    On CDN: Eric Meyer CSS reset

  • Aphelion Web Development•120
    @Aphelion-im

    Alas, I only see the HTML skeleton of your project and not the styling.

    Your CSS stylesheet (And some other files) is not properly connected in your .html file.

    It should be something like this:

     <link rel="stylesheet" href="./stylesproduct.css">

    This is called a relative path. Read more about it here: HTML File Paths

    You were referencing the file from outside your project directory like: /Users/fabiennehalloin/Desktop/HTMLChallenges/product-preview-card-component-main/stylesproduct.css

    Stay within your project directory while referencing files.

  • Aphelion Web Development•120
    @Aphelion-im

    Perhaps you can find the content panel expand and collapse animation in my solution (In the script.js file):

  • Aphelion Web Development•120
    @Aphelion-im

    Hello Ritika,

    It seems you are right! The reset, which I tried out for the first time today, seems to be the culprit. I reverted back to my trustworthy Meyer's CSS reset.

    By the way...you saw the the problem in my code very quickly!

    "To solve this problem I always add the height inside media query for desktop screens. For mobile screens I just give a top and bottom margin for the card."

    Thank you. I am going to study this further.

  • Aphelion Web Development•120
    @Aphelion-im

    To position an element, I use position: absolute, but you have to put: position: relative on the parent container element. I use Flexbox to position elements and sometimes the position relative & absolute combo.

    Example html:

    <div class="parent-container">
  <div class="child">Lorem ipsum</div>
</div>

    CSS:

    .parent-container {
width: 500px;
height: 500px;
border: 1px solid red;
position: relative;
}

.child {
width: 100px;
height: 100px;
border: 1px solid purple;
position: absolute;
top: 100px;
left: 250px;
}

    I put above code on Codepen, so you can fiddle around with the code: