amalhanaja

Stats preview card component

Challenge by FrontEndMentor

Alfian Hanantio's photo
Alfian Hanantio
·

4 min read

Stats preview card component

Table of contents

Goals

Users should be able to:

  • View the optimal layout depending on their device's screen size

Pre-Development

Built With

  • Semantic HTML5 markup

  • Mobile-first approach

  • CSS Grid

  • CSS Flexbox

  • CSS3 Variable

My Process

  1. Searching how to link css file in html

  2. Learn Semantic HTML

  3. Slicing UI to Semantic HTML

    Because design doesn’t contains any header or footer. i think it should be built like this

    • <main>: Card Container

      • <figure>: Thumbnail

        • <img>: display image

      • <section class=”content-container”>: Content

        • <article>: Hold header content and paragraph

          • <h1>: Because semantic html should be started with h1 then i start with h1

          • <p>: no explanation needed

        • <section class=”statistics”>: Statistics Data

          • <section class=”data-container”>: Hold each data

            • <div class=”data-value”>: because there is no need to make the number as a header

            • <div class=”data-label”>: clear enough

  4. Define Design System based on styleguide

    1. Define Breakpoint for Mobile and Landscape

      • Mobile - Design (375px)

        • Max-width: 1007px

        • Min-Width: Unspecified

      • Desktop - Design (1440px)

        • Min-Width: 1008px

        • Max-Width: Unspecified

    2. Color Tokens

       ### Primary

 - Very dark blue (main background): hsl(233, 47%, 7%)
 - Dark desaturated blue (card background): hsl(244, 38%, 16%)
 - Soft violet (accent): hsl(277, 64%, 61%)

 ### Neutral

 - White (main heading, stats): hsl(0, 0%, 100%)
 - Slightly transparent white (main paragraph): hsla(0, 0%, 100%, 0.75)
 - Slightly transparent white (stat headings): hsla(0, 0%, 100%, 0.6)

      There are 2 grouped colors (Primary and Neutral). but i’ll define it and group it by its functionality

      • Background (main background before) → hsl(233, 47%, 7%)

      • Primary (Card background). I think it is the primary color → hsl(244, 38%, 16%)

      • Accent → hsl(277, 64%, 61%)

      • Content: Content color with three level

        • content-root: hsl(0, 0%, 100%)

        • content-soft: hsla(0, 0%, 100%, 0.6)

        • content-main: hsla(0, 0%, 100%, 0.75)

    3. Typography

      Fonts

General (Body)

  • Font size: 15px

Typography Token

  • H1 - to be resolve, because no much information provided

  • Body - 15px

  • Title - to be resolve, because no much information provided

  • Subtitle - to be resolve, because no much information provided

  1. Create CSS Variable for store color

  2. Layouting

  3. Make it responsive for Desktop using media query with minimum width is 1008px

Lesson Learned

  • Link CSS file to HTML

      <link rel="stylesheet" href="styles.css">

  • Semantic HTML

    • <header>: The header tag defines content that should be considered the introductory information of a page or section

    • <nav>: The navigation tag is used for navigation links. It can be nested within the <header> tag, but secondary navigation <nav> tags are also commonly used elsewhere on the page.

    • <main>: This tag contains the main content (also called the body) of a page. There should be only one tag per page.

    • <article>: The article tag defines content that could stand independently of the page or site it’s on. It does not necessarily mean a “blog post.” Think of it more as “an article of clothing”—a self-contained item that can be used in various contexts. Use when there is starting from h1..h6 and contains <p> after header

    • <section>: Using <section> is a way of grouping nearby content of a similar theme. A section tag differs from an article tag. It isn’t necessarily self-contained, but it forms part of something else.

    • <aside>: An aside element defines content that’s less important. It’s often used for sidebars—areas that add complementary but nonessential information.

    • <footer>: You use <footer> at the bottom of a page. It usually includes contact information, copyright information, and some site navigation.

    • <figure>: used to encapsulate media such as an image, diagram, or code snippet.

  • Break Point from Microsoft

    | Size class | Breakpoints | Typical screen size | Devices | Window Sizes | | --- | --- | --- | --- | --- | | Small | up to 640px | 20" to 65" | TVs | 320x569, 360x640, 480x854 | | Medium | 641 - 1007px | 7" to 12" | Tablets | 960x540 | | Large | 1008px and up | 13" and up | PCs, Laptops, Surface Hub | 1024x640, 1366x768, 1920x1080 |

  • CSS Variable

    Example

      /* Variable Definition */
  :root {
    --main-bg-color: coral;
    --main-txt-color: blue;
    --main-padding: 15px;
  }

  /* Usage */
  #div1 {
    background-color: var(--main-bg-color);
    color: var(--main-txt-color);
    padding: var(--main-padding);
  }

  • Set Background overlay color image aka tint

      /* HTML Tree
      figure
    |--- img
  */
  /* Add background to img parent */
  figure {
      margin: 0;
      background-color: var(--accent);
  }
  /* set display to block and mix-blend-mode multiply */
  img {
      display: block;
      mix-blend-mode: multiply;
  }

  • Media-Query

      /* To limit the styles to devices with a screen, we can chain the media features to the screen media type: */
  @media screen and (min-width: 1008px){
    /* … */
  }

Github

https://github.com/amalhanaja/stats-preview-card-component-main

Resources

Frontend DevelopmentHTML5CSSJavaScript