Submitted almost 2 years ago

Responive Simple Layout with NextJS, Typescript and CSS Modules

Nicholas Anich• 150

@NicholasAnich

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Minimalist portfolio website

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

I had a lot of fun with this challenge, this was the first time I used NextJS, Typescript and CSS modules which took a little to get used to but loved learning and trying it out.

I definitely like CSS modules but I did miss the ease and customizability of SCSS, honestly I think I would've been done quicker if I did. There was difficulty in trying to get the form to render invalid states only when a user clicks on them but found a great article on how to do it which I linked on Github. Accessibility is something I also struggled with for navigation and look to up my game on in the next project.

I know there are a lot of things I could improve on this project and probably will come back in time but for now, it's done and good enough.

If there are any suggestions or Ideas on ways to improve on this especially Accessibility wise, please throw them my way! :D

Community feedback

👾 Ekaterine Mitagvaria 👾• 7,600

@catherineisonline

Posted almost 2 years ago

Looks nice 🙌🏻 Don't forget to add the lang attribute to the HTML tag and I would also add the transitions to the hover states. To avoid accessibility problems with the social media icons where you don't want to use text inside <a> tags, you can create a <span> tag inside the <a> tag with description text but visually hide it. Another option is also aria-hidden="true" but as I know it's also not advised.

Marked as helpful

Nicholas Anich• 150

@NicholasAnich

Posted almost 2 years ago

@catherineisonline Hey Catherine! Thanks a lot, I'll try it out! :D Your projects are awesome by the way!

Please log in to post a comment

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