Skip to content
Submitted over 2 years ago

Single-page Design Portfolio | Grid/Flex | SwiperJS

react
Joshua Hellard•545
@jhellard
A solution to the Single-page design portfolio challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey everyone, this is my first solution as a premium member! I'm very excited to continue finishing projects and improving my skills. This challenge definitely helped me improve my proficiency with Grid, the layout was not super tough thanks to Kevin Powell's Learn CSS Grid the easy way video.

I did struggle with implementing the carousel section, I found SwiperJS and configured that for the project. I'm very happy with the results, let me know if there is anything I could have done better!

Code

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    A few small accessibility issues on here

    • logo alt can’t just be logo (unless that’s the name of the site)
    • work example repeated in every slide renders them meaningless. They need to have proper descriptions
    • most of the sr only headings are unnecessary in this. You have headings already immediately underneath them.
    • it’s unusual to have sections south articles inside sections. Articles are for encapsulated pieces of content that could be syndicated in other places/other sites. Sections are just like divs unless explicitly labelled. So it would be fine to have sections throughout this, or possibly articles, but not both for the same content
    Marked as helpful

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