Skip to content
OverviewSolutions
7
Comments
8

Aphelion Web Development

@Aphelion-im120 points

JavaScript front-end developer & designer.

I’m currently learning...

Next.js, React, TypeScript, Tailwind CSS (T3 Stack), shadcn/ui, Sass, Grid, BEM, accessibility, Codeium A.I.

Latest solutions

View more solutions

Latest 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):

View more comments