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

All Comments

  • Zdravkoβ€’ 290

    @Zdravko93

    Submitted

    Edited version of the project, according to users' suggestions. Special attention is being given to accesibility, different aproach for implementing background images, aswell as making sure the code is cleaner. And again, special thanks to all that helped this project come neater and closer to the best practices aproach(especially to users Vanza Setia and ApplePieGiraffe)! I learned a lot from your feedbacks, and also many things are now much more clearer and make more sense to me! I really feel like I am making progress!

    P
    ApplePieGiraffeβ€’ 29,125

    @ApplePieGiraffe

    Posted

    Hello, Zdravko! πŸ‘‹

    Good job on this challenge! πŸ‘

    A couple of things I suggest are,

    • Setting the alt text for the star icons to be an empty string so that they will be ignored by screen readers. That’s because those elements aren't so necessary or important to the content of the page and as a result doesn’t need to be read by screen readers (which can be annoying for users if screen readers are reading out the alt text for every single star). πŸ˜…
    • Adding overflow-x: hidden to the body to prevent any unwanted horizontal scrolling on the page.
    • I think adding the decorative background images with CSS background images to the body of the page will do (there's no need to add extra divs for those images). You can simply add both of them to the body of the page. See this helpful article for how to use multiple CSS background images:

    Hope you find these suggestions helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    3

  • P
    ApplePieGiraffeβ€’ 29,125

    @ApplePieGiraffe

    Posted

    Hello, Kellen Ruyle! πŸ‘‹

    Great work on this challenge! πŸ‘

    One or two small suggestions I have are,

    • Adding cursor: pointer to some of the elements inside the modal (such as the radio buttons and the close button) to let users know those elements are clickable.
    • Triggering the modal when one of the "Select reward" buttons are clicked (not just the "Back this project" button) as I believe that's the intended functionality of the site.
    • Perhaps looking into using a preprocessor such as Sass for your next project. It'll add superpowers to your CSS (through features like nesting and functions) which will help reduce the number of styles you have and make writing and organizing CSS a little easier (especially for larger projects such as this one).

    Hope you find these suggestions helpful. 😊

    Keep coding (and happy coding, too)! 😁

    2

  • Lucas πŸ‘Ύβ€’ 104,620

    @correlucas

    Submitted

    πŸ‘Ύ Hello, Frontend Mentor coding community. This is my solution for the Clipboard Landing Page challenge.

    A quick challenge with some customization.

    I added some custom features:

    • πŸ‘¨β€πŸ”¬ Custom colored footer and scroll bar**
    • πŸ‘» Easter Egg
    • 🎨 Intro animations

    🍚Follow me in my journey to finish all HTML/CSS only challenges (Only 5 missing)! Gotta Catch ’Em All

    Ill be happy to hear any feedback and advice!

    P
    ApplePieGiraffeβ€’ 29,125

    @ApplePieGiraffe

    Posted

    Hi, Lucas πŸ‘Ύ! πŸ‘‹

    Nice to see you complete another challenge! πŸ˜€ Fantastic work on this challenge! πŸ™Œ

    You've also been doing an amazing job giving feedback to the community! Keep it up! 🀩

    After taking a look at your solution, here are a few things I'd like to suggest,

    • Most of the content of the page should be contained within the main element (with the exception of the header and footer elements). All of the section elements that you have outside of the main element can be moved to be inside it.
    • There is no need to use an article element within the "Keep track of your snippets" section because that is not a self-contained element identified by a heading. A simple div should be fine inside there. (The same goes for other sections of the site similar to this.)
    • The items inside the "Keep track of your snippets" can be li elements contained within a ul (because those are a list of features).
    • I would suggest perhaps using flexbox to center things more often than using auto margin. I find that working that way often to be easier and it allows you to save margin for adding specific amounts of space around things. (That is, unless you are working with large containers that have lots of elements inside them. Using auto margin to center those containers works rather nicely.)
    • Setting the alt text for the icons in the "Supercharge your workflow" section to be an empty string so that it will be ignored by screen readers. That’s because those elements aren't necessary or important to the content of the page and as a result doesn’t need to be read by screen readers. This will make it easier for user who use those tools to navigate your page.
    • Adding some more descriptive alt text to the logos near the bottom of the page (just something simple like "Hewlett Packard logo" instead of just "hp". That’s because alt text is read by screen readers to describe images to users, so it’s important to write alt text that makes sense and will give users a good sense of the content and purpose of an image.
    • Turning the social media icons in the footer of the page into links by wrapping each of them in a link tag.

    If you have any questions, let me know! πŸ™‚

    Hope you find this helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    3

  • Lucas πŸ‘Ύβ€’ 104,620

    @correlucas

    Submitted

    πŸ‘Ύ Hello, Frontend Mentor coding community. This is my solution for the 3 Columns Card Component.

    Feel free to leave any feedback and help me improve my solution or make the code clean!

    • πŸ‘Ύ I added a Custom hover effect on card w/ the Vehicle Types photo on background.

    I'll be happy to hear any feedback and advice!

    P
    ApplePieGiraffeβ€’ 29,125

    @ApplePieGiraffe

    Posted

    Hi there, Lucas! πŸ‘‹

    Amazing work on this challenge! πŸ‘ The extra touches you added to your solution look great! 🀩

    Small tipβ€”it would be worth using only one h1 tag per page. This is a good practice since there should be only one most important heading on a page. You can use less-important headings tags (such as h2 and h3) for the the headings in this challenge since there are multiple of them of the same level.

    Hope that helps. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    1

  • Julio Cinquinaβ€’ 250

    @JulioCinquina

    Submitted

    What tag should I use for the card title to give it the best HTML semantics? I used <h1> for the title of the card, since it is the only <h1> in the page. However, this is not ideal if I were to reuse the card component in a page with more content. I'm also not sure if a heading tag is even the best option for a card title.

    I used "max-width: min(80%, 300px)" to make the card width match the design, as well as to prevent it from going edge to edge on small screens, but I'm using a "magic number" here. Is there a better approach to this?

    Any other comments are more than welcome. Thank you!

    P
    ApplePieGiraffeβ€’ 29,125

    @ApplePieGiraffe

    Posted

    Hey, Julio Cinquina! πŸ‘‹

    Congratulations on completing your first Frontend Mentor challenge! πŸŽ‰ Great work on this challenge! πŸ‘ Your solution looks great! πŸ™Œ

    Since this is an isolated component, using an h1 tag for the heading might be fine. In an actual website, though, you're right in that you'd probably want to use a different heading tag for that element (such as an h2 or h3). I'd still keep it as a heading element though, since it is a heading for the card.

    Choosing to add a max-width to the card component was a good choice. You probably don't need to use the min function, however. A simple em or rem value should work (e.g., max-width: 30rem).

    Hope you find these suggestions helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    2

  • P
    Grant Ramsayβ€’ 280

    @seapagan

    Submitted

    This one took too long and most of it was on getting the images to work! I think the end result looks ok, but I'm not too happy with the CSS, is there a better way to do this?

    I also tried to use more semantic HTML this time, any advice on how to improve more?

    All comments welcome πŸ˜„

    P
    ApplePieGiraffeβ€’ 29,125

    @ApplePieGiraffe

    Posted

    Hey, Grant Ramsay! πŸ‘‹

    Great job on this challenge! πŸ‘ Your solution looks good and is responsive! πŸ™Œ

    Your HTML looks pretty good! For the accordion elements, you can use the details and summary elements, which can be used to create fully functional and fairly accessible accordions right out of the box! They make creating accordions a lot easier and might be useful for your next project. If you'd like to learn more about how to use them, check out this article from MDN.

    As for the images in this challenge, I placed the "background" image on the card itself (so that it wouldn't overflow over the edge of the card) and added the floating cube and the main illustration with img tags (so that I could position them in a way that they would overflow the edge of the card, which is desired). That worked out fairly well for me. πŸ™‚ If you'd like to check out my solution for any ideas, you can do so here.

    Hope you find this helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    2

  • P
    ApplePieGiraffeβ€’ 29,125

    @ApplePieGiraffe

    Posted

    Hey there, Veljko Ilic! πŸ‘‹

    Great job on this challenge! πŸ‘ Your solution looks good and is responsive! πŸ™Œ

    A couple of suggestions I have are,

    • Turning the navigation links in the header and footer of the page into actual links by wrapping each of them in a link tag.
    • Turning the article cards in the "Latest Articles" section into links as well since they seem as if they would take users to their respective article when clicked.
    • Setting the alt text for the icons in the "Why choose Easybank?" section to be an empty string so that they will be ignored by screen readers. That’s because those elements aren't really necessary or important to the content of the page and as a result probably don't need to be read by screen readers.
    • Adding some more descriptive alt text the images in the cards in the "Latest Articles" section (unless you'd prefer to hide those from screen readers, as well, which should be okay). That’s because alt text is read by screen readers to describe images to users, so it’s important to write alt text that makes sense and will give users a good sense of the content and purpose of an image. Currently, that alt text is exactly the same as the titles of each of the cards, which might not be the most helpful! πŸ˜…

    Hope you find this helpful. 😊

    Keep coding (and happy coding, too)! 😁

    1

  • Simon Hernandezβ€’ 615

    @simonhernandez

    Submitted

    Hi Guys!

    It's been a while since I last submitted a solution. I am very happy to be back!

    This time around I decided to put into practice my React skills to bring to life this simple and beautiful design. Used Semantic HTML tags, SCSS for styling, and AOS library for animations.

    Hope you guys like it! I also would really appreciate any feedback on my code or on the overall project.

    Wish you guys an awesome week and fun coding!

    P
    ApplePieGiraffeβ€’ 29,125

    @ApplePieGiraffe

    Posted

    Greetings, Simon Hernandez! πŸ‘‹

    Incredible work on this challenge! πŸ™Œ It's great to see you back with another solution! πŸ‘ I really like the animations you added to your solution! πŸ˜€

    A small suggestion I have is to perhaps set the alt text for the icons in the "Why choose Easybank?" section to be an empty string so that they will be ignored by screen readers. That’s because those elements aren't really necessary or important to the content of the page and as a result probably don't need to be read by screen readers. πŸ˜‰

    It would also be good to add some focus styles to some of the interactive elements on the page that do not currently have them (such as the "Request invite" buttons).

    And it would be worth taking a look at the responsive issue that @veljkoilic mentioned in the hero section of the site! πŸ™‚

    Hope you find this helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    2

  • P
    ApplePieGiraffeβ€’ 29,125

    @ApplePieGiraffe

    Posted

    Hi there, Michael Tze! πŸ‘‹

    Great job on this challenge! πŸ‘

    A few things I'd like to suggest are,

    • Making sure that all of the content of your page is contained within the header, main, or footer elements (there shouldn't really be content outside those elements).
    • Making sure to add a heading element inside every section tag that you use (see your solution report). If there is no visible heading in the design, you might need to add one anyway, but hide it visually with CSS, or choose a different element altogether.
    • Adding a favicon to the site. There should be one in the starter files for this challenge that you can use.
    • Perhaps looking into using a preprocessor such as Sass. It'll add superpowers to your CSS (through features like nesting and functions) which will help reduce the number of styles you have and make writing and organizing CSS a little easier (or much easier for large projects). Might be something that helps you in the future! πŸ˜‰

    Hope you find these tips helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    2

  • Iva Beriashviliβ€’ 140

    @ivaberiashvili

    Submitted

    Hi everyone! Setting background images exactly as it was in the design was a bit challenging for me and I'd like to hear from you about your approaches to it. Keep in mind that those gradient circles are getting around 2/3 in size on mobile and keeping the exact distance from the card. Happy coding :)

    P
    ApplePieGiraffeβ€’ 29,125

    @ApplePieGiraffe

    Posted

    Hi, Iva Beriashvili! πŸ‘‹

    Good work on this challenge! πŸ‘

    I'd like to suggest using more semantic HTML elements in your markup, which is important for accessibility and SEO-related reasons. For instance, the card could be an article element, the name inside it could be a heading element, and the list of stats at the bottom of the card could be a ul element. If you’d like to learn more about how to write semantic HTML and why it matters, check out this short, helpful course.

    As for the background images in this challenge, they can be tricky to place! I found that using a combination of viewport units and percentages worked well to keep the images more or less in their position as the screen resizes. If you're interested in checking it out for any ideas, you can do so here. πŸ˜‰

    Hope you find this helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    1

  • Joelβ€’ 540

    @JoelLH

    Submitted

    Hi, this is my solution for the Huddle landing page challenge. I used grid for the whole layout and margins for the details. I find its hard for the site to look good in all of the screens widths, so if u have any suggestions, pls let me know. Thanks!

    P
    ApplePieGiraffeβ€’ 29,125

    @ApplePieGiraffe

    Posted

    Hey, Joel! πŸ‘‹

    Good work on this challenge! πŸ‘ Your solution looks great and is responsive! πŸ‘

    One or two suggestions I have are,

    • Turning the social media links in at the bottom of the page into actual links by wrapping each of them in a link tag.
    • Using background-size: cover for the background image in this challenge so that it does not appear to be squeezed or stretched when the size of the screen changes.

    It can be challenging to make designs look good for all screen sizes! What you have here is good, though. I think you can allow the illustration to shrink in a size a bit more in the desktop layout so that you can switch to the mobile layout a bit later. In the mobile layout, you might be able to increase the max-width of the content just so that it takes up a bit more space when the layout first changes (but not too much)! πŸ˜‰

    Hope this helps. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    2

  • Jason Greenwaldβ€’ 200

    @jaycgreenwald

    Submitted

    This was mostly a review of past "card component" projects.

    • How would you suggest I handle the widths for this project (compared to what I did)? Considering they were card components, I assumed it was fine to use "static" widths. Your thoughts? As always, let me know if there's something else I missed. Thank you in advance for your feedback. Cheers!
    P
    ApplePieGiraffeβ€’ 29,125

    @ApplePieGiraffe

    Posted

    Hello, Jason Greenwald! πŸ‘‹

    Nice work on this challenge! πŸ™Œ Your solution looks great and is responsive! πŸ‘

    A couple of things I'd like to suggest are,

    • Using more semantic HTML elements in your markup, which is important for accessibility and SEO-related reasons. For instance, the description of the product should be a p element and the "Add to cart" element should be a button. If you’d like to learn more about how to write semantic HTML and why it matters, check out this short, helpful course. πŸ˜‰
    • As for setting widths for components such as this, I would set the width of the card component to 100% and then adding a max-width to it to prevent it from becoming too wide when there's extra space around it. This is often better than setting the width of the element to a fixed value or percentage because it'll ensure that the element only takes up as much space as it should be allowed but also shrinks accordingly when the space around it shrinks.

    Hope this helps. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    3

  • P
    ApplePieGiraffeβ€’ 29,125

    @ApplePieGiraffe

    Posted

    Hey there, harshj11! πŸ‘‹

    Great job on this challenge! πŸ‘ Your solution looks good and responds nicely! πŸ™Œ

    A couple of suggestions I have are,

    • Setting the alt text for the icons in the "Advanced Statistics" section of the page to be an empty string so that it will be ignored by screen readers. That’s because those elements aren't necessary or important to the content of the page and as a result don't need to be read by screen readers. That will help clear up some errors on your solution report.
    • Adding a max-width to the main wrapper or container element that holds the content of the page to prevent the design from stretching out to be too wide on extra-large desktop screens.
    • Turning the navigation links in the header and footer of the page into actual links by wrapping each of those items in a link tag. The social media icons in the footer page should be links, as well.
    • Making sure to add a heading element inside every section tag that you use (see your solution report). If there is no visible heading in the design, you might need to add one anyway, but hide it visually with CSS, or choose a different element altogether. πŸ˜‰

    Hope you find these tips helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    1

  • Harsh Patelβ€’ 80

    @patelharsh9797

    Submitted

    This was a bit compared to first one for me. I used template from my first challenge and edit that from there. Still setting right height and width is a bit hard at the beginning. Any help?

    P
    ApplePieGiraffeβ€’ 29,125

    @ApplePieGiraffe

    Posted

    Hello there, Harsh Patel! πŸ‘‹

    Great work on this challenge! πŸ‘ Your solution looks good! πŸ‘

    A few suggestions I have are,

    • Avoiding using px for setting the value of font-size in your styles. Instead, use a responsive unit such as em or rem so that users will be able to change the size of the text in your site by changing the default font-size of their browser. It might also be worth setting the values for other properties such as margin or padding in those units so that your entire site will scale with the user's chosen default font-size. If you'd like to learn more about those units in CSS and how all of this works, check out this helpful video on the topic.
    • Avoiding setting specific heights for most of the elements in your page (especially wrapper or container elements). It's often better to simply allow the height of elements to be determined by their content (which is their default behavior) because then they will be just as high as they need to in order to accommodate what's inside them. You can always use margin or padding to add extra space around or inside those elements if desired. In this case, you can probably drop the 50% height on the card's content and allow that element to be sized by the elements inside it.

    Hope this helps. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    2

  • Serhiiβ€’ 205

    @Grifano

    Submitted

    Hi, and welcome to my solution πŸ‘‹

    I am still having difficulties with JS and it is difficult for me to decide what is the right solution to fix the problem. When I'm working on something and figuring out a problem, I see a different solution and try to implement it. But then I find another solution and so on ... How do you know when to stop and move forward?

    About best practices... I like to define all necessary variables and functions on top of the file. But, I see a lot of functions that are defined at bottom of the file and will execute on top. So what is a good practice for that?

    P
    ApplePieGiraffeβ€’ 29,125

    @ApplePieGiraffe

    Posted

    Hey there, Serhii! πŸ‘‹

    Good job on this challenge! πŸ‘

    It looks like you've disabled scrolling on the page. That means means some of the content of the page might not be reachable if it is not visible and cannot be scrolled to. I'd recommend reviewing your code to fix this! πŸ˜‰

    As for finding ways to do things in code (and JS), there are often many ways to accomplish the same thing, and sometimes it's not always immediately clear what way you should use. As you learn how to code, I'd advise to not worry too much about finding the best possible solution to a problem and simply focus on finding a solution that works. As you move along, you'll gain experience and start to spot good/bad/better ways to do things.

    You can define functions at the bottom of your file if they are function declarations, but there's not a huge advantage to doing this unless you want to order your code in a specific way. Sometimes, it just makes sense to write your functions and organize them at the beginning of your file, or place them together with other code that they are associated with. It's really up to you and/or those whom you are working with.

    Hope you find this helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    2

  • Akashβ€’ 80

    @Akash20x

    Submitted

    Hello Frontend Mentors! This is my 5th challenge on this platform. I tried to build this using a CSS grid.

    The only thing I struggled with was positioning form and their inside items, not sure if my approach is good enough or not.

    If anyone would like to contribute any ideas to improve my code, I appreciate it.

    P
    ApplePieGiraffeβ€’ 29,125

    @ApplePieGiraffe

    Posted

    Hey, Akash! πŸ‘‹

    Great job on this challenge! πŸ‘ I think the form looks good! πŸ™Œ

    A few things I'd like to suggest are,

    • Avoiding using px for setting the value of font-size in your styles. Instead, use a responsive unit such as em or rem so that users will be able to change the size of the text in your site by changing the default font-size of their browser. It might also be worth setting the values for other properties such as margin or padding in those units so that your entire site will scale with the user's chosen default font-size. If you'd like to learn more about those units in CSS and how all of this works, check out this helpful video on the topic.
    • Avoid using ID's to style things in your CSS, as that is generally discouraged because of the high specificity of ID's (which can make overriding or inheriting styles difficult in large projects). If you’d like to learn more about CSS specificity, check out this helpful video on the topic.

    Hope you find these suggestions helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    1

  • Maritβ€’ 400

    @Maritxx

    Submitted

    Hi! Here's my solution to the Accordion FAQ. I struggled quite a bit with the 'shadows' behind the image (both on mobile and on desktop). I got them to 'about right' but would love to know how someone else would've done this (possibly in a more effective way than I did). Especially the box that you can see on top of the image on the desktop caused me some problems.

    Would love to get some general feedback as well! ^^

    P
    ApplePieGiraffeβ€’ 29,125

    @ApplePieGiraffe

    Posted

    Hey there, Marit! πŸ‘‹

    Nice job on this challenge! πŸ‘ Your solution looks great and the accordion card works well! πŸ‘

    There's no need to add aria-hidden="true" to images that have their alt text blank in your code, since leaving alt empty will already cause screen readers to ignore those images. πŸ˜‰

    For the background images in this challenge, I found it easier to add the "shadow" image of the illustration as a background image on the card component itself and then use a regular img element for the main illustration. But what you've done here came out rather nicely! Here's my solution if you'd interested in seeing what I did.

    By the way, for your next project, you can use the native HTML details and summary elements to easily create functional and accessible accordions. I did that in my solution, as well, and it made things a lot easier! If you'd like to learn more about those elements, check out this helpful MDN article on them.

    Hope you find these tips helpful. 😊

    Keep coding (and happy coding, too)! 😁

    2

  • P
    ApplePieGiraffeβ€’ 29,125

    @ApplePieGiraffe

    Posted

    Hey, RBrilhante! πŸ‘‹

    Nice job on this challenge! πŸ‘ Your solution looks great and responds nicely! πŸ‘

    One small suggestion I have is to not set the font-size of the body to a value in px. Instead, consider setting the font-size to a percentage so that users will be able to change the size of the text in your site by changing the default font-size of their browser. That way, the em and rem values that you use throughout the rest of your CSS will be based on the variable font-size set by the user. If you'd like to learn more about how all of this works, check out this helpful video on the topic.

    Hope you find this helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    2

  • P
    ApplePieGiraffeβ€’ 29,125

    @ApplePieGiraffe

    Posted

    Hello there, Zhansaule Telisheva! πŸ‘‹

    Well done on this challenge! πŸ‘

    Here are a few things I'd like to suggest,

    • Avoiding using px for setting the value of font-size in your styles. Instead, use a responsive unit such as em or rem so that users will be able to change the size of the text in your site by changing the default font-size of their browser. It might also be worth setting the values for other properties such as margin or padding in those units so that your entire site will scale with the user's chosen default font-size. If you'd like to learn more about those units in CSS and how all of this works, check out this helpful video on the topic.
    • Avoiding setting specific heights for most of the elements in your page (especially wrapper or container elements). It's often better to simply allow the height of elements to be determined by their content (which is their default behavior) because then they will be just as high as they need to in order to accommodate what's inside them. You can always use margin or padding to add extra space around or inside those elements if desired. In your case, there's no need to worry about keeping the content below the quote in the same place for every quote (since you don't know how short/long each quote will be).
    • Setting the alt text for the icon inside the button that loads another quote to be an empty string so that it will be ignored by screen readers. That’s because that element isn’t necessary or important to the content of the page and as a result doesn’t need to be read by screen readers.
    • Using more semantic HTML elements in your markup, which is important for accessibility and SEO-related reasons. For instance, the button that loads another quote should be a button element, the quote itself could be a p element, and the "Advice #93" text could probably be a heading element. If you’d like to learn more about how to write semantic HTML and why it matters, check out this short, helpful course.

    Hope you find these tips helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    1

  • P
    ApplePieGiraffeβ€’ 29,125

    @ApplePieGiraffe

    Posted

    Hello there, JoannaKalbarczyk! πŸ‘‹

    Well done on this challenge! πŸ‘ Your solution looks good! πŸ™Œ

    Here are a couple of things I'd like to suggest,

    • Adding object-fit: cover to the hero image on the page so that the image does not seem stretched or squeezed when its aspect ratio/dimensions change.
    • Adding some more descriptive alt text to the images in the page. That’s because alt text is read by screen readers to describe images to users, so it’s important to write alt text that makes sense and will give users a good sense of the content and purpose of an image.

    A simple way to make your site more responsive is to simply switch to a mobile-friendly layout sooner. That way, you can prevent the content of the page from looking very squeezed right before the layout changes. Here's a pretty good solution to this challenge that you can check out if you'd like some ideas.

    If you’d like to learn more about how to make sites responsive, check out this helpful course.

    Hope this helps. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    2

  • P
    ApplePieGiraffeβ€’ 29,125

    @ApplePieGiraffe

    Posted

    Hello, Gloryjaw! πŸ‘‹

    Good work on this challenge! πŸ‘ The animation you added to the progress bar in your solution is a nice touch! πŸ™Œ

    One thing I'd like to suggest is to use more semantic HTML elements in your markup, which is important for accessibility and SEO-related reasons. For instance, the elements that are options in the box to the left of the page should be button elements, and some of the text elements could be p elements (such as the element that is currently a h1 tag, since that element isn't really a heading). If you’d like to learn more about how to write semantic HTML and why it matters, check out this short, helpful course.

    Hope you find this helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    1

  • P
    ApplePieGiraffeβ€’ 29,125

    @ApplePieGiraffe

    Posted

    Hey there, Olorundami Joseph! πŸ‘‹

    Congratulations on completing your first Frontend Mentor challenge! πŸŽ‰ Great job on this one! πŸ‘

    A couple of things I'd like to suggest are,

    • Avoiding using px for setting the value of font-size in your styles. Instead, use a responsive unit such as em or rem so that users will be able to change the size of the text in your site by changing the default font-size of their browser. It might also be worth setting the values for other properties such as margin or padding in those units so that your entire site will scale with the user's chosen default font-size. If you'd like to learn more about those units in CSS and how all of this works, check out this helpful video on the topic.
    • Perhaps adding some more descriptive alt text to the images in this card component. That’s because alt text is read by screen readers to describe images to users, so it’s important to write alt text that makes sense and will give users a good sense of the content and purpose of an image. If an image isn't important/necessary for the content of the page and could be ignored by screen readers, then just leave the alt text blank instead. πŸ˜‰

    Hope you find these suggestions helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    3

  • P
    ApplePieGiraffeβ€’ 29,125

    @ApplePieGiraffe

    Posted

    Greetings, imad! πŸ‘‹

    Well done on this challenge! πŸ‘ Your solution is responsive! πŸ™Œ It's great that you're learning how to use flexbox to lay out stuff with CSS! πŸ™‚

    A couple of things I suggest are,

    • Not adding aria-hidden: true to some of the icons/images in the page. There is no need to as long as you leave the alt text for those images empty, as that will cause screen readers to ignore them, anyway. πŸ˜‰
    • Using the background color of the original design for the background of the footer of the page.
    • Perhaps using a list element for the features in the "Keep track of your snippets" section (since each of those items is part of a list) to make your HTML a little more semantic.

    Hope you find these tips helpful. 😊

    Keep coding (and happy coding, too)! 😁

    2

  • Aghniaβ€’ 20

    @aghniputra

    Submitted

    Hi, this is my very first project. I'm not really sure about the code I wrote for the responsive so it displays the mobile page properly. I'd be happy to hear all your feedback. Thank you :)

    P
    ApplePieGiraffeβ€’ 29,125

    @ApplePieGiraffe

    Posted

    Hello, Aghnia! πŸ‘‹

    Congratulations on completing your first Frontend Mentor challenge! πŸŽ‰ Great work on this one! πŸ‘

    Here are a few things I'd like to suggest,

    • Not wrapping a button element inside a link element. An element should either only be one or the other. In this case, I think the "Sign up" element would be good to be a link since elements of that sort typically take you to a sign up/login page. πŸ˜‰
    • Adding a favicon to the site. There should be one in the starter files for this challenge that you can use.
    • Avoiding using px for setting the value of font-size in your styles. Instead, use a responsive unit such as em or rem so that users will be able to change the size of the text in your site by changing the default font-size of their browser. It might also be worth setting the values for other properties such as margin or padding in those units so that your entire site will scale with the user's chosen default font-size. If you'd like to learn more about those units in CSS and how all of this works, check out this helpful video on the topic.

    Hope you find these suggestions helpful. 😊

    Keep coding (and happy coding, too)! 😁

    Marked as helpful

    2