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

All comments

  • Ryan Hardy•110
    @ryyHardySubmitted 7 months ago
    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-imPosted 7 months ago

    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

    0
  • Aphelion Web Development•120
    @Aphelion-imPosted 11 months ago

    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
    1
  • Isabella Lizarde•60
    @soybellaSubmitted 11 months ago

    Hi everyone!

    Some difficulties I encountered with this project:

    1. Button placement with dice image.
    2. Displaying instructions "Roll dice below" on load. This is something that wasn't required, but I added it to test my javascript knowledge.
    3. Changing pattern divider SVG image from desktop to mobile view.

    I also added an animation to the dice on hover for desktop view, and for mobile view the dice will bounce infinitely.

    Any feedback about my code would be appreciated, I've been trying my best to keep it as clean and readable as possible.

    React advice generator app using API

    1
    Aphelion Web Development•120
    @Aphelion-imPosted 11 months ago

    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.

    0
  • Chris•100
    @DeveloperChrisPSubmitted 11 months ago

    I decided to watch a tutorial before starting this challenge to make sure I'm heading in the right direction with my coding and choices. I still faced many challenges.

    The tutorial was by Kevin Powell after seeing a comment by @MattPahuta. Thanks Matt he's very insightful.

    I wasn't sure how to get my footer to align to the bottom of the page without un-centering the rest of the content. In previous challenges I was able to sit the footer outside of the body which did the trick. It wouldn't budge from the other content here.

    product preview (grid/flexbox)

    1
    Aphelion Web Development•120
    @Aphelion-imPosted 11 months ago

    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

    1
  • Aphelion Web Development•120
    @Aphelion-imPosted 11 months ago

    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.

    0
  • eldmar•160
    @eldmarSubmitted 11 months ago
    • I tried to make an interactive without JS;
    • I also tried using CSS nesting (may not work in some browsers);
    • I didn't find a solution how to animate hidden block appearance;

    Feedback is very welcome!

    FAQ accordion using HTML and CSS only

    1
    Aphelion Web Development•120
    @Aphelion-imPosted 11 months ago

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

    0
  • Aphelion Web Development•120
    @Aphelion-imSubmitted 11 months ago

    The result is quite good on my desktop pc.

    However, on my mobile and in Chrome dev tools/Firefox dev tools (On mobile view), a part of the top of the site is seemingly cut off.

    I watched this Youtube video with Kevin Powell explaining the vh unit, and some other units to solve the problem, but that didn't help.

    https://www.youtube.com/watch?v=veEqYQlfNx8 (Kevin Powell, The problems with viewport units)

    On ipad, the product card, seems to vertically stretched, so the text on the right gets too much white space.

    Product Preview Card Component

    2
    Aphelion Web Development•120
    @Aphelion-imPosted 11 months ago

    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.

    0
  • sheikhhaseeb559•80
    @sheikhhaseeb559Submitted 11 months ago

    as first i use to adjust text using margin but in this design how to set by position relative property

    vscode

    2
    Aphelion Web Development•120
    @Aphelion-imPosted 11 months ago

    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:

    0