Skip to content
Submitted about 2 years ago

Responsive Designo Multi-Page Website with Grid and Flexbox

#accessibility#bem#lighthouse#progressive-enhancement#sass/scss
Vanza Setia•27,775
@vanzasetia
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Designo multi-page website
  • HTML
  • CSS
  • JS
5guru

Design comparison

SolutionDesign

Solution retrospective

Hello everyone! 👋

I finished my first guru challenge! It felt amazing to complete this challenge at the end of 2022.

I learned a lot of things when building this project. I wrote everything that I had learned in README. There are eight things that I learned. I hope it can help developers to do this challenge.

If you notice there is something wrong or things that can be improved, please do let me know. I am happy to fix or improve the README so that it can be helpful for developers.

Grace Snow answered all my questions in Slack so I do not have any questions. Thank you, Grace! 😊

Any suggestions for improvements are welcome. Also, you can ask me any questions about the technique that I used.

If you have finished this challenge and would like me to give feedback on it, please include a link to your solution. I would be glad to help you! 😀

Thanks!

Community feedback

  • LarryTheFatCat•50
    @LarryTheFatCatPosted about 2 years ago

    Hey, @vanzasetia!

    Great work on this Guru Leveled challenge, the replication was very precise and the overall code looks great! Fix up the 2 very simple issues on the HTML report and overall great job!

    1
    Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    Hi, @TwoThreeTwo!

    Thank you for the nice comment!

    About the HTML validation report, those are not issues. They are labeled as "INFO".

    I used role="contentinfo" on <footer> to make sure that VoiceOver reads it as a footer.

    Reference: <footer> - HTML: HyperText Markup Language | MDN #accessibility_concerns

    I added role="list" to the <ul> to bring back the semantic meaning of the list element after I set list-style: none.

    Reference: A Modern CSS Reset

    1
  • Hamzat Lawal•560
    @EngineerHamzieyPosted almost 2 years ago

    Hello sir, how have you been? please I'll be glad to have your review on my new solution

    0
    Vanza Setia•27,775
    @vanzasetiaPosted almost 2 years ago

    @EngineerHamziey

    Hi, Hamzat! I am doing great. Also, just call me Vanza. 😄

    I am still learning React. Also, I never did the challenge. So I can't give advice on your solution. Sorry!

    1
    Hamzat Lawal•560
    @EngineerHamzieyPosted almost 2 years ago

    @vanzasetia ok Vanza, thanks for being honest

    1

Please log in to post a comment

Log in with GitHub

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