Responsive HomePage Using CSS Flexbox and Grid

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some recommendations for enhancing your code:

  • It is best practice ✅ to have separate files for you coding files (HTML, CSS, JS). It helps keep things organized and make it easier to maintain.

  • The logo should be outside ⚠️ the nav and why did you lottery write a W for the logo? There is no need for this since there is an svg file for the logo in the project files.

  • There is no need ❌ for two nav buttons. Just use once and use JS to change the images when the nav menu is open/closed. It should also be the first thing inside the nav.

  • The nav toggle button should have ⚠️ an aria-label, aria-expanded and aria-control.

  • The main article (The Bright Future of Web 3.0) should be wrapped ⚠️ inside an article element.

  • The main article requires the use of two illustrations 🎑 at different breakpoints ⚠️. The picture element will facilitate this.

  Here is how it looks like implemented: EXAMPLE

  • There needs to be a visibly hidden h1 ⚠️ heading in your site.

  • This <button type="button"><a href="#">Read more</a></button> is not correct ❌. You cannot combine ⚠️ this two elements since they each have their own functions. This challenge requires the use of the anchor element for its button.

  • The "new" section should have ⚠️ an aria-label.

  • This <span></span> is not ❌ how to achieve the "line" results. You use the hr element or the border property.

  • The bottom section should be built ⚠️ using an ordered list and have a visually hidden h2 heading.

  • Numbers are never ❌ headings.

  • The elements that are meant to be interactive are not⚠️. I suggest looking at the "active-states" design file to see which elements are meant to be interactive so that they can be built using the anchor element.

  More Info:📚

  MDN The Anchor element

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

  Happy Coding! 👾

  Marked as helpful

  1

  ---

  

  Jumael Martins•180

  @jumaelmartinsPosted almost 2 years ago

  @vcarames thanks for the feedback. I'll be working on the code and update on GitHub soon. had some things that I do not know how not to notice when I was writing, now that I'm looking calmly I see that there are many things that do not make sense, I will be correcting too.

  0
• 

  harshitkandpal•40

  @harshitkandpalPosted almost 2 years ago

  bro why dont you use bootstrap instead of doing so much of css?

  1

  ---

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @harshitkandpal

  I left feedback in your challenge submission and also why you should not use Bootstrap.

  2

  

  Jumael Martins•180

  @jumaelmartinsPosted almost 2 years ago

  @harshitkandpal I'm newbie and I'm still learning so I'm trying to do things with the basics for now to have a good base. so I chose not to use any framework or library.

  0

  

  harshitkandpal•40

  @harshitkandpalPosted almost 2 years ago

  @vcarames thank you bro in future I will update my project to full css with no bootstrap actually I am a engineering student so don't have much time that's why I use bootstrap Once again thank for your guidance I will be referring your project to learn

  0

  

  harshitkandpal•40

  @harshitkandpalPosted almost 2 years ago

  @vcarames you seem to be pro in frontend? Tell me how do you become so pro?

  0