Skip to content
OverviewSolutions
3
Comments
4
Roberto Rojas
@roberto-rojas-dev

All comments

  • Roberto Rojas•90
    @roberto-rojas-devPosted 3 months ago

    Hi Fatih, I hope you're doing well.

    Your solution looks great.

    I have a few tips that might help you improve it.

    Use semantic HTML tags

    The text should be placed in meaningful elements like paragraph tags <p> or heading tags (<h1> - <h6>). Text alone inside a <span> or <div> is not recommended, since browser won't understand the purpose of that text. You could do this for example:<p class="profile-location">London, United Kingdom</p>

    Use rem unit for font sizes

    You should avoid using px for setting font sizes, you should use rem instead, this way, when the user increases the zoom setting of the website, the fonts will scale accordingly. This video can give you some examples of when to use each unit: Are you using the right CSS units?

    Avoid using height

    Setting a height on an element can cause some issues, on smaller screens if the content inside that element shrinks, it won't be able to extend since you set a fixed value for the height, so the content will overflow. If you need to set a height consider using min-height instead.

    Try using relative units for widths

    Relative units like percentages are usually better for width values because it will prevent overflow issues on smaller screens.

    For example, in the .profile element you could set this:

    .profile{
  width: 90%;
  max-width: 320px;
}

    This way you are telling .profile to ideally be 90% of its parent width, which works well for smaller screens and it's allowed to expand until it reaches the maximum with of 320px on larger screens.

    You can also use the min() function as a shorthand to set both values in a single line:

    .profile{
  width: min(90%, 320px)
}

    I hope these tips help you improve your code. You’re doing a great.

    Wishing you all the best with your coding journey ✨

    Marked as helpful
    0
  • Roberto Rojas•90
    @roberto-rojas-devPosted 3 months ago

    Hi Yani, I hope you're doing well.

    Your solution looks great!

    I have a few tips that might help you improve it even further.

    • You should avoid using px for setting font sizes, you should use rem instead, this way, when the user increases the zoom setting of the website, the fonts will scale accordingly. This video can give you some examples of when to use each unit: Are you using the right CSS units?
    • I liked that you're using clamp() for font sizes, however, they are not working in your project because clamp requires the second value to be a relative unit like a % or vw, you could try something like font-size: clamp(1rem, 4vw, 1.25rem) (you can change the values as you need).
    • A nice trick to set the card width is to use the min() function, for example: width: min(85%, 24rem), min() will choose the smaller value between the two, so on larger screens, the card will be 24 rem while on smaller screens it will be 85% of it's container's width, allowing the card to shrink while keeping a nice 'margin' on both sides.
    • In 'HTML & CSS foundations' title the <a> must be inside the <h1> with the text inside the <a> tag.
    • One important issue I noticed in the HTML code is an incorrect use of headings, you shouldn't place a <h3> before a <h1>, for the case of the text 'Published 21 Dec 2023' you could use a <p> tag. It’s important to think of heading levels like titles and subtitles, where a subtitle should follow a title, not the opposite. This resource dives deeper into proper heading usage: The most common HTML mistake

    I hope these tips help you enhance your project. You’re doing a good job.

    Wishing you all the best with your coding journey ✨

    Marked as helpful
    0
  • Juan Pablo Cristancho•40
    @JuanCris09Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Fue un reto sencillo pero muy conmovedor porque creí que iba tomar mucho tiempo y no fue así, entonces apliqué mis conocimientos de manera efectiva

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

    En este desafío no tuve ningún problema o dificultad

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

    Pues en este proyecto es sencillo entonces no creo que necesite más modificaciones o algún arreglo

    media querys, margin, variable

    2
    Roberto Rojas•90
    @roberto-rojas-devPosted 3 months ago

    By the way, here are some resources you may find useful for learning about all the cool things Flexbox can do."

    Or, if you prefer content in Spanish, you could take a look at these:

    Marked as helpful
    1
  • Juan Pablo Cristancho•40
    @JuanCris09Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Fue un reto sencillo pero muy conmovedor porque creí que iba tomar mucho tiempo y no fue así, entonces apliqué mis conocimientos de manera efectiva

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

    En este desafío no tuve ningún problema o dificultad

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

    Pues en este proyecto es sencillo entonces no creo que necesite más modificaciones o algún arreglo

    media querys, margin, variable

    2
    Roberto Rojas•90
    @roberto-rojas-devPosted 3 months ago

    Hi Juan Pablo, I hope you’re well.

    I noticed a few aspects of your solution that could be improved:

    A Better Way of Centering Elements

    In your solution, you centered the .card element by setting specific margin values:

    main {
    margin: 14.375rem 35rem 14.375rem 35rem;
}

    This approach works well for that specific screen size, but if you reduce the width of the browser window, you’ll notice that the layout overflows because the rem values are larger than the screen width.

    A much simpler way to center an element is by using Flexbox on the parent element that contains your card. In your case, that would be the body element:

    body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
}

    The display: flex; property makes the body a flex container, while justify-content: center; and align-items: center; center the child elements horizontally and vertically. The min-height: 100svh; property ensures that the body takes up the full height of the screen.

    This way, you don’t need to estimate specific sizes to center something, CSS handles it automatically. (To make this work, don’t forget to remove the margins you set in the main element.)

    Avoid Setting Fixed Heights

    Setting a fixed height (as you did with the card) can cause issues. On smaller screens, the text will wrap to fit the available space, but since you set a fixed height for the card, it won’t be able to grow vertically, causing your text to overflow.

    The best approach in these cases is to avoid setting heights altogether. Let the content inside your card determine the height it needs. If you need to increase the height to match a design, you can adjust the padding or margin of the elements. However, if you really need to set a height, consider using min-height instead, so the card can expand if necessary.

    That’s all for now. Keep up the great work, you’re doing well!

    I hope you have an amazing week 💜

    Marked as helpful
    1