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
OverviewSolutions6Comments5099

All comments

  • バレンタイン 😈• 64,270

    @VCarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    • A crucial is element missing from your code, which should always be included, whether it's a component or a full website, is the main element. Its presence is essential for maintaining good semantics and accessibility, as it assists in identifying the primary content of your site.
    • In this specific challenge, the icons serve a purely decorative purpose. So, it is best to leave their alt tag blank (alt="") to signal to screen readers that these elements should be disregarded.
    • The h1 heading should be used only once per page. In your code, it's employed multiple times. To adhere to best practices, it's if you use the h2 heading instead for subsequent headings.
    • For the "learn more" buttons, users are likely to be directed to another section of your website when they interact with them, it would be more appropriate to use the anchor (<a>) element to achieve this functionality.
    • Since you are utilizing the <div class="attribution"> provided by FEM, it's advisable to wrap it in a footer element to enhance the semantics of your HTML structure.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    1
  • バレンタイン 😈• 64,270

    @VCarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    Regarding your question about centering:

    To properly center your content to your page, you will want to add the following to your body (this method uses CSS Grid):

    body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

    More Info: 📚

    Centering in CSS

    • One crucial element missing from your code, which should always be included, whether it's a component or a full website, is the main element. Its presence is essential for maintaining good semantics and accessibility, as it assists in identifying the primary content of your site.
    • The alt tag for the QR image requires improvement, as its current content doesn't convey where it leads when scanned. It should provide a clear indication of the destination for users who scan it.
    • "Improve your front-end skills by building projects" is a heading, so it should be wrapped in a heading element.
    • Currently, your content is not responsive and this is due to your use of width on the container of the card. You instead want to use max-width.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    0
  • バレンタイン 😈• 64,270

    @VCarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    Unfortunately, there are numerous aspects that require improvement. I recommend reading this excellent article as it demonstrates how to correctly structure your HTML for this particular challenge.

    How to plan your HTML (1): Product Preview Card

    As for you CSS:

    • In modern Web Development, all content is built mobile first, in which you style for small screen first and use media-query to style for larger screens. This will ensure that performance and responsiveness are prioritized.
    • Font-size should always be in rem as this helps with accessibility.
    • The height: 100vh; in the body should be a min-height instead for improved responsiveness.
    • There's is no need to apply border-radius multiple times, just apply it to the card container along with overflow: hidden
    • Avoid using static properties as they negatively affect responsiveness.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    1
  • バレンタイン 😈• 64,270

    @VCarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    • Remove the header as there is no need for it in this challenge, as the name implies, this a section of a site.
    • Remove the br you added to the h1 heading; it is not being used correctly. Instead add a max-width with a ch value.
    • Remove the section and aside; they are being used incorrectly.

    • Using the article element is not suitable for wrapping the cards. To utilize the article element effectively, the component should have the ability to stand alone and be independently distributable (usable on another site).

    • The icons are purely decorative so their alt tag should be left blank (alt="").

    • This (min-width: 250px) and (max-width: 420px) is not necessary; a min-width is more than enough.
    • This is a great challenge to practice using CSS Grid. If you are not comfortable using it, here is a link that is all about how to use CSS Grid:

    https://css-tricks.com/snippets/css/complete-guide-grid/

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    0
  • バレンタイン 😈• 64,270

    @VCarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    • The "How did we do?" ** should be** a heading; for this challenge, it is most likely an h2.
    • Unfortunately the HTML for the rating part needs to be rewritten as it was done incorrectly.

    To ensure the ratings are fully accessible to all users and are built with the proper elements, the entire rating part needs to be built using a form element.

    1. Wrap all elements within a fieldset, which will contain a visually hidden legend using CSS.
    2. Within the fieldset, include five (5) input radio elements, each associated with a corresponding label to enhance the accessibility of the "ratings."
    3. Lastly, include a button to allow users to submit their selection.
    • As mentioned above, this <div class="submitBtn">SUBMIT</div> should definitely be a button.
    • After implementing the above changes, for your JS, the eventListener should be attached to the form element, listening for a submit event.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    0
  • SolidEnder• 120

    @SolidEnder

    Submitted

    So the biggest difficulty I had with this one was first, figuring out how to actually send the user to the second user to the second panel upon submission, but also actually adding the rating into the span tags. Once I actually figured out the second panel, the output read "You have selected SUBMIT out of 5 stars", but both problems were a relatively easy fix. It turns out that I added the event listener to the whole first panel, and since SUBMIT was was sent me to the next one, it printed out SUBMIT! So instead I changed that to the selection of ratings instead, and then I actually got it to add the rating to the empty span element. Overall the JavaScript here wasn't overly difficult to implement- it just helps not to overthink it like I did. But I thought this was a good second project to use JavaScript on. This was also my first time really utilizing mostly semantic HTML elements rather than just a whole bunch of divs, aside from my last project, which used a few at least. But I'm not sure if all of the semantic elements I used made sense or not, like wrapping both panels with the article tags rather than just sections. So let me know if that makes sense or not and what would be a better practice in that instance! Other than that feel free to give me any other suggestions and feedback you might have!

    Interactive Rating Component- FlexBox, Semantic HTML

    1

    バレンタイン 😈• 64,270

    @VCarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    • Remove all article, section and header elements that you are using; they are being used incorrectly.
    • The icons/illustrations in this challenge are purely decorative so their alt tag should be left blank (alt="").
    • To ensure the ratings are fully accessible to all users and are built with the proper elements, the entire rating part needs to be built using a form element.
    1. Wrap all elements within a fieldset, which will contain a visually hidden legend using CSS.
    2. Within the fieldset, include five (5) input radio elements, each associated with a corresponding label to enhance the accessibility of the "ratings."
    3. Lastly, include a button to allow users to submit their selection.
    • Your JS should be in a separate file for organization and maintainability. This is called separations of concerns.
    • After implementing the above changes, for your JS, the eventListener should be attached to the form element, listening for a submit event.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    1
  • バレンタイン 😈• 64,270

    @VCarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    • create-react-app is deprecated, so it is no longer supported. Instead you want to use a modern framework, such as Vite, to built your app with React.

    More Info:

    Start a New React Project

    • The icons/illustration in this challenge are purely decorative so there alt tag should be left blank, so that screenreader will ignore them.
    • Unfortunately the HTML for the rating part needs to be rewritten as it was done incorrectly.

    To ensure the ratings are fully accessible to all users and are built with the proper elements, the entire rating part needs to be built using a form element.

    1. Wrap all elements within a fieldset, which will contain a visually hidden legend using CSS.
    2. Within the fieldset, include five (5) input radio elements, each associated with a corresponding label to enhance the accessibility of the "ratings."
    3. Lastly, include a button to allow users to submit their selection.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    1
  • バレンタイン 😈• 64,270

    @VCarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    • The nav should be wrapped inside a header element and the logo should be outside of the nav.
    • The logo's alt tag should state that company's name.
    • For the nav button to be fully accessible and functional, it needs to be built with the button element and have aria-expended, aria-label and aria-control.
    • The <section class="hero"> should be an article element instead.
    • The h1 for this challenge is actually visually hidden while the "The Bright Future of Web 3.0?" is an h2 heading.
    • For your "Read More" button, you are nesting the anchor and button element; This is not allowed. You can only use one or the other. For this challenge, it will be the anchor element.
    • In <section class="new">, the articles should be built using an unordered list while the articles in the <section class="numbered"> will be ordered list.
    • The articles headings in the "new" and numbered sections should be h3 since it is not allowed to skip heading levels.
    • In the <section class="numbered"> there should be a visually hidden h2 heading.
    • Numbers are never headings.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    1
  • P
    Mayank Arora• 470

    @mayankdrvr

    Submitted

    Hi Frontendmentor community,

    This is my 3-column preview card component beginner challenge solution and my second submission. I request the community to review and give feedback for the live site and the shared source code on the following parameters-

    1. Does it follow all the good web accessibility practices?
    2. Is the site mobile first and responsive on all devices?
    3. Do all the padding, margin and border settings comply with the original design?
    4. Are all the colors and font settings matching the original design?
    5. Do you have any other code refactoring suggestion?

    Please feel free and do not hesitate to review my code and do give feedback for improvement. All suggestions are welcome. Waiting to learn from your feedback and experience. Thank you for reviewing my challenge submission.

    3-column preview card component | Mobile First | CSS Flexbox

    #accessibility

    1

    バレンタイン 😈• 64,270

    @VCarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    1. No.
    2. No. From 370px - 460px, everything is squished.
    3. No. You are using padding-bottom for texts when you should be using margin instead.
    • Remove all the article you have added to your code; they are not being used correctly. In order to use the article element, the content has to make sense on its own and has to be independently distributable (the content can be placed on ANY site and still make sense).
    • The icons in this challenge are purely decorative which means that their alt tag should be left blank (alt="") to tell screenreader that is should be ignored.
    • The h1 heading is only allowed to be used once per page. In your content it is being used multiple times.
    • To properly center your content to your page, you will want to add the following to your body (this method uses CSS Grid):
    body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}
    • In modern Web Development, all content is built mobile first, in which you style for small screen first and use media-query to style for larger screens. This will ensure that performance and responsiveness are prioritized.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    1
  • バレンタイン 😈• 64,270

    @VCarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    • Unfortunately, your content lacks responsiveness. Meaning that it does not look presentable in different screen sizes.
    • To fix this, you will have to redo this challenge, using a mobile-first approach in which you style your design for small device first and use media-query to style for larger devices. This will ensure that performance and responsiveness are prioritized.
    • Avoid using ID for styling and instead use classes.
    • When starting a projects, it is best practice to initial your styling with a CSS Reset. This will help remove any inconsistent styles applied by the browser and speed up your coding.
    • Your email input is missing a label which helps tell non-visual users what the input is for.
    • The EventListener in your JS should be on the form as a submit not a click, since the user is submitting their email; clicks are for actions.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    0
  • バレンタイン 😈• 64,270

    @VCarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    Unfortunately the HTML for the rating part needs to be rewritten as it was done incorrectly.

    To ensure the ratings are fully accessible to all users and are built with the proper elements, the entire rating part needs to be built using a form element.

    1. Wrap all elements within a fieldset, which will contain a visually hidden legend using CSS.
    2. Within the fieldset, include five (5) input radio elements, each associated with a corresponding label to enhance the accessibility of the "ratings."
    3. Lastly, include a button to allow users to submit their selection.

    After implementing the above changes, for your JS, the eventListener should be attached to the form element, listening for a submit event.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    0
  • natalia• 180

    @nataliadgalindo

    Submitted

    Honestly tougher than I thought but interesting to learn more Grid. Anyway, the transitions between screen sizes is a little weird and my aside doesn't seem to go all the way down, overall there's some grey areas and mistakes that I can't quite pinpoint/fix so if you have any suggestions or tips, that'd be very appreciated, thanks!

    Responsive news homepage made with React, Grid and Flexbox

    #accessibility#react#vite#semantic-ui

    2

    バレンタイン 😈• 64,270

    @VCarames

    Posted

    Hey there @nataliadgalindo! 👋 Here are some suggestions to help improve your code:

    Unfortunately, there a lot of things that need improvement on this challenge... have you done easier challenges?

    • This class="content-wrapper" is not needed and can be removed.
    • The logo should be outside of the nav but inside of the header. Its alt` tag should not be blank as it, it should state the company's name.
    • The nav toggle should be the first thing inside of the nav.
    • The navigation links need to be wrapped anchor elements for them to be interactive.
    • This class="grid-container" should be a main element.
    • The class="main-img" and class="main-heading" should both be wrapped inside the article element.
    • The h1 heading for this challenge is actually visually hidden and the "The Bright Future of Web 3.0?" is actually an h2 heading/
    • The "Read More" button should be an anchor element as selecting that button would most likely direct users to another page/section.

    There are more things, I just didn't want to leave a massive paragraph... 😁

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    0
  • バレンタイン 😈• 64,270

    @VCarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    • There is no header in this challenge; as the name suggest, it is a "section" of a site.
    • This should all be one single text and it should be a heading as an h1:
    <p class="first">Reliable, efficient delivery</p>
<p class="second">Powered by Technology</p>
    • Remove all the sections you are using to wrap each individual card and instead use div to wrap them.
    • If you will be using a h3, there needs to be an h2 before them as you cannot skip heading levels.
    • Your content is not responsive and this due to using explicit properties.
    • In modern web development, it is best practice to start mobile first, as it will improve performance and ensure that your content is responsive to all screen sizes.
    • There is no need to use position to place the cards, you need to use grid to create the layout for them.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    0
  • バレンタイン 😈• 64,270

    @VCarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    This is not the ideal first challenge users should tackle; even though it seems simple, it actually quite complex.

    • As the challenge name suggest, this is an interactive component. Meaning that it needs to be accessible to screen readers and keyboards, which currently yours is not...
    • You chose to use div for your rating buttons, unfortunately. this is the incorrect element to use since div elements are not interactive.
    • The rating buttons have to be built using an accessible form, fieldset and five radio inputs.
    • Once the top is implemented , for your JS, the eventListener should be on the form as a submit.
    • You are using JS to create effects that should be done by CSS; this is called separations of concern.
    • There is no need to have separate CSS files, instead have only have one; as having multiple stylesheets can have negative impact on your sites performance.
    • Highly recommend creating a .gitignore and adding your node_modules and .DS_store to it as these files are not necessary in GItHub.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    1
  • Cătălina Hasnaș• 300

    @Catalina-Hasnas

    Submitted

    Had fun with this using grid-template-areas for this one, as it seemed like the best solution. I must admit, the images from the last section reaaally gave me some headaches as to how to make them the right size relative to the right side of the container they are in. Had to resort to using percent for that.

    Desktop and mobile for news home page

    1

    バレンタイン 😈• 64,270

    @VCarames

    Posted

    Hey there! 👋

    Unfortunately, there are a lot mistakes that I would not expect at this challenge level... have you done any of the easier challenges?

    Here are some recommendations for improving your code:

    • There's no need to create to different HTML codes for your header navigation. All you need is oneand you will use CSS to style them for different breakpoints.
    • To create the header for you site, you need to have a header element which will contain the logo and nav; It should also be outside of the main.
    • The nav toggle button should be the first thing inside of the nav followed by the nav menu which will be built using an unordered list.
    • The nav toggle button needs to be accessible, so it should contain an aria-label, aria-expanded and aria-controls.
    • For this challenge, the h1 heading is actually, visually hidden and it can only be used once per page ( you used it multiple times).
    • The aside and <div class="section-item"> should contain list elements.

    There are still more things that need improvements...

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    1
  • バレンタイン 😈• 64,270

    @VCarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    • The HTML for the ratings needs to be rewritten as it was done incorrectly ❌:

    To ensure that the "rating buttons" are fully accessible 💯, they need to be built using a form ⚠️.

    1. Everything will be wrapped inside a fieldset which will have a legend that is visually hidden using CSS.
    2. Inside, there should be five input radios and each input should have a label attached to it to make the “ratings” accessible.
    3. The last thing you will want to include will be a button so users can submit their choice.

    More Info: 📚

    MDN: Form Element

    MDN: <input type="radio">

    MDN: Field Set Element

    • Once the top is implemented , for your JS, the eventListener should be on the form as a submit.

    More Info:📚

    Click vs. Submit EventListeners

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    0
  • バレンタイン 😈• 64,270

    @VCarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    • Company logo's alt tag descriptions should NEVER include the keyword "logo"; It should only state the company's name.
    • Remove all the article elements you added, as they are being used incorrectly and not needed for this challenge.
    • Your email input is missing a label which will be visually hidden.
    • The illustration is purely decorative, so it's better off to leave the alt description blank.
    • The social media logos need to interactive. So they need to be wrapped inside an anchor element. They should also be built as an unordered list.
    • The JS for your email input validation needs work, as email@[email protected] is considered valid. You also want to add some sort of confirmation to valid emails as I wasn't sure if the validation was working.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    0
  • バレンタイン 😈• 64,270

    @VCarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    Regarding your question, you will use position: absolute on the button and relative on the form. You can then align the button using top, left, etc...

    • Currently, from 320px - 1000px your content is broken ⚠️ with both mobile/desktop images displaying at the same time and content overlapping.
    • For the image, I highly suggest using the picture element and allowing the browser to handled which image to show.
    • Company logo alt descriptions should ALWAYS state the company's name.
    • The header should be outside the main element for semantic purposes.
    • The heading "We're coming soon" should be wrapped in a h1 heading.
    • Your email input needs to have a label which you'll want to accessible hide.
    • Your "thank you" and "error message" should be handled by your JS and they should be inside the form (you will also want to give them an aria-live to notify low vision users of changes and an aria-describedby to link them to the input)
    • Your email validation needs to be reworked, as it currently accepts email@[email protected] as a valid email.
    • For you widths and heights avoid using values such as vw; or percentages as they can cause you to lose control of your content. Instead use rem or em. More info on topic https://web.dev/learn/design/.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    0
  • バレンタイン 😈• 64,270

    @VCarames

    Posted

    Hey there! 👋 Unfortunately, there are countless things that need to be improved that I would not expect at this challenge level...

    For example:

    • This should be a header element and not a div.

    • Company logo alt descriptions should NEVER ❌ be "logo"; it should always state the company's name.

    • Your nav button is inaccessible ⚠️. This because you built it using a div (<div class="open-nav-div">) when it should off been built using a button.

    • The list items inside the nav menu should be wrapped inside an anchor element in order for them to be interactive.

    These are just a few things that need to be fixed... there are a whole lot more things that need improvement.

    I strongly recommend checking out https://web.dev/learn/html/ to enhance your web development knowledge. This resource can be instrumental in helping you avoid the types of mistakes that may arise in your future projects.

    Upon reviewing your profile, I've noticed that you appear to be rapidly tackling various challenges, with near-daily postings. It seems that your primary emphasis is on animation rather than the quality and accessibility of your code.

    As a web developer, it's crucial to make quality code (error free, semantically correct, proper usage of elements, etc...) and accessibility your top priorities. These aspects are what distinguish an average developer from an outstanding one.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    4
  • バレンタイン 😈• 64,270

    @VCarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    • Every site should ALWAY have ✅ a main element not only for semantic purposes but also to help assistive technology find the main content of your content. For this challenge, it will serves as the component’s container ⚠️.

    More Info: 📚

    MDN Main Element

    • The logo’s alt tag description needs to be improved upon ⚠️; it should state the company’s name.
    • Your email input and button needs to be wrapped inside a form and have a visibly hidden label attached to it for improved accessibility.
    • The social media icons are missing⚠️ from your site.
    • Your email validation needs work as email@[email protected] is considered a valid email, when it should not.
    • When the user enters a valid email⚠️, It should have some sort of confirmation stating that the email is valid to improve user experience ✅.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    0
  • バレンタイン 😈• 64,270

    @VCarames

    Posted

    Hey @Grind3189 👋! Congrats on completing this challenge!

    Unfortunately, since you have added a login/sign-up screen and made it a requirement for users to create an account, it has made receiving proper feedback, difficult, as this is considered bad practice, especially if you are showcasing a project.

    I highly recommend adding a "guest" login to allow users to enjoy your site while still keeping your login/sign-up screen.

    1
  • バレンタイン 😈• 64,270

    @VCarames

    Posted

    Hey there! 👋 Unfortunately, there are a lot of mistakes been that I would not expect at this challenge level.

    I noticed that you are not receiving feedback in your previous challenges, In that case I would recommend reading the feedback others receive to improve all your previous challenges.

    Here are some suggestions to help improve your code:

    • The header should always be outside⚠️ of the main element to make semantic sense.
    • Swap <section class="banner-section"> with a header element and <header class="header container"> into a div.
    • The logo's anchor should have an aria-label⚠️ and it should state the company's logo name and where it leads to.
    • There is NO❌ reason to have code for two separate navigation menus. There should only be one and you will CSS to style it for different layouts.
    • The navigation "button" has to be a built using a button⚠️ since it doing an action (open/close menu); Currently, it is not accessible.

    • Text should not be all uppercase <h1 class="hero-h1">IMMERSIVE EXPERIENCES THAT DELIVER</h1> as it is not screenreader friendly😢, instead use CSS to do so.

    • The buttons in the creation portion should be anchor⚠️ elements, as they would most likely direct users to other parts of your site.

    • Skipping heading levels is something that is not allowed❌ in web dev. In your case, you can't jump from h2 to h4.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    0
  • InterceptorTT• 390

    @InterceptorTT

    Submitted

    Cool challenge! I struggle a little bit in figurin' out how to do the second section (interactive), and as you can see the part of the text is not properly aligned with the rest of the layout. I'm curious to see how you did it! any suggestion would be appreciated anyway!

    Responsive Loopstudio landing page

    1

    バレンタイン 😈• 64,270

    @VCarames

    Posted

    Hey there! 👋 Unfortunalty, there are a lot issues that I would not expect at this challenge level... I would highly recommend starting with an easier challenge.

    Here are some suggestions to help improve your code:

    • Your navigation needs to be rewritten⚠️. There should not be two separate codes for your navigation menu, there should only be one and you will use CSS to style it for mobile/desktop.
    • Since your logo is wrapped inside an anchor element, you need to include ⚠️ an aria-label stating the logo's name ("Loopstudios") and where it leads to ("Home").
    • The nav toggle should be the first thing inside of the nav to improve accessibility and it should⚠️ be a button not an anchor. It should also have aria-expanded, area-label and an aria-control.
    • Remove all the br elements you have added, they are being used incorrectly🚩.
    • For the card, instead of doing this [example provided at bottom of text], it far better to use the picture element.

    ❌:

     <a href="#" class="img-desktop"><img src="images/desktop/image-deep-earth.jpg" alt="#"></a>
<a href="#" class="img-mobile"><img src="images/mobile/image-deep-earth.jpg" alt="#"></a>
    • In the card, the images should not❌ be the element that is interactive, it should be the text and you have the text "breakout" to make the entire card interactive.

    Here is a helpful article on how to achieve that https://piccalil.li/tutorial/create-a-semantic-break-out-button-to-make-an-entire-element-clickable/

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    Marked as helpful

    0
  • Carlito• 190

    @Introxiety

    Submitted

    I'm not sure if my grid layout approach is optimal. If you have any feedback or if I've included unnecessary elements, I would appreciate your guidance and corrections. Thank you.

    GRID & PSEUDO SELECTORS

    2

    バレンタイン 😈• 64,270

    @VCarames

    Posted

    Hey there! 👋 Here are some suggestions to help improve your code:

    • For the icons, just leave the alt blank, no for alt="_blank".
    • There's no need to do this #grid-blocks>div:nth-child(3), it only complicates things. Instead give the card a class and use that for styling.
    • Using CSS Grid with Grid-Template-Areas will make things way easier 💯 when building the layout; it will give you full control of the layout.
    • I would definitely add ⚠️ a third layout between, maybe, 650 - 1000px as your layout is just a single column until 1440px.
    • You definitely want to use variables, at minimum, for your colors as it will help keep things organize and easier to maintain.

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding! 👾

    0