HTML & CSS
Learning Modules
- [HTML & CSS] Youtube - HTML & CSS Full Course from SuperSimpleDev
Pros:
- Easy to Understand
- Have a lot of practice tasks
- Have a final tasks
Cons:
- Not telling everything about HTML Tags and CSS Syntax, only the important parts
- [HTML & CSS] Youtube Playlist - The Ultimate HTML & CSS Course from Code with Mosh d'Botakk
Pros:
- Easy to Understand
- Really complete, but takes really long time to finish watching all of the videos
- He keep updating the playlists
Cons:
- Doesnt have a final tasks
- [HTML] Code with Harry
Pros:
- Easy to understand
- Interactive, have so many images and videos to make learning process more fun
Cons:
- Doesnt have tasks or quizzes or final task either
- [CSS] Code with Harry
Pros:
- Easy to understand
- Interactive, have so many images and videos to make learning process more fun
Cons:
- Doesnt have tasks or quizzes or final task either
- [HTML] W3 Schools (Free)
Pros:
- Free, just signup and login and it will save your learning progress
- Have "Try It" editor that can code directly there and see the result
- Have exercises of multiple choice questions
- Complete enough
Cons:
- Not really interactive, doesnt have image, video or graphic to learn.
- [CSS] W3 Schools (Free)
Pros:
- Free, just signup and login and it will save your learning progress
- Have "Try It" editor that can code directly there and see the result
- Have exercises of multiple choice questions
- Complete enough
Cons:
- Not really interactive, doesnt have image, video or graphic to learn.
Expected Outputs of Your Learning
HTML
Document HTML Structure
<!DOCTYPE html><html></html><head></head><body></body>
Metadata Tags
<title></title><meta></meta><link></link>
Text Formatting
<p></p>- <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>
<strong></strong><em></em><br /><hr />
List Tags
<ul></ul><ol></ol><li></li>
Hyperlink and Media Tags
<a></a><img /><audio></audio><video></video>
Form Tags
<form></form><input></input><textarea></textarea><select></select><option></option><button></button>
Table Tags
<table></table><tr></tr><td></td><th></th><thead></thead><tbody></tbody><tfoot></tfoot>
Semantic Tags
<header></header><nav></nav><article></article><aside></aside><footer></footer><section></section><figure></figure><figcaption></figcaption><main></main><time></time>
Paired & Unpaired Tags
Nested HTML Elements
HTML Attributes
id=class=data-*=title=style=
HTML Comments
Block and Inline Elements
iFrame
Code Snippets
<code></code><pre></pre>
HTML Entities
< for <> for >& for & for a non-breaking space© for ©
CSS
Height & Width
height: auto|length|%|px|initial|inherit;width: auto|length|%|initial|inherit;
Font Size
font-size: small|medium|large|larger;font-size: 25px;font-size: 50%;
Font Variant
font-variant: normal|small-caps;
Font Weight
font-weight: 100|200|300|400|....|900;100 (thin) to 900 (ultra-bold)font-weight: lighter|normal|bold|bolder;
Font Family
font-family: 'Courier New', Courier, monospace;- Generic Font Family
- Custom Font (for example Google Fonts)
CSS Color
color: purple;color: #98bad5;color: rgb(152,186,213);color: hsl(10, 50, 30);
CSS Background
background-color: #FF0000;background-color: orange;background-image: url('image-url');
Text Styling
text-decoration: overline|underline|line-through|overline underline;text-align:left|right|end|justify;text-transform: uppercase|lowercase|capitalize|none;letter-spacing: number + (px), em, rem, percentage (%)line-height: 3.5text-shadow: 2px 3px 4px red;(Horizontal offset, vertical offset, blur radius, color)- Text Overflow
CSS Box Model
- Padding
- Margin
- Border
CSS Padding
Shorthand
4 Values: Atas - Kanan - Bawah - Kiri
*searah jarum jam dari atas*padding: 25px, 20px, 10px, 16px;3 Values: Atas - Kanan Kiri - Bawah
padding: 25px 50px 75px;2 Values: Atas Bawah - Kanan Kiri
padding: 25px 50px;
Specify Only Padding Top
padding-top: xx;Specify Only Padding Right
padding-right: xx;Specify Only Padding Bottom
padding-bottom: xx;Specify Only Padding Left
padding-left: xx;
CSS Margin
Shorthand
4 Values: Atas - Kanan - Bawah - Kiri
*searah jarum jam dari atas*margin: 25px, 20px, 10px, 16px;3 Values: Atas - Kanan Kiri - Bawah
margin: 25px 50px 75px;2 Values: Atas Bawah - Kanan Kiri
margin: 25px 50px;
Specify Only Margin Top
margin-top: xx;Specify Only Margin Right
margin-right: xx;Specify Only Margin Bottom
margin-bottom: xx;Specify Only Margin Left
margin-left: xx;Margin Auto
Margin Inherit
Border Style
border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
Border Color
border-color: pink;
Border Width
border-width: 5px;border-width: thin|medium|thick;
Border Radius
border-radius: 20px;border-radius: 100%;border-radius: 10px 5px 15px 35px; (top-left top-right bottom-right bottom-left)border-radius: 10px 5px 15px 35px; (top-left top-right bottom-right bottom-left)border-top-left-radius: 10px; border-top-right-radius: 5px; border-bottom-right-radius: 15px; border-bottom-left-radius: 35px;
Border Collapse
border-collapse: collapse|separate;
Border Spacing
border-spacing: 5px;
Border Shorthand
border: 2px solid red; (width style color)
CSS List
Unordered List
list-style-type: circle|square;Ordered List
list-style-type: upper-roman|lower-alpha;
CSS Images & Responsiveness
- Object Cover
- Object Fit
- Object Position
- Fit Content
- Max Content
- Min Content
- Opacity
- Filter: Grayscale, Blur, Brightness, Contrast, Invert, Saturate, Hue-rotate
CSS Display
- none
- inline
- block
- contents
- flex
- grid
- visibility: hidden
CSS Position
- static
- relative
- fixed
- absolute
- sticky
CSS Grid
- grid and inline-grid
- Grid Columns
- Grid Rows
- Grid Span
- Grid Gaps (column gap, row gap, gap)
- Grid Lines (grid column start, grid column end, grid row start, grid row end)
- Grid Template Columns & Grid Template Rows
- Grid Area & Grid Template Areas
- Justify Content: center, start, end, space-around, space-between
- Align Content: center, start, end, space-around, space-between
CSS Flexbox / Flex
- Flex Direction: row, column, row-reverse, column-reverse
- Flex Wrap: wrap, wrap-reverse, nowrap
- Flex Flow
- Justify Content: center, flex-start, flex-end, space-around, space-between
- Align Items: center, flex-start, flex-end, stretch, baseline, space-around, space-between
Z Index
CSS Overflow
- visible
- hidden
- scroll
- auto
CSS Media Queries
CSS Hover and Cursor
.classname:hover { color: red; }cursor: pointer|alias|auto|all-scroll|col-resize| crosshair|default|copy|move|zoom-in|zoom-out
Tasks and Exercises
W3 Schools
Exercises:
Quizzes:
- Mommy's Handmade Tasks