HTML Tags & Attributes (30)
Tag Description Example
<div> Container element <div>Content</div>
<span> Inline container <span>Text</span>
<a> Hyperlink <a href='url'>Link</a>
<img> Image embed <img src='[Link]'>
<p> Paragraph <p>Hello</p>
<h1> Heading <h1>Title</h1>
<ul> Unordered list <ul><li>A</li></ul>
<ol> Ordered list <ol><li>A</li></ol>
<li> List item <li>Item</li>
<table> Table <table></table>
<tr> Table row <tr></tr>
<td> Table cell <td>1</td>
<form> Form container <form></form>
<input> Input field <input type='text'>
<button> Button <button>Click</button>
<label> Label for input <label>Name</label>
<select> Dropdown <select></select>
<option> Dropdown option <option>A</option>
<textarea> Multi-line input <textarea></textarea>
<header> Page header <header></header>
<footer> Page footer <footer></footer>
<section> Section block <section></section>
<article> Article block <article></article>
<nav> Navigation <nav></nav>
<strong> Strong text <strong>Bold</strong>
<em> Emphasized text <em>Italic</em>
<br> Line break Line<br>Break
<hr> Horizontal rule <hr>
<meta> Metadata <meta charset='UTF-8'>
<link> External resource <link rel='stylesheet' href='[Link]'>
CSS Properties (30)
Property Description Example
color Text color color: red;
background-color Background color background-color: blue;
font-size Text size font-size: 16px;
font-family Font type font-family: Arial;
margin Outer spacing margin: 10px;
padding Inner spacing padding: 10px;
border Border style border: 1px solid black;
width Element width width: 100px;
height Element height height: 100px;
display Display type display: flex;
position Positioning position: relative;
top Top offset top: 10px;
left Left offset left: 10px;
right Right offset right: 10px;
bottom Bottom offset bottom: 10px;
overflow Overflow handling overflow: hidden;
text-align Text alignment text-align: center;
box-shadow Shadow effect box-shadow: 2px 2px;
border-radius Rounded corners border-radius: 5px;
opacity Transparency opacity: 0.5;
z-index Stack order z-index: 10;
flex Flex grow/shrink flex: 1;
justify-content Flex alignment justify-content: center;
align-items Cross alignment align-items: center;
grid-template-columns Grid columns grid-template-columns: 1fr 1fr;
gap Grid/Flex gap gap: 10px;
cursor Mouse cursor cursor: pointer;
visibility Visibility visibility: hidden;
white-space Text wrapping white-space: nowrap;
transition Animation transition transition: all 0.3s;
JavaScript Keywords & Methods (30)
Item Description Example
let Declare variable let x = 5;
const Constant variable const y = 10;
var Variable (old) var z = 1;
function Define function function add(a,b){return a+b;}
=> Arrow function const f = () => {};
if Conditional if(x>0){}
else Alternative branch else{}
for Loop for(let i=0;i<5;i++){}
while While loop while(x<5){}
return Return value return x;
[Link] Select element [Link]('id')
querySelector CSS selector [Link]('.c')
addEventListener Event handler [Link]('click',fn)
[Link] Debug output [Link](x);
alert Popup alert alert('Hi');
Array Array object let a=[1,2];
push Add to array [Link](3);
pop Remove last [Link]();
map Transform array [Link](x=>x*2);
filter Filter array [Link](x=>x>1);
[Link] Parse JSON [Link](s);
[Link] Stringify JSON [Link](o);
setTimeout Delay execution setTimeout(fn,1000);
setInterval Repeated execution setInterval(fn,1000);
[Link] Random number [Link]();
Date Date object new Date();
try Error handling try{}catch(e){}
catch Catch error catch(e){}
fetch HTTP request fetch(url).then()
async/await Async handling await fetch(url);