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
Top comments (2)
Yeah sure you can edit the figma Template to your liking ..