Front-end Challenge #2 Landing page darkmode.

kelvinconrad — Sat, 21 Nov 2020 09:56:12 +0000

Hi Guys this is Front-end challenge 2 if you haven't checked the first one you can check it here Front-End Challenge #1

Challenge: Figma startup landing page darkmode

Improve your front-end coding skills by building real projects
I couldn't post the full design in Dev. due to size limit
You can Preview the design Preview

View Full Design Preview

Brief

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

This project will test your layout skills. If you're starting to get confident with Flexbox or Grid, this will provide a nice challenge!

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 my Github repo so the where all the Assets are ie: Images, Figma design file

Go to Github and clone the repo which contain all the starter files that you'll need to complete the challenge.

Clone the repo git clone https://github.com/kelvinconrad/Figma-landing-page-darkmode.git

Start the project
To host your Project you can use any services which are free eg: Githubpages, Zeit, or Netlify. Personally i use Netlify. If you don't have any idea on how to use any of this please comment and i will create a post on how to host in vercel, Github pages & vercel

After finishing your project you can share it dev.to community by using the #frontendchallenge hashtag

Ideas to test yourself

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

Write your styles using a pre-processor, such as Sass, Less, or Stylus
Train your eye for detail by getting your solution as close to the design as you can
Use a JavaScript framework/library to practice templating and/or building using components
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

Front-end Challenge #1

kelvinconrad — Sat, 14 Nov 2020 12:06:49 +0000

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 Dev.to due to size limit
You can Preview the design Preview

View Full Design Preview

Brief

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

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

Ideas to test yourself

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

Write your styles using a pre-processor, such as Sass, Less, or Stylus
Train your eye for detail by getting your solution as close to the design as you can
Use a JavaScript framework/library to practice templating and/or building using components
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

Forem: kelvinconrad

Front-end Challenge #2 Landing page darkmode.

Challenge: Figma startup landing page darkmode

Brief

Getting Started

Ideas to test yourself

Front-end Challenge #1

Challenge : SmartVpn Landing Page

Brief

Getting Started

Ideas to test yourself