Build by SCSS, BEM, flex-box, grid-box, vanilla JavaScript and jQuery.

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted about 3 years ago

  Now that's how to write a README.md file! 🤩 Haha. Amazing work on this project (and the README), Jim!

  You've done a great job, and your solution matches the design nicely. Here are some pointers that will hopefully help you:

  • I'd recommend reading the accessibility report and try resolving those errors/warnings. Once you've updated your code, you can generate a new report using the button at the top of the report page.
  • The "We are creatives" text should really be the h1 on this page as it's the main heading. Also, you've uppercased the content in the HTML itself. Try to avoid doing that as some screen reader software will read this content letter-by-letter, which makes that content inaccessible to screen reader users. Instead, write it normally in your HTML and then use text-transform: uppercase; in your CSS to visually uppercase the text to match the design. This happens in a few other places in the HTML, so I'd recommend doing the same for the rest of the content.
  • It's great to see you using a button to trigger the mobile navigation. If you want to take it further and make it fully accessible, you can add attributes like aria-expanded to help screen reader users. Here's a great article about building accessible mobile navigations to help get you started.

  I hope those pointers help. Let me know if you have any questions!

  Marked as helpful

  3

  ---

  

  PeaNu•90

  @jubeattPosted about 3 years ago

  Hi Matt,

  First I want to say sorry for my late reply. (I was working on my challenge by the suggestions that you gave me yesterday.)

  It's great to see your feedback, it means a lot to me, because I didn't expect I will get your feedback, so I'm really surprised by that.

  And thanks for promoting my readme on slack and Twitter, If it can bring other people new ideas or inspiration, I think that's a very worthy thing to do.👍

  Thanks for everything you have done. I really appreciate that.😊

  Here is about your suggestion:

  1. Fixed the accessibility report

     I have updated my code and make all errors clear, Haha!😆

  2. Regarding the <h1> tag

     I was considering the SEO, for example, if I want to use google search for this site, I may use the keyword like "sunnyside"(like the company's name I guess?), It seems like that it has more representative about this website. Base on that so I didn't put <h1> for the "We are creatives" because I regard it as a subtitle. (just from my perspective💦).

     But your suggestion also makes sense, so I've updated the code.

  3. Regarding the capital letter issue

     Honestly, I never know that would cause the problem for the screen reader software. now I get it. thank you for pointing that out.

  4. Regarding the screen reader-friendly navigation

     I've read the article that you pasted, It takes me some time to read (because I have to translate by myself😂), but I think it's a great article. Just give me some times to get my head around this, when I get clear from it, I will update my code again.

     BTW, I also want to translate it to a Chinese version on my blog to share to other people. hope it can help more people know about how to increase accessibility.

  In the end, hope you don't mind my English may not very fluid, I only can use some simple word and sentence to write this.💦

  There's one last thing I gonna say: Frontend Mentor is really a wonderful place to learn how to develop.

  I can see you really pay a lot of effort into it, and you really do a great job too, so hope you can keep it, and don't forget to stay awesome. Cheers!

  1

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted about 3 years ago

  @jubeatt, your English is good! 🙂

  1. Great work on the accessibility errors! 🎉
  2. Typically, you wouldn't put the logo/website name as the h1. This is because you back yourself into a bit of a corner because you're only supposed to have one h1 on any page. Therefore, people using screen readers would only ever hear "Sunnyside" as the main heading, and you'd also lose out on a lot of SEO ranking potential. The h1 should always be the main heading on the page that best describes and leads the following content.
  3. 👍
  4. Yeah, there is quite a lot to that blog post! Take your time and keep practising to improve with each project. I'm sure the author would be happy for you to translate it. It might be worth trying to contact them first to see if they're happy for you to do it, but I can't see why they wouldn't be 🙂

  I'm delighted you're enjoying Frontend Mentor. We intend to stay around for a long time, so hopefully, everything keeps moving in the right direction! 🤞

  Marked as helpful

  1

  

  PeaNu•90

  @jubeattPosted about 3 years ago

  @mattstuddert

  Hi Matt,

  I've just updated the design and also write the record on the README

  1. Thanks for the explanation. I've tried to use a screen reader by myself to listen to the content. and I think I get it, it makes more sense to put meaningful content for the <h1>, so it can bring more information for people. anyway, next time I'll pay more intensive on this part and do more practice.

  2. Yeah, it's a good suggestion, so I've asked the author and now I'm waiting for his reply, hopefully, everything will be fine!😎

  3. That's a great message for everyone!😀

  4. the one last question on my last update, I set the role="navigation" for the <nav>, but the report says it is unnecessary for element <nav>, and I also search something about this informations, what I get is some people say it actually would happen, but it just a warning and w3c didn't mean you can't use that, so I keep it.

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted about 3 years ago

  @jubeatt yeah, the role="navigation" on a nav element is an odd one. It shouldn't be necessary, but I've read that there can be issues without it as well. It's fine to leave it in, as it's not going to cause any problems by having it on there 👍

  Marked as helpful

  0
• 

  Ngoc Anh Vu-Martell•125

  @anh-vumartellPosted about 3 years ago

  Hello @julbeatt! Your solution looks awesome and thanks for a great README file. I've learned a lot from your reflection notes.

  I'm a beginner in front-end development so I'm glad to learn from fellow front-end developers. I'd love to know which tool do you use to create the Structural drawing in your README file. Thanks and happy coding!

  Marked as helpful

  0

  ---

  

  PeaNu•90

  @jubeattPosted about 3 years ago

  @anh-vumartell

  Hi Ngoc Anh,

  I'm delighted the README is helping you learn something new.😊

  Indeed, it's nice to have many members who can teach each other while we learn these techniques.

  There are a lot of things need to learn on the front-end, so I'm still working hard on it, hope we can get more improvement day by day and keep going!👊

  Regarding the structural drawing, actually, the pictures are all designed by photoshop, it's a great tool to use for me.

  0
• 

  Michal•665

  @mbart13Posted about 3 years ago

  hey, I saw your solution in Matt's newsletter

  thought maybe you could be interested to know that aria-controls are not really recommended anymore https://heydonworks.com/article/aria-controls-is-poop/

  0