DEV Community

Cover image for Front-end Challenge #2 Landing page darkmode.
kelvinconrad
kelvinconrad

Posted on • Updated on

Front-end Challenge #2 Landing page darkmode.

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

Alt Text

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

  1. 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

  1. Start the project
  2. 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.

  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)

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
kelvinconrad profile image
kelvinconrad

Yeah sure you can edit the figma Template to your liking ..