All comments

• 

  Ryan Hardy• 110

  @ryyHardy

  Submitted 6 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

  50

  

  Aphelion Web Development• 120

  @Aphelion-im

  Posted 6 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

  This comment has received 2 repliesShow
• 

  Svetlana Savelenok• 150

  @ParaPaca

  Submitted 9 months ago

  What do you think are the best practices for this project? What am I supposed to do to improve my code?

  Thanks in advance for your feedback

  

  Product preview card solution - SCSS

  3

  80

  

  Aphelion Web Development• 120

  @Aphelion-im

  Posted 9 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

  This comment has received 1 replyShow
• 

  P

  Isabella Lizarde• 60

  @soybella

  Submitted 9 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

  81

  

  Aphelion Web Development• 120

  @Aphelion-im

  Posted 9 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

  This comment has received 1 replyShow
• 

  Chris• 100

  @PedroTheBrave

  Submitted 9 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

  50

  

  Aphelion Web Development• 120

  @Aphelion-im

  Posted 9 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

  This comment has received 1 replyShow
• 

  Fab29012• 60

  @Fab29012

  Submitted 9 months ago

  Please don't hesitate to leave a comment on how I may improve !

  

  Product review card

  2

  40

  

  Aphelion Web Development• 120

  @Aphelion-im

  Posted 9 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
• 

  P

  eldmar• 160

  @eldmar

  Submitted 9 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

  30

  

  Aphelion Web Development• 120

  @Aphelion-im

  Posted 9 months ago

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

  • Responsive FAQ Accordion with smooth opening content panels

  0
• 

  Aphelion Web Development• 120

  @Aphelion-im

  Submitted 10 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

  60

  

  Aphelion Web Development• 120

  @Aphelion-im

  Posted 10 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

  This comment has received 1 replyShow
• 

  sheikhhaseeb559• 80

  @sheikhhaseeb559

  Submitted 10 months ago

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

  

  vscode

  2

  50

  

  Aphelion Web Development• 120

  @Aphelion-im

  Posted 10 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:

  • Codepen Position relative/absolute Demo

  0

  This comment has received 2 repliesShow