Skip to content
OverviewSolutions
4
Comments
5
P
Kellen James
@Kellenkjames

All comments

  • Kellen James•120
    @KellenkjamesPosted 12 days ago

    Overall, I think the semantic markup and organization of the code is great. However, I think a little bit more time can be spent on fixing a few areas to get the solution looking closer to the design.

    One example would be your main container. I notice you're not setting a max-width on this container which should be 736px according to the design.

    Because there is no max-width set, your image is much growing larger than it should since it's basing it's dimensions from the parent container.

    Example | Line 35 in _base.scss

    main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.5rem;
  width: 50%;
  margin: 5rem auto;
  padding: 2rem;
  background-color: $white;
  @include border();
  max-width: 736px /* Adjust to REM value */
  ...

    Making this adjustment and a few others will get your solution looking even more clean and professional. Hope this feedback helps and keep up the great work!

    0
  • Kellen James•120
    @KellenkjamesPosted 17 days ago

    Overall, the solution looks great and pixel perfect against the design. However, all of the CSS styles are embedded within index.html.

    This is not recommended as it would be very difficult to maintain this code in a real application. Always stive to keep HTML separate from CSS.

    You can improve the codebase significantly by creating a new styles.css sheet and moving the styles from index.html to this stylesheet.

    Other than that, excellent job overall.

    Marked as helpful
    0
  • Kiara523•100
    @Kiara523Submitted 20 days ago
    What are you most proud of, and what would you do differently next time?

    I've taken the time to adjust units and media queries trying to keep the code as clean and organised as I could. Next time I will organise my workflow better before I start coding

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

    Prevent the SVG image to overflow was challenging but made me grow. With each challenge I learn something new.

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

    I'd like feedback on the CSS in general.

    Responsive blog card preview CSS flexbox and HTML

    1
    Kellen James•120
    @KellenkjamesPosted 20 days ago

    Overall, your CSS is well-structured and uses media queries effectively to adapt the layout to different screen sizes. However, there's an opportunity to improve responsiveness by using more flexible units for width and height definitions.

    Specifically, using fixed pixel values (px) for elements like h1 and .card can limit their responsiveness across various screen sizes. This might require additional adjustments in media queries to maintain a good layout.

    Here are some suggestions for improvement:

    1. Fixed Width and Height on h1 (lines 39-40):

    h1 {
  display: inline-block;
  background-color: var(--yellow);
  width: 85px; /* Fixed width */
  height: 30px; /* Fixed height */
  border-radius: 4px;
  font-size: 0.875rem;
  text-align: center;
  padding: 0.286em 0.857em;
}

    In this case, there is no need to set a fixed width or height on an h1 since the content itself determines the width and height. Consider using relative units like rem or em for font sizes to scale proportionally to different viewports.

    2. Fixed Width and Height on .card (lines 76-84):

    .card {
  width: 384px; /* Fixed width */
  height: 522px; /* Fixed height */
  background-color: var(--white);
  border: 1px solid var(--black);
  border-radius: 20px;
  box-shadow: 8px 8px var(--black);
  padding: 1.5em;
}

    Setting a fixed height for the image can lead to distortion on different screen sizes. It's strongly recommended to avoid setting fixed heights for images. Instead, use max-width: 100% and height: auto to allow the image to scale responsively while maintaining its aspect ratio.

    By avoiding fixed width and height declarations and using more flexible layout techniques, you can create more responsive and adaptable designs that work seamlessly across a wide range of devices and screen sizes (with writing less code).

    Here's a good article on why CSS units matter for responsive design: https://pieces.app/blog/css-units-responsive-website-designs

    Hope this feedback helps and keep up the great work!

    Marked as helpful
    0
  • Sergio Eduardo Castro Ceballos•300
    @SergioCasCebSubmitted 24 days ago
    What are you most proud of, and what would you do differently next time?

    As a very simple challenge there is not much to talk about, but it was a nice reminder how fluid typography can spare you the work of adding media queries for responsiveness.

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

    None.

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

    Honestly I don't want any help in specific, but I am more than happy to improve my approach if there is any feedback. :D

    Responsive Blog Card with Scss and fluid typography

    1
    Kellen James•120
    @KellenkjamesPosted 22 days ago

    Hi @SergioCasCeb,

    I think you did a great job with this project, especially setting up a scalable and modular codebase.

    The code demonstrates a good start in using BEM principles. However, there's room for improvement in consistently applying the methodology.

    For example, the class .card-tags could be renamed to .blog-card__content__tags to better reflect its hierarchical relationship within the .blog-card block. This would improve code readability and maintainability.

    Consider applying similar adjustments to other classes like .card-date, .card-title, etc., to ensure a consistent BEM structure throughout the component.

    Here's an article which goes into more detail on best practices for BEM: https://getbem.com/introduction/

    Hope this feedback helps and keep up the great work!

    Marked as helpful
    0
  • Kellen James•120
    @KellenkjamesPosted 26 days ago

    Hi @ZeroOne00001,

    You've done a excellent job of matching the design and using SASS to organize your code. To make your component even more adaptable to different screen sizes and zoom levels, consider using responsive units like rem or em instead of static pixel values.

    For instance, converting the width of the .imageCard1 class from 320px to 20rem will ensure it scales appropriately on various devices:

    /* Before: */
.imageCard1 {
  width: 320px;
}

/* After: */
.imageCard1 {
  width: 20rem; /* Assuming a base font size of 16px */
}

    I encourage you to explore using responsive units throughout your entire codebase. This will elevate your component's user experience and make it more accessible to a wider range of users.

    A key advantage of using responsive units is that they adapt to different screen sizes and zoom levels, ensuring your component looks great on any device. Pixel values, on the other hand, can become distorted or too small on larger screens or when users zoom in.

    Keep up the great work! If you have any questions or need further assistance, feel free to ask.

    Marked as helpful
    0