Codewell
Blog

Blog

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

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

Codewell's photo
Codewell
ยทMay 16, 2021ยท

1 min read

Subscribe to my newsletter and never miss my upcoming articles

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!

ย 
Share this