Stats Preview Card Component

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

• Family: Inter Weights: 400, 700
• Family: Lexend Deca Weights: 400

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

5. Create CSS Variable for store color
6. Layouting
7. 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){
/* … */
}

Resources

• https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62
• https://www.w3schools.com/html/html_css.asp
• https://www.semrush.com/blog/semantic-html5-guide/
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article
• https://www.codecademy.com/resources/docs/html/semantic-html/figure
• https://learn.microsoft.com/en-us/windows/apps/design/layout/screen-sizes-and-breakpoints-for-responsive-design
• https://www.w3schools.com/css/css3_variables.asp
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries