HTML

  1. HTML Starting code
    2. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
  2. Heading 1
    3. <h1>Heading</h1>
  3. Heading 2
    4. <h2>Heading</h2>
  4. Heading 3
    5. <h3>Heading</h3>
  5. Heading 4
    6. <h4>Heading</h4>
  6. Heading 5
    7. <h5>Heading</h5>
  7. Heading 6
    8. <h6>Heading</h6>
  8. Div
    9. <div>Div</div>
  9. Paragraph
    10. <p>Paragraph</p>
  10. Span
    11. <span>Span</span>
  11. Bold
    12. <b>Bold</b>
  12. Strong
    13. <strong>Strong</strong>
  13. Italic
    14. <i>Italic</i>
  14. Em
    15. <em>Emphasized text</em>
  15. Small
    16. <small>Small</small>
  16. Big
    17. <big>Big</big>
  17. Subscript
    18. <sub>Subscript</sub>
  18. Superscript
    19. <sup>Superscript</sup>
  19. Img
    20. <img src="imgname_png" alt="">
  20. Pre
    21. <pre>Hello,everyone</pre>
  21. Ordered List
    22. <ol>
   <li>Ordered list</li>
   <li>Ordered list</li>
   <li>Ordered list</li>
   <li>Ordered list</li>
</ol>
  22. Unordered List
    23. <ul>
    <li>Unordered list</li>
    <li>Unordered list</li>
    <li>Unordered list</li>
    <li>Unordered list</li>
</ul>
  23. Table
    24. <table>
<caption>Table</caption>
<thead>
<tr>
<th>Column</th>
<th colspan="2">Column2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
<tfoot>
<tr>
<td> </td>
<td>Data</td>
<td>Data</td>
</tr>
</tfoot>
</table>
  24. Form
    25. 
<form action="/action.php" method="post">
    Name: <input name="name" type="text" /> <br />
    Age: <input max="80" min="1" name="age" step="1" type="number" value="18" /> <br />
    <select name="gender">
    <option selected="selected" value="male">Male</option>
    <option value="female">Female</option>
    </select><br />
    <input checked="checked" name="newsletter" type="radio" value="daily" /> Daily <input name="newsletter"
    type="radio" value="weekly" /> Weekly<br />
    <textarea cols="20" name="comments" rows="5">Comment</textarea><br />
    <label><input name="terms" type="checkbox" value="tandc" />Accept terms</label> <br />
    <input type="submit" value="Submit" />
</form>
  25. Article
    26. <article>This is article</article>
  26. Section
    27. <section>This is section</section>
  27. Links
    28. <link rel="stylesheet" href="style.css">
<script src="script.js"></script>
  28. Marquee
    29. <marquee behavior="scroll" direction="left">Hello</marquee>

CSS

  1. Universal Selector
    2. *{
 margin:0;
 padding:0;
 box-sizing:border-box;
}
  2. Font-size
    3. font-size: 16px;
  3. Font-weight
    4. font-weight: 500;
  4. Font-family
    5. font-family: 'Courier New', Courier, monospace;
  5. Display-none
    6. display: none;
  6. Display-flex
    7. display: flex;
  7. Display-block
    8. display: block;
  8. Flex-direction-row
    9. flex-direction: row;
  9. Flex-direction-column
    10. flex-direction: column;
  10. Text-transform
    11. text-transform: uppercase;
  11. Line-height
    12. line-height: 80px;
  12. Text-Align
    13. text-align: center;
  13. Justify-Content
    14. justify-content: center;
  14. Align-Items
    15. align-items: center;
  15. Letter-spacing
    16. letter-spacing: 0.3rem;
  16. Word-spacing
    17. word-spacing: 2px;
  17. Color
    18. color: red;
  18. Background
    19. background: black;
  19. Background-color
    20. background-color: yellow;
  20. Background-size
    21. background-size: cover;
  21. Background-repeat
    22. background-repeat: no-repeat;
  22. Background-Image
    23. background-image: url('bg.png');
  23. Box-shadow
    24. box-shadow: 3px 4px 4px rgb(65, 63, 63);
  24. Max-width
    25. max-width: 991px;
  25. Max-height
    26. max-height: 888px;
  26. Min-width
    27. min-width: 300px;
  27. Min-height
    28. min-height: 200px;
  28. Overflow-hidden
    29. overflow: hidden;
  29. Overflow-auto
    30. overflow: auto;
  30. Overflow-scroll
    31. overflow: scroll;
  31. Visibility
    32. visibility: hidden;
  32. Opacity
    33. opacity: 3;
  33. Text-decoration
    34. text-decoration: none;
  34. List-style
    35. list-style: none;
  35. Position-absolute
    36. position: absolute;
  36. Position-relative
    37. position: relative;
  37. Position-fixed
    38. position: fixed;
  38. Position-sticky
    39. position: sticky;
  39. Border
    40. border: 2px solid black;
  40. Border-radius
    41. border-radius: 50%;
  41. Border-color
    42. border-color: red;
  42. Border-collapse
    43. border-collapse: seperate;
  43. Float-right
    44. float: right;
  44. Float-left
    45. float: left;
  45. Height
    46. height: 100vh;
  46. Width
    47. width: 100vh;
  47. Left
    48. left: 50%;
  48. Top
    49. top: 50%;
  49. Right
    50. right: 50%;
  50. Bottom
    51. bottom: 50%;
  51. Margin
    52. margin: 0 0 0 0;
  52. Padding
    53. padding: 0 0 0 0;
  53. Margin-top
    54. margin-top: 0px;
  54. Margin-bottom
    55. margin-bottom: 0px;
  55. Margin-left
    56. margin-left: 0px;
  56. Margin-right
    57. margin-right: 0px;
  57. Padding-top
    58. padding-top: 0px;
  58. Padding-bottom
    59. padding-bottom: 0px;
  59. Padding-left
    60. padding-left: 0px;
  60. Padding-right
    61. padding-right: 0px;
  61. Z-index
    62. z-index: -1;
  62. Center everything of webpage
    63. body{
 height: 100vh;
 display: flex;
 align-items: center;
 justify-Content: center;
}

JAVASCRIPT

  1. Function
    2. function functionName(){
 //your code goes here
}
  2. GetElementById
    3. document.getElementById('idname');
  3. GetElementByClassName
    4. document.getElementByClassName('classname');
  4. GetElementByTagName
    5. document.getElementByTagName('tagname');
  5. QuerySelector
    6. document.querySelector('name');
  6. Create Element
    7. document.createElement('p');
  7. CreateTextNode
    8. document.createTextNode('your text');
  8. Console
    9. console.log('hello');
  9. If statement
    10. if(condition){
//this code executed if the condition is true
}
  10. If-else statement
    11. if(condition1){
//this code executed if the condition is true
}
else{
//this code executed if the condition1 is false
}
  11. Else-if
    12. if(condition){
//this code executed if the condition is true
}
else if(condition2){
//this code executed if the condition1 is false
}
else{
//this code executed if the condition1 and 2 is false
}
  12. Switch statement
    13. switch(expression){
case 1:
//code
break;
case 2:
//code
break;
case 3:
//code
break;
default:
//code 
}
  13. For loop
    14. for(statement 1; statement 2; statement 3;){
//your code goes header
}
  14. While loop
    15. while(condition){
//code
}
  15. Do while loop
    16. do{
//code
i++;
} while(condition);
  16. Random number
    17. Math.floor(Math.random()*100+1);
  17. Click
    18. elem.addEventListener('click',function(){
//Code
})
  18. Mouseenter
    19. elem.addEventListener('mouseenter',function(){
//Code
})
  19. Doubleclick
    20. elem.addEventListener('dblclick',function(){
//Code
})
  20. Mouseleave
    21. elem.addEventListener('mouseleave',function(){
//Code
})
  21. Mousemove
    22. elem.addEventListener('mousemove',function(){
//Code
})
  22. Keydown
    23. elem.addEventListener('keydown',function(){
//Code
})
  23. Keypress
    24. elem.addEventListener('keypress',function(){
//Code
})
  24. Keyup
    25. elem.addEventListener('keyup',function(){
//Code
})
  25. Alert
    26. alert()
  26. Blur
    27. blur()
  27. Setinterval
    28. setInterval(()=>{
    //code
},1000)
  28. Clearinterval
    29. clearInterval()
  29. Settimeout
    30. setTimeout(()=>{
    //code
})
  30. Cleartimeout
    31. clearTimeout()
  31. Confirm
    32. confirm('Do you want to confirm');
  32. Open
    33. open('https://www.youtube.com');
  33. Prompt
    34. let username = prompt("what's your usename?");
  34. Scrollby
    35. scrollBy(50,0);
  35. ScrollTo
    36. scrollTo(300,0);
  36. Try and Catch
    37. try{
//code to try
}
catch(err){
//code to handle error
}