Skip to content
Submitted almost 4 years ago

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

PeaNu•90
@jubeatt
A solution to the Agency landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

I've written all my processes in the README, you can find many details from there.

It may need to take some time to read, but I think it's worth it. (Because it really takes me so much time to write😂)

If you think there is something that can be improved or any suggestions, please feel free to let me know.😃

It's a long way to go on the front-end, but I will keep going, and I hope you like this work, thanks!😊

Code

Please log in to post a comment

Log in

Community feedback

  • Matt Studdert•13,611
    @mattstuddert

    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
  • Ngoc Anh Vu-Martell•125
    @anh-vumartell

    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
  • Michal•665
    @mbart13

    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/

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord