Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions12Comments15

All comments

  • Riyana Gueco• 495

    @rngueco

    Posted

    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

    @rngueco

    Posted

    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

    @inanbruneli

    Submitted

    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

    @rngueco

    Posted

    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

    @rngueco

    Posted

    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

    @rngueco

    Posted

    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

    @heyitsmeaman

    Submitted

    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

    @rngueco

    Posted

    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

    @rngueco

    Posted

    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-sys

    Submitted

    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

    @rngueco

    Posted

    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

    @Polariz626

    Submitted

    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

    @rngueco

    Posted

    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

    @darwinsanchez9018

    Submitted

    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

    @rngueco

    Posted

    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

    @lucasqueiroga03

    Submitted

    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

    @rngueco

    Posted

    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

    @rngueco

    Posted

    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
  • Riyana Gueco• 495

    @rngueco

    Posted

    Hi Ricardo!

    This looks good!

    You could make your HTML more semantic by using semantic elements. For example, it does not really make sense to have a heading of "10k+" since it does not denote a topic so it typically should not be wrapped in a heading element (<h2>). You could also put your stats in a list since it makes semantic sense to have them in a list 🙂

    Good job on the layout! 👍

    Happy coding! 🎉

    Marked as helpful

    0
  • Franziska Wich• 210

    @franziskawich

    Submitted

    I solved this challenge without JS.

    I struggled a lot with positioning the images (but I learned a lot too (: ) and I am not so happy that the image for the desktop is now an background-image (otherwise I had problems with the hidden overflow). It does not feel consistent. I would love to know how I could improve this.

    While researching I stumbled over something called ARIA, but this concept seems to be outdated? Do you have a recommendation for an up-to-date resource to learn more about accessibility? (I saw a few articles on the MDN-site, but they linked to a dead website about ARIA too...)

    I had a weird issue with my image-box (my image) and content-box (the faq) and it still confuses me. I moved my content a bit upwards (margin-top: -X) and then it was obviously overlapped by my image-box because I could not click on my first question anymore. I thought a z-index would help me out but it actually did not. There must be something else going on or maybe I am just too blind and I do not see the real issue which causes this behavior. ._. So I was sort of forced to set a hight on my image-box. That's probably not too bad but I thought I could solve it without doing that.

    I would appreciate any feedback or suggestions for improvement.

    Responsive FAQ accordion card (no JS)

    2

    Riyana Gueco• 495

    @rngueco

    Posted

    Hi Franziska! 👋

    Great job on this! It's definitely one of the harder newbie challenges out there because of the positioning, but you did well!

    As for ARIA, some developers still definitely use ARIA. Here is WebAIM's guidelines for ARIA use. WebAIM's website in general helped me lots regarding accessibility. There's also the A11Y Project if you prefer that.

    As for your HTML, you could make it more semantic by putting the FAQs in a more semantic structure, like a list <ul> or <ol> 🙂 Typically all webpages should have a main heading wrapped in <h1> that denotes the main topic of the page, so it would make sense to have one in this project too. A good reminder is to not skip heading levels (i.e. going from <h1> straight to <h3> without using <h2> is not good practice).

    Marked as helpful

    0
  • Nick Saveleski• 60

    @FreelanceNick

    Submitted

    I updated the project with a better understanding of partials and Sass. Any suggestions for improvement I'll take :) Thank you!!

    HTML with Sass

    1

    Riyana Gueco• 495

    @rngueco

    Posted

    Hey Nick!

    This looks great! Good job 👍

    One thing to consider though is the desktop view breakpoint, which comes in at about 1100px if I'm correct. You could adjust this to be lower, probably around 900px? So that bigger devices like the iPad will be able to display the desktop view at least when it's in landscape mode.

    Cheers! Happy coding! 🎉

    Marked as helpful

    0