All comments

• 

  Hari Kishan• 10

  @KishanHK

  Submitted over 2 years ago

  Can my code be more shorter or efficient.

  

  qr-code-component using HTML and CSS.

  3

  50

  

  P

  Ryan Cahela• 220

  @RyanCahela

  Posted over 2 years ago

  Hello Hari, This is a good first try.

  With most things in web development, there aren't 100% correct or 100% wrong solutions, there are some things I would have done differently.

  1. Move the CSS in the head of the HTML to the external stylesheet you created.

  2. I would remove the padding from the qr-code image and put it on the .middle-container class. that way anything inside the .middle-container will be pushed away from the edge instead of just the image.

  3. change the .middle-container class name to something more specific like "qr-card" or "qr-container" or something like that.

  4. It works for this small project but usually you want to stay away from using element selectors to target a single element on the page (the h3 and p rules). it can get confusing once you have more than one <p> or <h3> on the page. unless you want them to look exactly the same, which in some cases you might.

  like I said, these are just suggestions. There are 1000 different ways to do the same thing.

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Igu• 95

  @igor-mit

  Submitted over 3 years ago

  This is my first little project. Used flex boxes to align and order the content

  Is it ok for this to have a scrollbar? Or is it supposed not to? Also, is there another way to color the background image if not with inset box-shadow?

  If you could take a peak in to the code and tell me what could be better, I'd appreciate it!!

  

  Responsive Stats Preview card using HTML and CSS

  3

  30

  

  P

  Ryan Cahela• 220

  @RyanCahela

  Posted over 3 years ago

  I colored the image by adding a css pseudo element and positioning it absolutely over the image, then I added a HSLA background color to the pseudo element.

  A quick example.(not complete code) .hero-image { position: relative background-image: url(“path to image file”) }

  .hero-image:before { position: absolute height: 100% width: 100% background-color: hsla(“insert hsla values here”) }

  1

  This comment has received 2 repliesShow
• 

  Thomas Simonet• 50

  @thomas-simonet

  Submitted over 3 years ago

  

  Pod Request Access Landing Page

  1

  11

  

  P

  Ryan Cahela• 220

  @RyanCahela

  Posted over 3 years ago

  This is really good! I'm using it as a reference to improve my version. Thanks!

  0