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?
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.
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
@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.
Everything will be wrapped inside a fieldset which will have a legend that is visually hidden using CSS.
Inside, there should be five input radios and each input should have a label attached to it to make the “ratings” accessible.
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.
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.
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.
Hey there @juliengDev 👋! Here are some suggestions to help improve your code:
There is noheader 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.
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.
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: hiddendoes 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 headeroutside the main.
There is still a lot more that needs fixing but this should be enough for now...
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 singlenav 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.
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'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.
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.
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;
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!
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;
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.
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 usemax-width.
If you have any questions or need further clarification, feel free to reach out to me.
I manage to do this challenge with my knowledge of css and htm, i put all my best practices on it, if you can give me a feedback, tips or any recommendation i'll be really happy...
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.
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.
