DEV Community

Cover image for Front-end Challenge #1

Posted on

Front-end Challenge #1

Recently, some of my friends approached me inquiring for a recommendation on a way to start as a front-end developer. With dynamic technologies and frameworks, it will be quite tough and overwhelming beginning within the field of front-end development.

So I decided to start a front-end challenge, so Every week I will be providing a design and all the Assets needed.
So Feel free to Participate and improve your frontend Skills

Preview site : Vpn Landing Page

Challenge : SmartVpn Landing Page

i couldn't post full design in due to size limit
You can Preview the design Preview

Alt Text

View Full Design Preview


So this Week's Challenge is to build out this landing page and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a Go

Getting Started

All the files are included in the Github repo so the project-files folder is where all the Assets are ie: Images, Figma design file

  1. Go to Github and clone the repo
  2. Create a new folder on your pc and copy the Project-File folder to your new created folder
  3. Start the project & share it

Ideas to test yourself

Not a must but if you can try it will be good for you

  1. Write your styles using a pre-processor, such as Sass, Less, or Stylus
  2. Train your eye for detail by getting your solution as close to the design as you can
  3. Use a JavaScript framework/library to practice templating and/or building using components
  4. Try estimating the time it will take for you to build the project. Then see if the time taken matches up to your estimate.

If you guys think this is a good idea please let me know so that I can keep posting new design and challenge every Saturday

Top comments (2)

joyshaheb profile image
Joy Shaheb

Hello kelvinconrad, It's a really good idea of posting project challenges, please keep up the good work 👍

kelvinconrad profile image