CynphoCode

Learn Coding Fast — Free Tutorials, Notes & Examples

— Welcome to Our Platform —

</> Languages & Information :

JS

JAVASCRIPT

# JavaScript is the programming language of the Web.
# JavaScript can update and change both HTML and CSS.
# JavaScript can calculate, manipulate, and validate data.

CSS

# CSS stands for Cascading Style Sheets.
# CSS describes how HTML elements are displayed on screen, paper, or in other media.
# CSS saves a lot of work — it can control multiple web pages at once.

HTML

# HTML stands for Hyper Text Markup Language.
# It is the standard markup language for creating web pages.
# HTML elements tell the browser how to display the content.

NODE

NODE.JS

# Node.js runs JavaScript outside the browser.
# Built on Chrome's V8 engine — fast and efficient.
# Used for backend development, APIs, and real-time apps.

PY

PYTHON

# Python is a high-level, easy-to-read programming language.
# Supports OOP, procedural, and functional paradigms.
# Widely used in AI, data science, web dev, and automation.

C++

# C++ is a fast, compiled, systems-level programming language.
# Extends C with object-oriented and generic programming features.
# Used in game engines, operating systems, and embedded systems.

C#

# C# is a modern, type-safe language built by Microsoft.
# Runs on the .NET platform — great for Windows and cross-platform apps.
# Powers Unity game development, enterprise software, and web APIs.

TW

TAILWIND CSS

# Tailwind CSS is a utility-first CSS framework.
# Build custom designs directly in your HTML — no separate CSS files needed.
# Fast, responsive, and fully configurable with a tiny production bundle.

JAVA

# Java is a class-based, object-oriented programming language.
# It runs on the JVM, which makes it cross-platform and reliable.
# Commonly used for Android apps, enterprise systems, backend APIs, and desktop software.

PHP

# PHP is a server-side scripting language built for web development.
# It is widely used to process forms, connect databases, and build dynamic websites.
# Popular platforms like WordPress and many CMS tools are powered by PHP.

C

# C is a fast, compiled programming language close to system hardware.
# It is used in operating systems, embedded systems, drivers, and performance-critical tools.
# Learning C builds a strong understanding of memory, pointers, and low-level programming.

GO

# Go is a fast, compiled language designed for simplicity and scalability.
# It is widely used for APIs, cloud services, backend systems, and DevOps tools.
# Go is known for clean syntax, strong performance, and built-in concurrency support.

RB

RUBY

# Ruby is a clean and expressive programming language focused on developer happiness.
# It is popular for web development with Ruby on Rails, scripting, and automation.
# Ruby reads naturally, making it friendly for beginners and productive for teams.

RS

RUST

# Rust is a modern systems programming language focused on speed and memory safety.
# It helps developers build reliable software without common crashes like null or memory bugs.
# Rust is used in systems tools, WebAssembly, CLI apps, and high-performance services.

KT

KOTLIN

# Kotlin is a modern programming language that runs on the JVM and works well with Java.
# It is widely used for Android development, backend applications, and multiplatform projects.
# Kotlin offers concise syntax, null safety, and strong support for modern app development.

KALI

KALI LINUX

# Kali Linux is a security-focused Linux distribution used for penetration testing and research.
# It includes many tools for ethical hacking, digital forensics, networking, and security auditing.
# Learning Kali Linux helps developers and security learners understand real-world cybersecurity workflows.

This website has been created especially for beginners as well as professional programmers to support them throughout their development journey.

All notes are carefully prepared and updated every month to ensure accuracy, relevance, and reliability.

The platform is completely free to use.

We hope these resources help you learn efficiently and grow confidently in your programming journey.

All information was taken from:
Debashis Sarkar Jit | Abdur Rahim | Rohan Sarkar | Nehal Chowdhory

About CynphoCode

CynphoCode is a free developer learning platform created to make programming notes simple, useful, and easy to understand. It is designed for beginners who are just starting and for experienced developers who want quick reference material while working, revising, or practicing.

The goal is to keep everything clean, practical, and accessible in one place so learners can focus on understanding code instead of searching through scattered resources.

§ What We Cover

CynphoCode currently includes notes and reference content for JavaScript, HTML, CSS, Python, Node.js, C, C++, C#, Java, PHP, and Tailwind CSS. We are also expanding with Go, Ruby, Rust, Kotlin, and Kali Linux to support backend, systems, mobile, and cybersecurity learning paths.

JS HTML CSS Python Node.js C C++ C# Java PHP Tailwind Go Ruby Rust Kotlin Kali Linux

§ Our Mission

Our mission is to make code learning clearer and less stressful. Every note is written to be beginner-friendly, readable, and practical, while still staying technically correct and useful for real development work.

§ Our Goal

We want CynphoCode to become a trusted free place for learning programming, revising concepts, and exploring new technologies. That includes not only web development, but also backend tools, systems programming, and security-focused topics.

§ Credits & Sources

Content sourced and inspired by:

◆ Debashis Sarakar Jit

§ The Team

We are two developers who built CynphoCode from scratch. We believe coding knowledge should be free, simple, and accessible for everyone — so we created this place to make that happen.

◆ Debashis Sarakar Jit

Co-Founder & Lead Developer. Builds and maintains the core structure, content, and features of CynphoCode.

Platform: CynphoCode

◆ Abdur Rahim

Co-Founder & Content Contributor. Completed a Diploma in Electrical Engineering. Passionate about technology and AI.

LinkedIn Profile

Contact CynphoCode

Have a question, found an error, or want notes for Go, Ruby, Rust, Kotlin, or Kali Linux? Send a message here and we will review it as soon as possible.

§ Contact Info

jitdebashissarkar@gmail.com

◆

Platform

CynphoCode

◆

Response Time

Usually within 24-48 hours

⚙

Best For

Bug reports, note requests, topic suggestions, and feedback

§ Frequently Asked Questions

Use the contact form above and mention the page, topic, and what looks incorrect.

Yes. Send your request through the contact form and mention which topic you want added next.

Yes. CynphoCode is completely free and built to support learners and developers at every stage.

Notes are reviewed regularly, and important fixes can be applied whenever users report issues or request improvements.

{ Python }

Python is a beginner-friendly and powerful programming language used in automation, web development, machine learning, data science, scripting, and problem solving. These cards use simple examples so learners can read, copy, and understand each concept quickly.

§ Chapter 1 — Getting Started

#1 Starting.py

print("Hello World!")

▶ Output

Hello World!

◆ Explanation

print() is a built-in Python function that writes its argument to the console, followed by a newline. "Hello World!" is a string literal — text enclosed in double quotes. This is the traditional first program confirming your environment is set up correctly.

§ Chapter 2 — Data & Variables

#1 Datatypes.py

a = 1          # integer
b = 5.22       # float
c = "Harry"    # string
d = False      # boolean
e = None       # NoneType

▶ Output

(No output — only assignments)

◆ Explanation

Python's core types: int (whole numbers), float (decimals), str (text), bool (True/False), None (absence of value). Python is dynamically typed — no need to declare types explicitly.

#2 input.py

a = int(input("Enter number 1: "))
b = int(input("Enter number 2: "))
print("Number a is:", a)
print("Number b is:", b)
print("Sum is:", a + b)

▶ Output (example: 3, 7)

Number a is: 3 Number b is: 7 Sum is: 10

◆ Explanation

input() pauses the program waiting for user input and returns a string. int() converts it to an integer. Without int(), "3"+"7" = "37" (string concat) instead of 10 (math).

#3 Operators.py

# Arithmetic Operators
a = 7; b = 4; c = a + b
print(c)          # 11

# Assignment Operators
a = 4 - 2; print(a)   # 2
b = 6; b -= 3; print(b) # 3

# Comparison Operators
print(5 < 4)   # False
print(5 >= 5)  # True
print(5 != 7)  # True

# Logical Operators
print(True or False)  # True

▶ Output

11 2 3 False True True True

◆ Explanation

Arithmetic: +, -, *, /, //, %. Assignment shortcuts: -= subtracts and assigns. Comparison returns True/False. Logical: 'or' returns True if at least one side is True.

#4 Rules_variables.py

a = 23
aaa = 324
harry = 23
_sammer = 12
# @sammer = 12   # Invalid: special chars not allowed
# 3sameer = 12   # Invalid: cannot start with digit

▶ Output

(No output — only assignments)

◆ Explanation

Rules: start with letter or underscore, use only letters/numbers/underscores, cannot start with digit, no special chars (@#!), cannot be a keyword. Convention: use snake_case.

#5 Types.py

a = "Harry"
t = type(a)
print(t)   # <class 'str'>

▶ Output

◆ Explanation

type() returns the data type of any variable. float("Harry") would raise ValueError — you can only convert strings that look like numbers (e.g. float("3.14") works).

#6 Variables.py

a = 1
b = 2
print(a + b)

▶ Output

3

◆ Explanation

Variables store values in memory. print(a + b) evaluates 1 + 2 = 3, then prints it. Variables can be reassigned: a = 10 overwrites the old value.

§ Chapter 3 — Strings

#1 Intro_to_strings.py

name = "Harry"
nameshort = name[0:3]   # index 0 to 2
print(nameshort)        # Har
character1 = name[1]
print(character1)       # a

▶ Output

Har a

◆ Explanation

Strings are indexed from 0. name[0:3] slices from index 0 up to (not including) 3 → "Har". name[1] gets character at index 1 → "a".

#2 negative_slicing.py

name = "Harry"
print(name[0:3])    # Har
print(name[-4:-1])  # arr
print(name[:4])     # Harr
print(name[1:])     # arry

▶ Output

Har arr Harr arry

◆ Explanation

Negative indices count from the end: name[-1]='y', name[-4]='a'. name[:4] defaults start to 0. name[1:] defaults end to len(name). Slicing never raises IndexError.

#3 str_functions.py

name = "harry"
print(len(name))              # 5
print(name.endswith("rry"))   # True
print(name.startswith("ha"))  # True
print(name.capitalize())      # Harry

▶ Output

5 True True Harry

◆ Explanation

len() returns character count. .endswith() / .startswith() check substring at end/start. .capitalize() uppercases first letter. Other useful methods: .upper(), .lower(), .strip(), .split(), .replace().

#4 & #5 escape_sequences.py

# \n = newline
a = "Harry is a good boy.\nBut not a bad boy."
print(a)

# \" = literal double quote
b = 'Shamita:"Do you know him?"'
print(b)

# \t = tab
c = "Harry\tis good"
print(c)

▶ Output

Harry is a good boy. But not a bad boy. Shamita:"Do you know him?" Harry is good

◆ Explanation

Escape sequences: \n = newline, \t = tab, \" = literal double quote, \' = literal single quote, \\ = literal backslash. They let you include special formatting or characters inside strings.

§ Chapter 4 — Lists & Tuples

#1 list.py

friends = ["Apple", "Orange", 5, 345.06, False]
print(friends[0])        # Apple
friends[0] = "Grapes"   # mutable!
print(friends[0])        # Grapes
print(friends[1:4])      # ['Orange', 5, 345.06]

▶ Output

Apple Grapes ['Orange', 5, 345.06]

◆ Explanation

Lists are ordered, mutable collections in []. They can hold mixed types. Unlike strings, you can change elements: friends[0] = "Grapes" overwrites the first element.

#2 list_methods.py

l1 = [1, 243, 54, 654, 2, 0, 76]
l1.append(99)     # add to end
l1.sort()         # sort ascending
l1.reverse()      # reverse
l1.remove(243)    # remove first occurrence
print(l1)

▶ Output

[99, 76, 54, 2, 1, 0]

◆ Explanation

Common list methods: .append(x) adds to end, .sort() sorts in place, .reverse() reverses in place, .remove(x) removes first occurrence, .pop(i) removes at index and returns it, .insert(i,x) inserts at position.

#3 tuple.py & tuple_methods.py

a = (1, 45, 45, 2923, 32, False, "Rohan")
print(type(a))          # <class 'tuple'>
print(a.count(45))      # 2
print(a.index(False))   # 5

▶ Output

<class 'tuple'> 2 5

◆ Explanation

Tuples are like lists but IMMUTABLE — defined with (). .count(x) counts occurrences. .index(x) returns position of first occurrence. Note: False == 0 in Python, so index returns 5.

§ Chapter 5 — Dicts & Sets

#1 dict.py

marks = {"Harry": 100, "Lisa": 56, "Ash": 23}
print(marks["Harry"])          # 100
print(marks.get("Harry2"))     # None (no error)
# print(marks["Harry2"])       # KeyError!

▶ Output

100 None

◆ Explanation

Dictionaries store key-value pairs in {}. Access with dict["key"] (raises KeyError if missing) or .get("key") (returns None safely). Always prefer .get() when key might not exist.

#2 sets.py

s1 = {1, 45, 6, 78}
s2 = {7, 8, 1, 78}
s1.add(566)
s1.remove(1)
print(s1.union(s2))          # all unique
print(s1.intersection(s2))   # common elements

▶ Output

{6, 7, 8, 45, 78, 566} {78}

◆ Explanation

Sets are unordered collections of unique elements. Use set() for empty set (not {} which creates an empty dict). .union() combines all unique elements, .intersection() returns only common ones.

§ Chapter 6 — Conditionals

#1 conditionals.py

a = int(input("Enter your age: "))
if a >= 18:
    print("Above the age of consent")
elif a < 0:
    print("Invalid age")
else:
    print("Below the age of consent")
print("End of program")

▶ Output (age=20)

Above the age of consent End of program

◆ Explanation

if/elif/else checks conditions in order. Only ONE block executes. Python uses indentation to define blocks. "End of program" always prints — it's outside all branches.

§ Chapter 7 — Loops

#1 for_loops.py

for i in range(0, 5):
    print(i)

s = "Harry"
for ch in s:
    print(ch)

▶ Output

0 1 2 3 4 H a r r y

◆ Explanation

range(0,5) generates 0,1,2,3,4. for loops iterate over any iterable: strings, lists, tuples, dicts, sets. "for ch in s" iterates over each character of "Harry".

#2 while_break_continue.py

i = 1
while i <= 5:
    print(i)
    i += 1

for i in range(10):
    if i == 5: break    # exit loop
    if i == 3: continue # skip iteration
    print(i)

▶ Output

1 2 3 4 5 0 1 2 4

◆ Explanation

while loops run while condition is True. break exits the loop immediately. continue skips the current iteration. i+=1 is critical — without it, infinite loop! pass is a no-op placeholder.

§ Chapter 8 — Functions

#1 functions.py

def goodDay(name, ending="Thank you"):
    print(f"Good Day, {name}")
    print(ending)
    return "ok"

a = goodDay("Harry", "Thanks")
goodDay("Rohan")   # uses default

▶ Output

Good Day, Harry Thanks Good Day, Rohan Thank you

◆ Explanation

def defines a function. Default arguments (ending="Thank you") are optional. f-strings embed variables in strings using {var}. return sends a value back. Default params must come AFTER non-default ones.

#2 recursion.py

def factorial(n):
    if n == 0 or n == 1:
        return 1          # base case
    return n * factorial(n - 1)

print(factorial(5))   # 120

▶ Output

120

◆ Explanation

Recursion: a function calls itself. factorial(5)=5×4×3×2×1=120. The base case (n==0 or n==1) stops recursion — without it, you get infinite RecursionError.

§ Chapter 9 — File Handling

#1 file_read_write.py

# Read
with open("file.txt") as f:
    data = f.read()
    print(data)

# Write
with open("out.txt", "w") as f:
    f.write("Hello sanjida!")

# Read all lines as list
with open("file.txt") as f:
    lines = f.readlines()
    print(lines)

▶ Output

(Contents of file.txt) ['Line 1\n', 'Line 2\n', ...]

◆ Explanation

Modes: "r"=read(default), "w"=write(erases!), "a"=append. Best practice: use 'with open(...)' — it auto-closes the file even if an error occurs. .readlines() returns a list, one string per line.

§ Chapter 10 — Classes & Objects

#1 class_and_init.py

class Employee:
    language = "py"     # class attribute
    salary = 120000

    def __init__(self, name, salary, language):
        self.name = name
        self.salary = salary
        self.language = language

    def getInfo(self):
        print(f"Language: {self.language}, Salary: {self.salary}")

    @staticmethod
    def greet():
        print("Good morning")

harry = Employee("Harry", 130000, "Java")
harry.getInfo()
harry.greet()

▶ Output

Language: Java, Salary: 130000 Good morning

◆ Explanation

__init__ is the constructor — called automatically when creating an object. self refers to the current instance. Class attributes are shared; instance attributes are per-object. @staticmethod methods don't receive self.

§ Chapter 11 — Inheritance

#1 inheritance.py

class Employee:
    company = "ITC"
    def show(self):
        print(f"Name: {self.name}")

class Programmer(Employee):
    company = "ITC Infotech"
    def showLanguage(self):
        print(f"Language: {self.language}")

print(Employee.company, Programmer.company)

▶ Output

ITC ITC Infotech

◆ Explanation

class Programmer(Employee) inherits all of Employee's methods. Programmer adds .showLanguage() and overrides company. Child classes get everything from the parent for free.

#2 super_and_classmethod.py

class Manager(Programmer):
    def __init__(self):
        super().__init__()   # calls parent constructor
        print("Constructor of Manager")

class Employee:
    a = 1
    @classmethod
    def show(cls):
        print(f"Class attr a = {cls.a}")

    @property
    def name(self):
        return f"{self.fname} {self.lname}"

    @name.setter
    def name(self, value):
        self.fname = value.split(" ")[0]
        self.lname = value.split(" ")[1]

▶ Output

Constructor of Manager

◆ Explanation

super().__init__() calls the parent's constructor. @classmethod receives the class (cls) not an instance. @property turns a method into a readable attribute. @name.setter defines assignment logic.

§ Chapter 12 — Advanced Python

#1 walrus_and_types.py

# Walrus operator :=
if (n := len([1, 2, 3, 4, 5])) > 3:
    print(f"List too long ({n} elements)")

# Type hints
n: int = 5
name: str = "Harry"
def add(a: int, b: int) -> int:
    return a + b

▶ Output

List too long (5 elements)

◆ Explanation

Walrus := assigns and returns value in one step (Python 3.8+). Type hints annotate expected types but are NOT enforced at runtime — they help IDEs and tools like mypy catch errors.

#2 match_and_exceptions.py

def http_status(status):
    match status:
        case 200: return "OK"
        case 404: return "Not Found"
        case 500: return "Internal Server Error"
        case _:   return "Unknown"

try:
    a = int(input("Enter a number: "))
    print(a)
except ValueError as v:
    print("Invalid input:", v)
print("Thank You")

▶ Output (input "abc")

Invalid input: invalid literal for int() with base 10: 'abc' Thank You

◆ Explanation

match/case (Python 3.10+): like switch/case. case _ is the wildcard. try/except handles errors gracefully. "Thank You" always prints since it's outside the try/except block.

{ JavaScript }

JavaScript is a powerful programming language used for web interactivity, DOM control, browser events, and dynamic applications. These cards use clean beginner-friendly examples with comments so learners can copy and understand the code easily.

Basics

#1 variables.js

// let = value can change
	let age = 20;
	
	// const = value cannot be reassigned
	const country = "Bangladesh";
	
	// var = older way to declare variables
	var oldName = "Rafi";
	
	age = 21;
	oldName = "Amina";
	
	console.log(age);
	console.log(country);
	console.log(oldName);

▶ Output

21 Bangladesh Amina

◆ Explanation

let can be changed, const cannot be reassigned, and var is the older way to declare variables.

#2 data-types.js

// Common JavaScript data types
	let numberValue = 100;
	let textValue = "Hello JavaScript";
	let isPassed = true;
	let colors = ["red", "green"];
	let user = { name: "Rahim", age: 20 };
	let emptyValue = null;
	let notAssigned;
	
	console.log(typeof numberValue);
	console.log(typeof textValue);
	console.log(typeof isPassed);
	console.log(typeof colors);
	console.log(typeof user);
	console.log(emptyValue);
	console.log(notAssigned);

▶ Output

number string boolean object object null undefined

◆ Explanation

This card shows Number, String, Boolean, Array, Object, null, and undefined. Arrays also return object with typeof.

#3 output-input.js

// Browser input
	let name = prompt("Enter your name");
	
	// Browser output
	alert("Welcome, " + name);
	
	// Console output
	console.log("Hello, " + name);

▶ Output

A prompt box asks for a name, then an alert shows a welcome message, and the console logs the same name.

◆ Explanation

prompt takes browser input, alert shows a popup message, and console.log prints output in the browser console.

#4 operators.js

let a = 10;
	let b = 3;
	
	// Arithmetic operators
	console.log(a + b);
	console.log(a - b);
	console.log(a * b);
	console.log(a / b);
	console.log(a % b);
	
	// Comparison operators
	console.log(a > b);
	console.log(a === b);
	
	// Logical operators
	console.log(a > 5 && b < 5);
	console.log(a < 5 || b < 5);
	
	// Assignment operator
	let total = 5;
	total += 2;
	console.log(total);

▶ Output

13 7 30 3.3333333333333335 1 true false true true 7

◆ Explanation

This card covers arithmetic, comparison, logical, and assignment operators in JavaScript.

#5 conditionals.js

let marks = 75;
	
	if (marks >= 80) {
	    console.log("A+");
	} else if (marks >= 70) {
	    console.log("A");
	} else {
	    console.log("Need more practice");
	}
	
	let day = 2;
	
	switch (day) {
	    case 1:
	        console.log("Saturday");
	        break;
	    case 2:
	        console.log("Sunday");
	        break;
	    default:
	        console.log("Unknown day");
	}

▶ Output

A Sunday

◆ Explanation

if, else if, else, and switch are used to make decisions based on conditions.

#6 loops.js

// for loop
	for (let i = 1; i <= 3; i++) {
	    console.log(i);
	}
	
	// while loop
	let j = 1;
	while (j <= 3) {
	    console.log(j);
	    j++;
	}
	
	// do...while loop
	let k = 1;
	do {
	    console.log(k);
	    k++;
	} while (k <= 3);
	
	// for...of loop
	for (const item of ["A", "B", "C"]) {
	    console.log(item);
	}

▶ Output

1 2 3 1 2 3 1 2 3 A B C

◆ Explanation

This card shows for, while, do...while, and for...of loops for repeating code.

Functions & Data

#7 functions.js

// Regular function
	function add(a, b) {
	    return a + b;
	}
	
	// Arrow function
	const square = (n) => {
	    return n * n;
	};
	
	console.log(add(5, 7));
	console.log(square(4));

▶ Output

12 16

◆ Explanation

Functions let you define reusable code. Parameters receive values, and return sends a result back.

#8 arrays.js

// Array example
	let colors = ["red", "green", "blue"];
	
	// Add item
	colors.push("yellow");
	
	// Remove last item
	colors.pop();
	
	console.log(colors[0]);
	console.log(colors.length);
	
	colors.forEach((color) => {
	    console.log(color);
	});

▶ Output

red 3 red green blue

◆ Explanation

Arrays store multiple values. push adds an item, pop removes the last item, and forEach loops through all items.

#9 strings.js

let firstName = "Java";
	let lastName = "Script";
	
	// Concatenation
	let fullName = firstName + " " + lastName;
	
	console.log(fullName);
	console.log(fullName.length);
	console.log(fullName.toUpperCase());
	console.log(fullName.slice(0, 4));

▶ Output

Java Script 11 JAVA SCRIPT Java

◆ Explanation

This card covers string concatenation, length, uppercase conversion, and slice.

#10 objects.js

// Object example
	let student = {
	    name: "Rafi",
	    age: 20,
	    city: "Dhaka"
	};
	
	// Update property
	student.age = 21;
	
	console.log(student.name);
	console.log(student["city"]);
	console.log(student.age);

▶ Output

Rafi Dhaka 21

◆ Explanation

Objects store data in key-value pairs. You can access properties using dot notation or bracket notation.

#11 json.js

// JavaScript object
	let user = {
	    name: "Amina",
	    age: 22
	};
	
	// Convert object to JSON text
	let jsonText = JSON.stringify(user);
	
	// Convert JSON text back to object
	let parsedUser = JSON.parse(jsonText);
	
	console.log(jsonText);
	console.log(parsedUser.name);

▶ Output

{"name":"Amina","age":22} Amina

◆ Explanation

JSON.stringify converts an object into JSON text, and JSON.parse turns JSON text back into a JavaScript object.

DOM & Browser

#12 dom-selection.js

// HTML example:
	// <h1 id="title">Hello</h1>
	// <p class="text">Paragraph</p>
	
	const title = document.getElementById("title");
	const text = document.querySelector(".text");
	
	console.log(title);
	console.log(text);

▶ Output

Selected DOM elements are logged in the browser console.

◆ Explanation

document.getElementById selects by id, and querySelector selects the first matching CSS selector.

#13 dom-events.js

// HTML example:
	// <button id="btn">Click</button>
	// <h1 id="title">Old Title</h1>
	
	const button = document.getElementById("btn");
	const title = document.getElementById("title");
	
	button.addEventListener("click", function () {
	    title.textContent = "Button Clicked";
	    title.style.color = "blue";
	});

▶ Output

When the button is clicked, the heading text changes and its color becomes blue.

◆ Explanation

addEventListener listens for an event like click. textContent changes text, and style changes CSS from JavaScript.

Asynchronous JavaScript

#14 callbacks.js

// Callback example
	function getMessage(callback) {
	    setTimeout(function () {
	        callback("Data loaded");
	    }, 1000);
	}
	
	console.log("Start");
	
	getMessage(function (message) {
	    console.log(message);
	});
	
	console.log("End");

▶ Output

Start End Data loaded

◆ Explanation

A callback is a function passed into another function. It runs later when the async task finishes.

#15 promises-async.js

// Function returning a Promise
	function getData() {
	    return new Promise(function (resolve) {
	        setTimeout(function () {
	            resolve("Promise resolved");
	        }, 1000);
	    });
	}
	
	// async / await example
	async function showData() {
	    const result = await getData();
	    console.log(result);
	}
	
	showData();

▶ Output

Promise resolved

◆ Explanation

A Promise represents a future result. async makes a function asynchronous, and await waits for the Promise result.

Errors & Practice

#16 error-handling.js

try {
	    // Convert JSON text to object
	    let user = JSON.parse('{"name":"Node"}');
	    console.log(user.name);
	
	    // Create a custom error
	    throw new Error("Custom error");
	} catch (error) {
	    console.log(error.message);
	}

▶ Output

Node Custom error

◆ Explanation

try runs risky code, and catch handles the error so the program does not stop suddenly.

#17 problem-solving.js

// Sum from 1 to 5
	let sum = 0;
	
	for (let i = 1; i <= 5; i++) {
	    sum += i;
	}
	
	console.log(sum);
	
	// Small star pattern
	for (let i = 1; i <= 3; i++) {
	    console.log("*".repeat(i));
	}
	
	// Find the largest number
	let numbers = [12, 45, 7, 89, 23];
	let largest = numbers[0];
	
	for (const number of numbers) {
	    if (number > largest) {
	        largest = number;
	    }
	}
	
	console.log(largest);

▶ Output

15 * ** *** 89

◆ Explanation

This card includes simple sum logic, pattern printing, and finding the largest number from an array.

{ C }

C is a powerful procedural programming language used for system programming, embedded software, operating systems, and problem solving. These cards use clean beginner-friendly examples with comments so learners can copy and understand the code easily.

Basics

#1 variables.c

#include <stdio.h>
	
	int main() {
	    // Basic variables
	    int age = 20;
	    float price = 99.5f;
	    double pi = 3.14159;
	    char grade = 'A';
	
	    printf("%d\n", age);
	    printf("%.1f\n", price);
	    printf("%.5lf\n", pi);
	    printf("%c\n", grade);
	
	    return 0;
	}

▶ Output

20 99.5 3.14159 A

◆ Explanation

This card shows C variables using int, float, double, and char. In C, every variable must be declared with a type.

#2 data-types.c

#include <stdio.h>
	
	int main() {
	    int number = 10;
	    float price = 5.5f;
	    double pi = 3.14159;
	    char letter = 'X';
	
	    // Show size of data types
	    printf("Size of int: %zu bytes\n", sizeof(int));
	    printf("Size of float: %zu bytes\n", sizeof(float));
	    printf("Size of double: %zu bytes\n", sizeof(double));
	    printf("Size of char: %zu byte\n", sizeof(char));
	
	    // Type conversion
	    double converted = (double) number;
	    int shortValue = (int) pi;
	
	    printf("int to double: %.1lf\n", converted);
	    printf("double to int: %d\n", shortValue);
	
	    return 0;
	}

▶ Output

Common output on most systems: Size of int: 4 bytes Size of float: 4 bytes Size of double: 8 bytes Size of char: 1 byte int to double: 10.0 double to int: 3

◆ Explanation

This example shows common C data types, the sizeof operator, and type casting. Exact sizes can vary by system.

#3 input-output.c

#include <stdio.h>
	
	int main() {
	    char name[20];
	    int age;
	    float salary;
	
	    // Taking multiple inputs
	    scanf("%19s %d %f", name, &age, &salary);
	
	    // Showing multiple outputs
	    printf("Name: %s\n", name);
	    printf("Age: %d\n", age);
	    printf("Salary: %.1f\n", salary);
	
	    return 0;
	}

▶ Output

Sample input: Rahim 20 5500.5 Sample output: Name: Rahim Age: 20 Salary: 5500.5

◆ Explanation

scanf takes input and printf shows output. `%s`, `%d`, and `%f` are format specifiers for string, int, and float.

#4 operators.c

#include <stdio.h>
	
	int main() {
	    int a = 10;
	    int b = 3;
	
	    // Arithmetic operators
	    printf("%d\n", a + b);
	    printf("%d\n", a - b);
	    printf("%d\n", a * b);
	    printf("%d\n", a / b);
	    printf("%d\n", a % b);
	
	    // Comparison operators
	    printf("%d\n", a > b);
	    printf("%d\n", a == b);
	
	    // Logical operators
	    printf("%d\n", (a > 5) && (b < 5));
	    printf("%d\n", (a < 5) || (b < 5));
	
	    // Assignment operator
	    int total = 5;
	    total += 2;
	    printf("%d\n", total);
	
	    return 0;
	}

▶ Output

13 7 30 3 1 1 0 1 1 7

◆ Explanation

This card covers arithmetic, comparison, logical, and assignment operators. In C, true is usually shown as 1 and false as 0.

#5 conditionals.c

#include <stdio.h>
	
	int main() {
	    int marks = 75;
	
	    // if / else if / else
	    if (marks >= 80) {
	        printf("Grade A+\n");
	    } else if (marks >= 70) {
	        printf("Grade A\n");
	    } else {
	        printf("Need more practice\n");
	    }
	
	    // switch statement
	    int day = 2;
	
	    switch (day) {
	        case 1:
	            printf("Saturday\n");
	            break;
	        case 2:
	            printf("Sunday\n");
	            break;
	        default:
	            printf("Unknown day\n");
	    }
	
	    return 0;
	}

▶ Output

Grade A Sunday

◆ Explanation

This example shows if, else if, else, and switch for decision making in C.

#6 loops.c

#include <stdio.h>
	
	int main() {
	    // for loop
	    for (int i = 1; i <= 3; i++) {
	        printf("%d ", i);
	    }
	    printf("\n");
	
	    // while loop
	    int j = 1;
	    while (j <= 3) {
	        printf("%d ", j);
	        j++;
	    }
	    printf("\n");
	
	    // do...while loop
	    int k = 1;
	    do {
	        printf("%d ", k);
	        k++;
	    } while (k <= 3);
	    printf("\n");
	
	    // nested loop
	    for (int row = 1; row <= 2; row++) {
	        for (int col = 1; col <= 3; col++) {
	            printf("*");
	        }
	        printf("\n");
	    }
	
	    return 0;
	}

▶ Output

1 2 3 1 2 3 1 2 3 *** ***

◆ Explanation

This card shows for, while, do...while, and nested loops for repeated execution.

Functions & Arrays

#7 functions.c

#include <stdio.h>
	
	// Function declarations
	int add(int a, int b);
	int factorial(int n);
	
	int main() {
	    printf("%d\n", add(5, 7));
	    printf("%d\n", factorial(5));
	
	    return 0;
	}
	
	// Function definition
	int add(int a, int b) {
	    return a + b;
	}
	
	// Recursive function
	int factorial(int n) {
	    if (n == 0 || n == 1) {
	        return 1;
	    }
	    return n * factorial(n - 1);
	}

▶ Output

12 120

◆ Explanation

This example shows function declaration, definition, parameters, return value, and recursion.

#8 arrays.c

#include <stdio.h>
	
	int main() {
	    // One-dimensional array
	    int numbers[5] = {10, 20, 30, 40, 50};
	
	    // Update first value
	    numbers[0] = 100;
	
	    for (int i = 0; i < 5; i++) {
	        printf("%d ", numbers[i]);
	    }
	    printf("\n");
	
	    // Two-dimensional array
	    int matrix[2][2] = {
	        {1, 2},
	        {3, 4}
	    };
	
	    for (int i = 0; i < 2; i++) {
	        for (int j = 0; j < 2; j++) {
	            printf("%d ", matrix[i][j]);
	        }
	        printf("\n");
	    }
	
	    return 0;
	}

▶ Output

100 20 30 40 50 1 2 3 4

◆ Explanation

This example shows one-dimensional arrays, two-dimensional arrays, iteration, and basic update operations.

#9 strings.c

#include <stdio.h>
	#include <string.h>
	
	int main() {
	    char first[20] = "Hello";
	    char second[] = "World";
	    char full[50];
	
	    // Copy and join strings
	    strcpy(full, first);
	    strcat(full, " ");
	    strcat(full, second);
	
	    printf("%s\n", full);
	
	    // String length
	    printf("%lu\n", strlen(full));
	
	    // Print first 5 characters
	    printf("%.5s\n", full);
	
	    return 0;
	}

▶ Output

Hello World 11 Hello

◆ Explanation

This card shows how to work with strings in C using `strcpy`, `strcat`, and `strlen` from `string.h`.

Memory & Structures

#10 pointers.c

#include <stdio.h>
	
	int main() {
	    int num = 10;
	
	    // Pointer stores the address of num
	    int *ptr = &num;
	
	    printf("%d\n", num);
	    printf("%p\n", (void *) ptr);
	    printf("%d\n", *ptr);
	
	    // Change value through pointer
	    *ptr = 25;
	    printf("%d\n", num);
	
	    return 0;
	}

▶ Output

10 A memory address like 0x7ff... 10 25

◆ Explanation

A pointer stores an address, and `*ptr` gives the value stored at that address. Memory address changes on different runs and systems.

#11 structures.c

#include <stdio.h>
	
	// Structure declaration
	struct Student {
	    char name[20];
	    int age;
	    float cgpa;
	};
	
	int main() {
	    // Structure variable
	    struct Student s1 = {"Amina", 20, 3.75f};
	
	    printf("%s\n", s1.name);
	    printf("%d\n", s1.age);
	    printf("%.2f\n", s1.cgpa);
	
	    return 0;
	}

▶ Output

Amina 20 3.75

◆ Explanation

Structures let you group related values together under one name, like name, age, and cgpa for a student.

#12 file-handling.c

#include <stdio.h>
	
	int main() {
	    FILE *file;
	    char line[100];
	
	    // Write to a file
	    file = fopen("demo.txt", "w");
	    fprintf(file, "Hello from C file handling");
	    fclose(file);
	
	    // Read from the same file
	    file = fopen("demo.txt", "r");
	    fgets(line, sizeof(line), file);
	    printf("%s\n", line);
	    fclose(file);
	
	    return 0;
	}

▶ Output

Hello from C file handling

◆ Explanation

`fopen` opens a file, `fprintf` writes to it, `fgets` reads from it, and `fclose` closes it.

#13 dynamic-memory.c

#include <stdio.h>
	#include <stdlib.h>
	
	int main() {
	    // Allocate memory for one integer
	    int *number = (int *) malloc(sizeof(int));
	
	    if (number == NULL) {
	        return 1;
	    }
	
	    *number = 50;
	    printf("%d\n", *number);
	
	    // Allocate memory for an array
	    int *arr = (int *) malloc(3 * sizeof(int));
	
	    if (arr == NULL) {
	        free(number);
	        return 1;
	    }
	
	    arr[0] = 10;
	    arr[1] = 20;
	    arr[2] = 30;
	
	    for (int i = 0; i < 3; i++) {
	        printf("%d ", arr[i]);
	    }
	    printf("\n");
	
	    // Free allocated memory
	    free(number);
	    free(arr);
	
	    return 0;
	}

▶ Output

50 10 20 30

◆ Explanation

`malloc` allocates memory during runtime and `free` releases it. This is called dynamic memory allocation.

Extra & Practice

#14 preprocessor.c

#include <stdio.h>
	
	// Macro constant
	#define PI 3.14159
	
	// Macro function
	#define SQUARE(x) ((x) * (x))
	
	int main() {
	    int num = 5;
	
	    printf("%.2f\n", PI);
	    printf("%d\n", SQUARE(num));
	
	    return 0;
	}

▶ Output

3.14 25

◆ Explanation

The C preprocessor runs before compilation. `#define` is used to create constants and simple macros.

#15 problem-solving.c

#include <stdio.h>
	
	int main() {
	    // Sum from 1 to 5
	    int sum = 0;
	    for (int i = 1; i <= 5; i++) {
	        sum += i;
	    }
	    printf("%d\n", sum);
	
	    // Small star pattern
	    for (int i = 1; i <= 3; i++) {
	        for (int j = 1; j <= i; j++) {
	            printf("*");
	        }
	        printf("\n");
	    }
	
	    // Find the largest number
	    int numbers[5] = {12, 45, 7, 89, 23};
	    int largest = numbers[0];
	
	    for (int i = 1; i < 5; i++) {
	        if (numbers[i] > largest) {
	            largest = numbers[i];
	        }
	    }
	
	    printf("%d\n", largest);
	
	    return 0;
	}

▶ Output

15 * ** *** 89

◆ Explanation

This card includes simple logic building, loops, pattern printing, and finding the largest number from an array.

{ CSS }

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of HTML documents. It controls layout, colors, fonts, spacing, and responsive design.

#1 body_info.css

/* Declaration block */
	body {
	    font-family: Tahoma, Arial, sans-serif;
	    color: black;
	    background: white;
	    margin: 8px;
	}

▶ Output

The page body gets Tahoma font, black text, white background, and 8px margin.

◆ Explanation

A CSS rule has a selector and a declaration block. Each declaration uses property: value; format.

#2 amount-digit.css

2px   /* pixels */
	1mm   /* millimeters */
	2cm   /* centimeters */
	0.2in /* inches */
	3pt   /* points */

▶ Output

Reference list of CSS measurement units.

◆ Explanation

These are absolute measurement units. px is the most common for screens.

#3 absolute-units.css

/* Absolute units */
	2px
	1mm
	2cm
	0.2in
	3pt

▶ Output

Absolute units give fixed sizes.

◆ Explanation

Absolute units do not depend on parent or root size. They are fixed values.

#4 relative-units.css

/* Relative units */
	2em
	3rem
	50%
	1vw
	1vh

▶ Output

Relative units change based on screen or parent size.

◆ Explanation

em depends on current element font size, rem depends on root font size, and % depends on parent.

#5 size-properties.css

/* Padding */
	padding-top;
	padding-right;
	padding-bottom;
	padding-left;
	
	/* Margin */
	margin-top;
	margin-right;
	margin-bottom;
	margin-left;
	
	/* Border */
	border-width;
	border-style;
	border-color;

▶ Output

Reference list of size-related box model properties.

◆ Explanation

The CSS box model is content, padding, border, and margin. These properties control spacing around elements.

#6 position.css

position: static;
	position: relative;
	position: fixed;
	position: absolute;
	position: sticky;

▶ Output

Position controls how an element is placed in the layout.

◆ Explanation

relative moves from its normal place, absolute uses nearest positioned parent, fixed stays on screen, and sticky changes on scroll.

#7 common-properties.css

background-image: url('image.png');
	background-repeat: no-repeat;
	background-size: cover;
	
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: bold;
	font-style: italic;
	
	text-align: center;
	vertical-align: middle;
	cursor: pointer;

▶ Output

Common CSS properties for background, typography, alignment, and cursor style.

◆ Explanation

These are frequently used CSS properties in real projects for visual styling and layout control.

#8 visibility.css

display: inline;
	display: block;
	display: flex;
	display: grid;
	display: none;
	
	visibility: hidden;
	visibility: visible;

▶ Output

Controls how elements appear and whether they take layout space.

◆ Explanation

display:none removes the element from layout. visibility:hidden hides it but keeps the space.

#9 flexbox-grid.css

/* Flexbox */
	.container {
	    display: flex;
	    flex-direction: row;
	    justify-content: center;
	    align-items: center;
	    gap: 16px;
	}
	
	/* Grid */
	.grid {
	    display: grid;
	    grid-template-columns: 1fr 1fr 1fr;
	    gap: 16px;
	}

▶ Output

Flex aligns items in one direction and Grid creates a two-dimensional layout.

◆ Explanation

Flexbox is best for rows and columns. Grid is best for page layouts and card structures.

#10 full-example.css

body {
	    font-family: Tahoma, Arial, sans-serif;
	    font-size: 13px;
	    color: black;
	    background: white;
	    margin: 8px;
	}
	
	h1 {
	    font-size: 19px;
	    margin-top: 0;
	    margin-bottom: 5px;
	    border-bottom: 1px solid black;
	}
	
	.shaded {
	    background: #d0d0ff;
	}
	
	.card {
	    display: flex;
	    padding: 16px;
	    border-radius: 8px;
	    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	}

▶ Output

A clean styled page with custom font, underlined heading, shaded background block, and shadowed card.

◆ Explanation

This full example combines typography, spacing, backgrounds, border radius, and shadow into one practical stylesheet.

{ HTML }

HyperText Markup Language — the skeleton of every web page. These cards cover the core building blocks from document structure all the way to meta tags.

Structure

#1 basic-structure.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
</head>
<body>
    <h1>Hello World</h1>
    <p>My first paragraph.</p>
</body>
</html>

▶ Output

A page showing "Hello World" as a large heading and "My first paragraph." as body text below it.

◆ Explanation

<!DOCTYPE html> — tells the browser this is HTML5. <html lang="en"> — root element; lang helps screen readers. <head> — holds metadata, not shown on page. <title> — text shown on the browser tab. <body> — everything the user actually sees. Every opening tag needs a matching closing tag.

#2 head-links.html

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A page about HTML basics">
    <title>HTML Basics</title>
    <link rel="stylesheet" href="style.css">
    <script src="main.js" defer></script>
</head>

▶ Output

No visible output — all head metadata. Makes the page mobile-friendly, links the CSS file, and loads the JS file after HTML parses.

◆ Explanation

charset="UTF-8" — supports all characters and emoji. viewport meta — makes page scale correctly on phones. description — shown under the title in Google results. <link rel="stylesheet"> — attaches your CSS file. <script defer> — loads JS after HTML is fully parsed; prevents blocking.

Headings

#3 headings.html

<h1>Heading 1 — biggest</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6 — smallest</h6>

▶ Output

Six headings stacked vertically, each smaller than the one above — H1 is the largest, H6 is the smallest. All are bold by default.

◆ Explanation

H1–H6 define the heading hierarchy of a page. Use only ONE <h1> per page — it signals the main topic to search engines. H2 starts sub-sections; H3 goes inside H2, and so on. Never skip levels (e.g. h1 → h3) — it breaks accessibility for screen reader users.

Text & Paragraphs

#4 text-formatting.html

<p>This is a paragraph.</p>

<p>This is <strong>bold</strong> and this is <em>italic</em>.</p>

<p>Subscript: H<sub>2</sub>O &nbsp; Superscript: x<sup>2</sup></p>

<p><mark>Highlighted text</mark> and <del>deleted text</del>.</p>

<p><code>inline code</code> and a <kbd>Ctrl</kbd> keyboard key.</p>

<br>
<hr>

▶ Output

Paragraphs with: bold · italic · H₂O subscript · x² superscript · yellow highlight · strikethrough · monospace inline code · a keyboard key badge · a blank line · a horizontal rule.

◆ Explanation

<strong> — bold; also signals importance to screen readers. <em> — italic emphasis. <sub> — subscript (H₂O). <sup> — superscript (x²). <mark> — yellow highlight. <del> — strikethrough (deleted/old content). <code> — monospace inline code snippet. <kbd> — keyboard key style. <br> — line break (self-closing). <hr> — horizontal divider rule.

Links

#5 links.html

<!-- External link — opens in new tab -->
<a href="https://google.com" target="_blank" rel="noopener noreferrer">
    Visit Google
</a>

<!-- Internal page link -->
<a href="about.html">About Page</a>

<!-- Anchor / jump-to-section link -->
<a href="#section2">Jump to Section 2</a>
<h2 id="section2">Section 2</h2>

<!-- Email link -->
<a href="mailto:hello@example.com">Send Email</a>

<!-- Phone link -->
<a href="tel:+8801234567890">Call Us</a>

<!-- Download link -->
<a href="resume.pdf" download>Download Resume</a>

▶ Output

Six clickable links: opens Google in new tab · goes to about.html · jumps to a section on the same page · opens the mail app · dials a number on mobile · downloads a PDF file.

◆ Explanation

href — the destination (URL, path, #id, mailto:, tel:). target="_blank" — opens link in a new browser tab. rel="noopener noreferrer" — security best practice with _blank. # + id — jumps to the element with that id on the same page. mailto: — opens the device's email app. tel: — dials the number on mobile. download — forces file download instead of opening in browser.

Images

#6 images.html

<!-- Basic image -->
<img src="photo.jpg" alt="A beautiful sunset" width="400" height="300">

<!-- Image from external URL -->
<img src="https://picsum.photos/400/300" alt="Random photo">

<!-- Clickable image (image as link) -->
<a href="gallery.html">
    <img src="thumbnail.jpg" alt="Open gallery">
</a>

<!-- Figure with caption -->
<figure>
    <img src="chart.png" alt="Monthly sales chart">
    <figcaption>Fig 1 — Monthly sales data 2025</figcaption>
</figure>

▶ Output

A local image at 400×300px · a random online image · a clickable image that links to gallery.html · an image with a visible caption below it.

◆ Explanation

src — path or URL to the image file. alt — text shown if image fails; required for accessibility. width / height — reserve layout space; prevents page jump on load. Wrap <img> in <a> — makes the image a clickable link. <figure> — semantic container grouping media with its caption. <figcaption> — the visible label displayed below the image.

Lists

#7 lists.html

<!-- Unordered list (bullets) -->
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

<!-- Ordered list (numbers) -->
<ol>
    <li>Learn HTML</li>
    <li>Learn CSS</li>
    <li>Build a project</li>
</ol>

<!-- Nested list -->
<ul>
    <li>Frontend
        <ul>
            <li>HTML</li>
            <li>CSS</li>
        </ul>
    </li>
    <li>Backend</li>
</ul>

<!-- Description list -->
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

▶ Output

• Bullet list of 3 languages · 1. Numbered step list · Nested bullets (HTML & CSS indented under "Frontend") · A definition list showing HTML and CSS with their full names.

◆ Explanation

<ul> — unordered (bullet) list. <ol> — ordered (numbered) list. <li> — list item; goes inside ul or ol. Nesting — place a <ul> inside an <li> to create sub-items. <dl> — description list. <dt> — the term being defined. <dd> — the definition / value for that term.

Tables

#8 table.html

<table border="1">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>24</td>
            <td>New York</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>30</td>
            <td>London</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Total: 2 users</td>
        </tr>
    </tfoot>
</table>

▶ Output

A bordered 3-column table: bold header row (Name / Age / City) → two data rows (Alice & Bob) → footer row spanning all 3 columns showing "Total: 2 users".

◆ Explanation

<table> — the outer container. <thead> — header section (top label row). <tbody> — main data section. <tfoot> — footer section (totals / summaries). <tr> — one table row. <th> — header cell (bold + centered by default). <td> — data cell. colspan="3" — cell stretches across 3 columns.

Forms

#9 form-inputs.html

<form action="/submit" method="POST">

    <!-- Text -->
    <label for="username">Username</label>
    <input type="text" id="username" name="username"
           placeholder="Enter your name" required>

    <!-- Email -->
    <label for="email">Email</label>
    <input type="email" id="email" name="email"
           placeholder="you@example.com">

    <!-- Password -->
    <label for="pass">Password</label>
    <input type="password" id="pass" name="pass"
           placeholder="Min 8 characters">

    <!-- Number -->
    <label for="age">Age</label>
    <input type="number" id="age" name="age" min="1" max="120">

    <!-- Textarea -->
    <label for="msg">Message</label>
    <textarea id="msg" name="message" rows="4"
              placeholder="Write your message here…"></textarea>

    <button type="submit">Submit</button>
    <button type="reset">Clear</button>

</form>

▶ Output

A form with labelled fields: text box · email box · password box (hides typing) · number spinner (1–120) · multi-line textarea · Submit button sends data · Clear button wipes the form.

◆ Explanation

action — URL where form data is sent on submit. method — GET appends data to URL; POST hides it in request body. type="email/password/number" — browser validates or masks input automatically. id + for — pairing input id with label for; clicking label focuses input. required — browser blocks submit if the field is empty. min / max — restricts number range. rows — sets visible height of textarea. type="reset" — clears all fields back to default state.

#10 form-selects.html

<!-- Dropdown select -->
<label for="country">Country</label>
<select id="country" name="country">
    <option value="">-- Select country --</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
    <option value="bd" selected>Bangladesh</option>
</select>

<!-- Radio buttons (pick ONE) -->
<input type="radio" id="male"   name="gender" value="male">
<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

<!-- Checkboxes (pick MANY) -->
<input type="checkbox" id="ck-html" name="skills" value="html" checked>
<label for="ck-html">HTML</label>

<input type="checkbox" id="ck-css" name="skills" value="css">
<label for="ck-css">CSS</label>

<input type="checkbox" id="ck-js" name="skills" value="js">
<label for="ck-js">JavaScript</label>

▶ Output

A dropdown pre-selected on "Bangladesh" · two gender radio buttons (only one active at a time) · three skill checkboxes with HTML pre-checked (multiple can be ticked simultaneously).

◆ Explanation

<select> + <option> — dropdown; only one value selected at a time. selected — sets the default chosen option on page load. Radio buttons — all share the SAME name; only one can be picked. Checkboxes — can share a name; multiple can be checked. checked — pre-ticks the checkbox or radio on page load. value — the data sent to the server when the form submits.

Semantic Elements

#11 semantic-layout.html

<header>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
    </nav>
</header>

<main>
    <article>
        <h2>Article Title</h2>
        <section>
            <h3>Section Heading</h3>
            <p>Section content goes here.</p>
        </section>
    </article>

    <aside>
        <p>Related links or sidebar content.</p>
    </aside>
</main>

<footer>
    <p>&copy; 2025 My Website</p>
</footer>

▶ Output

◆ Explanation

<header> — top of page or section (logo, nav, title). <nav> — navigation links block. <main> — primary content area; only ONE per page. <article> — self-contained content (blog post, news story). <section> — thematic group of content within an article. <aside> — supplementary content (sidebar, related links). <footer> — bottom of page or section (copyright, links). These replace generic divs and tell browsers + screen readers exactly what each region IS.

Div & Span

#12 div-span.html

<!-- div = BLOCK container (full width, new line) -->
<div class="card">
    <h3>Card Title</h3>
    <p>Card content here.</p>
</div>

<!-- span = INLINE container (sits inside text) -->
<p>
    The price is
    <span style="color: red; font-weight: bold;">$9.99</span>
    today only.
</p>

<!-- Nesting divs for layout -->
<div class="wrapper">
    <div class="column">Left column</div>
    <div class="column">Right column</div>
</div>

▶ Output

A boxed card with title and text · a sentence with "$9.99" in bold red inline · a wrapper div holding two column divs (styled side-by-side with CSS flex/grid).

◆ Explanation

<div> — block element; starts on a new line and takes full available width. Used to group and lay out sections of a page. <span> — inline element; sits inside a line of text without breaking it. Used to style or target a word or phrase. Neither carries semantic meaning — always prefer semantic tags (article, section, nav…) when possible, and use div/span only for layout or styling hooks.

Attributes

#13 attributes.html

<!-- class and id -->
<p class="highlight">Styled by a CSS class (reusable).</p>
<p id="intro">Targeted by a unique ID (one per page).</p>

<!-- Inline style -->
<p style="color: blue; font-size: 18px;">Inline CSS — avoid overusing.</p>

<!-- title — tooltip on hover -->
<abbr title="HyperText Markup Language">HTML</abbr>

<!-- data-* custom attributes -->
<button data-user-id="42" data-role="admin">Edit User</button>

<!-- hidden — invisible but still in the DOM -->
<p hidden>This paragraph cannot be seen.</p>

<!-- tabindex — keyboard Tab focus order -->
<div tabindex="0">Focusable with the Tab key</div>

▶ Output

Paragraphs styled via class · id · inline style · hover "HTML" to see its full-name tooltip · a button holding hidden user data · one invisible paragraph · a div reachable by Tab key.

◆ Explanation

class — reusable CSS hook; multiple elements can share the same class. id — unique identifier; only ONE per page; used by JS and anchor links. style — inline CSS; overrides stylesheet; avoid heavy use. title — tooltip text that appears on hover. data-* — custom attributes for storing data read by JavaScript. hidden — hides element visually but keeps it in the DOM. tabindex — adds non-interactive elements to the keyboard Tab focus order.

Meta Tags

#14 meta-tags.html

<head>
    <!-- Always include these two -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- SEO meta tags -->
    <meta name="description" content="Learn HTML from scratch with Code Note.IO">
    <meta name="keywords"    content="HTML, web development, tutorial, beginner">
    <meta name="author"      content="Code Note.IO">
    <meta name="robots"      content="index, follow">

    <!-- Open Graph — controls social media share previews -->
    <meta property="og:title"       content="HTML Notes — Code Note.IO">
    <meta property="og:description" content="Complete HTML reference cards">
    <meta property="og:image"       content="preview.png">
    <meta property="og:url"         content="https://codenote.io/html">
    <meta property="og:type"        content="website">

    <!-- Auto-refresh page every 30 seconds -->
    <meta http-equiv="refresh" content="30">

    <title>HTML Notes — Code Note.IO</title>
</head>

▶ Output

No visible output — all head metadata. Controls SEO ranking · the social media share card (title + image + description) · mobile scaling · auto-refreshes page every 30 seconds.

◆ Explanation

charset + viewport — always include; foundation of every page. description — shown under page title in Google search results. keywords — less critical today but still good practice. robots — "index, follow" tells crawlers to rank page and follow links. og:title / og:image — Open Graph; controls how page looks when shared on Facebook, WhatsApp, Twitter/X. og:type — "website" is the standard value for regular pages. http-equiv="refresh" — browser auto-reloads after the given number of seconds.

{ C# }

C# is a modern object-oriented programming language used for desktop apps, web development, games with Unity, and backend systems. These cards use clean beginner-friendly examples with comments so learners can copy and understand the code easily.

Basics

#1 VariablesExample.cs

using System;
	
	class VariablesExample
	{
	    static void Main()
	    {
	        // Basic variables
	        int age = 20;
	        double price = 99.5;
	        char grade = 'A';
	        bool isStudent = true;
	        string name = "Rahim";
	
	        Console.WriteLine(age);
	        Console.WriteLine(price);
	        Console.WriteLine(grade);
	        Console.WriteLine(isStudent);
	        Console.WriteLine(name);
	    }
	}

▶ Output

20 99.5 A True Rahim

◆ Explanation

This card shows C# variables using int, double, char, bool, and string. In C#, variables are declared with a type.

#2 DataTypesExample.cs

using System;
	
	class DataTypesExample
	{
	    static void Main()
	    {
	        // Common data types
	        int number = 10;
	        double pi = 3.14159;
	        char letter = 'X';
	        bool isPassed = true;
	        string text = "Hello C#";
	
	        Console.WriteLine("int: " + number);
	        Console.WriteLine("double: " + pi);
	        Console.WriteLine("char: " + letter);
	        Console.WriteLine("bool: " + isPassed);
	        Console.WriteLine("string: " + text);
	
	        // Type conversion
	        double converted = number;
	        int shortValue = (int)pi;
	
	        Console.WriteLine("int to double: " + converted);
	        Console.WriteLine("double to int: " + shortValue);
	    }
	}

▶ Output

int: 10 double: 3.14159 char: X bool: True string: Hello C# int to double: 10 double to int: 3

◆ Explanation

This example shows common C# data types and type conversion. Casting is used when converting from a larger type to a smaller one.

#3 InputOutputExample.cs

using System;
	
	class InputOutputExample
	{
	    static void Main()
	    {
	        // Taking input
	        string name = Console.ReadLine();
	        int age = int.Parse(Console.ReadLine());
	        double salary = double.Parse(Console.ReadLine());
	
	        // Showing output
	        Console.WriteLine("Name: " + name);
	        Console.WriteLine("Age: " + age);
	        Console.WriteLine("Salary: " + salary);
	    }
	}

▶ Output

Sample input: Rahim 20 5500.5 Sample output: Name: Rahim Age: 20 Salary: 5500.5

◆ Explanation

Console.ReadLine reads input as string. int.Parse and double.Parse convert text input into number values.

#4 OperatorsExample.cs

using System;
	
	class OperatorsExample
	{
	    static void Main()
	    {
	        int a = 10;
	        int b = 3;
	
	        // Arithmetic operators
	        Console.WriteLine(a + b);
	        Console.WriteLine(a - b);
	        Console.WriteLine(a * b);
	        Console.WriteLine(a / b);
	        Console.WriteLine(a % b);
	
	        // Comparison operators
	        Console.WriteLine(a > b);
	        Console.WriteLine(a == b);
	
	        // Logical operators
	        Console.WriteLine(a > 5 && b < 5);
	        Console.WriteLine(a < 5 || b < 5);
	
	        // Assignment operator
	        int total = 5;
	        total += 2;
	        Console.WriteLine(total);
	    }
	}

▶ Output

13 7 30 3 1 True False True True 7

◆ Explanation

This card covers arithmetic, comparison, logical, and assignment operators. Since a and b are integers, a / b gives 3.

#5 ConditionalsExample.cs

using System;
	
	class ConditionalsExample
	{
	    static void Main()
	    {
	        int marks = 75;
	
	        // if / else if / else
	        if (marks >= 80)
	        {
	            Console.WriteLine("Grade A+");
	        }
	        else if (marks >= 70)
	        {
	            Console.WriteLine("Grade A");
	        }
	        else
	        {
	            Console.WriteLine("Need more practice");
	        }
	
	        // switch statement
	        int day = 2;
	
	        switch (day)
	        {
	            case 1:
	                Console.WriteLine("Saturday");
	                break;
	            case 2:
	                Console.WriteLine("Sunday");
	                break;
	            default:
	                Console.WriteLine("Unknown day");
	                break;
	        }
	    }
	}

▶ Output

Grade A Sunday

◆ Explanation

This example shows if, else if, else, and switch for decision making in C#.

#6 LoopsExample.cs

using System;
	
	class LoopsExample
	{
	    static void Main()
	    {
	        // for loop
	        for (int i = 1; i <= 3; i++)
	        {
	            Console.Write(i + " ");
	        }
	        Console.WriteLine();
	
	        // while loop
	        int j = 1;
	        while (j <= 3)
	        {
	            Console.Write(j + " ");
	            j++;
	        }
	        Console.WriteLine();
	
	        // do...while loop
	        int k = 1;
	        do
	        {
	            Console.Write(k + " ");
	            k++;
	        } while (k <= 3);
	        Console.WriteLine();
	
	        // foreach loop
	        string[] items = { "A", "B", "C" };
	        foreach (string item in items)
	        {
	            Console.Write(item + " ");
	        }
	    }
	}

▶ Output

1 2 3 1 2 3 1 2 3 A B C

◆ Explanation

This card shows for, while, do...while, and foreach loops for repeated execution.

Methods & Data

#7 MethodsExample.cs

using System;
	
	class MethodsExample
	{
	    // Method with parameters and return value
	    static int Add(int a, int b)
	    {
	        return a + b;
	    }
	
	    // Recursive method
	    static int Factorial(int n)
	    {
	        if (n == 0 || n == 1)
	        {
	            return 1;
	        }
	        return n * Factorial(n - 1);
	    }
	
	    static void Main()
	    {
	        Console.WriteLine(Add(5, 7));
	        Console.WriteLine(Factorial(5));
	    }
	}

▶ Output

12 120

◆ Explanation

This card shows method declaration, parameters, return value, method call, and recursion.

#8 ArraysExample.cs

using System;
	
	class ArraysExample
	{
	    static void Main()
	    {
	        // One-dimensional array
	        int[] numbers = { 10, 20, 30, 40, 50 };
	
	        // Update first value
	        numbers[0] = 100;
	
	        for (int i = 0; i < numbers.Length; i++)
	        {
	            Console.Write(numbers[i] + " ");
	        }
	        Console.WriteLine();
	
	        // Two-dimensional array
	        int[,] matrix =
	        {
	            { 1, 2 },
	            { 3, 4 }
	        };
	
	        for (int i = 0; i < 2; i++)
	        {
	            for (int j = 0; j < 2; j++)
	            {
	                Console.Write(matrix[i, j] + " ");
	            }
	            Console.WriteLine();
	        }
	    }
	}

▶ Output

100 20 30 40 50 1 2 3 4

◆ Explanation

This example shows 1D arrays, 2D arrays, iteration, and basic update operations in C#.

#9 StringsExample.cs

using System;
	
	class StringsExample
	{
	    static void Main()
	    {
	        string first = "Hello";
	        string second = "World";
	
	        // Concatenation
	        string full = first + " " + second;
	        Console.WriteLine(full);
	
	        // String length
	        Console.WriteLine(full.Length);
	
	        // Uppercase
	        Console.WriteLine(full.ToUpper());
	
	        // Substring
	        Console.WriteLine(full.Substring(0, 5));
	    }
	}

▶ Output

Hello World 11 HELLO WORLD Hello

◆ Explanation

This card covers string concatenation, length, uppercase conversion, and substring in C#.

OOP

#10 OOPExample.cs

using System;
	
	class Student
	{
	    // Encapsulation: private fields
	    private string name;
	    private int age;
	
	    // Constructor
	    public Student(string name, int age)
	    {
	        this.name = name;
	        this.age = age;
	    }
	
	    // Public method
	    public void ShowInfo()
	    {
	        Console.WriteLine("Name: " + name);
	        Console.WriteLine("Age: " + age);
	    }
	}
	
	class OOPExample
	{
	    static void Main()
	    {
	        // Object creation
	        Student s1 = new Student("Amina", 20);
	        s1.ShowInfo();
	    }
	}

▶ Output

Name: Amina Age: 20

◆ Explanation

This card shows class, object, constructor, and encapsulation using private fields in C#.

#11 InheritanceExample.cs

using System;
	
	class Animal
	{
	    public virtual void Sound()
	    {
	        Console.WriteLine("Animal makes a sound");
	    }
	}
	
	class Cat : Animal
	{
	    public override void Sound()
	    {
	        Console.WriteLine("Cat says Meow");
	    }
	}
	
	class InheritanceExample
	{
	    static void Main()
	    {
	        // Polymorphism
	        Animal animal = new Cat();
	        animal.Sound();
	    }
	}

▶ Output

Cat says Meow

◆ Explanation

This example shows inheritance and polymorphism. The child class overrides a method from the parent class.

#12 AbstractionExample.cs

using System;
	
	interface IShape
	{
	    double Area();
	}
	
	class Circle : IShape
	{
	    private double radius;
	
	    public Circle(double radius)
	    {
	        this.radius = radius;
	    }
	
	    public double Area()
	    {
	        return 3.1416 * radius * radius;
	    }
	}
	
	class AbstractionExample
	{
	    static void Main()
	    {
	        IShape shape = new Circle(3);
	        Console.WriteLine(shape.Area());
	    }
	}

▶ Output

28.2744

◆ Explanation

This card shows abstraction using an interface. The interface defines what to do, and the class gives the implementation.

Collections & Files

#13 CollectionsExample.cs

using System;
	using System.Collections.Generic;
	
	class CollectionsExample
	{
	    static void Main()
	    {
	        // List
	        List<int> numbers = new List<int> { 5, 2, 9, 1 };
	        numbers.Sort();
	        Console.WriteLine(string.Join(" ", numbers));
	
	        // Dictionary
	        Dictionary<string, int> marks = new Dictionary<string, int>();
	        marks["Math"] = 90;
	        marks["English"] = 85;
	        Console.WriteLine(marks["Math"]);
	
	        // Stack
	        Stack<int> stack = new Stack<int>();
	        stack.Push(10);
	        stack.Push(20);
	        Console.WriteLine(stack.Peek());
	
	        // Queue
	        Queue<int> queue = new Queue<int>();
	        queue.Enqueue(100);
	        queue.Enqueue(200);
	        Console.WriteLine(queue.Peek());
	    }
	}

▶ Output

1 2 5 9 90 20 100

◆ Explanation

This card covers List, Dictionary, Stack, and Queue. These are common collection types in C#.

#14 FileHandlingExample.cs

using System;
	using System.IO;
	
	class FileHandlingExample
	{
	    static void Main()
	    {
	        string fileName = "demo.txt";
	
	        // Write to a file
	        File.WriteAllText(fileName, "Hello from C# file handling");
	
	        // Read from the file
	        string content = File.ReadAllText(fileName);
	        Console.WriteLine(content);
	    }
	}

▶ Output

Hello from C# file handling

◆ Explanation

File.WriteAllText writes to a file and File.ReadAllText reads the full content from a file.

Errors & Practice

#15 ExceptionHandlingExample.cs

using System;
	
	class ExceptionHandlingExample
	{
	    static void Main()
	    {
	        try
	        {
	            int a = 10;
	            int b = 0;
	            int result = a / b;
	            Console.WriteLine(result);
	        }
	        catch (DivideByZeroException)
	        {
	            Console.WriteLine("Cannot divide by zero");
	        }
	        finally
	        {
	            Console.WriteLine("Program finished");
	        }
	    }
	}

▶ Output

Cannot divide by zero Program finished

◆ Explanation

try runs risky code, catch handles the error, and finally always runs at the end.

#16 ProblemSolvingExample.cs

using System;
	
	class ProblemSolvingExample
	{
	    static void Main()
	    {
	        // Sum from 1 to 5
	        int sum = 0;
	        for (int i = 1; i <= 5; i++)
	        {
	            sum += i;
	        }
	        Console.WriteLine(sum);
	
	        // Small star pattern
	        for (int i = 1; i <= 3; i++)
	        {
	            Console.WriteLine(new string('*', i));
	        }
	
	        // Find the largest number
	        int[] numbers = { 12, 45, 7, 89, 23 };
	        int largest = numbers[0];
	
	        for (int i = 1; i < numbers.Length; i++)
	        {
	            if (numbers[i] > largest)
	            {
	                largest = numbers[i];
	            }
	        }
	
	        Console.WriteLine(largest);
	    }
	}

▶ Output

15 * ** *** 89

◆ Explanation

This card includes simple logic building, loops, pattern printing, and finding the largest number from an array.

{ Node.js }

Node.js is a JavaScript runtime that lets you run JavaScript outside the browser. These cards use clean beginner-friendly examples with comments so learners can understand and copy the code easily.

Basics

#1 variables.js

// let = value can change later
	let age = 20;
	
	// const = value cannot be reassigned
	const country = "Bangladesh";
	
	// var = old way to declare variables
	var oldName = "Node Student";
	
	// Updating let and var
	age = 21;
	oldName = "Rafi";
	
	console.log(age);
	console.log(country);
	console.log(oldName);

▶ Output

21 Bangladesh Rafi

◆ Explanation

let can be changed, const cannot be reassigned, and var is the older way to declare variables.

#2 data-types.js

// Different Node.js data types
	let numberValue = 100;
	let stringValue = "Hello";
	let booleanValue = true;
	let objectValue = { name: "Rafi" };
	let arrayValue = ["JS", "Node"];
	let emptyValue = null;
	let notAssigned;
	
	console.log(typeof numberValue);   // number
	console.log(typeof stringValue);   // string
	console.log(typeof booleanValue);  // boolean
	console.log(typeof objectValue);   // object
	console.log(typeof arrayValue);    // object
	console.log(emptyValue);           // null
	console.log(notAssigned);          // undefined

▶ Output

number string boolean object object null undefined

◆ Explanation

This card shows Number, String, Boolean, Object, Array, null, and undefined. Arrays also return object with typeof.

#3 operators.js

// Two values for testing operators
	let a = 10;
	let b = 3;
	
	// Arithmetic operators
	console.log(a + b);
	console.log(a - b);
	console.log(a * b);
	console.log(a / b);
	console.log(a % b);
	
	// Comparison operators
	console.log(a > b);
	console.log(a === b);
	
	// Logical operator
	console.log(a > 5 && b < 5);
	
	// Assignment operator
	let total = 5;
	total += 2;
	console.log(total);

▶ Output

13 7 30 3.3333333333333335 1 true false true 7

◆ Explanation

It covers arithmetic, comparison, logical, and assignment operators in Node.js.

#4 conditionals.js

// Marks example for if / else if / else
	let marks = 75;
	
	if (marks >= 80) {
	    console.log("A+");
	} else if (marks >= 70) {
	    console.log("A");
	} else {
	    console.log("Need more practice");
	}
	
	// Day example for switch
	let day = 2;
	
	switch (day) {
	    case 1:
	        console.log("Saturday");
	        break;
	    case 2:
	        console.log("Sunday");
	        break;
	    default:
	        console.log("Unknown day");
	}

▶ Output

A Sunday

◆ Explanation

if, else if, else, and switch are used to make decisions based on conditions.

#5 loops.js

// for loop
	for (let i = 1; i <= 3; i++) {
	    console.log(i);
	}
	
	// while loop
	let j = 1;
	while (j <= 3) {
	    console.log(j);
	    j++;
	}
	
	// do...while loop
	let k = 1;
	do {
	    console.log(k);
	    k++;
	} while (k <= 3);
	
	// for...of loop
	for (const item of ["A", "B", "C"]) {
	    console.log(item);
	}

▶ Output

1 2 3 1 2 3 1 2 3 A B C

◆ Explanation

This card shows for, while, do...while, and for...of loops for repeating code.

#6 functions.js

// Regular function
	function add(a, b) {
	    return a + b;
	}
	
	// Arrow function
	const square = (n) => {
	    return n * n;
	};
	
	// Calling functions
	console.log(add(5, 7));
	console.log(square(4));

▶ Output

12 16

◆ Explanation

Functions let you define reusable code. Parameters receive values, and return sends a result back.

Collections & Data

#7 arrays.js

// Array with some color names
	let colors = ["red", "green", "blue"];
	
	// Add a new item at the end
	colors.push("yellow");
	
	// Access array values
	console.log(colors[0]);
	console.log(colors.length);
	
	// Loop through the array
	colors.forEach((color) => {
	    console.log(color);
	});

▶ Output

red 4 red green blue yellow

◆ Explanation

Arrays store multiple values in order. push adds a new item, and forEach loops through each element.

#8 strings.js

// Two strings
	let firstName = "Node";
	let lastName = "JS";
	
	// Join strings
	let fullName = firstName + " " + lastName;
	
	console.log(fullName);
	console.log(fullName.length);
	console.log(fullName.toUpperCase());
	console.log(fullName.slice(0, 4));

▶ Output

Node JS 7 NODE JS Node

◆ Explanation

This card covers string concatenation, length, uppercase conversion, and slice.

#9 objects.js

// Object with student information
	let student = {
	    name: "Rafi",
	    age: 20,
	    city: "Dhaka"
	};
	
	// Update one property
	student.age = 21;
	
	// Access object values
	console.log(student.name);
	console.log(student["city"]);
	console.log(student.age);

▶ Output

Rafi Dhaka 21

◆ Explanation

Objects store data in key-value pairs. You can access properties with dot notation or bracket notation.

#10 json.js

// JavaScript object
	let user = {
	    name: "Amina",
	    age: 22
	};
	
	// Convert object to JSON text
	let jsonText = JSON.stringify(user);
	
	// Convert JSON text back to object
	let parsedUser = JSON.parse(jsonText);
	
	console.log(jsonText);
	console.log(parsedUser.name);

▶ Output

{"name":"Amina","age":22} Amina

◆ Explanation

JSON.stringify converts an object into JSON text, and JSON.parse turns JSON text back into a JavaScript object.

Asynchronous Programming

#11 callbacks.js

// Function that uses a callback
	function getMessage(callback) {
	    setTimeout(() => {
	        callback("Data loaded");
	    }, 1000);
	}
	
	console.log("Start");
	
	getMessage((message) => {
	    console.log(message);
	});
	
	console.log("End");

▶ Output

Start End Data loaded

◆ Explanation

A callback is a function passed into another function. It runs later when the async task finishes.

#12 promises.js

// Function that returns a Promise
	function getUser() {
	    return new Promise((resolve, reject) => {
	        let found = true;
	
	        if (found) {
	            resolve("User found");
	        } else {
	            reject("User not found");
	        }
	    });
	}
	
	getUser()
	    .then((message) => {
	        console.log(message);
	    })
	    .catch((error) => {
	        console.log(error);
	    });

▶ Output

User found

◆ Explanation

A Promise represents a future result. then handles success, and catch handles errors.

#13 async-await.js

// Function returning a Promise
	function getPost() {
	    return new Promise((resolve) => {
	        setTimeout(() => {
	            resolve("Post loaded");
	        }, 1000);
	    });
	}
	
	// async / await example
	async function showPost() {
	    const result = await getPost();
	    console.log(result);
	}
	
	showPost();

▶ Output

Post loaded

◆ Explanation

async makes a function asynchronous, and await pauses until the Promise returns a value.

Error & Practice

#14 error-handling.js

try {
	    // Convert JSON text to object
	    let user = JSON.parse('{"name":"Node"}');
	    console.log(user.name);
	
	    // Create a custom error
	    throw new Error("Custom error");
	} catch (error) {
	    console.log(error.message);
	}

▶ Output

Node Custom error

◆ Explanation

try runs risky code, and catch handles the error so the program does not stop suddenly.

#15 problem-solving.js

// Sum of numbers from 1 to 5
	let sum = 0;
	
	for (let i = 1; i <= 5; i++) {
	    sum += i;
	}
	
	console.log(sum);
	
	// Small star pattern
	for (let i = 1; i <= 3; i++) {
	    console.log("*".repeat(i));
	}
	
	// Find the largest number
	let numbers = [12, 45, 7, 89, 23];
	let largest = numbers[0];
	
	for (const number of numbers) {
	    if (number > largest) {
	        largest = number;
	    }
	}
	
	console.log(largest);

▶ Output

15 * ** *** 89

◆ Explanation

This card includes simple sum logic, pattern printing, and finding the largest number from an array.

{ PHP }

PHP is a server-side scripting language used for dynamic websites, forms, authentication, databases, and backend development. These cards use clean beginner-friendly examples with comments so learners can copy and understand the code easily.

Basics

#1 variables.php

<?php
	// PHP variables always start with $
	$name = "Rahim";
	$age = 20;
	$price = 99.5;
	
	// Update a variable
	$age = 21;
	
	echo $name . "<br>";
	echo $age . "<br>";
	echo $price;
	?>

▶ Output

Rahim 21 99.5

◆ Explanation

PHP variables start with `$`. You do not need to declare the type separately, and variable values can be changed later.

#2 data-types.php

<?php
	// Common PHP data types
	$number = 100;
	$text = "Hello PHP";
	$isPassed = true;
	$colors = array("red", "green", "blue");
	$user = array("name" => "Rafi", "age" => 20);
	$emptyValue = null;
	
	var_dump($number);
	echo "<br>";
	var_dump($text);
	echo "<br>";
	var_dump($isPassed);
	echo "<br>";
	var_dump($colors);
	echo "<br>";
	var_dump($user);
	echo "<br>";
	var_dump($emptyValue);
	?>

▶ Output

int(100) string(9) "Hello PHP" bool(true) array(...) array(...) NULL

◆ Explanation

This card shows integer, string, boolean, array, associative array, and null. `var_dump()` shows value with its type.

#3 echo-print.php

<?php
	// Output using echo
	echo "Hello from echo<br>";
	
	// Output using print
	print "Hello from print<br>";
	
	$name = "Amina";
	echo "Welcome, " . $name . "<br>";
	echo "PHP is easy to learn";
	?>

▶ Output

Hello from echo Hello from print Welcome, Amina PHP is easy to learn

◆ Explanation

`echo` and `print` are used to show output in PHP. `echo` is more common and can print multiple strings easily.

#4 operators.php

<?php
	$a = 10;
	$b = 3;
	
	// Arithmetic operators
	echo ($a + $b) . "<br>";
	echo ($a - $b) . "<br>";
	echo ($a * $b) . "<br>";
	echo ($a / $b) . "<br>";
	echo ($a % $b) . "<br>";
	
	// Comparison operators
	var_dump($a > $b);
	echo "<br>";
	var_dump($a == $b);
	echo "<br>";
	
	// Logical operator
	var_dump($a > 5 && $b < 5);
	echo "<br>";
	
	// Assignment operator
	$total = 5;
	$total += 2;
	echo $total;
	?>

▶ Output

13 7 30 3.3333333333333 1 bool(true) bool(false) bool(true) 7

◆ Explanation

This card covers arithmetic, comparison, logical, and assignment operators in PHP.

#5 conditionals.php

<?php
	$marks = 75;
	
	// if / else if / else
	if ($marks >= 80) {
	    echo "Grade A+<br>";
	} elseif ($marks >= 70) {
	    echo "Grade A<br>";
	} else {
	    echo "Need more practice<br>";
	}
	
	// switch statement
	$day = 2;
	
	switch ($day) {
	    case 1:
	        echo "Saturday";
	        break;
	    case 2:
	        echo "Sunday";
	        break;
	    default:
	        echo "Unknown day";
	}
	?>

▶ Output

Grade A Sunday

◆ Explanation

This example shows `if`, `elseif`, `else`, and `switch` for decision making in PHP.

#6 loops.php

<?php
	// for loop
	for ($i = 1; $i <= 3; $i++) {
	    echo $i . " ";
	}
	echo "<br>";
	
	// while loop
	$j = 1;
	while ($j <= 3) {
	    echo $j . " ";
	    $j++;
	}
	echo "<br>";
	
	// do...while loop
	$k = 1;
	do {
	    echo $k . " ";
	    $k++;
	} while ($k <= 3);
	echo "<br>";
	
	// foreach loop
	$items = array("A", "B", "C");
	foreach ($items as $item) {
	    echo $item . " ";
	}
	?>

▶ Output

1 2 3 1 2 3 1 2 3 A B C

◆ Explanation

This card shows `for`, `while`, `do...while`, and `foreach` loops for repeating code.

Functions & Arrays

#7 functions.php

<?php
	// Function with parameters and return value
	function add($a, $b) {
	    return $a + $b;
	}
	
	// Recursive function
	function factorial($n) {
	    if ($n == 0 || $n == 1) {
	        return 1;
	    }
	    return $n * factorial($n - 1);
	}
	
	echo add(5, 7) . "<br>";
	echo factorial(5);
	?>

▶ Output

12 120

◆ Explanation

This card shows function declaration, parameters, return value, function call, and recursion in PHP.

#8 arrays.php

<?php
	// Indexed array
	$colors = array("red", "green", "blue");
	
	// Add new item
	$colors[] = "yellow";
	
	echo $colors[0] . "<br>";
	echo count($colors) . "<br>";
	
	// Loop through array
	foreach ($colors as $color) {
	    echo $color . "<br>";
	}
	?>

▶ Output

red 4 red green blue yellow

◆ Explanation

Arrays store multiple values. `count()` gives total items, and `foreach` is used to loop through the array.

#9 strings.php

<?php
	$first = "Hello";
	$second = "World";
	
	// Concatenation
	$full = $first . " " . $second;
	echo $full . "<br>";
	
	// String length
	echo strlen($full) . "<br>";
	
	// Uppercase
	echo strtoupper($full) . "<br>";
	
	// Substring
	echo substr($full, 0, 5);
	?>

▶ Output

Hello World 11 HELLO WORLD Hello

◆ Explanation

This card covers string concatenation, string length, uppercase conversion, and substring in PHP.

#10 associative-arrays.php

<?php
	// Associative array
	$student = array(
	    "name" => "Rafi",
	    "age" => 20,
	    "city" => "Dhaka"
	);
	
	// Update value
	$student["age"] = 21;
	
	echo $student["name"] . "<br>";
	echo $student["city"] . "<br>";
	echo $student["age"] . "<br>";
	
	foreach ($student as $key => $value) {
	    echo $key . ": " . $value . "<br>";
	}
	?>

▶ Output

Rafi Dhaka 21 name: Rafi age: 21 city: Dhaka

◆ Explanation

Associative arrays store data as key-value pairs, like objects. They are very common in PHP.

Forms & Backend

#11 forms-get-post.php

<!-- index.php -->
	<form method="post" action="">
	    <input type="text" name="username" placeholder="Enter your name">
	    <button type="submit">Submit</button>
	</form>
	
	<?php
	// Check if form is submitted
	if ($_SERVER["REQUEST_METHOD"] == "POST") {
	    $username = $_POST["username"];
	    echo "Hello, " . $username;
	}
	?>

▶ Output

A form with one input and submit button. After submitting, it shows: Hello, user-name.

◆ Explanation

`$_GET` and `$_POST` are superglobals used to collect form data. `POST` is commonly used for sensitive or larger form data.

#12 sessions.php

<?php
	// Start session before using it
	session_start();
	
	// Store data in session
	$_SESSION["username"] = "Rahim";
	
	// Read session data
	echo "User: " . $_SESSION["username"];
	?>

▶ Output

User: Rahim

◆ Explanation

Sessions store user data on the server, so the data can be used across different pages after login or form submission.

#13 file-handling.php

<?php
	$fileName = "demo.txt";
	
	// Write to a file
	file_put_contents($fileName, "Hello from PHP file handling");
	
	// Read from the file
	$content = file_get_contents($fileName);
	echo $content;
	?>

▶ Output

Hello from PHP file handling

◆ Explanation

`file_put_contents()` writes to a file and `file_get_contents()` reads the content from a file.

OOP & Practice

#14 oop.php

<?php
	// Class example
	class Student {
	    public $name;
	    public $age;
	
	    // Constructor
	    public function __construct($name, $age) {
	        $this->name = $name;
	        $this->age = $age;
	    }
	
	    public function showInfo() {
	        echo "Name: " . $this->name . "<br>";
	        echo "Age: " . $this->age;
	    }
	}
	
	// Object creation
	$s1 = new Student("Amina", 20);
	$s1->showInfo();
	?>

▶ Output

Name: Amina Age: 20

◆ Explanation

This card shows class, object, constructor, properties, and method call in PHP OOP.

#15 error-handling.php

<?php
	try {
	    $a = 10;
	    $b = 0;
	
	    if ($b == 0) {
	        throw new Exception("Division by zero is not allowed");
	    }
	
	    echo $a / $b;
	} catch (Exception $e) {
	    echo $e->getMessage();
	}
	?>

▶ Output

Division by zero is not allowed

◆ Explanation

`try` runs risky code, `throw` creates an error, and `catch` handles it safely.

#16 problem-solving.php

<?php
	// Sum from 1 to 5
	$sum = 0;
	for ($i = 1; $i <= 5; $i++) {
	    $sum += $i;
	}
	echo $sum . "<br>";
	
	// Small star pattern
	for ($i = 1; $i <= 3; $i++) {
	    echo str_repeat("*", $i) . "<br>";
	}
	
	// Find the largest number
	$numbers = array(12, 45, 7, 89, 23);
	$largest = $numbers[0];
	
	foreach ($numbers as $number) {
	    if ($number > $largest) {
	        $largest = $number;
	    }
	}
	
	echo $largest;
	?>

▶ Output

15 * ** *** 89

◆ Explanation

This card includes simple logic building, loops, pattern printing, and finding the largest number from an array.

{ C++ }

C++ is a powerful programming language used for problem solving, software development, games, systems, and competitive programming. These cards use clean beginner-friendly examples with comments so learners can copy and understand the code easily.

Basics

#1 variables.cpp

#include <iostream>
	#include <string>
	using namespace std;
	
	int main() {
	    // Basic variable types
	    int age = 20;
	    float price = 99.5f;
	    double pi = 3.14159;
	    char grade = 'A';
	    string name = "Rahim";
	
	    cout << age << endl;
	    cout << price << endl;
	    cout << pi << endl;
	    cout << grade << endl;
	    cout << name << endl;
	
	    return 0;
	}

▶ Output

20 99.5 3.14159 A Rahim

◆ Explanation

This card shows C++ variables using int, float, double, char, and string.

#2 data-types.cpp

#include <iostream>
	using namespace std;
	
	int main() {
	    // Primitive data types
	    int number = 10;
	    float price = 5.5f;
	    double pi = 3.14159;
	    char letter = 'X';
	    bool isPassed = true;
	
	    // Size of common types
	    cout << "Size of int: " << sizeof(int) << " bytes" << endl;
	    cout << "Size of float: " << sizeof(float) << " bytes" << endl;
	    cout << "Size of double: " << sizeof(double) << " bytes" << endl;
	    cout << "Size of char: " << sizeof(char) << " byte" << endl;
	    cout << "Size of bool: " << sizeof(bool) << " byte" << endl;
	
	    // Type conversion
	    double convertedNumber = static_cast<double>(number);
	    cout << "Converted value: " << convertedNumber << endl;
	
	    return 0;
	}

▶ Output

Common output on most systems: Size of int: 4 bytes Size of float: 4 bytes Size of double: 8 bytes Size of char: 1 byte Size of bool: 1 byte Converted value: 10

◆ Explanation

This example covers primitive types, sizeof, and type conversion. Exact sizes may vary slightly by compiler and system.

#3 input-output.cpp

#include <iostream>
	#include <string>
	using namespace std;
	
	int main() {
	    // Multiple input
	    string name;
	    int age;
	    double salary;
	
	    cin >> name >> age >> salary;
	
	    // Multiple output
	    cout << "Name: " << name << endl;
	    cout << "Age: " << age << endl;
	    cout << "Salary: " << salary << endl;
	
	    return 0;
	}

▶ Output

Sample input: Rahim 20 5500.5 Sample output: Name: Rahim Age: 20 Salary: 5500.5

◆ Explanation

cin takes input from the keyboard and cout shows output on the screen. This example shows multiple input and multiple output.

#4 operators.cpp

#include <iostream>
	using namespace std;
	
	int main() {
	    int a = 10;
	    int b = 3;
	
	    // Show true / false instead of 1 / 0
	    cout << boolalpha;
	
	    // Arithmetic operators
	    cout << a + b << endl;
	    cout << a - b << endl;
	    cout << a * b << endl;
	    cout << a / b << endl;
	    cout << a % b << endl;
	
	    // Comparison operators
	    cout << (a > b) << endl;
	    cout << (a == b) << endl;
	
	    // Logical operator
	    cout << ((a > 5) && (b < 5)) << endl;
	
	    // Assignment operator
	    int total = 5;
	    total += 2;
	    cout << total << endl;
	
	    return 0;
	}

▶ Output

13 7 30 3 1 true false true 7

◆ Explanation

This card covers arithmetic, comparison, logical, and assignment operators. Since a and b are integers, a / b gives 3.

#5 conditionals.cpp

#include <iostream>
	using namespace std;
	
	int main() {
	    // if / else if / else
	    int marks = 75;
	
	    if (marks >= 80) {
	        cout << "Grade A+" << endl;
	    } else if (marks >= 70) {
	        cout << "Grade A" << endl;
	    } else {
	        cout << "Need more practice" << endl;
	    }
	
	    // switch statement
	    int day = 2;
	
	    switch (day) {
	        case 1:
	            cout << "Saturday" << endl;
	            break;
	        case 2:
	            cout << "Sunday" << endl;
	            break;
	        default:
	            cout << "Unknown day" << endl;
	    }
	
	    return 0;
	}

▶ Output

Grade A Sunday

◆ Explanation

This example shows if, else if, else, and switch for decision making.

#6 loops.cpp

#include <iostream>
	using namespace std;
	
	int main() {
	    // for loop
	    for (int i = 1; i <= 3; i++) {
	        cout << i << " ";
	    }
	    cout << endl;
	
	    // while loop
	    int j = 1;
	    while (j <= 3) {
	        cout << j << " ";
	        j++;
	    }
	    cout << endl;
	
	    // do...while loop
	    int k = 1;
	    do {
	        cout << k << " ";
	        k++;
	    } while (k <= 3);
	    cout << endl;
	
	    // nested loop
	    for (int row = 1; row <= 2; row++) {
	        for (int col = 1; col <= 3; col++) {
	            cout << "*";
	        }
	        cout << endl;
	    }
	
	    return 0;
	}

▶ Output

1 2 3 1 2 3 1 2 3 *** ***

◆ Explanation

This card covers for, while, do...while, and nested loops.

Functions & Collections

#7 functions.cpp

#include <iostream>
	using namespace std;
	
	// Function declaration
	int add(int a, int b);
	int factorial(int n);
	
	int main() {
	    // Function call
	    cout << add(5, 7) << endl;
	    cout << factorial(5) << endl;
	
	    return 0;
	}
	
	// Function definition
	int add(int a, int b) {
	    return a + b;
	}
	
	// Recursion example
	int factorial(int n) {
	    if (n == 0 || n == 1) {
	        return 1;
	    }
	    return n * factorial(n - 1);
	}

▶ Output

12 120

◆ Explanation

This example shows function declaration, definition, parameters, return value, and recursion using factorial.

#8 arrays.cpp

#include <iostream>
	using namespace std;
	
	int main() {
	    // One-dimensional array
	    int numbers[5] = {10, 20, 30, 40, 50};
	
	    // Update first value
	    numbers[0] = 100;
	
	    for (int i = 0; i < 5; i++) {
	        cout << numbers[i] << " ";
	    }
	    cout << endl;
	
	    // Two-dimensional array
	    int matrix[2][2] = {
	        {1, 2},
	        {3, 4}
	    };
	
	    for (int i = 0; i < 2; i++) {
	        for (int j = 0; j < 2; j++) {
	            cout << matrix[i][j] << " ";
	        }
	        cout << endl;
	    }
	
	    return 0;
	}

▶ Output

100 20 30 40 50 1 2 3 4

◆ Explanation

This example shows one-dimensional and two-dimensional arrays, iteration, and basic update operations.

#9 strings.cpp

#include <iostream>
	#include <string>
	using namespace std;
	
	int main() {
	    // String concatenation
	    string first = "Hello";
	    string second = "World";
	    string full = first + " " + second;
	
	    cout << full << endl;
	
	    // Length
	    cout << full.length() << endl;
	
	    // Substring
	    cout << full.substr(0, 5) << endl;
	
	    // Basic method: find
	    cout << full.find("World") << endl;
	
	    return 0;
	}

▶ Output

Hello World 11 Hello 6

◆ Explanation

It covers string concatenation, length, substr, and find in C++.

#10 pointers.cpp

#include <iostream>
	using namespace std;
	
	int main() {
	    int num = 10;
	
	    // Pointer stores the address of num
	    int* ptr = &num;
	
	    cout << num << endl;
	    cout << ptr << endl;
	    cout << *ptr << endl;
	
	    // Change value through the pointer
	    *ptr = 25;
	    cout << num << endl;
	
	    return 0;
	}

▶ Output

10 A memory address like 0x61ff08 10 25

◆ Explanation

A pointer stores an address, and dereference with * gives the value at that address. The address changes on different runs and computers.

#11 structures.cpp

#include <iostream>
	#include <string>
	using namespace std;
	
	// Structure declaration
	struct Student {
	    string name;
	    int age;
	    double cgpa;
	};
	
	int main() {
	    // Structure variable
	    Student s1;
	    s1.name = "Amina";
	    s1.age = 20;
	    s1.cgpa = 3.75;
	
	    cout << s1.name << endl;
	    cout << s1.age << endl;
	    cout << s1.cgpa << endl;
	
	    return 0;
	}

▶ Output

Amina 20 3.75

◆ Explanation

This card shows how to create a struct, store related data, and access members using dot notation.

OOP & STL

#12 oop.cpp

#include <iostream>
	#include <string>
	using namespace std;
	
	// Abstract base class
	class Animal {
	private:
	    // Encapsulation: private data
	    string name;
	
	public:
	    // Constructor
	    Animal(string n) : name(n) {
	        cout << "Animal constructor" << endl;
	    }
	
	    // Virtual destructor
	    virtual ~Animal() {
	        cout << "Animal destructor" << endl;
	    }
	
	    // Public method to access private data
	    string getName() const {
	        return name;
	    }
	
	    // Abstraction + polymorphism
	    virtual void sound() const = 0;
	};
	
	// Inheritance
	class Cat : public Animal {
	public:
	    Cat(string n) : Animal(n) {}
	
	    ~Cat() {
	        cout << "Cat destructor" << endl;
	    }
	
	    // Polymorphism: overriding base class method
	    void sound() const override {
	        cout << getName() << " says Meow" << endl;
	    }
	};
	
	int main() {
	    // Object creation
	    Cat cat("Mini");
	    cat.sound();
	
	    return 0;
	}

▶ Output

Animal constructor Mini says Meow Cat destructor Animal destructor

◆ Explanation

This single example shows class, object, constructor, destructor, inheritance, polymorphism, encapsulation, and abstraction in a beginner-friendly way.

#13 stl.cpp

#include <iostream>
	#include <vector>
	#include <utility>
	#include <map>
	#include <set>
	#include <stack>
	#include <queue>
	#include <algorithm>
	#include <string>
	using namespace std;
	
	int main() {
	    // vector + sort
	    vector<int> numbers = {5, 2, 9, 1};
	    sort(numbers.begin(), numbers.end());
	    for (int n : numbers) {
	        cout << n << " ";
	    }
	    cout << endl;
	
	    // pair
	    pair<string, int> info = {"Age", 20};
	    cout << info.first << " " << info.second << endl;
	
	    // map
	    map<string, int> marks;
	    marks["Math"] = 90;
	    marks["English"] = 85;
	    cout << marks["Math"] << endl;
	
	    // set
	    set<int> uniqueNumbers = {3, 1, 2, 2};
	    for (int n : uniqueNumbers) {
	        cout << n << " ";
	    }
	    cout << endl;
	
	    // stack
	    stack<int> st;
	    st.push(10);
	    st.push(20);
	    cout << st.top() << endl;
	
	    // queue
	    queue<int> line;
	    line.push(100);
	    line.push(200);
	    cout << line.front() << endl;
	
	    return 0;
	}

▶ Output

1 2 5 9 Age 20 90 1 2 3 20 100

◆ Explanation

This card covers vector, pair, map, set, stack, queue, and the sort algorithm from STL.

Files & Advanced

#14 file-handling.cpp

#include <iostream>
	#include <fstream>
	#include <string>
	using namespace std;
	
	int main() {
	    // Write to a file
	    ofstream outFile("demo.txt");
	    outFile << "Hello from C++ file handling";
	    outFile.close();
	
	    // Read from the same file
	    ifstream inFile("demo.txt");
	    string line;
	    getline(inFile, line);
	    cout << line << endl;
	    inFile.close();
	
	    return 0;
	}

▶ Output

Hello from C++ file handling

◆ Explanation

ofstream writes to a file and ifstream reads from a file.

#15 dynamic-memory.cpp

#include <iostream>
	using namespace std;
	
	int main() {
	    // Allocate one integer dynamically
	    int* number = new int(50);
	    cout << *number << endl;
	
	    // Free the memory
	    delete number;
	
	    // Allocate an array dynamically
	    int* arr = new int[3]{10, 20, 30};
	
	    for (int i = 0; i < 3; i++) {
	        cout << arr[i] << " ";
	    }
	    cout << endl;
	
	    // Free array memory
	    delete[] arr;
	
	    return 0;
	}

▶ Output

50 10 20 30

◆ Explanation

This example uses new to allocate memory and delete or delete[] to free it properly.

#16 templates.cpp

#include <iostream>
	using namespace std;
	
	// Template function
	template <typename T>
	T add(T a, T b) {
	    return a + b;
	}
	
	int main() {
	    cout << add<int>(5, 10) << endl;
	    cout << add<double>(2.5, 3.5) << endl;
	
	    return 0;
	}

▶ Output

15 6

◆ Explanation

Templates allow one function to work with different data types. This is the basic idea of generic programming.

#17 exception-handling.cpp

#include <iostream>
	#include <stdexcept>
	using namespace std;
	
	int main() {
	    try {
	        int a = 10;
	        int b = 0;
	
	        if (b == 0) {
	            throw runtime_error("Division by zero is not allowed");
	        }
	
	        cout << a / b << endl;
	    } catch (const exception& e) {
	        cout << e.what() << endl;
	    }
	
	    return 0;
	}

▶ Output

Division by zero is not allowed

◆ Explanation

try checks risky code, throw creates an error, and catch handles it safely.

#18 problem-solving.cpp

#include <iostream>
	using namespace std;
	
	int main() {
	    // Sum from 1 to 5
	    int sum = 0;
	    for (int i = 1; i <= 5; i++) {
	        sum += i;
	    }
	    cout << sum << endl;
	
	    // Small star pattern
	    for (int i = 1; i <= 3; i++) {
	        for (int j = 1; j <= i; j++) {
	            cout << "*";
	        }
	        cout << endl;
	    }
	
	    // Find the largest number
	    int arr[5] = {12, 45, 7, 89, 23};
	    int largest = arr[0];
	
	    for (int i = 1; i < 5; i++) {
	        if (arr[i] > largest) {
	            largest = arr[i];
	        }
	    }
	
	    cout << largest << endl;
	
	    return 0;
	}

▶ Output

15 * ** *** 89

◆ Explanation

This card includes simple logic building, pattern printing, loops, and finding the largest number.

{ Java }

Java is a popular object-oriented programming language used for software, Android apps, backend systems, and problem solving. These cards use clean beginner-friendly examples with comments so learners can understand and copy the code easily.

Basics

#1 VariablesExample.java

public class VariablesExample {
	    public static void main(String[] args) {
	        // Basic variables
	        int age = 20;
	        double price = 99.5;
	        char grade = 'A';
	        boolean isStudent = true;
	        String name = "Rahim";
	
	        System.out.println(age);
	        System.out.println(price);
	        System.out.println(grade);
	        System.out.println(isStudent);
	        System.out.println(name);
	    }
	}

▶ Output

20 99.5 A true Rahim

◆ Explanation

This card shows Java variables using int, double, char, boolean, and String.

#2 DataTypesExample.java

public class DataTypesExample {
	    public static void main(String[] args) {
	        // Primitive data types
	        byte smallNumber = 100;
	        int number = 10;
	        long bigNumber = 50000L;
	        float price = 5.5f;
	        double pi = 3.14159;
	        char letter = 'X';
	        boolean isPassed = true;
	
	        System.out.println("byte: " + smallNumber);
	        System.out.println("int: " + number);
	        System.out.println("long: " + bigNumber);
	        System.out.println("float: " + price);
	        System.out.println("double: " + pi);
	        System.out.println("char: " + letter);
	        System.out.println("boolean: " + isPassed);
	
	        // Type conversion
	        double converted = number;
	        int shortValue = (int) pi;
	
	        System.out.println("int to double: " + converted);
	        System.out.println("double to int: " + shortValue);
	    }
	}

▶ Output

byte: 100 int: 10 long: 50000 float: 5.5 double: 3.14159 char: X boolean: true int to double: 10.0 double to int: 3

◆ Explanation

This example shows primitive data types and type conversion in Java. Casting is needed when converting from a larger type to a smaller one.

#3 InputOutputExample.java

import java.util.Scanner;
	
	public class InputOutputExample {
	    public static void main(String[] args) {
	        Scanner input = new Scanner(System.in);
	
	        // Taking multiple inputs
	        String name = input.next();
	        int age = input.nextInt();
	        double salary = input.nextDouble();
	
	        // Showing multiple outputs
	        System.out.println("Name: " + name);
	        System.out.println("Age: " + age);
	        System.out.println("Salary: " + salary);
	
	        input.close();
	    }
	}

▶ Output

Sample input: Rahim 20 5500.5 Sample output: Name: Rahim Age: 20 Salary: 5500.5

◆ Explanation

Scanner is used for input in Java. next, nextInt, and nextDouble read different types of values.

#4 OperatorsExample.java

public class OperatorsExample {
	    public static void main(String[] args) {
	        int a = 10;
	        int b = 3;
	
	        // Arithmetic operators
	        System.out.println(a + b);
	        System.out.println(a - b);
	        System.out.println(a * b);
	        System.out.println(a / b);
	        System.out.println(a % b);
	
	        // Comparison operators
	        System.out.println(a > b);
	        System.out.println(a == b);
	
	        // Logical operators
	        System.out.println(a > 5 && b < 5);
	        System.out.println(a < 5 || b < 5);
	
	        // Assignment operator
	        int total = 5;
	        total += 2;
	        System.out.println(total);
	    }
	}

▶ Output

13 7 30 3 1 true false true true 7

◆ Explanation

This card covers arithmetic, comparison, logical, and assignment operators. Since a and b are int, a / b gives 3.

#5 ConditionalsExample.java

public class ConditionalsExample {
	    public static void main(String[] args) {
	        // if / else if / else
	        int marks = 75;
	
	        if (marks >= 80) {
	            System.out.println("Grade A+");
	        } else if (marks >= 70) {
	            System.out.println("Grade A");
	        } else {
	            System.out.println("Need more practice");
	        }
	
	        // switch statement
	        int day = 2;
	
	        switch (day) {
	            case 1:
	                System.out.println("Saturday");
	                break;
	            case 2:
	                System.out.println("Sunday");
	                break;
	            default:
	                System.out.println("Unknown day");
	        }
	    }
	}

▶ Output

Grade A Sunday

◆ Explanation

This example shows if, else if, else, and switch for decision making in Java.

#6 LoopsExample.java

public class LoopsExample {
	    public static void main(String[] args) {
	        // for loop
	        for (int i = 1; i <= 3; i++) {
	            System.out.print(i + " ");
	        }
	        System.out.println();
	
	        // while loop
	        int j = 1;
	        while (j <= 3) {
	            System.out.print(j + " ");
	            j++;
	        }
	        System.out.println();
	
	        // do...while loop
	        int k = 1;
	        do {
	            System.out.print(k + " ");
	            k++;
	        } while (k <= 3);
	        System.out.println();
	
	        // nested loop
	        for (int row = 1; row <= 2; row++) {
	            for (int col = 1; col <= 3; col++) {
	                System.out.print("*");
	            }
	            System.out.println();
	        }
	    }
	}

▶ Output

1 2 3 1 2 3 1 2 3 *** ***

◆ Explanation

This card shows for, while, do...while, and nested loops for repeated execution.

Methods & Data

#7 MethodsExample.java

public class MethodsExample {
	    // Method with parameters and return value
	    public static int add(int a, int b) {
	        return a + b;
	    }
	
	    // Recursive method
	    public static int factorial(int n) {
	        if (n == 0 || n == 1) {
	            return 1;
	        }
	        return n * factorial(n - 1);
	    }
	
	    public static void main(String[] args) {
	        System.out.println(add(5, 7));
	        System.out.println(factorial(5));
	    }
	}

▶ Output

12 120

◆ Explanation

This card shows method declaration, parameters, return value, method call, and recursion.

#8 ArraysExample.java

public class ArraysExample {
	    public static void main(String[] args) {
	        // One-dimensional array
	        int[] numbers = {10, 20, 30, 40, 50};
	
	        // Update first value
	        numbers[0] = 100;
	
	        for (int i = 0; i < numbers.length; i++) {
	            System.out.print(numbers[i] + " ");
	        }
	        System.out.println();
	
	        // Two-dimensional array
	        int[][] matrix = {
	            {1, 2},
	            {3, 4}
	        };
	
	        for (int i = 0; i < matrix.length; i++) {
	            for (int j = 0; j < matrix[i].length; j++) {
	                System.out.print(matrix[i][j] + " ");
	            }
	            System.out.println();
	        }
	    }
	}

▶ Output

100 20 30 40 50 1 2 3 4

◆ Explanation

This example shows 1D array, 2D array, iteration, and basic update operations.

#9 StringsExample.java

public class StringsExample {
	    public static void main(String[] args) {
	        // String concatenation
	        String first = "Hello";
	        String second = "World";
	        String full = first + " " + second;
	
	        System.out.println(full);
	
	        // Length
	        System.out.println(full.length());
	
	        // Substring
	        System.out.println(full.substring(0, 5));
	
	        // Basic string methods
	        System.out.println(full.toUpperCase());
	        System.out.println(full.contains("World"));
	    }
	}

▶ Output

Hello World 11 Hello HELLO WORLD true

◆ Explanation

This card covers string concatenation, length, substring, uppercase conversion, and contains.

OOP

#10 OOPExample.java

class Student {
	    // Encapsulation: private fields
	    private String name;
	    private int age;
	
	    // Constructor
	    Student(String name, int age) {
	        this.name = name;
	        this.age = age;
	    }
	
	    // Getter
	    public String getName() {
	        return name;
	    }
	
	    // Setter
	    public void setAge(int age) {
	        this.age = age;
	    }
	
	    public void showInfo() {
	        System.out.println("Name: " + name);
	        System.out.println("Age: " + age);
	    }
	}
	
	public class OOPExample {
	    public static void main(String[] args) {
	        // Object creation
	        Student s1 = new Student("Amina", 20);
	        s1.setAge(21);
	        s1.showInfo();
	        System.out.println(s1.getName());
	    }
	}

▶ Output

Name: Amina Age: 21 Amina

◆ Explanation

This card shows class, object, constructor, and encapsulation using private fields with getter and setter methods.

#11 InheritanceExample.java

class Animal {
	    public void sound() {
	        System.out.println("Animal makes a sound");
	    }
	}
	
	class Cat extends Animal {
	    @Override
	    public void sound() {
	        System.out.println("Cat says Meow");
	    }
	}
	
	public class InheritanceExample {
	    public static void main(String[] args) {
	        // Polymorphism
	        Animal animal = new Cat();
	        animal.sound();
	    }
	}

▶ Output

Cat says Meow

◆ Explanation

This example shows inheritance and polymorphism. A child class overrides the parent class method.

#12 AbstractionExample.java

interface Shape {
	    double area();
	}
	
	class Circle implements Shape {
	    private double radius;
	
	    Circle(double radius) {
	        this.radius = radius;
	    }
	
	    @Override
	    public double area() {
	        return 3.1416 * radius * radius;
	    }
	}
	
	public class AbstractionExample {
	    public static void main(String[] args) {
	        Shape shape = new Circle(3);
	        System.out.println(shape.area());
	    }
	}

▶ Output

28.2744

◆ Explanation

This card shows abstraction using an interface. The interface defines what to do, and the class provides the actual implementation.

Collections & Files

#13 CollectionsExample.java

import java.util.ArrayList;
	import java.util.Collections;
	import java.util.HashMap;
	import java.util.LinkedHashSet;
	import java.util.LinkedList;
	import java.util.Map;
	import java.util.Queue;
	import java.util.Set;
	import java.util.Stack;
	
	public class CollectionsExample {
	    public static void main(String[] args) {
	        // ArrayList
	        ArrayList<Integer> numbers = new ArrayList<>();
	        numbers.add(5);
	        numbers.add(2);
	        numbers.add(9);
	        numbers.add(1);
	        Collections.sort(numbers);
	        System.out.println(numbers);
	
	        // HashMap
	        HashMap<String, Integer> marks = new HashMap<>();
	        marks.put("Math", 90);
	        marks.put("English", 85);
	        System.out.println(marks.get("Math"));
	
	        // Set
	        Set<String> skills = new LinkedHashSet<>();
	        skills.add("Java");
	        skills.add("Spring");
	        skills.add("Java");
	        System.out.println(skills);
	
	        // Stack
	        Stack<Integer> stack = new Stack<>();
	        stack.push(10);
	        stack.push(20);
	        System.out.println(stack.peek());
	
	        // Queue
	        Queue<Integer> queue = new LinkedList<>();
	        queue.offer(100);
	        queue.offer(200);
	        System.out.println(queue.peek());
	    }
	}

▶ Output

[1, 2, 5, 9] 90 [Java, Spring] 20 100

◆ Explanation

This card covers ArrayList, HashMap, Set, Stack, Queue, and Collections.sort in Java.

#14 FileHandlingExample.java

import java.io.File;
	import java.io.FileWriter;
	import java.io.IOException;
	import java.util.Scanner;
	
	public class FileHandlingExample {
	    public static void main(String[] args) {
	        try {
	            // Write to a file
	            FileWriter writer = new FileWriter("demo.txt");
	            writer.write("Hello from Java file handling");
	            writer.close();
	
	            // Read from the same file
	            File file = new File("demo.txt");
	            Scanner reader = new Scanner(file);
	
	            while (reader.hasNextLine()) {
	                System.out.println(reader.nextLine());
	            }
	
	            reader.close();
	        } catch (IOException e) {
	            System.out.println("File error: " + e.getMessage());
	        }
	    }
	}

▶ Output

Hello from Java file handling

◆ Explanation

FileWriter writes to a file, File and Scanner read from a file, and IOException handles file errors.

Errors & Practice

#15 ExceptionHandlingExample.java

public class ExceptionHandlingExample {
	    public static void main(String[] args) {
	        try {
	            int a = 10;
	            int b = 0;
	
	            // This will cause an exception
	            int result = a / b;
	            System.out.println(result);
	        } catch (ArithmeticException e) {
	            System.out.println("Cannot divide by zero");
	        } finally {
	            System.out.println("Program finished");
	        }
	    }
	}

▶ Output

Cannot divide by zero Program finished

◆ Explanation

try runs risky code, catch handles the error, and finally runs whether an error happens or not.

#16 ProblemSolvingExample.java

public class ProblemSolvingExample {
	    public static void main(String[] args) {
	        // Sum from 1 to 5
	        int sum = 0;
	        for (int i = 1; i <= 5; i++) {
	            sum += i;
	        }
	        System.out.println(sum);
	
	        // Small star pattern
	        for (int i = 1; i <= 3; i++) {
	            for (int j = 1; j <= i; j++) {
	                System.out.print("*");
	            }
	            System.out.println();
	        }
	
	        // Find the largest number
	        int[] numbers = {12, 45, 7, 89, 23};
	        int largest = numbers[0];
	
	        for (int i = 1; i < numbers.length; i++) {
	            if (numbers[i] > largest) {
	                largest = numbers[i];
	            }
	        }
	
	        System.out.println(largest);
	    }
	}

▶ Output

15 * ** *** 89

◆ Explanation

This card includes simple logic building, loops, pattern printing, and finding the largest number from an array.

{ Tailwind CSS }

Tailwind CSS is a utility-first CSS framework. Instead of writing custom CSS rules, you style elements directly with ready-made class names like padding, margin, colors, flex, grid, and responsive breakpoints.

Getting Started

#1 setup.html

<!-- Tailwind CSS CDN setup -->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>Tailwind Setup</title>
	
	    <!-- Tailwind CSS CDN -->
	    <script src="https://cdn.tailwindcss.com"></script>
	</head>
	<body class="bg-gray-100 p-6">
	    <h1 class="text-3xl font-bold text-blue-600">Hello Tailwind</h1>
	</body>
	</html>

▶ Output

A light gray page with a bold blue heading saying "Hello Tailwind".

◆ Explanation

The CDN script loads Tailwind quickly for beginners. After adding it, you can use Tailwind utility classes directly in HTML.

Core Utilities

#2 text-colors.html

<!-- Text size, weight, alignment, and colors -->
	<div class="p-6 bg-white">
	    <h1 class="text-4xl font-bold text-blue-600 text-center">Main Title</h1>
	    <p class="text-gray-700 mt-4">This is a paragraph with Tailwind text color.</p>
	    <p class="text-green-600 font-semibold">Success message</p>
	    <p class="text-red-500 italic">Error message</p>
	</div>

▶ Output

A centered blue heading, a gray paragraph, a green success text, and a red italic error text.

◆ Explanation

text-4xl sets font size, font-bold makes text bold, text-blue-600 sets color, and text-center aligns text to the center.

#3 spacing.html

<!-- Margin and padding example -->
	<div class="bg-gray-200 p-8 m-6 rounded-lg">
	    <h2 class="text-2xl font-semibold mb-4">Spacing Example</h2>
	    <p class="bg-white p-4 mt-2 rounded">
	        This box uses padding and margin classes.
	    </p>
	</div>

▶ Output

A gray rounded box with space inside and outside, containing a white inner box with comfortable padding.

◆ Explanation

p means padding and m means margin. Higher numbers like p-8 or m-6 create more space.

#4 width-height.html

<!-- Width and height utilities -->
	<div class="w-64 h-32 bg-blue-500 text-white flex items-center justify-center rounded-lg">
	    Fixed Box
	</div>
	
	<div class="w-full max-w-md h-24 bg-green-500 text-white mt-4 flex items-center justify-center rounded-lg">
	    Responsive Width Box
	</div>

▶ Output

A blue fixed-size box and a green responsive box with centered white text.

◆ Explanation

w-64 sets fixed width, h-32 sets height, w-full uses full available width, and max-w-md limits the maximum width.

#5 flexbox.html

<!-- Flexbox layout -->
	<div class="flex justify-between items-center bg-white p-4 rounded-lg shadow">
	    <div class="bg-blue-500 text-white px-4 py-2 rounded">Left</div>
	    <div class="bg-green-500 text-white px-4 py-2 rounded">Center</div>
	    <div class="bg-red-500 text-white px-4 py-2 rounded">Right</div>
	</div>

▶ Output

Three colored boxes placed in one row with equal spacing between them.

◆ Explanation

flex creates a flex container, justify-between spreads items across the row, and items-center aligns them vertically.

#6 grid.html

<!-- Grid layout -->
	<div class="grid grid-cols-3 gap-4">
	    <div class="bg-blue-500 text-white p-4 rounded">1</div>
	    <div class="bg-green-500 text-white p-4 rounded">2</div>
	    <div class="bg-red-500 text-white p-4 rounded">3</div>
	    <div class="bg-purple-500 text-white p-4 rounded">4</div>
	    <div class="bg-yellow-500 text-black p-4 rounded">5</div>
	    <div class="bg-pink-500 text-white p-4 rounded">6</div>
	</div>

▶ Output

Six colored boxes arranged in a 3-column grid with gaps between them.

◆ Explanation

grid creates a grid container, grid-cols-3 makes 3 columns, and gap-4 adds spacing between grid items.

Responsive & States

#7 responsive.html

<!-- Responsive design -->
	<div class="bg-blue-500 text-white p-4 text-center sm:bg-green-500 md:bg-yellow-500 lg:bg-red-500">
	    Resize the screen to see color changes
	</div>
	
	<div class="text-sm sm:text-base md:text-xl lg:text-3xl mt-4">
	    Responsive text size
	</div>

▶ Output

A box and text that change style based on screen size.

◆ Explanation

sm, md, and lg are responsive breakpoints. Tailwind applies those classes when the screen reaches that size.

#8 hover-focus.html

<!-- Hover and focus states -->
	<button class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2 rounded transition">
	    Hover Me
	</button>
	
	<input
	    type="text"
	    placeholder="Click here"
	    class="border border-gray-400 focus:border-blue-500 focus:outline-none px-4 py-2 rounded mt-4 block"
	/>

▶ Output

A blue button that gets darker on hover, and an input field that gets a blue border when focused.

◆ Explanation

hover changes styles when the mouse is over an element, and focus changes styles when the element is active or selected.

Common Components

#9 buttons.html

<!-- Different button styles -->
	<div class="space-x-3">
	    <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
	        Primary
	    </button>
	
	    <button class="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300">
	        Secondary
	    </button>
	
	    <button class="border border-red-500 text-red-500 px-4 py-2 rounded-lg hover:bg-red-500 hover:text-white">
	        Danger
	    </button>
	</div>

▶ Output

Three styled buttons: primary blue, secondary gray, and danger red.

◆ Explanation

Tailwind buttons are built by combining utilities for background, text, padding, border, radius, and hover state.

#10 card.html

<!-- Card component -->
	<div class="max-w-sm bg-white rounded-xl shadow-md overflow-hidden">
	    <img
	        src="https://picsum.photos/400/200"
	        alt="Sample image"
	        class="w-full h-48 object-cover"
	    />
	    <div class="p-5">
	        <h3 class="text-xl font-bold text-gray-800">Card Title</h3>
	        <p class="text-gray-600 mt-2">
	            This is a simple Tailwind card example.
	        </p>
	        <button class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
	            Read More
	        </button>
	    </div>
	</div>

▶ Output

A white card with image, title, description, and blue action button.

◆ Explanation

This card uses max width, rounded corners, shadow, image sizing, spacing, and button styling to build a common UI component.

#11 navbar.html

<!-- Simple navbar -->
	<nav class="bg-gray-900 text-white px-6 py-4 flex justify-between items-center">
	    <h1 class="text-xl font-bold">CodeNote</h1>
	
	    <div class="space-x-4">
	        <a href="#" class="hover:text-blue-400">Home</a>
	        <a href="#" class="hover:text-blue-400">Notes</a>
	        <a href="#" class="hover:text-blue-400">Contact</a>
	    </div>
	</nav>

▶ Output

A dark navigation bar with a site title on the left and links on the right.

◆ Explanation

This navbar uses flex for layout, spacing utilities, background color, text color, and hover effects on links.

#12 form.html

<!-- Simple form -->
	<form class="max-w-md bg-white p-6 rounded-xl shadow space-y-4">
	    <div>
	        <label class="block text-sm font-medium text-gray-700">Name</label>
	        <input
	            type="text"
	            class="w-full border border-gray-300 rounded-lg px-4 py-2 mt-1 focus:outline-none focus:border-blue-500"
	            placeholder="Enter your name"
	        />
	    </div>
	
	    <div>
	        <label class="block text-sm font-medium text-gray-700">Email</label>
	        <input
	            type="email"
	            class="w-full border border-gray-300 rounded-lg px-4 py-2 mt-1 focus:outline-none focus:border-blue-500"
	            placeholder="Enter your email"
	        />
	    </div>
	
	    <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
	        Submit
	    </button>
	</form>

▶ Output

A neat white form with two inputs and a blue submit button.

◆ Explanation

This form uses spacing, border, radius, width, focus state, and button utilities to build a clean input form.

Extra Utilities

#13 position.html

<!-- Position utilities -->
	<div class="relative w-64 h-40 bg-gray-200 rounded-lg">
	    <div class="absolute top-2 right-2 bg-red-500 text-white px-3 py-1 rounded">
	        New
	    </div>
	
	    <div class="absolute bottom-2 left-2 bg-blue-500 text-white px-3 py-1 rounded">
	        Bottom Tag
	    </div>
	</div>

▶ Output

A gray box with one badge in the top-right corner and another in the bottom-left corner.

◆ Explanation

relative makes the parent the reference point, and absolute places child elements exactly where you want inside it.

#14 full-example.html

<!-- Full mini landing section -->
	<section class="min-h-screen bg-gradient-to-r from-blue-100 to-indigo-200 flex items-center justify-center p-6">
	    <div class="max-w-2xl bg-white rounded-2xl shadow-xl p-8 text-center">
	        <h1 class="text-4xl md:text-5xl font-bold text-gray-800">
	            Learn Tailwind CSS
	        </h1>
	
	        <p class="text-gray-600 mt-4 text-lg">
	            Build modern websites faster using utility classes.
	        </p>
	
	        <div class="mt-6 flex flex-col sm:flex-row justify-center gap-4">
	            <button class="bg-blue-600 text-white px-6 py-3 rounded-xl hover:bg-blue-700">
	                Get Started
	            </button>
	
	            <button class="bg-white border border-gray-300 text-gray-800 px-6 py-3 rounded-xl hover:bg-gray-100">
	                View Docs
	            </button>
	        </div>
	    </div>
	</section>

▶ Output

A centered landing section with gradient background, white card, heading, paragraph, and two responsive buttons.

◆ Explanation

This final example combines layout, colors, spacing, responsive design, flexbox, buttons, shadows, and rounded corners in one complete Tailwind section.

{ Go }

Go is a fast compiled language used for servers, tooling, and APIs. These cards cover variables, branching, functions, slices, and structs in a simple beginner-friendly way.

Core Basics

#1 variables.go

package main

import "fmt"

func main() {
    name := "CynphoCode"
    var lessons int = 4
    isFree := true

    fmt.Println(name)
    fmt.Println(lessons)
    fmt.Println(isFree)
}

▶ Output

CynphoCode 4 true

◆ Explanation

Go supports short declaration with := and explicit typed variables with var.

#2 conditionals.go

package main

import "fmt"

func main() {
    score := 78

    if score >= 80 {
        fmt.Println("Excellent")
    } else if score >= 60 {
        fmt.Println("Passed")
    } else {
        fmt.Println("Try again")
    }
}

▶ Output

Passed

◆ Explanation

Go uses braces for every branch and does not require parentheses around the condition.

Functions & Data

#3 functions-slices.go

package main

import "fmt"

func total(numbers []int) int {
    sum := 0
    for _, n := range numbers {
        sum += n
    }
    return sum
}

func main() {
    scores := []int{10, 20, 30}
    fmt.Println(total(scores))
}

▶ Output

60

◆ Explanation

Slices are flexible lists in Go, and range helps loop through each element.

#4 structs.go

package main

import "fmt"

type User struct {
    Name string
    Role string
}

func main() {
    dev := User{Name: "Rafi", Role: "Backend"}
    fmt.Println(dev.Name, dev.Role)
}

▶ Output

Rafi Backend

◆ Explanation

Structs let you group related data into a single custom type.

{ Ruby }

Ruby is a simple and elegant programming language used for scripting, web development, automation, and learning programming concepts. These cards use clean beginner-friendly examples with comments so learners can copy and understand the code easily.

Basics

#1 variables.rb

# Ruby variables do not need a type
	name = "Rahim"
	age = 20
	price = 99.5
	
	# Update a variable
	age = 21
	
	puts name
	puts age
	puts price

▶ Output

Rahim 21 99.5

◆ Explanation

Ruby is dynamically typed, so you can create variables without writing the data type first.

#2 data-types.rb

number = 100
	text = "Hello Ruby"
	is_passed = true
	colors = ["red", "green"]
	user = { name: "Rafi", age: 20 }
	empty_value = nil
	
	puts number.class
	puts text.class
	puts is_passed.class
	puts colors.class
	puts user.class
	puts empty_value.nil?

▶ Output

Integer String TrueClass Array Hash true

◆ Explanation

This card shows Integer, String, Boolean, Array, Hash, and nil. In Ruby, everything is an object.

#3 input-output.rb

# Take input from user
	name = gets.chomp
	age = gets.to_i
	
	# Show output
	puts "Name: #{name}"
	puts "Age: #{age}"

▶ Output

Sample input: Rahim 20 Sample output: Name: Rahim Age: 20

◆ Explanation

`gets` takes input, `chomp` removes the newline, and `to_i` converts text into an integer.

#4 operators.rb

a = 10
	b = 3
	
	# Arithmetic operators
	puts a + b
	puts a - b
	puts a * b
	puts a / b
	puts a % b
	
	# Comparison operators
	puts a > b
	puts a == b
	
	# Logical operators
	puts a > 5 && b < 5
	puts a < 5 || b < 5

▶ Output

13 7 30 3 1 true false true true

◆ Explanation

This card covers arithmetic, comparison, and logical operators. Since both values are integers, division gives a whole number.

#5 conditionals.rb

marks = 75
	
	if marks >= 80
	  puts "A+"
	elsif marks >= 70
	  puts "A"
	else
	  puts "Need more practice"
	end

▶ Output

A

◆ Explanation

Ruby uses `if`, `elsif`, `else`, and `end` for decision making.

#6 loops.rb

# for loop
	for i in 1..3
	  puts i
	end
	
	# while loop
	j = 1
	while j <= 3
	  puts j
	  j += 1
	end
	
	# each loop
	["A", "B", "C"].each do |item|
	  puts item
	end

▶ Output

1 2 3 1 2 3 A B C

◆ Explanation

Ruby supports `for`, `while`, and iterator-based loops like `each`.

Methods & Collections

#7 methods.rb

def add(a, b)
	  a + b
	end
	
	def factorial(n)
	  return 1 if n == 0 || n == 1
	
	  n * factorial(n - 1)
	end
	
	puts add(5, 7)
	puts factorial(5)

▶ Output

12 120

◆ Explanation

This card shows method definition, parameters, return value, and recursion in Ruby.

#8 arrays.rb

colors = ["red", "green", "blue"]
	
	# Add and remove items
	colors.push("yellow")
	colors.pop
	
	puts colors[0]
	puts colors.length
	
	colors.each do |color|
	  puts color
	end

▶ Output

red 3 red green blue

◆ Explanation

Arrays store multiple values. `push` adds an item, `pop` removes the last item, and `each` loops through the array.

#9 strings.rb

first = "Hello"
	second = "Ruby"
	
	# String interpolation
	full = "#{first} #{second}"
	
	puts full
	puts full.length
	puts full.upcase
	puts full[0, 5]

▶ Output

Hello Ruby 10 HELLO RUBY Hello

◆ Explanation

This card covers string interpolation, length, uppercase conversion, and substring access in Ruby.

#10 hashes.rb

student = {
	  name: "Rafi",
	  age: 20,
	  city: "Dhaka"
	}
	
	# Update value
	student[:age] = 21
	
	puts student[:name]
	puts student[:city]
	puts student[:age]
	
	student.each do |key, value|
	  puts "#{key}: #{value}"
	end

▶ Output

Rafi Dhaka 21 name: Rafi age: 21 city: Dhaka

◆ Explanation

A Hash stores data as key-value pairs. It is similar to objects or dictionaries in other languages.

OOP

#11 classes-objects.rb

class Student
	  attr_accessor :name, :age
	
	  def initialize(name, age)
	    @name = name
	    @age = age
	  end
	
	  def show_info
	    puts "Name: #{@name}"
	    puts "Age: #{@age}"
	  end
	end
	
	s1 = Student.new("Amina", 20)
	s1.show_info

▶ Output

Name: Amina Age: 20

◆ Explanation

This card shows class, object, instance variables, constructor, and method in Ruby.

#12 inheritance.rb

class Animal
	  def sound
	    puts "Animal makes a sound"
	  end
	end
	
	class Cat < Animal
	  def sound
	    puts "Cat says Meow"
	  end
	end
	
	cat = Cat.new
	cat.sound

▶ Output

Cat says Meow

◆ Explanation

This example shows inheritance. `Cat < Animal` means Cat inherits from Animal and can override methods.

#13 modules.rb

module Greeting
	  def say_hello
	    puts "Hello from module"
	  end
	end
	
	class Person
	  include Greeting
	end
	
	person = Person.new
	person.say_hello

▶ Output

Hello from module

◆ Explanation

Modules are used to organize code and share methods between classes using `include`.

Files & Errors

#14 file-handling.rb

# Write to a file
	File.write("demo.txt", "Hello from Ruby file handling")
	
	# Read from the file
	content = File.read("demo.txt")
	puts content

▶ Output

Hello from Ruby file handling

◆ Explanation

`File.write` writes to a file and `File.read` reads the file content.

#15 exception-handling.rb

begin
	  a = 10
	  b = 0
	
	  result = a / b
	  puts result
	rescue ZeroDivisionError
	  puts "Cannot divide by zero"
	end

▶ Output

Cannot divide by zero

◆ Explanation

Ruby uses `begin`, `rescue`, and `end` for exception handling.

Practice

#16 problem-solving.rb

# Sum from 1 to 5
	sum = 0
	
	for i in 1..5
	  sum += i
	end
	
	puts sum
	
	# Small star pattern
	for i in 1..3
	  puts "*" * i
	end
	
	# Find the largest number
	numbers = [12, 45, 7, 89, 23]
	largest = numbers[0]
	
	numbers.each do |number|
	  largest = number if number > largest
	end
	
	puts largest

▶ Output

15 * ** *** 89

◆ Explanation

This card includes simple logic building, loops, pattern printing, and finding the largest number from an array.

{ Rust }

Rust is a modern systems programming language focused on speed, safety, and memory correctness. These cards use clean beginner-friendly examples with comments so learners can copy and understand the code easily.

Basics

#1 variables.rs

fn main() {
	    // Immutable variable
	    let name = "Rahim";
	
	    // Mutable variable
	    let mut age = 20;
	    age = 21;
	
	    // Constant
	    const COUNTRY: &str = "Bangladesh";
	
	    println!("{}", name);
	    println!("{}", age);
	    println!("{}", COUNTRY);
	}

▶ Output

Rahim 21 Bangladesh

◆ Explanation

Rust variables are immutable by default. Use `mut` when you want to change a value later.

#2 data-types.rs

fn main() {
	    let number: i32 = 10;
	    let price: f64 = 99.5;
	    let grade: char = 'A';
	    let is_passed: bool = true;
	    let text: &str = "Hello Rust";
	
	    println!("{}", number);
	    println!("{}", price);
	    println!("{}", grade);
	    println!("{}", is_passed);
	    println!("{}", text);
	}

▶ Output

10 99.5 A true Hello Rust

◆ Explanation

This card shows common Rust data types like integer, float, char, bool, and string slice.

#3 input-output.rs

use std::io;
	
	fn main() {
	    let mut name = String::new();
	
	    io::stdin()
	        .read_line(&mut name)
	        .expect("Failed to read input");
	
	    println!("Hello, {}", name.trim());
	}

▶ Output

Sample input: Rahim Sample output: Hello, Rahim

◆ Explanation

`read_line` takes user input into a String, and `trim()` removes the extra newline character.

#4 operators.rs

fn main() {
	    let a = 10;
	    let b = 3;
	
	    // Arithmetic operators
	    println!("{}", a + b);
	    println!("{}", a - b);
	    println!("{}", a * b);
	    println!("{}", a / b);
	    println!("{}", a % b);
	
	    // Comparison operators
	    println!("{}", a > b);
	    println!("{}", a == b);
	
	    // Logical operators
	    println!("{}", a > 5 && b < 5);
	    println!("{}", a < 5 || b < 5);
	}

▶ Output

13 7 30 3 1 true false true true

◆ Explanation

This card covers arithmetic, comparison, and logical operators. Integer division gives a whole number result.

#5 conditionals.rs

fn main() {
	    let marks = 75;
	
	    if marks >= 80 {
	        println!("A+");
	    } else if marks >= 70 {
	        println!("A");
	    } else {
	        println!("Need more practice");
	    }
	}

▶ Output

A

◆ Explanation

Rust uses `if`, `else if`, and `else` for decision making. Parentheses are not required around the condition.

#6 loops.rs

fn main() {
	    // for loop
	    for i in 1..=3 {
	        println!("{}", i);
	    }
	
	    // while loop
	    let mut j = 1;
	    while j <= 3 {
	        println!("{}", j);
	        j += 1;
	    }
	
	    // loop with break
	    let mut k = 1;
	    loop {
	        println!("{}", k);
	        k += 1;
	
	        if k > 3 {
	            break;
	        }
	    }
	}

▶ Output

1 2 3 1 2 3 1 2 3

◆ Explanation

Rust supports `for`, `while`, and `loop`. `loop` runs forever until `break` stops it.

Functions & Data

#7 functions.rs

fn add(a: i32, b: i32) -> i32 {
	    a + b
	}
	
	fn factorial(n: i32) -> i32 {
	    if n == 0 || n == 1 {
	        1
	    } else {
	        n * factorial(n - 1)
	    }
	}
	
	fn main() {
	    println!("{}", add(5, 7));
	    println!("{}", factorial(5));
	}

▶ Output

12 120

◆ Explanation

This card shows function parameters, return type, and recursion. In Rust, the last expression can be returned without `return`.

#8 arrays-vectors.rs

fn main() {
	    // Fixed-size array
	    let numbers = [10, 20, 30];
	    println!("{}", numbers[0]);
	
	    // Vector
	    let mut colors = vec!["red", "green", "blue"];
	    colors.push("yellow");
	    println!("{}", colors.len());
	
	    for color in colors {
	        println!("{}", color);
	    }
	}

▶ Output

10 4 red green blue yellow

◆ Explanation

Arrays have fixed size, but vectors can grow or shrink. `vec![]` creates a vector easily.

#9 strings.rs

fn main() {
	    let mut text = String::from("Hello");
	
	    // Add more text
	    text.push_str(" Rust");
	
	    println!("{}", text);
	    println!("{}", text.len());
	    println!("{}", text.to_uppercase());
	    println!("{}", &text[0..5]);
	}

▶ Output

Hello Rust 10 HELLO RUST Hello

◆ Explanation

This card shows String creation, adding text, length, uppercase conversion, and a simple slice example.

#10 ownership.rs

fn len(text: &String) -> usize {
	    text.len()
	}
	
	fn main() {
	    let s1 = String::from("Hello");
	
	    // Clone creates a full copy
	    let s2 = s1.clone();
	
	    println!("{}", s1);
	    println!("{}", s2);
	
	    // Borrowing with &
	    println!("{}", len(&s1));
	}

▶ Output

Hello Hello 5

◆ Explanation

Rust uses ownership for memory safety. `clone()` copies data, and `&` borrows a reference without taking ownership.

Structs & Enums

#11 structs.rs

struct Student {
	    name: String,
	    age: u32,
	}
	
	fn main() {
	    let student = Student {
	        name: String::from("Amina"),
	        age: 20,
	    };
	
	    println!("{}", student.name);
	    println!("{}", student.age);
	}

▶ Output

Amina 20

◆ Explanation

Structs let you group related values together, like name and age for a student.

#12 enums-match.rs

enum Day {
	    Saturday,
	    Sunday,
	    Monday,
	}
	
	fn main() {
	    let day = Day::Sunday;
	
	    match day {
	        Day::Saturday => println!("Weekend"),
	        Day::Sunday => println!("Holiday"),
	        Day::Monday => println!("Work day"),
	    }
	}

▶ Output

Holiday

◆ Explanation

Enums define a type with multiple possible values, and `match` checks each case clearly.

Files & Errors

#13 hashmap.rs

use std::collections::HashMap;
	
	fn main() {
	    let mut marks = HashMap::new();
	
	    marks.insert("Math", 90);
	    marks.insert("English", 85);
	
	    println!("{}", marks["Math"]);
	
	    for (subject, mark) in &marks {
	        println!("{}: {}", subject, mark);
	    }
	}

▶ Output

90 Math: 90 English: 85

◆ Explanation

HashMap stores data as key-value pairs, similar to objects or dictionaries in other languages.

#14 file-handling.rs

use std::fs;
	
	fn main() {
	    // Write to a file
	    fs::write("demo.txt", "Hello from Rust file handling")
	        .expect("Unable to write file");
	
	    // Read from the file
	    let content = fs::read_to_string("demo.txt")
	        .expect("Unable to read file");
	
	    println!("{}", content);
	}

▶ Output

Hello from Rust file handling

◆ Explanation

`fs::write` writes to a file and `fs::read_to_string` reads the content from a file.

#15 error-handling.rs

fn divide(a: f64, b: f64) -> Result<f64, String> {
	    if b == 0.0 {
	        Err(String::from("Cannot divide by zero"))
	    } else {
	        Ok(a / b)
	    }
	}
	
	fn main() {
	    match divide(10.0, 0.0) {
	        Ok(result) => println!("{}", result),
	        Err(message) => println!("{}", message),
	    }
	}

▶ Output

Cannot divide by zero

◆ Explanation

Rust uses `Result` for safe error handling. `Ok` means success and `Err` means something went wrong.

Practice

#16 problem-solving.rs

fn main() {
	    // Sum from 1 to 5
	    let mut sum = 0;
	    for i in 1..=5 {
	        sum += i;
	    }
	    println!("{}", sum);
	
	    // Small star pattern
	    for i in 1..=3 {
	        println!("{}", "*".repeat(i));
	    }
	
	    // Find the largest number
	    let numbers = [12, 45, 7, 89, 23];
	    let mut largest = numbers[0];
	
	    for number in numbers {
	        if number > largest {
	            largest = number;
	        }
	    }
	
	    println!("{}", largest);
	}

▶ Output

15 * ** *** 89

◆ Explanation

This card includes simple logic building, pattern printing, loops, and finding the largest number from an array.

{ Kotlin }

Kotlin is a modern programming language used for Android development, backend development, and general-purpose programming. These cards use clean beginner-friendly examples with comments so learners can copy and understand the code easily.

Basics

#1 variables.kt

fun main() {
	    // val = read-only variable
	    val name = "Rahim"
	
	    // var = mutable variable
	    var age = 20
	    age = 21
	
	    println(name)
	    println(age)
	}

▶ Output

Rahim 21

◆ Explanation

In Kotlin, `val` cannot be reassigned, but `var` can be changed later.

#2 data-types.kt

fun main() {
	    val number: Int = 10
	    val price: Double = 99.5
	    val grade: Char = 'A'
	    val isPassed: Boolean = true
	    val text: String = "Hello Kotlin"
	
	    println(number)
	    println(price)
	    println(grade)
	    println(isPassed)
	    println(text)
	}

▶ Output

10 99.5 A true Hello Kotlin

◆ Explanation

This card shows common Kotlin data types like Int, Double, Char, Boolean, and String.

#3 input-output.kt

fun main() {
	    // Take input from user
	    val name = readLine() ?: ""
	    val age = readLine()?.toIntOrNull() ?: 0
	
	    // Show output
	    println("Name: $name")
	    println("Age: $age")
	}

▶ Output

Sample input: Rahim 20 Sample output: Name: Rahim Age: 20

◆ Explanation

`readLine()` takes input as text. `toIntOrNull()` safely converts text into an integer.

#4 operators.kt

fun main() {
	    val a = 10
	    val b = 3
	
	    // Arithmetic operators
	    println(a + b)
	    println(a - b)
	    println(a * b)
	    println(a / b)
	    println(a % b)
	
	    // Comparison operators
	    println(a > b)
	    println(a == b)
	
	    // Logical operators
	    println(a > 5 && b < 5)
	    println(a < 5 || b < 5)
	}

▶ Output

13 7 30 3 1 true false true true

◆ Explanation

This card covers arithmetic, comparison, and logical operators in Kotlin.

#5 conditionals.kt

fun main() {
	    val marks = 75
	
	    if (marks >= 80) {
	        println("A+")
	    } else if (marks >= 70) {
	        println("A")
	    } else {
	        println("Need more practice")
	    }
	
	    val day = 2
	
	    when (day) {
	        1 -> println("Saturday")
	        2 -> println("Sunday")
	        else -> println("Unknown day")
	    }
	}

▶ Output

A Sunday

◆ Explanation

Kotlin uses `if`, `else if`, and `else` for conditions. `when` works like a powerful switch statement.

#6 loops.kt

fun main() {
	    // for loop
	    for (i in 1..3) {
	        println(i)
	    }
	
	    // while loop
	    var j = 1
	    while (j <= 3) {
	        println(j)
	        j++
	    }
	
	    // do...while loop
	    var k = 1
	    do {
	        println(k)
	        k++
	    } while (k <= 3)
	}

▶ Output

1 2 3 1 2 3 1 2 3

◆ Explanation

This card shows `for`, `while`, and `do...while` loops for repeating code.

Functions & Data

#7 functions.kt

fun add(a: Int, b: Int): Int {
	    return a + b
	}
	
	fun factorial(n: Int): Int {
	    return if (n == 0 || n == 1) {
	        1
	    } else {
	        n * factorial(n - 1)
	    }
	}
	
	fun main() {
	    println(add(5, 7))
	    println(factorial(5))
	}

▶ Output

12 120

◆ Explanation

This card shows function declaration, parameters, return type, and recursion in Kotlin.

#8 arrays-lists.kt

fun main() {
	    // Array
	    val numbers = arrayOf(10, 20, 30)
	    println(numbers[0])
	
	    // Mutable list
	    val colors = mutableListOf("red", "green", "blue")
	    colors.add("yellow")
	
	    println(colors.size)
	
	    for (color in colors) {
	        println(color)
	    }
	}

▶ Output

10 4 red green blue yellow

◆ Explanation

Arrays have fixed structure, while mutable lists can grow and change easily.

#9 strings.kt

fun main() {
	    val first = "Hello"
	    val second = "Kotlin"
	
	    // String template
	    val full = "$first $second"
	
	    println(full)
	    println(full.length)
	    println(full.uppercase())
	    println(full.substring(0, 5))
	}

▶ Output

Hello Kotlin 12 HELLO KOTLIN Hello

◆ Explanation

This card covers string templates, length, uppercase conversion, and substring in Kotlin.

OOP

#10 classes-objects.kt

class Student(var name: String, var age: Int) {
	    fun showInfo() {
	        println("Name: $name")
	        println("Age: $age")
	    }
	}
	
	fun main() {
	    val student = Student("Amina", 20)
	    student.showInfo()
	}

▶ Output

Name: Amina Age: 20

◆ Explanation

This card shows class, object, constructor values, and method usage in Kotlin.

#11 inheritance.kt

open class Animal {
	    open fun sound() {
	        println("Animal makes a sound")
	    }
	}
	
	class Cat : Animal() {
	    override fun sound() {
	        println("Cat says Meow")
	    }
	}
	
	fun main() {
	    val cat = Cat()
	    cat.sound()
	}

▶ Output

Cat says Meow

◆ Explanation

`open` lets a class or function be inherited or overridden. `override` changes the parent behavior.

#12 null-safety.kt

fun main() {
	    // Nullable string
	    var name: String? = "Rahim"
	
	    println(name?.length)
	
	    name = null
	
	    // Elvis operator
	    val length = name?.length ?: 0
	    println(length)
	}

▶ Output

5 0

◆ Explanation

Kotlin has built-in null safety. `?.` safely accesses a nullable value, and `?:` gives a default value.

Collections & Files

#13 collections.kt

fun main() {
	    val numbers = listOf(5, 2, 9, 1)
	    println(numbers.sorted())
	
	    val marks = mapOf("Math" to 90, "English" to 85)
	    println(marks["Math"])
	
	    val skills = setOf("Kotlin", "Android", "Kotlin")
	    println(skills)
	}

▶ Output

[1, 2, 5, 9] 90 [Kotlin, Android]

◆ Explanation

This card shows List, Map, and Set in Kotlin. A Set stores only unique values.

#14 file-handling.kt

import java.io.File
	
	fun main() {
	    val file = File("demo.txt")
	
	    // Write to a file
	    file.writeText("Hello from Kotlin file handling")
	
	    // Read from the file
	    val content = file.readText()
	    println(content)
	}

▶ Output

Hello from Kotlin file handling

◆ Explanation

`writeText()` writes to a file and `readText()` reads the content from a file.

Errors & Practice

#15 exception-handling.kt

fun main() {
	    try {
	        val a = 10
	        val b = 0
	        val result = a / b
	
	        println(result)
	    } catch (e: ArithmeticException) {
	        println("Cannot divide by zero")
	    } finally {
	        println("Program finished")
	    }
	}

▶ Output

Cannot divide by zero Program finished

◆ Explanation

`try` runs risky code, `catch` handles the error, and `finally` runs at the end no matter what.

#16 problem-solving.kt

fun main() {
	    // Sum from 1 to 5
	    var sum = 0
	    for (i in 1..5) {
	        sum += i
	    }
	    println(sum)
	
	    // Small star pattern
	    for (i in 1..3) {
	        println("*".repeat(i))
	    }
	
	    // Find the largest number
	    val numbers = listOf(12, 45, 7, 89, 23)
	    var largest = numbers[0]
	
	    for (number in numbers) {
	        if (number > largest) {
	            largest = number
	        }
	    }
	
	    println(largest)
	}

▶ Output

15 * ** *** 89

◆ Explanation

This card includes simple logic building, loops, pattern printing, and finding the largest number from a list.

{ Kali Linux }

Kali Linux is a Debian-based Linux distribution often used for cybersecurity labs, learning, and advanced Linux work. These notes focus on safe everyday Kali Linux basics like file handling, package management, networking, and system usage.

Core Basics

#1 system-info.sh

# Current user
	whoami
	
	# Current folder
	pwd
	
	# Kernel and system info
	uname -a
	
	# Host information
	hostnamectl

▶ Output

Shows your username, current working directory, kernel details, host name, OS version, and hardware information.

◆ Explanation

These commands help you quickly understand who you are logged in as, where you are in the file system, and what machine or OS you are using.

#2 update-system.sh

# Update package list
	sudo apt update
	
	# Upgrade installed packages
	sudo apt full-upgrade -y
	
	# Remove unused packages
	sudo apt autoremove -y

▶ Output

Package lists are refreshed, installed packages are upgraded, and unused dependencies are cleaned up.

◆ Explanation

`apt update` refreshes package information, `full-upgrade` installs updates, and `autoremove` cleans unnecessary packages.

#3 navigation.sh

# Show current directory
	pwd
	
	# List files with details
	ls -la
	
	# Go to home folder
	cd ~
	
	# Go to a specific folder
	cd /home/kali

▶ Output

Shows your current path, lists files including hidden files, and changes directory to home or another folder.

◆ Explanation

`pwd` shows your location, `ls -la` lists files with permissions, and `cd` changes folders. `~` means your home directory.

#4 file-management.sh

# Create folder and file
	mkdir notes
	touch notes.txt
	
	# Copy file
	cp notes.txt backup.txt
	
	# Rename or move
	mv backup.txt files/backup.txt
	
	# Delete a file
	rm notes.txt

▶ Output

Creates folders and files, copies a file, moves or renames it, and removes a file.

◆ Explanation

`mkdir` creates folders, `touch` creates empty files, `cp` copies, `mv` moves or renames, and `rm` deletes files.

#5 view-edit-files.sh

# Print file content
	cat notes.txt
	
	# Read file page by page
	less notes.txt
	
	# Edit file in terminal
	nano notes.txt

▶ Output

Displays file contents, opens long files page by page, or opens the file in a simple terminal editor.

◆ Explanation

`cat` is quick for small files, `less` is better for long files, and `nano` is a beginner-friendly terminal text editor.

#6 search.sh

# Search text inside files
	grep -n "password" notes.txt
	
	# Find files by name
	find /home/kali -name "*.txt"

▶ Output

grep shows matching lines with line numbers, and find lists file paths that match the search pattern.

◆ Explanation

`grep` searches inside file content, and `find` searches the file system for matching file or folder names.

System Usage

#7 permissions.sh

# Show permissions
	ls -l
	
	# Give read, write, execute to owner
	chmod 700 script.sh
	
	# Change file owner
	sudo chown kali:kali script.sh

▶ Output

Displays file permissions, updates permission bits, and changes the file owner and group.

◆ Explanation

`chmod` changes access permissions, and `chown` changes ownership. `700` means only the owner can read, write, and execute.

#8 packages.sh

# Search package
	apt search wireshark
	
	# Install package
	sudo apt install htop -y
	
	# Remove package
	sudo apt remove htop -y

▶ Output

Searches the package list, installs a package, and removes it from the system.

◆ Explanation

`apt search` looks for packages, `apt install` installs them, and `apt remove` removes them while keeping configs unless purged.

#9 users-groups.sh

# Show current user
	whoami
	
	# Show user id and groups
	id
	
	# Show groups
	groups
	
	# Add a new user
	sudo adduser student

▶ Output

Shows your current username, numeric user id, group memberships, and can create a new local user.

◆ Explanation

These commands help you manage accounts and understand permissions through users and groups.

#10 processes.sh

# Show running processes
	ps aux
	
	# Live process monitor
	top
	
	# Stop a process by PID
	kill 1234

▶ Output

Lists running processes, shows a live interactive monitor, and stops a selected process by process id.

◆ Explanation

`ps aux` is a snapshot of processes, `top` updates live, and `kill` sends a signal to end a process.

#11 networking.sh

# Show IP addresses and interfaces
	ip a
	
	# Test internet connectivity
	ping -c 4 8.8.8.8
	
	# Show listening ports
	ss -tuln

▶ Output

Shows network interfaces and IPs, sends 4 ping packets to test connectivity, and lists locally listening TCP/UDP ports.

◆ Explanation

These are safe network basics for checking your own system and connectivity. `ss -tuln` helps see what services are listening locally.

#12 services.sh

# Check service status
	systemctl status ssh
	
	# Start a service
	sudo systemctl start ssh
	
	# Enable service at boot
	sudo systemctl enable ssh

▶ Output

Shows the SSH service status, starts the service now, and enables it to start automatically after boot.

◆ Explanation

`systemctl` is used to manage services on modern Linux systems. `status`, `start`, and `enable` are the most common actions.

Files & Remote Access

#13 archives.sh

# Create compressed archive
	tar -czf backup.tar.gz folder/
	
	# Extract compressed archive
	tar -xzf backup.tar.gz
	
	# Create zip archive
	zip -r files.zip folder/
	
	# Extract zip archive
	unzip files.zip

▶ Output

Creates compressed archives and extracts them back into folders and files.

◆ Explanation

`tar` is widely used on Linux for archives, and `zip` or `unzip` works well for sharing files with other operating systems.

#14 ssh-help.sh

# Connect to a remote machine you own or are allowed to access
	ssh user@host
	
	# Copy file to remote machine
	scp file.txt user@host:/home/user/
	
	# Read command manual
	man ls
	
	# Show shell history
	history

▶ Output

Lets you remotely log in to approved systems, copy files, open manual pages, and review previously run commands.

◆ Explanation

Use SSH and SCP only on systems you own or have permission to access. `man` shows official command manuals, and `history` helps review command usage.

{ SQL }

SQL (Structured Query Language) is used to store, read, update, and delete data inside a database. Think of a database like an Excel file — SQL is how you talk to it. These cards use simple examples so learners can read, copy, and understand each concept quickly.

§ Chapter 1 — Basics

#1 what-is-sql.sql

-- SQL runs on databases like:
-- MySQL, PostgreSQL, SQLite, SQL Server, Oracle

-- A database has TABLES (like Excel sheets)
-- A table has ROWS (records) and COLUMNS (fields)

-- Example Table: users
-- | id | name  | age | city   |
-- |----|-------|-----|--------|
-- | 1  | Rahim | 22  | Dhaka  |
-- | 2  | Karim | 25  | Khulna |
-- | 3  | Jahan | 30  | Dhaka  |

◆ Explanation

SQL is the standard language for relational databases. You use it to create tables, insert data, read data, update records, and delete records. Every database has tables — like spreadsheet sheets — with rows and columns.

§ Chapter 2 — SELECT

#2 select.sql

-- Read ALL columns
SELECT * FROM users;

-- Read specific columns only
SELECT name, city FROM users;

-- Read with a label (alias)
SELECT name AS "User Name", age AS "Age" FROM users;

▶ Output

◆ Explanation

SELECT reads data from a table. Use * to get all columns or name specific columns. AS gives a column a display name (alias). Avoid SELECT * in real projects — always select only needed columns.

§ Chapter 3 — WHERE

#3 where.sql

-- Filter by city
SELECT * FROM users WHERE city = 'Dhaka';

-- Filter by age
SELECT * FROM users WHERE age > 20;

-- Multiple conditions
SELECT * FROM users WHERE city = 'Dhaka' AND age > 20;

-- OR condition
SELECT * FROM users WHERE city = 'Dhaka' OR city = 'Khulna';

-- NOT condition
SELECT * FROM users WHERE NOT city = 'Dhaka';

▶ Output

◆ Explanation

WHERE filters rows. Text values need quotes: WHERE city = 'Dhaka'. Numbers do NOT need quotes: WHERE age = 22. Use AND, OR, NOT to combine conditions. Operators: = != > < >= <= BETWEEN LIKE IN

§ Chapter 4 — ORDER BY

#4 order-by.sql

-- Sort by age (youngest first)
SELECT * FROM users ORDER BY age ASC;

-- Sort by age (oldest first)
SELECT * FROM users ORDER BY age DESC;

-- Sort by name A-Z
SELECT * FROM users ORDER BY name ASC;

-- Limit results
SELECT * FROM users ORDER BY age ASC LIMIT 2;

▶ Output

◆ Explanation

ORDER BY sorts results. ASC = smallest/A first (default). DESC = largest/Z first. LIMIT restricts how many rows are returned — useful for getting top results.

§ Chapter 5 — INSERT

#5 insert.sql

-- Insert one row
INSERT INTO users (name, age, city)
VALUES ('Nadia', 24, 'Dhaka');

-- Insert multiple rows
INSERT INTO users (name, age, city)
VALUES
  ('Rafi', 20, 'Sylhet'),
  ('Tania', 27, 'Khulna');

▶ Output

1 row inserted successfully.
New row: 4 | Nadia | 24 | Dhaka

◆ Explanation

INSERT INTO adds new rows to a table. Always list column names before VALUES. Text values need quotes. Numbers don't. You can insert multiple rows in one statement using comma-separated VALUES.

§ Chapter 6 — UPDATE

#6 update.sql

-- Update one column
UPDATE users SET city = 'Sylhet' WHERE id = 1;

-- Update multiple columns
UPDATE users SET age = 23, city = 'Dhaka' WHERE name = 'Rahim';

-- ⚠️ WARNING: Without WHERE — updates ALL rows!
UPDATE users SET city = 'Dhaka'; -- dangerous!

▶ Output

1 row updated.
Rahim's city changed to Sylhet.

◆ Explanation

UPDATE modifies existing rows. Always use WHERE to target specific rows — without it, ALL rows get updated! SET specifies which columns to change. Multiple columns can be updated in one statement.

§ Chapter 7 — DELETE

#7 delete.sql

-- Delete one row
DELETE FROM users WHERE id = 1;

-- Delete by condition
DELETE FROM users WHERE city = 'Khulna';

-- ⚠️ WARNING: Without WHERE — deletes ALL rows!
DELETE FROM users; -- dangerous!

▶ Output

1 row deleted.
Rahim (id=1) removed from table.

◆ Explanation

DELETE removes rows from a table. Always use WHERE — without it ALL rows are deleted permanently! There is no undo in SQL by default. Use transactions if you need safety.

§ Chapter 8 — JOINS

#8 joins.sql

-- INNER JOIN — only matching rows
SELECT users.name, orders.product
FROM users
INNER JOIN orders ON users.id = orders.user_id;

-- LEFT JOIN — all from left + matching from right
SELECT users.name, orders.product
FROM users
LEFT JOIN orders ON users.id = orders.user_id;

-- RIGHT JOIN — all from right + matching from left
SELECT users.name, orders.product
FROM users
RIGHT JOIN orders ON users.id = orders.user_id;

▶ Output

INNER JOIN returns only users who have orders.
LEFT JOIN returns all users — NULL for those without orders.

◆ Explanation

JOINS combine rows from two tables. INNER JOIN — only rows that match in both tables. LEFT JOIN — all rows from left table, NULL if no match on right. RIGHT JOIN — opposite of LEFT JOIN.

§ Chapter 9 — Functions

#9 functions.sql

-- Count rows
SELECT COUNT(*) FROM users;

-- Sum of ages
SELECT SUM(age) FROM users;

-- Average age
SELECT AVG(age) FROM users;

-- Min and Max
SELECT MIN(age), MAX(age) FROM users;

-- String functions
SELECT UPPER(name) FROM users;
SELECT LOWER(name) FROM users;
SELECT LENGTH(name) FROM users;

▶ Output

COUNT(*) = 3
SUM(age) = 77
AVG(age) = 25.67
MIN = 22 | MAX = 30

◆ Explanation

Aggregate functions work on multiple rows: COUNT (count rows), SUM (total), AVG (average), MIN (smallest), MAX (largest). String functions work on text: UPPER, LOWER, LENGTH.

§ Chapter 10 — GROUP BY

#10 group-by.sql

-- Count users per city
SELECT city, COUNT(*) AS total
FROM users
GROUP BY city;

-- Average age per city
SELECT city, AVG(age) AS avg_age
FROM users
GROUP BY city;

-- HAVING — filter groups
SELECT city, COUNT(*) AS total
FROM users
GROUP BY city
HAVING COUNT(*) > 1;

▶ Output

city | total
Dhaka | 2
Khulna | 1

◆ Explanation

GROUP BY groups rows with same values. Used with aggregate functions. HAVING filters groups (like WHERE but for groups). WHERE filters rows before grouping. HAVING filters after grouping.

§ Chapter 11 — CREATE TABLE

#11 create-table.sql

-- Create a table
CREATE TABLE users (
  id   INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(100) NOT NULL,
  age  INT,
  city VARCHAR(50)
);

-- Delete a table
DROP TABLE users;

-- Add a column
ALTER TABLE users ADD email VARCHAR(100);

-- Remove a column
ALTER TABLE users DROP COLUMN email;

◆ Explanation

CREATE TABLE makes a new table. Define each column with name + data type. INT = number, VARCHAR(n) = text up to n chars. PRIMARY KEY = unique identifier. AUTO_INCREMENT = auto-number. NOT NULL = required field. ALTER TABLE modifies existing tables.

§ Chapter 12 — Cheat Sheet

#12 cheat-sheet.sql

-- DATA READING
SELECT col1, col2 FROM table;
SELECT DISTINCT col FROM table;
SELECT * FROM table WHERE condition;
SELECT * FROM table ORDER BY col DESC;
SELECT * FROM table LIMIT 10;

-- FILTERING
WHERE col = 'value'
WHERE col != 'value'
WHERE col > 10 AND col < 50
WHERE col BETWEEN 10 AND 50
WHERE col IN ('a', 'b', 'c')
WHERE col LIKE '%pattern%'
WHERE col IS NULL

-- DATA WRITING
INSERT INTO table (col1, col2) VALUES (val1, val2);
UPDATE table SET col = value WHERE condition;
DELETE FROM table WHERE condition;

-- AGGREGATES
SELECT COUNT(*), SUM(col), AVG(col), MIN(col), MAX(col) FROM table;
SELECT col, COUNT(*) FROM table GROUP BY col;
SELECT col, COUNT(*) FROM table GROUP BY col HAVING COUNT(*) > 1;

-- JOINS
INNER JOIN table2 ON table1.id = table2.fk_id
LEFT  JOIN table2 ON table1.id = table2.fk_id
RIGHT JOIN table2 ON table1.id = table2.fk_id

-- TABLE MANAGEMENT
CREATE TABLE t (id INT PRIMARY KEY AUTO_INCREMENT, name VARCHAR(100));
ALTER TABLE t ADD col VARCHAR(50);
ALTER TABLE t DROP COLUMN col;
DROP TABLE t;

◆ Explanation

This cheat sheet covers all essential SQL commands in one place. Save or bookmark this card for quick reference while working on database projects.

Privacy Policy

Effective date: April 19, 2026

This Privacy Policy explains how CynphoCode collects, uses, stores, and protects information when you visit or interact with the website. It is provided to help users understand what data may be processed through site features, analytics, cookies, browser storage, contact forms, and advertising services.

§ Information We Collect

CynphoCode may collect information in the following ways:

1. Information you submit directly, such as your name, email address, and message when you use the contact form.

2. Technical and usage information automatically collected by browsers or devices, such as IP address, browser type, device type, pages visited, approximate region, and referral source.

3. Local browser data used to improve your experience, such as theme preference, profile details, bookmarks, language settings, and editor or workspace preferences stored in your browser.

§ Cookies and Browser Storage

CynphoCode may use cookies, local storage, and similar technologies to keep site features working, remember preferences, improve usability, understand traffic, and support advertising or analytics tools.

These technologies may help save settings such as selected theme, sound state, saved notes, profile details, language preferences, and editor workspace data directly in your browser.

§ Advertising and Google AdSense

CynphoCode may show advertisements through third-party advertising providers, including Google AdSense.

Google and its partners may use cookies to serve ads based on a user’s prior visits to this website or other websites. These technologies can be used to personalize ads, limit repetition, and measure ad performance.

Google may use advertising cookies such as the DoubleClick cookie. Users may manage ad personalization through Google Ads Settings where available, or through browser and device privacy settings.

§ Third-Party Services

CynphoCode may rely on third-party tools or services for functionality such as analytics, translation, email/contact handling, content delivery, embedded libraries, and advertising.

These third-party providers may process information according to their own privacy policies. CynphoCode is not responsible for the privacy practices of external websites or services linked from this site.

§ Your Choices

You can limit certain data collection by disabling cookies, clearing browser storage, adjusting your browser privacy settings, using ad preference tools, or choosing not to submit personal information through the contact form.

If you have submitted information through CynphoCode and want it reviewed, corrected, or removed where possible, you may request that through the contact page.

§ Contact

If you have questions about this Privacy Policy, the use of cookies, or advertising on CynphoCode, please visit the Contact page.

This Privacy Policy may be updated from time to time to reflect site changes, legal requirements, or advertising program requirements. Updates will be posted on this page.

👤 My Profile

Guest Developer

Frontend Enthusiast · Code Learner

HTML CSS JavaScript

🔗 GitHub 🔗 LinkedIn

§ Stats

0

Pages Visited

0

Codes Copied

0

Saved Notes

0

Badges Earned

§ Saved Notes

No saved notes yet. Click ★ on any code card to save it.

CynphoCode

Learn Coding Fast — Free Tutorials, Notes & Examples

— Welcome to Our Platform —

</> Languages & Information :

JAVASCRIPT

CSS

HTML

NODE.JS

PYTHON

C++

C#

TAILWIND CSS

JAVA

PHP

C

GO

RUBY

RUST

KOTLIN

KALI LINUX

All information was taken from: Debashis Sarkar Jit | Abdur Rahim | Rohan Sarkar | Nehal Chowdhory

About CynphoCode

§ What We Cover

§ Our Mission

§ Our Goal

§ Credits & Sources

§ The Team

Contact CynphoCode

§ Contact Info

§ Frequently Asked Questions

{ Python }

§ Chapter 1 — Getting Started

§ Chapter 2 — Data & Variables

§ Chapter 3 — Strings

§ Chapter 4 — Lists & Tuples

§ Chapter 5 — Dicts & Sets

§ Chapter 6 — Conditionals

§ Chapter 7 — Loops

§ Chapter 8 — Functions

§ Chapter 9 — File Handling

§ Chapter 10 — Classes & Objects

§ Chapter 11 — Inheritance

§ Chapter 12 — Advanced Python

{ JavaScript }

Basics

Functions & Data

DOM & Browser

Asynchronous JavaScript

Errors & Practice

{ C }

Basics

Functions & Arrays

Memory & Structures

Extra & Practice

{ CSS }

{ HTML }

Structure

Headings

Text & Paragraphs

Links

Images

Lists

Tables

Forms

Semantic Elements

Div & Span

Attributes

Meta Tags

{ C# }

Basics

Methods & Data

OOP

Collections & Files

Errors & Practice

{ Node.js }

Basics

Collections & Data

Asynchronous Programming

Error & Practice

{ PHP }

All information was taken from:
Debashis Sarkar Jit | Abdur Rahim | Rohan Sarkar | Nehal Chowdhory