104 フォルダ準備・ファイル準備・デザインシステム記載
1. Create a file and folder
- Create index.html
- Declear HTML
- Create style.css
- Create css folder and place style.css in it
- Link HTML and CSS <link rel="stylesheet" href="folder name/file name"/>
- Change <title>
<title>Omnifood</title>
2. Create <h1> tag
<h1>Headline: A healthy meal delivered to your door, every single day</h1>
3. Global reset and initial set up of CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
4. Style body
body {
font-family: sans-serif;
line-height: 1;
font-weight: 400;
color: #555;
}
5. Write design systems
/*
--- 01 TYPOGRAPHY SYSTEM
- Font sizes (px):
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
- Font weights:
Default: 400
- Line heights:
Default: 1
- Spacing systems (px):
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
--- 02 COLORS
-Primary: #e67e22
-Tints:
-Shadows:
-Accents:
-Greys: #555
--- 05 SHADOWS
--- 06 BORDER-RADIUS
--- 07 WHITESPACE
- Spacing systems (px):
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/