Mobile-first solution using Flexbox and BEM

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 4 years ago

  You've done a good job on this challenge, Alphonzo! Here are a few things I'd recommend reviewing after taking a look at your code:

  • Your alt text for the logo is currently "Logo". This doesn't help describe the image for screen reader users. As this is a logo for a (fictional) company called "Huddle", I'd recommend adding the word "Huddle" instead. This is true for any logos you ever add using img elements.
  • The illustration doesn't really add any context to the content. Instead of adding the alt text of "Illustration", I would leave the value blank. This will make screen readers skip over the content.
  • This is a small one, but it's correct semantics. For the "Register" button, you'd expect that to navigate to a sign-up form if this was a real site. This means an anchor tag makes more sense than a button element in this instance.

  You've handled the responsiveness of the page well, and your general markup looks great. Keep it up! 🙂

  2

  ---

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 4 years ago

  Oh, also, I'd recommend you try to resolve those accessibility errors with the social icons. Have a go at Googling the error message and see if you can resolve the issue. Once you push your updated code, you'll be able to generate a new report to see if the errors have been fixed 👍

  1
• 

  Luci_Smid•35

  @Luci-netizenPosted almost 4 years ago

  Hello! What bugs me is that in media query for large screen the social media buttons are not visible. Maybe position: absolute could help.

  1

  ---

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 4 years ago

  @Luci-netizen yeah, I've seen that too and agree. It's caused by the overflow: hidden; on the body element. So if you remove that, Alphonzo, the page will be scrollable and won't hide the social media icons 🙂

  0
• 

  Alphonzo Escolar•120

  @phonzdevPosted almost 4 years ago

  Thanks @mattstuddert for your feedback! I appreciate it! :) I was a bit confused on building this challenge. I am using the Responsively app to view the web page on different resolutions. I am using a 1366 by 768 laptop. When viewing this challenge on the Responsively app on 1366 it was okay, but when I tried viewing it on chrome it didn't appear as it was on Responsively. When I checked the viewport of my browser, it was 1366 by 695. My question is, should I build my website based on the viewport of my browser? I wasn't still able to find an answer on this one.. thanks so much Matt!

  0

  ---

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 4 years ago

  @phonzdev you're welcome! I would go with the viewport of your browser. Most of the time, the only difference vs the design would be less space available to the left and right of the main container, which is typically 1100px in these designs. You could then use Responsively to double-check it and refine before you submit.

  1