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

  • @zhansayatazhibayeva

    Submitted

    What are you most proud of, and what would you do differently next time?

    Did faster than other projects

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

    easy project in comparison to other projects

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

    Any kind of feedback would be helpful

    @VCarames

    Posted

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

    • Every site should ALWAYS 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 ⚠️.
    • 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 headings in your component are being used incorrectly❌. Since the h1 heading can only be used once ⚠️, it is always given to the heading with the highest level of importance. This component has three headings of equal importance, so the best option would be to use an h2 heading ✅ since it is reusable and it will give each heading the same level of importance.
    • ALWAYS Implement a "Mobile First" approach 📱 > 🖥

    Mobile devices are now the dominant 👑 way in which people browse the web. So when building your content, you will start building with small screen sizes (starting at 320px) and work your way to larger screens using min-width.

    <Happy Coding/>! 👾

    Marked as helpful

    0
  • P
    juliengDev 130

    @juliengDev

    Submitted

    What are you most proud of, and what would you do differently next time?

    I had a great time experimenting with grids, particularly utilizing grid-template-areas and grid-area properties this time. It allowed me to further enhance my skills in using media queries and responsive layouts in general.

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

    Integrating the SVG background on the first card required some research, as did creating the border around the characters’ avatars.

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

    I look forward to your advice if I ever need to improve parts of the code.

    @VCarames

    Posted

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

    • There is no header in this challenge since, as the name of the challenge states, it is a section of a site; so remove all the header elements you added.
    • The article element is not the best choice ❌ for wrapping these testimonials. In order to use the article element the component needs to be able to make sense on its own and be independently distributable (can be used in on another site). These testimonials cannot do neither.
    • For the testimonials, it is best to to wrap each individual testimonial component in a figure element, the individuals information should be wrapped in a figcaption element and lastly, the testimonial itself should be wrapped in a blockquote element.

    Code:

    <figure>
       <figcaption></figcaption>
       <blockquote></blockquote>
    </figure>
    
    • The headings in your component are being used incorrectly❌. Since the h1 heading can only be used once ⚠️, it is always given to the heading with the highest level of importance. This component has several headings of equal importance, so the best option would be to use an h2 heading ✅ since it is reusable and it will give each heading the same level of importance.
    • The only headings ⚠️ in this component are the names of each individual; “Daniel Clifford”, “Jonathan Walters”, “Jeanette Harmon”, “Patrick Abrams” and “Kira Whittle”. Everything else should be wrapped in a paragraph element.

    <Happy Coding/>! 👾

    Marked as helpful

    1
  • @Daniel-Bilodid

    Submitted

    What are you most proud of, and what would you do differently next time?

    🐧 Hello, I'm Daniel this is my solution for this challenge.

    🎊 Features:

    Achieved +96% in Lighthouse score for performance, accessibility, best practices, and SEO. 📊

    Animations with Framer motion🎬

    𝗪𝗵𝗮𝘁 𝗶 𝘂𝘀𝗲𝗱 💻:

    React JS.🚀

    Scss.🎨

    ESLint. 📦

    Framer-motion. 🎬

    I really liked accomplishing this project, additionally, I have added the framer motion. Hope you like my solution to this task!

    If you have any suggestions on how I can improve my code then I will be very happy.

    Easybank landing page(React JS + Scss + Pixel Perfect + Framer Motion)

    #accessibility#framer-motion#react#sass/scss#bem

    1

    @VCarames

    Posted

    Hey there @Daniel-Bilodid! 👋 Here are some suggestions to help improve your code:

    I'm sorry to tell you but this "Achieved +96% in Lighthouse score for performance, accessibility, best practices, and SEO." means very little... because you have a lot accessibility and best practice errors in your code... so don't place all your faith in it.

    • You class="nav" should be a header element.
    • The text "logo" is not an appropriate alt text; it should always state the company's name. In this case it should state, "Easybank".
    • The "nav-list" an "nav__button" should be wrapped inside a nav element.
    • The nav toggle should always be a button ⚠️. A div is a non-interactive element, which means that keyboards and accessibility tools cannot interact with it.
    • The nav toggle should also have an aria-label, aria-expanded and aria-control and you will use JS to change the nav state using aria-expanded.
    • There is no need to create two separate nav menus; just create one and use CSS to style it for different breakpoints.
    • If you have the "mobile nav" and change the screen to a larger one the overflow: hidden does not get removed which prevents users scrolling, use JS to remove it a certain breakpoint.
    • The main element should only wrap your page's main content, which does not include the header; so move the header outside the main.

    There is still a lot more that needs fixing but this should be enough for now...

    Happy Coding! 👾

    0
  • S M Maaz 20

    @Master786-wd

    Submitted

    What are you most proud of, and what would you do differently next time?

    Using the CSS grid made me feel proud, and I will use a framework next time.

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

    The layout's alignment and placement present the largest obstacle for me, but the CSS grid helps to make things simple.

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

    I was getting frustrated while trying to create side navigation with an overlay, so I needed help.

    @VCarames

    Posted

    @Master786-wd

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

    • The logo should be outside the nav.
    • The logo’s alt tag description needs to be improved upon ⚠️; it should ALWAYS and only state the company’s name.
    • Nav menus are not created in that manner; there is no need for separate code for the "mobile" and "desktop". Ps. Why did you use a anchor element to create the nav button (it doesn't direct user anywhere)?
    • Create a single nav and inside have a button and it should have an aria-label, aria-expanded and aria-control. After the button, add the unordered list containing the links.
    • You will then use CSS to then style the nav for mobile and desktop.
    • "Overlays" are not created in this manner; <div id="overlay"></div>. To create it, you will use position and have it applied/removed to the body when the nav menu opens/close.
    • There is still a lot more that needs to fix, but this will suffice for now.

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

    Happy Coding! 👾

    0
  • @Valik3201

    Submitted

    What are you most proud of, and what would you do differently next time?

    I used Next.js for the first time, which was very interesting and educational. Additionally, I believe I successfully created a full-stack application using Firebase as the backend. I’m particularly proud of figuring out many new technologies and implementing complex functionalities. If I were to do it again, I would spend more time planning the application’s architecture to avoid some of the difficulties I encountered during implementation.

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

    One of the challenges was that I had to read a lot of documentation to understand and implement various features. This slowed down the process but also helped me gain a deep understanding of the technologies. Another perennial problem is working with forms. In this project, I chose to work with Formik, and although there were some roadblocks, everything worked out in the end. Solving form-related issues involved continuously reading the documentation and looking for real-world usage examples.

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

    I would be very grateful for any feedback :)

    Invoice App using Next Js, React and Firebase

    #firebase#next#react#tailwind-css#typescript

    1

    @VCarames

    Posted

    I'm a big fan of the home page; it is very informative, creative and a big plus for going the extra mile on this challenge.

    I haven't inspected the code since I'm required to create a login; which is a big no when creating projects as it defers others (recruiters, other developers, etc..) from going through your project.

    To correct this, keep the login/signup but I recommend you add a "guest" / "default" login so anybody can browse your site

    Regarding Formik, it is obsolete hasn't been update in years. So I wouldn't use it for future projects.

    P.S. Where or how did you create those mockups?

    Marked as helpful

    0
  • P
    Koda👹 3,810

    @kodan96

    Submitted

    What are you most proud of, and what would you do differently next time?

    50th SOLUTION 🎉🎉

    Made with:

    • HTML 🦴
    • SCSS 🖌️
    • JS 🤖
    • mobile-first workflow 📲📲
    • jQuery for shorter JS code 📕
    • used autoprefixer to ensure browser compatibility 🧭🧭
    • minified CSS files for better performance🚀

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

    if I see one more SVG....

    Read the FAQ-s

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

    if you notice anything, do what you gotta do... 👇👇

    @VCarames

    Posted

    @kodan96 Unfortunately, this needs a lot of work.

    • Why did you make your class="header_menutoggle" a div...❓This is meant to be an interactive element and a div is definitely not. Instead this should be a button and it should have an aria-label, aria-expanded and aria-control.
    • This is not necessary, instead use JS to change the img of the button when the aria-expanded changes.
    <div class="header_menutoggle">
       <div ><img src="assets/icons/hamburger.svg" alt="" class="open"></div>
       <div ><img src="assets/icons/close.svg" alt="" class="close"></div>
    </div>
    
    • Lastly, the button should be inside the nav and it should be the first thing inside of it.
    • Whenever you remove the default styling for list elements, you are removing their semantic meaning. To correct this, you need to apply the role="list" to the ul/ol and the role="listitem" to the li.
    • For the logo, remove <div class="header_logo--wrapper">, it is unnecessary. Once that is fixed, the anchor element should have an aria-label stating only the sites name and and where it leads to; so in this case it would state "Scoot - Home".
    • All the background patterns, should be applied via CSS and not be present in the HTML. All you are doing it bloating your code.
    • The <section class="steps"> should have a visually-hidden heading and the <div class="steps_item"> should be built using the list element.
    • This <h2>Locate with app</h2>, <h2>Pick your scooter</h2> and <h2>Enjoy your ride</h2> should then be h3 headings.
    • The Apple and Google store should each be wrapped in an anchor element so users can then be directed to the appropriate store to download said app.
    • The footer logo should be wrapped inside and anchor element.
    • This <div class="footer_nav" role="navigation"> is unnecessary, especially when the nav element exist...
    • The social media icons aria-labels should only state the company names; "Facebook", Twitter" and "Instagram".
    • The <section class="values"> content should be built using the ordered list element.
    • For the "FAQs" section, personally, I would have used the details and summary element to make things easier, as they are fully functional and accessible. But if you really want to build it with JS, then it should look like this;
    <button
       class=""
       id=""
       aria-expanded=""
       aria-controls=""
       aria-label=""
    >Accordion One
    </button>
    
    <div class="">Content</div>
    

    You will then use JS to change the aria-expanded which will effect it styling.

    There is still a lot more that needs fixing (and I have not even look at you CSS/SCSS).

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

    Good Luck and Happy Coding!

    0
  • Daniel 🛸 43,890

    @danielmrz-dev

    Submitted

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

    🛸 Hello FEM Community! I'm Daniel and this is my solution for this challenge! 😊

    🛠️ Built with:

    • HTML 🧾
    • SASS 🎨
    • BEM Notation 🅱️
    • Mobile first workflow approach 📲

    Built this one with HTML and SASS only. I wanted to practice creating the menu with all the functionalities without Javascript. The result is quite good. I know that some things need to be improved, such as accessibility, but I think it's good for now.

    If you have any suggestions on how I can improve this project, feel free to leave me a comment!

    Feedback welcome 😊

    Loopstudios Landing Page - (SASS)

    #accessibility#bem#sass/scss#lighthouse

    3

    @VCarames

    Posted

    Congrats on completing this challenge! You marked your challenge as "Accessible", unfortunately, it is far from it...

    Regarding building the mobile nav without JavaScript should be avoided at all cost at is makes it extremely unaccessible.

    • In mobile, even though your nav menu is hidden, users are still able to select the links.
    • aria-labels and alt are being use incorrectly.
    • buttons are being used in situations where they do not make sense.
    • When a keyboard is used to interact with the "creations" they are skipped.
    • etc...
    • The site logo doesn't need an aria-label since it is an img and you did not make it interactive; the alt is more than enough and it should only say "Loopstudios - Home" (this goes for the footer logo also).
    • The nav button has to be inside the nav element to make sense and it should have an aria-label, aria-expanded and aria-control. Delete this, <label for="menu"></label> and add <img src="images/icon-hamburger.svg" alt=""> to the button.
    • When the nav is open, the scroll on the body should disabled and only the scroll on the nav should be enabled.
    • The img for the "The leader in interactive VR" is purely decorative, so its alt tag should be left blank.
    • The "See All" buttons should be built using the anchor element since this "button:" would definitely direct users to another part of your site.
    • The project cards are perfect candidates to use the figure and figcaption elements.
    • Only the project text should be inside the anchor element. You will then use absolute / relative to make the entire card interactive.
    • Remove all the br elements; they are inconsiderate to screen reader users.
    • The footer links should be wrapped in a nav along with an aria-label.
    • For the social media logos, it should look like this;
    <a href="#" aria-label="Facebook">
       <img src="images/icon-facebook.svg" alt="" >
    </a>
    
    • There is still more things that need improvement, but this should be good for now...

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

    Good Luck and Happy Coding!

    0
  • @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
  • @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
  • @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
  • @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
  • @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!

    @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
  • @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
  • @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

    @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.

    @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
  • @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
  • @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!

    @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
  • @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
  • @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
  • @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.

    @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
  • @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
  • @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