Skip to content
OverviewSolutions
12
Comments
15
Riyana Gueco
@rngueco

All comments

  • Riyana Gueco•495
    @rnguecoPosted over 3 years ago

    Hi Ivan!

    Great job on this! 👍

    There are a few minor details with regards to semantic HTML: heading level elements (h1, h2, h3, etc.) are usually used for topics and subtopics, so it does not make sense to use it for the statistics for this particular content since 10k+ or 314 or 1M does not really denote a topic or a subtopic. Also, it would be better if you put your statistics in a list, it makes semantic sense to do so.

    But overall this was a fantastic first try! Cheers and happy coding! 🎉

    Marked as helpful
    1
  • Riyana Gueco•495
    @rnguecoPosted over 3 years ago

    Hey Łukasz!

    Great job on this. 👍

    I have only one thing to point out: when viewing the site on mobile landscape, the image starts overflowing towards the top and gets cut off. This is because you've set your body's height to 100vh which means it will not expand to accommodate overflowing content. What you want instead is a min-height of 100vh.

    Cheers and happy coding! 🎉

    Marked as helpful
    1
  • inan brunelli•120
    @inanbruneliSubmitted over 3 years ago

    This was pretty easy to develop, I did not use grid or flexbox, even though I know how to use it. I just want to track my progress and learn with FrontEndMentor. If you have something to say about this project, please, feel free to say it, I would love to hear your feedback 🚀🚀

    Profile card with only HTML and CSS

    2
    Riyana Gueco•495
    @rnguecoPosted over 3 years ago

    Hey Inan! This was an interesting approach!

    I still think using Flexbox or Grid is better for this project, so you don't have to explicitly set a width and height for your container. Viewing this on a big screen (> 1440px), all the whitespace surrounding your content card starts to be visible. On a medium screen (~ 600px), it would be nice if all the content fits within the screen and there's no extra space to the right or to the left.

    Other than that, the details inside all-footer would be better off inside a list element like <ul> or <ol> just to be a bit more semantic with your HTML.

    Cheers and happy coding!

    Marked as helpful
    1
  • Riyana Gueco•495
    @rnguecoPosted over 3 years ago

    Hi Danilo!

    This looks great. Good job! 👍

    In the future, you might want to add an alt attribute to your img elements. The alt attribute provides detail about the contents of the img element so that screen readers will be able to describe the image. But in this project, the images used do not convey any meaning nor does it add information to the content, so an empty alt attribute would be appropriate (this will make screen readers ignore the image as if it isn't part of the page).

    Cheers and happy coding! 🎉

    Marked as helpful
    1
  • Riyana Gueco•495
    @rnguecoPosted over 3 years ago

    Hey Mohamed!

    The layout looks good.

    As for the HTML, you might want to check out semantic HTML. In particular, you should instead use a list <ul> or <ol> for the statistics, instead of <dt> and <dd> which are typically used to denote a term and a definition inside a definition list <dl> element.

    Also, here's a tip for the image color overlay: you can use mix-blend-mode or background-blend-mode.

    Cheers and happy coding! 🎉

    0
  • Aman•10
    @heyitsmeamanSubmitted over 3 years ago

    This is my first try , so the code is a bit messy, would love to hear where and how i can improve.

    Basic HTML and CSS

    2
    Riyana Gueco•495
    @rnguecoPosted over 3 years ago

    Hey Aman!

    To be able to center your card element vertically and horizontally, you might want to use CSS Flexbox. This would be a better approach than hardcoding a padding/margin value to make your element appear centered on your screen, but on other screen sizes it might not be centered at all.

    Also, I noticed that you are repeating a lot of your CSS. For example, all three of your buttons have three different classes applied to each. You can instead apply one class to all buttons (let's call this class btn) and then just add all common styles to this class. Like so:

    .btn {
   /* Put all common properties here. */
}

    That way you don't have to repeat all the same properties for three different classes 🙂 This was a good first attempt!

    Marked as helpful
    1
  • Riyana Gueco•495
    @rnguecoPosted over 3 years ago

    Hey Shamizen!

    Great job on this 🙂

    Here's a tip on the hover effect for the "Learn More" buttons: add the borders before hovering (normal state), and then change only the background on hover. That way, your buttons will not appear to be growing in height when hovering over it.

    For the paragraphs, it's usually good practice to put a line-height greater than the font-size of the text. This helps with readability, especially for text-heavy content.

    Cheers and happy coding! 🎉

    Marked as helpful
    0
  • Nigel•90
    @nigel-sysSubmitted over 3 years ago

    What are more efficient ways of doing it? I feel like my CSS is so messy and barely doing the job. I had a hard time making it responsive.

    stats preview card component

    1
    Riyana Gueco•495
    @rnguecoPosted over 3 years ago

    Hey Nigel!

    To make centering of elements easier, set your container's minimum height to the height of the viewport (i.e. min-height: 100vh) so that you can use Flexbox's easy way of centering:

    container {
   min-height: 100vh;
   display: flex;

   /* This will center the children vertically and horizontally */
   justify-content: center;
   align-items: center;
}

    It's important to note that this will not work unless your container height is the full height of the viewport.

    Aside from that, you could also make your mobile design kick in at an earlier breakpoint (maybe 600px?) so that the content and image won't get squeezed in as the viewport width gets narrower.

    Good start nonetheless! Happy coding! 🎉

    Marked as helpful
    1
  • Braian Lopez•60
    @Polariz626Submitted over 3 years ago

    Hello, Braian again. these challenges are a perfect way to practice all the theory we learn from some courses on the internet. I'm very satisfy with how this turned out, but as always I had some problems making this page responsive enough :(. When I shrink the page, the three containers and the buttons behave weirdly :/. Any suggestion would be highly appreciated.

    my second challenge using HTML and CSS only.

    1
    Riyana Gueco•495
    @rnguecoPosted over 3 years ago

    Hey Braian!

    I think the reason why the containers behave weirdly when shrinking the page is because there is barely enough room for the content (for example, when my viewport is at 700px wide, the buttons start to get squeezed and it wraps into two lines instead of one).

    One solution could be to make your container wider as the screen width goes smaller for the desktop view. And if you don't want your text to wrap, you could add white-space: nowrap to that text element (this could potentially make the text overflow the container though, but use it as you see fit).

    Happy coding! 🎉

    0
  • Darwin Sánchez•380
    @darwinsanchez9018Submitted over 3 years ago

    Hi bros. This is my first attempt at this project. In the process I learned flexbox, mediaquerys, I started the desktop version, and then the mobile version. Now I understand that the mobile version should be made first. Any feedback would be greatly appreciated!

    Using CSS Flexbox and HTML

    1
    Riyana Gueco•495
    @rnguecoPosted over 3 years ago

    Hi Darwin!

    Good job on the layout 👍

    One thing to note is that usually all relevant elements should fit the width of the screen, so you might want to make your main container respond to the width of the viewport (like setting a min-width, width, or max-width) so that users don't have to scroll to the right to see the whole card.

    You can also adjust the breakpoints of your design as you see fit: for example, your mobile design may come in at an earlier point (to cover screens for smaller tablets).

    I hope that helps. Happy coding! 🎉

    Marked as helpful
    0
  • Lucas Queiroga•40
    @lucasqueiroga03Submitted over 3 years ago

    I want know how I don't know how change the color of image in css and I not find in internet how do this. So I change the color in photoshop. This is my only question, how I change the color of image in css?

    HTML and CSS

    3
    Riyana Gueco•495
    @rnguecoPosted over 3 years ago

    Hey Lucas!

    It looks like you need to work on your CSS skills a bit more. Majority of your elements are positioned absolutely, which will work against the responsiveness of the site. CSS Flexbox and CSS Grid are usually what developers use when laying out a project such as this.

    As for the image coloring, try looking into the mix-blend-mode property.

    Cheers and happy coding! 🎉

    Marked as helpful
    1
  • Riyana Gueco•495
    @rnguecoPosted over 3 years ago

    Hey Anas!

    Great job on the layout 👍

    One thing to note is that heading elements (<h1> through <h6>) are typically used to denote a topic or subtopic, so it would not make much sense to have "10k+" wrapped in a heading element. You can instead use a <span> tag on this and adjust the font size for that as needed. 🙂 You can also put your statistics in a list to make it more semantically sound!

    Happy coding! 🎉

    Marked as helpful
    1