### 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 -

: Card Container -

: Thumbnail - : display image -

: Content -

: Hold header content and paragraph -

: Because semantic html should be started with h1 then i start with h1 -
: no explanation needed -
: Statistics Data -
: Hold each data -
: because there is no need to make the number as a header -
: 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 ```markdown ### 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](https://fonts.google.com/specimen/Inter) Weights: 400, 700 - Family: [Lexend Deca](https://fonts.google.com/specimen/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 ```html ``` - Semantic HTML ![Untitled](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/105a096e-45c6-4cde-b651-8be618c5d5f3/Untitled.png) -
: The header tag defines content that should be considered the introductory information of a page or section -
: The navigation tag is used for navigation links. It can be nested within the `
` tag, but secondary navigation `
` tags are also commonly used elsewhere on the page. -
: This tag contains the main content (also called the body) of a page. There should be only one tag per page. -
: 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 `
` after header -
: Using `
` 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. -
: An aside element defines content that’s less important. It’s often used for sidebars—areas that add complementary but nonessential information. -
: You use `
` at the bottom of a page. It usually includes contact information, copyright information, and some site navigation. -
: 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 ```css /* 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 ```css / 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 ```css / 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

Alfian Akmal Hanantio

All comments

QR Code Component (NO Flex/Grid, Responsive)