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

  • Saul Gustavo A. S.• 530

    @saul-gustavo

    Submitted

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

    I am very proud of having completed this challenge, I spent a couple of minutes analyzing how to do the cards section, and I really liked how it turned out in the end.

    Estoy muy orgullosa de haber completado este reto, estuve un par de minutos analizando cómo hacer la sección de tarjetas, y me gustó mucho cómo quedó al final.

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

    I don't know if it was a good idea to give some parts a relative position to have that effect, but I'm still happy with the result obtained.

    No sé si fue buena idea darle una posición relativa a algunas partes para tener ese efecto, pero aun así estoy contento con el resultado obtenido.

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

    Cards section

    Social Proof Section

    1

    バレンタイン 😈• 64,190

    @VCarames

    Posted

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

    • Do not do this;
                <div class="star"></div>
            <div class="star"></div>
            <div class="star"></div>
            <div class="star"></div>
            <div class="star"></div>
          </div>

    As it is bad for accessibility, since all the user of screenreader will hear is "New line" over and over.

    • This <section class="cards"> is just another div; no need for the section since the entire component is a section as implied by the challenge name.
    • 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>

    More Info:📚

    MDN Figure Element

    • For the user img's their alt tag should state their entire name only.
    • With headings, you are not allowed to skip heading levels (h1 then h3), you have to follow the order. In this case, since the next heading level after h1 is h2 the user's name should be h2 instead of h3.
    • When styling your code, you want to always start mobile first since this is the primary method that users browse websites. With mobile first, you will style your code for small screen (320px) first and work your way up to larger screens using responsive elements and media-queries

    <Happy Coding/>! 👾

    Marked as helpful

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

    @VCarames

    Posted

    @EAguayodev Congrats on completing this challenge!

    • The "star" icon and "thank you" illustration are purely decorative. So there alt tag should be left blank.
    • This component would most likely be part of a larger site, which will already have an h1 heading declared, so "How did we do?" and "Thank You!" would most like be an h2 or h3.
    • Your rating "buttons" need to fix as they were 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.
    • The "Submit" button does not need to have an aria-label since it contains text indicating what it does.

    • The "thank you" container needs to be announced to screen readers when it appears. So you need to wrap <section class="thanks__section hidden"> in a div and give it an aria-live next use CSS to give <section class="thanks__section hidden"> the visibility: hidden as opacity: still allows screenreader to pick ups the content.

      • As for JS, you overcomplicated it. It should only be about 15 lines, max. If you did the rating I mentioned earlier, all your JS needs to do is listen to submit from the form and it will pick up the value of the rating input and add/remove the visibility: hidden to the "rating__section" and "thanks__section".

    • I didn't check your CSS, but it might needs some updating as well.

    Happy </Coding>!

    Marked as helpful

    1
  • zhansayatazhibayeva• 380

    @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

    Responsive 3 column preview card component

    2

    バレンタイン 😈• 64,190

    @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

    1
  • P
    Gilbert• 360

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

    Testimonials-grid-section-HTML-SCSS-GRID-Layout-BEM-FLEXBOX

    1

    バレンタイン 😈• 64,190

    @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 👨‍💻• 980

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

    1

    バレンタイン 😈• 64,190

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

    Responsive News Homepage with CSS Grid

    1

    バレンタイン 😈• 64,190

    @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
  • Valentyn Chernetskyi• 230

    @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

    1

    バレンタイン 😈• 64,190

    @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,830

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

    Scoot Multipage Website 🛵🛵 w/HTML, CSS & JS

    2

    バレンタイン 😈• 64,190

    @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 🛸• 44,250

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

    3

    バレンタイン 😈• 64,190

    @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
  • バレンタイン 😈• 64,190

    @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
  • Abhijeet-Bhushari• 20

    @Abhijeet-Bhushari

    Submitted

    What are the best practices that I missed?

    Is my way of centering a div a correct or optimal way?

    Plain html and css.

    1

    バレンタイン 😈• 64,190

    @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,190

    @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