GreatFrontEnd Projects is now in BETA! For a limited time, get 30% off with the promo code BETA30. Check it out! 🚀

Statistics Section

Build a responsive statistics section to display key metrics in real-time
+100 rep

Project brief

In this challenge, you will develop a responsive statistics section that fetches data from an API and displays it.

This challenge will require coding a responsive multi-column layout that reorganizes content based on the device's screen size to ensure a seamless user experience.

Implementation requirements

  • Design fidelity: Aim to follow the design as closely as possible. All elements in the design should be present, using the specified text color, font size, font weight, spacing, dimensions, etc.
  • Responsive behavior:
    • Text size: Should be responsive; font size is larger for wider devices, smaller for narrow devices.
    • Responsive layout: The layout should reorganize responsively. The content should stack vertically on smaller screens and align horizontally as the screen width increases.
    • Image size: The image resizes to fill the available width on tablets and mobile viewports.
    • Element adaptability: Ensure that text elements and images resize appropriately without distortion or loss of quality.
  • Dynamic content: Fetch the data from an API and display the response. This is so that the displayed data is always up-to-date.
  • Cross-browser compatibility: Check that your solution works for major browsers including Chrome, Firefox and Safari.
  • [Stretch goal] Performance optimization: Optimize image assets and code for quick load times, ensuring a smooth and responsive user experience.
  • [Stretch goal] Accessibility and semantics: Follow best practices for web accessibility, such as using semantic HTML and ARIA roles where necessary and using proper alt tags for images.

Resources provided

Design files for desktop, tablet and mobile
High resolution image assets
Starter code with content copy
Style guide for typography, colors and spacing
API specifications and sample data

Support you can expect

Official guides & resources
Development guides written & curated by Sr engineers at Big tech, such as:
Learn from good code
We recommend well-rated submissions using the same stack for your reference
Ask any questions in community
Have any doubts or need help? Ask in the community and discuss with others.