DEV Community

loading...
Cover image for 5 Projects with design files to become a better frontend developer 2021
Codewell

5 Projects with design files to become a better frontend developer 2021

mamdouhmoemin profile image Moemin Mamdouh πŸ‘¨β€πŸ’» ・2 min read

There's no better way to learn coding than by building out real projects.

This is a list of 7 projects that will test your frontend skills by practicing on real design template, from landing pages, to single-page components, and much more.

These are all great projects to have on your portfolio and will be helpful in your job hunt.

1 - Nested Comments

nestedcomments

You will practice the following:

πŸ‘‰ Centering divs horizontally and vertically
πŸ‘‰ Pseudo elements
πŸ‘‰ Creating nested components

2- Fiber Landing Page

fiber

You will practice the following:

πŸ‘‰ Absolute positioning
πŸ‘‰ Flex/Grid
πŸ‘‰ Creating cards

3- TimeNow Landing and Pricing Page

timenow

You will practice the following:

πŸ‘‰ Creating custom components such as toggles
πŸ‘‰ Creating half/half containers
πŸ‘‰ Creating a two-page website

4- Remix Landing Page

remix

You will practice the following:

πŸ‘‰ Creating dark and light mode pages
πŸ‘‰ Work on a full sign up and onboarding process
πŸ‘‰ Creating blog cards
πŸ‘‰ Using variables and mixins to make your life easier

5- Gradie Sign Up Page

gradie

You will practice the following:

πŸ‘‰ Centering divs
πŸ‘‰ Absolute positioning
πŸ‘‰ Styling fields

You can find more of these challenges on Codewell β€” looking forward to seeing you build these out!

Discussion (2)

Collapse
cariehl profile image
Cooper Riehl

Thanks for sharing! These look like a fun way to practice frontend development from start to finish. I'll check these out tomorrow and see what I can do!

I also appreciate the fact that you saved your site's self-promotion until the end of the article. It's always frustrating when an article starts with "hey, use this tool I made!" Your article made me interested in the content itself, so your website feels less like a "shameless self-plug" and more like a good way to find additional practice projects. Kudos to you!

Collapse
mamdouhmoemin profile image
Moemin Mamdouh πŸ‘¨β€πŸ’» Author

Thanks for the kind words, Cooper! :)

Forem Open with the Forem app