Dias

Latest comments

• 

  P

  Trần Thành Danh•1,500

  @TranDanh1122Submitted 3 months ago

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

  welcom any idea or comment!! Have a nice day, thank you!

  

  Testimonials Grid

  1

  40
  

  P

  Dias•140

  @adambeckercodesPosted 3 months ago

  Great job! Here are a few suggestions to further improve your code:

  1️⃣ Responsiveness and Container Constraints

  Currently, the container element lacks min-width and max-width properties, causing it to shrink or expand infinitely based on the viewport size. This can lead to readability issues on very large or small screens. To fix this, consider adding constraints like:

  .container {
    max-width: 1200px; /* Prevents it from growing too large */
    min-width: 320px; /* Ensures content is legible on smaller screens */
    margin: 0 auto; /* Centers the container */
  }
  

  2️⃣ Use of min-height

  The min-height property for main and .container is currently set to 100%, which depends on the height of the parent container. To ensure these elements always occupy the full viewport height, use 100vh:

  main {
    min-height: 100vh; /* Fills the full viewport height */
  }
  .container {
    min-height: 100vh; /* Ensures content is vertically centered */
  }
  

  3️⃣ Page Responsiveness Currently, the page is not fully responsive. On smaller screens, the layout collapses and becomes hard to read. To fix this, you should use media queries to adjust the grid layout and font sizes for smaller devices. That way you also can adjust the grid layout for different devices.

  Keep it up!

  Marked as helpful

  1
• 

  salilphadnis•200

  @salilphadnisSubmitted 3 months ago

  What are you most proud of, and what would you do differently next time?

  I used grid this time rather than flexbox

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

  It was challenging to do the desktop design. I ended up going with more columns for the grid to do it.

  

  Responsive page using CSS grid

  1

  60
  

  P

  Dias•140

  @adambeckercodesPosted 3 months ago

  Hey there!

  Your solution is strong and demonstrates a good understanding of semantic HTML, responsive design, and CSS Grid. Great work overall! 🚀

  1
• 

  agypsynamedTunechi•70

  @agypsynamedTunechiSubmitted 3 months ago

  What are you most proud of, and what would you do differently next time?

  This was the first time I was able to host my project. Been able to see my project on live made me feel really proud :)

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

  Hosting my project on github pages was a bit confusing but I was able to get it done after watching a youTube video.

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

  I think I did well in the project overall but I'd be happy to know if there are areas I could have done things differently (in terms of best practices maybe).

  

  QR code component using HTML markup and CSS flexbox

  1

  20
  

  P

  Dias•140

  @adambeckercodesPosted 3 months ago

  Hey there! 👋

  You’ve done a fantastic job with your QR code component! I have a few suggestions for improvements to make your project even better:

  Responsive Improvements Container Margin: Instead of using a fixed margin: 50px auto; for .container, you can center the card using Flexbox on the body. This will ensure the card is centered both vertically and horizontally on all screen sizes:

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Ensures the body fills the viewport height */
    margin: 0; /* Removes default margin */
  }
  

  Code Optimization Font Import Optimization: You’re importing the Montserrat font but not using it. Remove the unused font to optimize performance. Commented Out Code: There are some commented-out styles (e.g., span, height) that don’t contribute to the project. Removing them would make the code cleaner.

  Consistent Units You’ve mixed relative px and absolute % units. For better scalability, consider using relative units like rem for font sizes and spacing.

  ---

  To prevent the container from shrinking too much on smaller screens, you can add a min-width to the .container. For example:

  .container {
    min-width: 375px;
  }
  

  If you'd like to see another example or learn more, feel free to check out my solution. I hope it helps—keep up the awesome work! 🚀

  Marked as helpful

  0
• 

  GaZtuki•200

  @GaZtukiSubmitted 3 months ago

  

  Media Queries

  1

  10
  

  P

  Dias•140

  @adambeckercodesPosted 3 months ago

  Hey there! 👋

  Great job on your solution—it looks really clean and well-structured! 😊 I have a few suggestions that might help refine it further:

  Card Image Element: The card-img div lacks an actual <img> tag. If the background image is purely decorative, it should have aria-hidden="true". Otherwise, replace it with an <img> for better semantics and accessibility.

  Price Element Layout: The price container, which has two different <span> elements, can be turned into a Flexbox container. By adding display: flex and align-items: center, you can center the text vertically for a more polished look. Also it is better to use a <div> instead of <p> for the price since it isn’t plain text but a combination of different elements (e.g., bold and line-through prices).

  Font Family for Second Price:
  It seems like the second price doesn’t have the correct font-family applied. Double-check that the correct font is inherited or explicitly applied to that element.

  Button Layout:
  For the button, you can use display: flex and align-items: center to neatly align the SVG icon and text (You will need to wrap your text in span element). Additionally, you can add a gap property to create consistent spacing between the icon and text, similar to the design.

  Let me know if you’d like further clarification on these suggestions. Keep up the great work! 🚀

  0
• 

  Ricardo Castillo•10

  @ricardoaczSubmitted 3 months ago

  What are you most proud of, and what would you do differently next time?

  I was able to create the list of nutrition properties and values by using floats.

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

  I have used floats before, but it has been a while and I was struggling to get it right.

  After a lot of trying and error, MDN pages and some YouTube videos, it worked. But I want to practice more, because they are tricky.

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

  • How to properly write media queries to cover all devices?
  • When should you use padding vs margin when moving elements?

  

  Simple HTML & CSS classes

  1

  40
  

  P

  Dias•140

  @adambeckercodesPosted 3 months ago

  Hello, @ricardoacz!

  Good job! But I see that you struggled with matching your solution with the design. To ensure your elements perfectly match the design, you can use the PerfectPixel extension for Chrome. It allows you to overlay a design image on top of your layout and fine-tune your styles for pixel-perfect alignment. This is especially useful when you’re trying to match exact sizes and spacing.

  Regarding your questions:

  To write effective media queries, it’s best to focus on the breakpoints where your design starts to look awkward, rather than targeting specific devices. Here are some commonly used breakpoints as a guideline:

  /* Extra small devices (phones) */
  @media (max-width: 575px) { ... }
  
  /* Small devices (portrait tablets) */
  @media (min-width: 576px) and (max-width: 767px) { ... }
  
  /* Medium devices (landscape tablets) */
  @media (min-width: 768px) and (max-width: 991px) { ... }
  
  /* Large devices (laptops/desktops) */
  @media (min-width: 992px) and (max-width: 1199px) { ... }
  
  /* Extra large devices (large desktops) */
  @media (min-width: 1200px) { ... }
  

  These are just examples, you can find a lot more in the internet. Adjust the styles at these points based on how your layout behaves, ensuring a smooth and responsive user experience.

  Use Padding: When you want to create space inside an element, between the element’s content and its border. For example, adding space around text inside a button or card.

  Use Margin: When you want to create space outside an element, between it and other elements. For example, spacing between two cards or separating a header from the main content. A general rule is: Padding affects the inside of an element, Margin affects the outside.

  Let me know if you have more questions—I’m happy to help! 😊

  Marked as helpful

  0
• 

  Hadole Raju•40

  @rajureddyhadoleSubmitted 4 months ago

  

  social links profile using sass

  1

  40
  

  P

  Dias•140

  @adambeckercodesPosted 4 months ago

  Hey there! 👋

  Great job on your project—it looks fantastic! 😊 I noticed a couple of areas where you could make some improvements:

  1️⃣ Responsiveness: The page currently isn’t responsive, so it doesn’t adapt well to larger screen sizes. I’d recommend adding breakpoints for desktop and tablet layouts.

  This will help ensure the design looks great across all devices!

  2️⃣ Attribution Element: The attribution element is affecting the layout of other elements in the tree. You could use position: absolute to place it at the bottom of the viewport without interfering with other elements. This way your screen should match with the solution.

  You can check my solution if you want to know more!

  These small tweaks can make a big difference! Keep up the awesome work—looking forward to seeing the updated version! 🚀

  0