1. CSS GRID
1.1. creating grid
1.1.1. display: grid, inline-grid
1.2. area consumption
1.2.1. grid-column: 1/3; grid-row: 1/3; start at line 1 end at line 3
1.3. align
1.3.1. content
1.3.1.1. justify-self: (horizontally) align-self: (verically)
1.3.2. container
1.3.2.1. justify-item: (horizontally) align-item: (vertically)
1.3.3. gap
1.3.3.1. gap: 20px 50px; (vertical horizontally)
1.3.3.2. grid-column-gap grid-row-gap grid-gap
1.4. template area
1.4.1. grid-template-areas: "advert header header" "advert content content" "advert footer footer";
1.4.2. invoking: .item1 { grid-area: header; }
1.4.3. invoking without name declare: item1 { grid-area: 1/1/2/4; } h start/v start/h end/v end
1.5. repeat
1.5.1. grid-template-columns: 1fr 50px 1fr 50px 20px; grid-template-columns: repeat(2, 1fr 50px) 20px
1.5.2. grid-template-rows: repeat(100, 50px); 100 rows each 50px
1.6. minmax
1.6.1. grid-template-columns: 100px minmax(50px, 200px) second column have minmax column size
1.7. auto function
1.7.1. auto-fill
1.7.1.1. repeat(auto-fill, minmax(60px, 1fr)); container keep stretching to insert 60px column, if cannot another row
1.7.2. auto-fit
1.7.2.1. repeat(auto-fit, minmax(60px, 1fr)); stretches item to fit size of container
1.8. media queries
1.8.1. @media (min-width: 300px){ .container{ grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "advert header" "advert content" "advert footer"; } }
1.9. grid inside grid
1.9.1. .item3 { background: PaleTurquoise; grid-area: content; grid-template-columns: auto 1fr; display:grid; }
1.9.2. <div class="container"> <div class="item1">header</div> <div class="item2">advert</div> <div class="item3"> <div class="itemOne">paragraph1</div> <div class="itemTwo">paragraph2</div> </div> <div class="item4">footer</div> </div>
2. BASIC HTML
2.1. notes
2.1.1. comment <!-- -->
2.1.2. <!DOCTYPE html> <html> <head> <meta /> </head> <body> <div> </div> </body> </html>
2.2. html style
2.2.1. scroll-behavior: smooth;
2.3. text
2.3.1. text-decoration: #; syntax: overline, line-through, underline,overline, none
2.3.2. <br> for breakline
2.4. image
2.4.1. adding image to page <img src="#" alt="#" >
2.4.2. open image in a new tab <a href="#" target="_blank">click here</a>
2.5. anchor
2.5.1. anchor to external page <a href="#">click here></a>
2.5.2. anchor to internal section of page <a href="#footer">Jump to Bottom</a> <footer id= "footer">Footer</footer>
2.5.3. turn element into link <a href="#"> <img src="#" alt="#"> </a>
2.6. list
2.6.1. bullet
2.6.1.1. <ul> <li>one</li> </ul> list-style-type: none;
2.6.2. numbered
2.6.2.1. <ol> <li>Garfield</li> </ol>
2.6.3. kotak menu
2.6.3.1. #navbar li { border-top: 1px solid; list-style: none;
2.7. input
2.7.1. input box
2.7.1.1. <input type = "text"> <input type="text"placeholder= "input here">
2.7.1.2. <form action="# server"> <input type="text" placeholder="input here" required> <button type="submit">submit</button> </form>
2.7.2. radio button
2.7.2.1. <label> <input type="radio" name="only-one">Indoor </label>
2.7.2.2. <label for="indoor"> <input id="indoor" type="radio" name="only-one">option1 </label> <label for="outdoor"> <input id="outdoor" type="radio" name="only-one" checked >option2 </label>
2.7.2.3. same name ensure only can choose one option, for=id, checked by default
2.7.3. checkbox
2.7.3.1. <label for="loving"> <input id="loving" value="loving" type="checkbox" name="personality" checked> Loving </label>
2.7.3.2. <form action="#"> <label><input type="checkbox" name="personality" checked> Loving</label> <label><input type="checkbox" name="personality"> Lazy</label> <button type="submit">Submit </button> </form>
2.7.4. dropdown
2.7.4.1. <select id="dropdown" name="food" class="input "> <option disabled value="select">Select an option </option> <option value="pizza"> Pizza </option> <option value="salad"> Salad </option> <option value="fried-rice"> Fried Rice </option> </select>
2.7.5. textarea
2.7.5.1. <label for="comment" class="labels"> Any Comments or Suggestions? </label> <textarea name="comment" rows="8" columns="80" class="input right" placeholder="Enter comments here..."></textarea>
3. VISUAL DESIGN
3.1. text-align
3.1.1. justify, center, right, left
3.2. img {}
3.2.1. height, width
3.3. text-decoration
3.3.1. text-decoration: underline; font-weight: bold; (can also be numbers) font-style: italic; text-decoration: line-through; in a class
3.3.2. <u>Google</u> <strong>Google</strong> <em>Google</em> <s>Google</s>
3.4. box-shadow
3.4.1. box-shadow: 100px 200px 20px 20px rgba(0,0,0,0.19),
3.4.2. offset-x (how far to push the shadow horizontally from the element), offset-y (how far to push the shadow vertically from the element), blur-radius,spread-radius and colour, in that order. The blur-radius and spread-radius values are optional.
3.5. opacity
3.5.1. A value of 1 is opaque, which isn't transparent at all. A value of 0.5 is half see-through. A value of 0 is completely transparent.
3.6. text-transform
3.6.1. lowercase "transform me" uppercase "TRANSFORM ME" capitalize "Transform Me" initial default value inherit value from the parent Default: Use the original text
3.7. hover
3.7.1. a:hover { color: blue; //turns blue when cursor is on it }
3.8. moving parent using relative
3.8.1. position : relative; // must set relative first top : 15px means moving it down 15 pixels
3.9. lock to parent using absolute
3.9.1. position : absolute; top : 50px; float : right; float: left;
3.10. fixed on screen
3.10.1. #navbar { position : fixed; top : 0px; left: 0px; (top left corner)
3.11. z-index position
3.11.1. z-index: 2; higher means on top
3.12. color
3.12.1. color: #09A7A1; background-color: #09A7A1; color: white; hsl(120, 100%, 50%); //hue,saturation,lightness
3.12.2. linear gradient
3.12.2.1. background: linear-gradient(35deg,#CCFFFF,#FFCCCC) //degree,color,color
3.12.2.2. background: repeating-linear-gradient( 90deg, yellow 0px, blue 40px, green 40px, red 80px );
3.12.3. stripes
3.12.3.1. background: repeating-linear-gradient( 45deg, yellow 0px, yellow 40px, black 40px, black 80px );
3.12.4. url
3.12.4.1. background: url(#);
3.13. transform
3.13.1. div:hover { transform: scale(1.1); }
3.13.2. skewing element
3.13.2.1. transform: skewX(24deg); transform: skewY(24deg);
4. CSS FLEXBOX
4.1. main axis
4.1.1. display: flex; flex-direction: row; flex-direction: column; flex-direction: row-reverse; //default flex-direction: column-reverse;
4.2. justify-content
4.2.1. organize elements in container based on main axis
4.2.2. justify-content: center //default justify-content:flex-start ; //start of container justify-content:flex-end; //end of container justify-content:space-between; start and between, tengah only space justify-content: space around; //ada space in between justify-content:space-evenly //even spaces between
4.3. align-item
4.3.1. organize item according cross axis (opposite main)
4.3.2. align-items: flex-start //top of container align-items: flex-end //bottom of container align-items: center //center of cross axis align-items: stretch //full the container align-items: baseline
4.4. flex-wrap
4.4.1. form another row/column if exceeds container
4.4.2. flex-wrap : wrap //make multiple lines flex-wrap : nowrap //default flex-wrap :wrap-reverse //wrap and reverse
4.5. size ratio
4.5.1. flex-shrink
4.5.1.1. flex-shrink: 3; item shrink 3 times from other items in container if it shrinks
4.5.2. flex-grow
4.5.2.1. expand the item when container expands
5. BASIC CSS
5.1. variable
5.1.1. --penguin-skin: gray;
5.1.2. invoking; background: var(--penguin-skin, black);
5.2. style class
5.2.1. class
5.2.1.1. @keyframes fade { 50% { left: 60%; width: 130px; //change position, height,width,opacity height: 50px; opacity: 0.1; } } //if 100% not set, it follows 0% default
5.2.1.2. <style> .red-text { color: red; } p { font-family: monospace; font-size:16px; } </style>
5.2.1.3. invoking; <p class= red-text>text</p>
5.2.2. id
5.2.2.1. #right { width: 40%; }
5.2.2.2. invoking; <aside id="right"></aside>
5.2.3. <a href="#"><img class="class1 class2" src="#></a>
5.2.4. type
5.2.4.1. [type='radio'] { margin: 20px 0px 20px 0px; }
5.2.5. pseudo class
5.2.5.1. :root -setting a variable so can be access globally
5.2.5.2. :after
5.2.5.3. :before
5.3. font
5.3.1. importing
5.3.1.1. <link href="#" rel="stylesheet" type="text/css">
5.3.2. font-family: family-name , generic [generic is the fallback for chosen font]
5.4. color
5.4.1. color; background-color; padding; margin;
5.4.2. <h2 style="color: blue;">text</h2>
5.4.3. <style> h2{ color:blue; } </style>
5.5. image
5.5.1. <style> .fixed-image { width: 500px; height: auto; }
5.5.2. invoking; <a href="#"><img class= "red" src="#" alt="#"></a>
5.5.3. border-color: green; border-width:10px; border-style: solid; border-radius: 50%
5.6. media query
5.6.1. root { --penguin-skin: gray; } @media (max-width: 350px) { :root { --penguin-skin: black; } } if exceed max, black turns gray
6. CSS RESPONSIVE WEB DESIGN
6.1. media queries
6.1.1. @media (max-width: 100px) { } @media (min-height: 350px) { }
6.2. image size & reso
6.2.1. img { max-width: 100%; height: auto; }
6.2.2. The max-width of 100% will make sure the image is never wider than the container it is in, and the height of auto will make the image keep its original aspect ratio.
6.2.3. display image half size to maintain resolution (for retina display)
6.3. text size
6.3.1. <style> h2{ width: 80vw; }
6.3.2. vw (viewport width): 10vw would be 10% of the viewport's width. vh (viewport height): 3vh would be 3% of the viewport's height. vmin (viewport minimum): 70vmin would be 70% of the viewport's smaller dimension (height or width). vmax (viewport maximum): 100vmax would be 100% of the viewport's bigger dimension (height or width).
7. APPLIED ACCESSIBILITY
7.1. adding audio
7.1.1. <audio controls> <source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type = "audio/mpeg" > </audio>
7.2. photo caption
7.2.1. <figure> <img src="#" alt="#"><br> <figcaption>caption caption</figcaption> </figure>
7.3. date picker
7.3.1. <label for="input1">Enter a date:</label> <input type="date" id="input1" name="input1">
7.4. adjust visibility
7.4.1. -display: none; or visibility: hidden; hides content for everyone, including screen reader users -width: 0px; height: 0px; removes that element from the flow of your document
7.5. tabbing ability
7.5.1. button
7.5.1.1. <button accesskey="s">Stress reliever</button>
7.5.2. focusing
7.5.2.1. p:focus { background-color: yellow; } </style>
7.5.2.2. <p tabindex="0">Instructions: Fill in ALL your information then click <b>Submit</b></p> <p tabindex="0" >lol</p> tabindex allow element to be focused at
8. GRAPHIC & ANIMATION
8.1. graphic
8.1.1. border-radius: 50%; //change a shape to circle //creating a moon cresent. background-color: transparent; border-radius: 50%; box-shadow: 25px 10px 0px 0px blue;
8.1.2. add something before or after a selected element using – .heart { } .heart::before { content: ""; //must define content property to empty string } .heart::after { content: ""; )
8.2. animation
8.2.1. basic
8.2.1.1. #rect { animation-name: rainbow; animation-duration: 4s; } @keyframes rainbow { 0% { background-color: blue; } 50% { background-color: green; } 100% { background-color: yellow; } } //the percentage shows the sequence/process
8.2.2. hover
8.2.2.1. button:hover { animation-name: background-color; animation-duration: 500ms; animation-iteration-count: infinite; //how many loop animation-fill-mode: forwards; // specifies the style applied to an element when the animation has finished //in class element, not keyframes class animation-timing-function : ease-out; //changing speed movement of element ease (default) – slow, speed up, slow ease-out – quick = cubic-bezier(0, 0, 0.58, 1) ease-in – slow, quick linear – constant speed = cubic-bezier(0.25, 0.25, 0.75, 0.75)
8.2.3. cubic-benzier
8.2.3.1. cubi-benzier -> p1 (0,0), p2 (x1,y1), p3 (x2.y3), p4(1,1) each coordinate shows the movement of element, from point to point throughout the animation by time/4
8.2.4. horizontal/ vertical
8.2.4.1. @keyframes rainbow { 0% { background-color: blue; top: 0px; left: 0px; } 50% { background-color: green; top: 50px; left: 25px; } 100% { background-color: yellow; top: 0px; left: -25px; } }
8.2.5. opacity