hero image desishub

HTML

CSS

Intermediate

Launch countdown timer

This will be a fun one! Your challenge is to build this countdown timer. There are lots of small CSS tests in the design as well. So it should keep you busy! The project Id is DHC0024

Download the ChallengeWatch a Tutorial

Challenge Brief

Your challenge is to build out this Launch countdown timer app 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.Try to use similar photos, icons, design, fonts and colors used in the design.

Learning how to get project assets is a skill on its own. And we want to make sure you can be able to do that on your own. But if you stack on how to progress, please join our slack community or our Telegram channel to get support.

Download fonts, images or icons from any place of your own. check a list of resources here all developer resources

Getting Started

  1. Download the design Image from the Link above
  2. Set up the project with Github
  3. Plan for the project before you start coding. Look at the design Patterns like re-usable classes and so on.
  4. Get all assets before starting to code eg icons, images, fonts, colors,etc
  5. Set up your project/file architecture however you want
  6. Start coding!

Ideas to Test your self

  1. Write your styles using a pre-processor, such as Sass but if you can't then use normal css
  2. Try Using Variables if You can
  3. Try writing clean code by implementing BEM and DRY & clean code principles while writing your code.
  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. Project estimations are a skill that is often overlooked but is essential for professional developers.

Frequently Asked Questions (FAQs)

Yes! The challenges provide professional designs but there are no rules on what tools to use. So feel free to use anything you like to build your projects.

The best (and quickest) way to get help on a challenge is in our Slack community and Our Telegram Channel. There are thousands of other developers in there, so it's a great place to ask questions. We even have a dedicated “help” channel! If you haven't joined yet, you can get an invite to our Slack community here.

Definitely! Please do feel free to use whatever you build in your portfolio. Helping developers add professional-looking projects to their portfolio was one of the reasons we created this platform!

We don't provide “official” solutions for the challenges. This is because there is no single perfect way to complete a challenge. Instead, you're encouraged to review other people's code in the community. You can learn so much by seeing how other people have approached the same challenges and giving them feedback.

Yes,Our dedicated team will to look at your code and give you a review on improvements you could try. In addition Our community of developers will also review and give some feedback.

We'd recommend reading our complete guide to submitting solutions. If you get stuck and need help, please feel free to ask questions in our Slack community or telegram channel, and we'll help you submit your project.