My   Skills

Coding Skills

C language

C++

Python

HTML

CSS

JavaScript

Pro Skills

Fontend Devlopment

Comunication

React

C   language

Basic
  • print
    #include <stdio.h>
    int main() {
    printf("Hello World!");
    return 0;}
  • NewLine
    #include <stdio.h>
    int main() {
    printf("Hello World! \n");
    return 0;}
  • Input
    #include <stdio.h>
    int main() {
    int Num;
    printf("Type a number: \n");
    scanf("%d", &Num);
    printf("number is: %d", Num);
    return 0;}
  • Constants
    const int Num = 15;
    Num will always be 15
  • size
    char alphabet[] = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    printf("%d", sizeof(alphabet));

    Outputs 27
    sizeof will always return the memory size (in bytes) includes the \0
  • Memory Address
    int myAge = 23;
    printf("%p", &myAge);
    To access it, use the reference operator (&)

    Outputs Memory Address like (0x7ffe5367e044)
Variables
  • int
    stores integers (whole numbers), without decimals, such as 123 or -123
    int myNum = 1;
  • float
    stores floating point numbers, with decimals, such as 19.99 or -19.99
    float myFloatNum = 0.99;
  • char
    stores single characters, such as 'a' or 'B'. Char values are surrounded by single quotes
    myLetter = 'A';
Data Types
  • Type > %d or %i
    int
    int myNum = 1;
  • Type > %f
    float
    float myFloatNum = 0.99;
  • Type > %lf
    double
    double myDoubleNum = 19.99;
  • Type > %c
    char
    myLetter = 'A';
  • Type > %s
    strings (text)
    char greetings[] = "Hello World!";
  • Boolean
    A boolean data type value is returned, true = 1 and false = 0.
    bool isCodingFun = true
  • Type Conversion
    int num1 = 9;
    int num2 = 2;
    float sum = (float) num1 / num2;
    printf("%f", sum);
    =>2.500000
Operators
  • Arithmetic Operators
    Operators Name Example
    + Addition x + y
    - Subtraction x - y
    * Multiplication x * y
    / Division x / y
    % Modulus x % y
    ++ Increment x ++ y
    -- Decrement x -- y
  • Assignment Operators
    Operators Example Same As
    = x = 10 y = 5
    += x += 5 x = x + 10
    -= x -= 5 x = x - 10
    *= x *= 5 x = x * 10
    /= x /= 5 x = x / 10
    %= x %= 5 x = x % 10
    ^= x ^= 5 x = x ^ 10
  • Comparison Operators
    Operators Name Example
    == Equal to x == y
    != Not Equal x != y
    > Greater than x > y
    < Less than x < y
    >= Greater than or equal to x >= y
    <= Less than or equal to x <= y
  • Logical Operators
    Operators Name Example
    && Logical and x < 5 && x < 10
    || Logical or x < 5 || x < 4
    ! Logical Not !(x < 5 && x < 10)
If ... Else
  • if
    Use if to specify a block of code to be executed, if a specified condition is true
    if (condition) {}
  • else
    Use else to specify a block of code to be executed, if the same condition is false
    if (condition) {
    } else { }
  • else if
    Use else if to specify a new condition to test, if the first condition is false
    if (condition) {
    } else if (condition2) {
    } else {}
  • Short Hand
    int time = 20;
    if (time < 18) {
      printf("Good day.");
    } else {
      printf("Good evening.");
    (time < 18) ? printf("Good day.") : printf("Good evening.");
Loop
  • For Loop
    int i;
    for ( i = 0; i < 5; i++) {
      printf("%d\n", i);
    }
  • Do While Loop
    int i = 0;
    do {
      printf("%d\n", i);
      i++;
    }
    while (i < 5);
  • Nested Loop
    int i, j;
    for (i = 1; i <= 2; ++i) {
      printf("Outer: %d\n", i);
    for (j = 1; j <= 3; ++j) {
      printf(" Inner: %d\n", j);
       }
    }
Switch
  • Syntax
    int day = 2;
    switch(day) {
    case 1:
       break;
    case 2:
      break;
    default:
    }
  • Break
    int i;
    for (i = 0; i < 10; i++) {
      if (i == 4) {
        break;
      }
      printf("%d\n", i);
    }

    for loop break and jumps out when i is equal to 4:
  • Continue
    int i;
    for (i = 0; i < 10; i++) {
      if (i == 4) {
        Continue;
      }
      printf("%d\n", i);
    }

    This example skips the value of 4:
Arrays
  • Syntax
    int myNum[] = {10, 20, 30};;

    Arrays are used to store multiple values or Elements in a single variable.
  • Access the Elements
    int myNumbers[] = {25, 50, 75, 100};
    printf("%d", myNumbers[1]);

    Outputs 50
  • Change an Array Element
    int myNumbers[] = {25, 50, 75, 100};
    myNumbers[0] = 33;
    printf("%d", myNumbers[0]);

    Outputs 33
  • Loop Through an Array
    int myNumbers[] = {25, 50, 75, 100};
    int i;
    for (int i = 0; i < 4; i++) {
       printf("%d\n", myNumbers[i]);
    }
  • 2-Dimensional Arrays
    int matrix[2][3] = {
      {1, 4, 2} ,
      {3, 6, 8}
    };
Strings
  • Syntax
    char greetings[] = "Hello World!";
    char greetings[] = {'H', 'e', 'l', 'l', 'o','\0'};
    printf("%s", greetings);

    must use the char type and create an array of characters to make a string in C.
  • Change & Access Elements
    char greetings[] = "Hello World!";
    greetings[0] = 'J';
    printf("%c", greetings[0]);

    Outputs J instead of H
  • Special Characters
    character Result Description
    \' ' Single quote
    \" " Double quote
    \\ \ Backslash
    \n New Line
    \t Tab
    \0 Null
  • String Length
    char alphabet[] = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    printf("%d", strlen(alphabet));

    Outputs 26
  • Concatenate
    char str1[20] = "Hello ";
    char str2[] = "World!";
    strcat(str1, str2);
    printf("%s", str1);

    Outputs 26
  • Other Functions
    Other Functions like Concatenate are
    Copy Strings
    strcpy(str1, str2);
    Compare Strings
    strcmp(str1, str2);
Pointers
  • Syntax
    * Along with &

    int myAge = 23;
    int* ptr = &myAge;

    A pointer is a variable that stores the memory address of another variable as its value.
  • Dereference
    As syntax

    printf("%p\n", ptr);
    Reference: Output memory address (0x7ffe5367e044)

    printf("%d\n", *ptr);
    Dereference: Output Value (23)
  • Arrays
    int Numbers[4] = {25, 50, 75, 100};
    int i;
    for (i = 0; i < 4; i++) {
    printf("%p\n", &Numbers[i]);
    }

    Outputs memory address of each
  • Related to Arrays
    int Numbers[4] = {25, 50, 75, 100};
    printf("%d\n", *(Numbers + 1));

    Outputs 50
  • loop through
    int Numbers[4] = {25, 50, 75, 100};
    int *ptr = myNumbers;
    int i;
    for (i = 0; i < 4; i++) {
    printf("%d\n", *(ptr + i));
Functions
  • Syntax
    void myFunction() {   // Create
       printf("I just got executed!");
    }
    int main() {
    myFunction();   // call
    return 0;
    }
  • Parameters and Arguments
    void Greet(char name[], char sname[]) {
       printf("Hello %s %s\n", name, sname);
    }
    int main() {
      Greet("Aditya","Roy");
      return 0; }
    name is a parameter, Aditya & Roy is a arguments.
  • Pass Arrays
    void myFunction(int myNumbers[5]) {
       for (int i = 0; i < 5; i++) {
         printf("%d\n", myNumbers[i]);
     }  }
    int main() {
      int myNumbers[5] = {10, 20, 30, 40, 50};
    myFunction(myNumbers);
      return 0; }
  • Return Values
    int myFunction(int x) {
    return 5 + x;
    }
    int main() {
    printf("Result is: %d", myFunction(3));
      return 0;
    }
  • Declaration and Definition
    int myFunction(int, int);   // declaration
    int main() {
    int result = myFunction(5, 3);
    printf("Result is = %d", result);
      return 0; }
    int myFunction(int x, int y) {   // definition
       return x + y;
    }
  • Math Functions
    #include
    printf("%f", sqrt(16));
    Function Description
    sqrt(x) square root of x
    pow(x,y) Xy
    abs(x) absolute value of x
    ceil(x) nearest up int
    floor(x) nearest down int
    cbrt(x) cube root of x
Recursion
  • Syntax
    Recursion is the technique of making a function call itself. This technique provides a way to break complicated problems down into simple problems which are easier to solve.
  • Example
    int sum(int);
    int main() {
    int result = sum(5);
    printf("Result is = %d", result);
      return 0;
    }
    int sum(int x) {
    if (k > 0) {
    return k + sum(k - 1);
    } else {
    return 0;
      }
    }
Files
  • File Handling
    In C, you can create, open, read, and write to files by declaring a pointer of type FILE, and use the fopen() function:
    FILE *fptr
    fptr = fopen(filename, mode);
    filename mode
    like filename.txt
    like filename.html
    like filename.cpp
    w - Writes to a file
    a - Appends new data to a file
    r - Reads from a file
  • Create & close a File
    To create a file, you can use the w mode inside the fopen()fopen() function.However, if the file does not exist, it will create one for you.

    FILE *fptr;
    fptr = fopen("filename.txt", "w");
    fclose(fptr);
    fclose() function will save & close the file.
  • Write To Files
    To insert content to it, you can use the fprint() function
    FILE *fptr;
    fptr = fopen("C:\Aditya\filename.txt", "w");
    fprintf(fptr, "Hi Aditya");
    fclose(fptr);

    Note: If you write to a file that already exists, the old content is deleted
  • Append Content To Files
    If you want to add content to a file without deleting the old content, you can use the a mode.
    FILE *fptr;
    fptr = fopen("C:\Aditya\filename.txt", "a");
    fprintf(fptr, "\nGood Moring");
    fclose(fptr);
  • Read Files
    FILE *fptr;
    fptr = fopen("C:\Aditya\filename.txt", "a");
    char myString[100];
    fgets(myString, 100, fptr);
    printf("%s", myString);
    fclose(fptr);
    we can use the fgets() function.Its takes three parameters
  • Good Things
    If you try to open a file for reading that does not exist, the fopen() function will return NULL. So we can use an if statement to test.
    if ( fptr == NULL ) {
    printf ("Not able to open the file.");
    }

C is a general-purpose programming language created by Dennis Ritchie at the Bell Laboratories in 1972. But i started learning in 2017-2018. It is a very popular language, despite being old.

C ++

Basic
  • print
    #include <iostream>
    using namespace std;
    int main() {
    cout << "Hello World!";
    return 0;}
  • NewLine
    #include <iostream>
    using namespace std;
    int main() {
    cout << "Hello World! \n";
    cout << "Hello World!" << endl;
    return 0;}
  • Input
    #include <iostream>
    using namespace std;
    int main() {
    int x;
    cout << "Type a number: \n";
    cin >> x;
    cout << "number is:", x);
    return 0;}
  • Constants
    const int Num = 15;
    Num will always be 15
  • Length
    string txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    len = txt.length();
    len2 = txt.size();
    cout << len << len2

    In both case Output will be same: 26
Variables
  • int
    stores integers (whole numbers), without decimals, such as 123 or -123
    int myNum = 1;
  • float
    stores floating point numbers, with decimals, such as 19.99 or -19.99
    float myFloatNum = 0.99;
  • char
    stores single characters, such as 'a' or 'B'. Char values are surrounded by single quotes
    myLetter = 'A';
  • string
    stores text, such as "Hello World". String values are surrounded by double quotes
    string myText = "Aditya";
  • bool
    stores values with two states: true or false
    bool myBoolean = true;
Data Types
  • int
    int myNum = 1;
  • float
    float myFloatNum = 0.99;
  • double
    double myDoubleNum = 19.99;
  • char
    myLetter = 'A';
  • string
    The string type is used to store a sequence of characters (text). This is not a built-in type, but it behaves like one in its most basic usage. String values must be surrounded by double quotes:
    string greeting = "Hello";
  • Boolean
    A boolean data type is declared with the bool keyword and can only take the values true or false. When the value is returned, true = 1 and false = 0.
    bool isCodingFun = true
Operators
  • Arithmetic Operators
    Operators Name Example
    + Addition x + y
    - Subtraction x - y
    * Multiplication x * y
    / Division x / y
    % Modulus x % y
    ++ Increment x ++ y
    -- Decrement x -- y
  • Assignment Operators
    Operators Example Same As
    = x = 10 y = 5
    += x += 5 x = x + 10
    -= x -= 5 x = x - 10
    *= x *= 5 x = x * 10
    /= x /= 5 x = x / 10
    %= x %= 5 x = x % 10
    ^= x ^= 5 x = x ^ 10
  • Comparison Operators
    Operators Name Example
    == Equal to x == y
    != Not Equal x != y
    > Greater than x > y
    < Less than x < y
    >= Greater than or equal to x >= y
    <= Less than or equal to x <= y
  • Logical Operators
    Operators Name Example
    && Logical and x < 5 && x < 10
    || Logical or x < 5 || x < 4
    ! Logical Not !(x < 5 && x < 10)
  • Bitwise operators
    Operators inpu1 inpu2 Output
    & 0101 0110 0100
    | 0101 0110 0111
    ^ 0101 0110 0011
    ~ 0101 1010
If ... Else
  • if
    Use if to specify a block of code to be executed, if a specified condition is true
    if (condition) {}
  • else
    Use else to specify a block of code to be executed, if the same condition is false
    if (condition) {
    } else { }
  • else if
    Use else if to specify a new condition to test, if the first condition is false
    if (condition) {
    } else if (condition2) {
    } else {}
  • Short Hand
    int time = 20;
    if (time < 18) {
      cout << "Good day.";
    } else {
      cout << "Good evening."; }
    string result = (time < 18) ? "Good day." : "Good evening.";
    cout << result;
Loop
  • For Loop
    int i;
    for ( i = 0; i < 5; i++) {
      cout << i << "\n";
    }
  • Do While Loop
    int i = 0;
    do {
      cout << i << "\n";
      i++;
    }
    while (i < 5);
  • Nested Loop
    int i, j;
    for (i = 1; i <= 2; ++i) {
      cout << "Outer: " << i << "\n";
    for (j = 1; j <= 3; ++j) {
      cout << " Inner: " << j << "\n";
       }
    }
  • Foreach Loop
    int myNumbers[5] = {10, 20, 30, 40, 50};
    for (int i : myNumbers) {
      cout << i << "\n";
    }
Switch
  • Syntax
    int day = 1;
    switch(day) {
    case 1:
       break;
    case 2:
      break;
    default:
    }
  • Break
    for (int i = 0; i < 10; i++) {
      if (i == 4) {
        break;
      }
      cout << i << "\n";
    }

    for loop break and jumps out when i is equal to 4:
  • Continue
    for (int i = 0; i < 10; i++) {
      if (i == 4) {
        Continue;
      }
      cout << i << "\n";
    }

    This example skips the value of 4:
Arrays
  • Syntax
    string char[4];
    string char[4] = {"A", "B", "C", "D"};
    int myNum[3] = {10, 20, 30};;

    Arrays are used to store multiple values or Elements in a single variable.
  • Access the Elements
    string char[4] = {"A", "B", "C", "D"};
    cout << char[0];

    Outputs A
  • Change an Array Element
    string char[4] = {"A", "B", "C", "D"};
    char[0] = "E";
    cout << char[0];

    Outputs E
  • Loop Through an Array
    string char[4] = {"A", "B", "C", "D"};
    for (int i = 0; i < 5; i++) {
       cout << cars[i] << "\n";
    }
  • 2-Dimensional Arrays
    string letters[2][4] = {
      { "A", "B", "C", "D" },
      { "E", "F", "G", "H" }
    };
  • 3-Dimensional Arrays
    string letters[2][2][2] = {;
    {   { "A", "B" } ,
        { "C", "D" }   } ,
    {   { "E", "F" } ,
        { "G", "H" }   },
    };
Strings
  • Syntax
    string char[4];
    string char[4] = {"A", "B", "C", "D"};

    String it self an array,there is nothing change from c++ array.
    c++ String upgrade of c .so most Function are same
  • Input Strings
    string firstName;
    cout << "Type your full name: ";
    getline (cin, fullName);
    cout << "Your name is: " << fullName;

    If we use cin but it takes the first parameter
  • Concatenation
    string fName = "Aditya";
    string lName = "Roy";
    string fullName = fName+" "+lName;
    string fullName = fName.append(lName);
    cout << fullName;

    outputs both: Aditya Roy
  • Other Functions
    Compare Strings
    n1.compare(n2)
    to clear everything
    n1.clear()
    to check n1 is empty or not
    n1.empty()
    to erase some word from n1
    n1.erase(3,3) //start,upto
    to Find
    n1.find("something")
  • Other Functions 2
    to insert
    n1.insert(2,"lol")
    to substraction
    n1.substr(6,4)//start,upto
    strings to integers
    x =stoi(n1)
    integers to strings
    x =to_string(n1)
    sorting strings
    sort(n1.begin(),n1.end())
  • Other Functions 3
    Upper case
    n[i]-=32 //loop 1 by 1
    transform(n1.begin(),n1.end(), n1.begin(),::toupper)
    lower case
    n[i]+=32 //loop through 1 by 1
    transform(n1.begin(),n1.end(), n1.begin(),::tolower)
Pointers
  • Syntax
    * Along with &

    string food = "Pizza";
    string* ptr = &food;

    A pointer is a variable that stores the memory address of another variable as its value.
  • Dereference
    As syntax

    cout << ptr << "\n";
    Reference: Output memory address (0x6dfed4)

    cout << *ptr << "\n";
    Dereference: Output Value (Pizza)
  • Modify
    string food = "Pizza";
    string* ptr = &food;
    cout << *ptr << "\n";

    Outputs Pizza

    *ptr = "Hamburger";
    cout << *ptr << "\n";

    Outputs Hamburger
  • ways to declare pointer
    string* mystring; ( Preferred )
    string *mystring;
    string * mystring;
Functions
  • Syntax
    void myFunction() {   // Create
       cout << "I just got executed!";
    }
    int main() {
    myFunction();   // call
    return 0;
    }
  • Parameters and Arguments
    void myFunction(string fname. string sname) {
       cout << fname << sname << " Bro\n";
    }
    int main() {
      Greet("Aditya","Roy");
      return 0; }
    fname is a parameter, Aditya & Roy is a arguments.
  • Pass Arrays
    void myFunction(int myNumbers[5]) {
       for (int i = 0; i < 5; i++) {
         cout << myNumbers[i] << "\n";
     }  }
    int main() {
      int myNumbers[5] = {10, 20, 30, 40, 50};
    myFunction(myNumbers);
      return 0; }
  • Return Values
    int myFunction(int x) {
    return 5 + x;
    }
    int main() {
    cout << myFunction(3);
      return 0;
    }
  • Declaration and Definition
    int myFunction(int, int);   // declaration
    int main() {
    int result = myFunction(5, 3);
    cout <<"Result is :", result;
      return 0; }
    int myFunction(int x, int y) {   // definition
       return x + y;
    }
  • Default Parameter
    void myFunction(string country = "Norway"){
    cout << country << "\n"; }
    int main() {
    myFunction("India");
    myFunction();
    return 0; }
    Here = "Norway" default value of country
Recursion
  • Syntax
    Recursion is the technique of making a function call itself. This technique provides a way to break complicated problems down into simple problems which are easier to solve. Recursion may be a bit difficult to understand. The best way to figure out how it works is to experiment with it.
  • Example
    int sum(int x) {
    if (k > 0) {
    return k + sum(k - 1);
    } else {
    return 0;
      }
    }
    int main() {
    int result = sum(10);
    cout << result;
      return 0;
    }
Files
  • File Handling
    In C++,The fstream library allows us to work with files. To use the fstream library, include both the standard iostream iostream AND the fstream header file:
    Class Description
    ofstream Creates and writes
    ifstream Reads from files
    fstream Both
  • Create & close a File
    To create a file, use either the ofstream fstream class, and specify the name of the file.

    ofstream MyFile("filename.txt");
    MyFile.close();
    .close() function will save & close the file.
  • Write To Files
    To write to the file, use the insertion operator <<.

    ofstream MyFile("filename.txt");
    MyFile << "Files can be tricky";
    MyFile.close();
  • Read Files
    string myText;
    ifstream MyReadFile("filename.txt");
    while (getline (MyReadFile, myText)) {
    cout << myText;
    }
    MyReadFile.close();
    we can use the getline() function.

C++ is a popular programming language created by Bjarne Stroustrup in 1985. But i started learning in 2019-2020 . C++ is a cross-platform language that can be used to create high-performance applications.


Py thon

Basic
  • print
    print("Hello, World!")
  • Input
    Python 3.6
    username = input("Enter name:")

    Python 2.7
    username = raw_input("Enter name:")
  • NewLine
    print("Hello, World!" \n)
    print(end="Hello, World!")
    Or we can write like this :
    mystring = """Hello
    1st
    2nd
    3rd. """
  • Length
    word= "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    x = len(word)
    print(x)

    Output: 26
  • dict to dataframe
    import pandas as pd
    any nested Dictionaries
    df=pd.DataFrame(myfamily)
    print(df)
Variables
  • int
    stores integers (whole numbers), without decimals, such as 123 or -123
    x = 1
  • float
    stores floating point numbers, with decimals, such as 19.99 or -19.99
    x = 2
    x = 2.00
  • string
    stores text, such as "Aditya". String values are surrounded by double quotes
    x = "Aditya"
    x = 'Aditya'
  • Variable Names
    Variable names are case-sensitive.
    A variable name must start with a letter or the underscore character like:-
    My_2nd_name = "Atomic"
  • Assign Multiple Values
    Many Values to Multiple Variables
    x, y, z = "Orange", "Banana", "Cherry"
    One Value to Multiple Variables
    x = y = z = "Orange"
    Unpack a Collection
    fruits = ["apple", "banana", "cherry"]
    x, y, z = fruits
  • Global Variables
    x = "awesome" #Globa
    def myfunc():
    global x #to change global
    x = "fantastic"
    myfunc()
    print("Python is " + x)
Data Types
  • Text Type:
    1. x = str("Hello World")
       x = "Hello World"
  • Mapping Type:
    1. x= dict(name="John", age=36)
       x= {"name" : "John", "age" : 36}
  • Boolean Type:
    1. x= bool(5)
      . x= True
  • Numeric Types:
    1. x = int(20)
       x = (20
    2. x = float(20.5)
       x = 20.5
    3. x = complex(6k)
       x = 6k
  • Sequence Types:
    1. x= list(("apple", "banana", "cherry"))
       x= ["apple", "banana", "cherry"]
    2. x= tuple(("apple", "banana", "cherry"))
       x= ("apple", "banana", "cherry")
    3. x= range(6)
  • Binary Types:
    1. x= bytes(5)
       x= b"Hello"
    2. x= bytearray(5)
    3. x= memoryview(bytes(5))
  • Set Types:
    1. x= set(("apple", "banana", "cherry"))
       x= {"apple", "banana", "cherry"}
    2. x= frozenset(("apple", "banana", "cherry"))
       x= ({"apple", "banana", "cherry"})
  • None Type:
    1. x= None
Operators
  • Arithmetic Operators
    Operators Name Example
    + Addition x + y
    - Subtraction x - y
    * Multiplication x * y
    / Division x / y
    % Modulus x % y
    ** Exponentiation x ** y
    // Floor division x // y
  • Assignment Operators
    Operators Example Same As
    = x = 10 y = 5
    += x += 5 x = x + 10
    -= x -= 5 x = x - 10
    *= x *= 5 x = x * 10
    /= x /= 5 x = x / 10
    %= x %= 5 x = x % 10
    ^= x ^= 5 x = x ^ 10
  • Comparison Operators
    Operators Name Example
    == Equal to x == y
    != Not Equal x != y
    > Greater than x > y
    < Less than x < y
    >= Greater than or equal to x >= y
    <= Less than or equal to x <= y
  • Logical Operators
    Operators Name Example
    and Logical and x < 5 and x < 10
    or Logical or x < 5 or x < 4
    not Logical Not not(x < 5 && x < 10)
  • Identity & Membership
    Operators Description Example
    is Returns True if x = y x is y
    is not Returns True if x not= y x is not y
    in Returns True if x presenr in y x in y
    not in Returns True if x not presenr in y x not in y
  • Bitwise operators
    Ope inpu1 inpu2 exp Output
    & 0101 0110 x & y 0100
    | 0101 0110 x | y 0111
    ^ 0101 0110 x ^ y 0011
    ~ 0101 ~ x 1010
    << 0011 x << 2 1100
    >> 1100 x >> 2 0011
If ... Else
  • if
    Use if to specify a block of code to be executed, if a specified condition is true
    if condition:

    Short Hand
    if a > b: print("a is greater than b")
  • else
    Use else to specify a block of code to be executed, if the same condition is false
    if condition:
    else:
  • elif
    Use else if to specify a new condition to test, if the first condition is false
    if condition:
    elif condition2:
    } else:

    Short Hand
    if a > b: print("a is greater than b")

    print("A") if a > b else print("=") if a == b else print("B")
Loop
  • For Loop
    fruits = ["apple", "banana", "cherry"]
    for x in fruits:
      print(x)
  • For Loop a string
    for x in "banana":
      print(x)
  • For Loop a range
    for x in range(2, 30, 3):
      print(x)
  • While Loop
    i = 0;
    while i < 6:
      print(i)
      i += 1
  • Nested Loop
    adj = ["red", "big", "tasty"]
    fruits = ["apple", "banana", "cherry"]
    for x in adj:
       for y in fruits:
         print(x, y)
  • Else in For Loop
    for x in range(6):
       print(x)
    else:
       print("Finally finished!")
Dictionaries
  • Basic
    thisdict = {
      "brand": "Ford",
      "model": "Mustang",
      "year": 1964   }
    print(thisdict)
  • Accessing Items
    thisdict = {
      "brand": "Ford",
      "model": "Mustang",
      "year": 1964    }
    print(thisdict["brand"])
  • Change or add
    thisdict = {
      "brand": "Ford",
      "model": "Mustang",
      "year": 1964    }
    thisdict["year"] = 2020
    thisdict.update({"year": 2020})
  • Removing Items
    thisdict = {
      "brand": "Ford",
      "model": "Mustang",
      "year": 1964    }
    thisdict .pop("model")
    del thisdict["model"]
  • Copy Dictionaries
    thisdict = {
      "brand": "Ford",
      "model": "Mustang",
      "year": 1964    }
    mydict = thisdict .copy()
    mydict = dict(thisdict)
    print(mydict)
  • Nested Dictionaries
    myfamily = {
      "child1" : {
        "name" : "Aditya",
        "year" : 1998    },
      "child2" : {
        "name" : "Abhijit",
        "year" : 2003    },
    }
    print(myfamily["child2"]["name"])
Lambda
  • Syntax
    lambda arguments : expression

    x = lambda a : a + 10
    print(x(5))

    Add 10 to argument a, and return the result:
  • Multiply argument
    x = lambda a, b : a * b
    print(x(5, 6))

    Multiply argument a with argument b and return the result:
  • Summarize argument
    x = lambda a, b, c : a + b + c
    print(x(5, 6, 2))

    Summarize argument a, b, c and return the result:
  • Use Lambda
    def myfunc(n):
        return lambda a : a * n

    mydoubler = myfunc(2)
    mytripler = myfunc(3)

    print(mydoubler(11))
    print(mytripler(11))
Arrays
  • Syntax
    cars = ["Ford", "Volvo", "BMW"]

    Arrays are used to store multiple values or Elements in a single variable.
  • Access the Elements
    cars = ["Ford", "Volvo", "BMW"]
    x = cars[0]
    print(x)

    Outputs: Ford
  • Change an Array Element
    cars = ["Ford", "Volvo", "BMW"]
    cars[0] = "Toyota"
    x = cars[0]
    print(x)

    Outputs: Toyota
  • Loop Through an Array
    cars = ["Ford", "Volvo", "BMW"]
    for x in cars:
       print(x)
  • Array Methods
    cars = ["Ford", "Volvo", "BMW"]
    cars.append("Honda")
    print(cars)

    output : ['Ford', 'Volvo', 'BMW', 'Honda']
  • All Array Methods
    Method Method
    append() pop()
    clear() copy()
    count() extend()
    index() insert()
    remove() reverse()
    sort()
Strings
  • Syntax
    a="Hello"
    print("Hello")
    print('Hello')

    single or double quotation marks.both same
    You can display a string literal with the print() function:
  • Slicing Strings
    a = "Hello, World!"
    print(a[2:5])

    outputs: llo
    a[ start : end ]
  • Concatenation
    fName = "Aditya";
    lName = "Roy";
    fullName = fName+" "+lName
    print(fullName)

    output: Aditya Roy
  • String Format
    age = 24
    year = 2023
    txt = "My name is Aditya, and I am {} at {}"
    print(txt.format(age,year))

    output: My name is Aditya, and I am 24 at 2023
Functions
  • Syntax
    def my_function():   // Create
       print("Hello from a function")

    my_function()   // call
  • Arguments
    def my_function(fname, lname):
       print(fname + " " + lname)

    my_function("Aditya","Roy")
  • Keyword Arguments
    def my_function(child3, child2, child1):
       print("The youngest child is " + child3)
    my_function(child1 = "Emil", child2 = "Tobias", child3 = "Linus")
  • Return Values
    def my_function(x):
       return 5 * x

    print(my_function(3))
  • Arbitrary Keyword
    def my_function(**kid):
      print("His last name is " + kid["lname"])

    my_function(fname = "Tobias", lname = "Refsnes")
  • Default Parameter
    def my_function(country = "Norway"):
       print("I am from " + country)
    my_function("India")

    Here = "Norway" default value of country
Recursion
  • Syntax
    Recursion is the technique of making a function call itself. This technique provides a way to break complicated problems down into simple problems which are easier to solve. Recursion may be a bit difficult to understand. The best way to figure out how it works is to experiment with it.
  • Example
    def recursion(k):
       if(k > 0):
          result = k + recursion(k - 1)
          print(result)
       else:
          result = 0
       return result

    print("\n\nRecursion Example Results")
    recursion(6)
Files
  • File Handling
    The key function for working with files in Python is the open() function.
    x = open("filename", "mode");
    filename mode
    like filename.txt
    like filename.html
    like filename.cpp
    w - Writes to a file
    a - Appends new data to a file
    r - Reads from a file
    x - Create a file
    t - Text mode
    b - Binary mode
  • Create & close a File
    The open() function returns a file object, which has a read() method for reading the content of the file:

    f = open("demofile.txt", "rt")
    f.close()

    f.close() function will save & close the file.
  • Write To Files
    f = open("demofile2.txt", "a")
    f.write("Now the file has more content!")
    f.close()

    Note: a method use for Append . if we use w method that will overwrite the entire file.
  • Read Files
    f = open("D:\\myfiles\welcome.txt", "r")
    print(f.read())

    we can also use the f.read(5) readline() function. and also a Loop for x in f: print(x)
  • Delete a File
    To delete a file or folder, you must import the OS module, and run its os.remove() function.

    import os
    os.remove("demofile.txt")

    os.rmdir("myfolder")
  • Check to delete
    import os
    if os.path.exists("demofile.txt"):
       os.remove("demofile.txt")
    else:
       print("The file does not exist")


HT ML

Basic
  • Main
    The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.
    The <!DOCTYPE> declaration for HTML5 is:
    <!DOCTYPE html>
    The <br> element called empty elements
  • HTML tags
    1. HTML headings: <h1> to <h6> tags.
    2. HTML paragraphs: <p>tags.
    3. HTML links : <a> tags.destination is specified in the href attribute.
    4. HTML images: <img> tags. The source file (src), alternative text (alt) are provided as attributes.
  • HTML Attributes
    1. We already know href ,src & alt Attributes
    2. The style attribute is used to add styles to an element, such as color, font, size, and more.
    3. The title attribute defines some extra information about an element.
  • Text Formatting
    Tag Description
    <b> Bold text
    <strong> Important text
    <i> Italic text
    <em> Emphasized text
    <mark> Marked text
    <small> Smaller text
    <del> Deleted text
    <ins> Inserted text
    <sub> Subscript text
    <sup> Superscript text
  • target Attribute
    The target attribute specifies where to open the linked document.
    1. _self Default. Opens the document in the same window/tab as it was clicked
    2. _blank Opens the document in a new window or tab
    3. _parent Opens the document in the parent frame
    4. _top Opens the document in the full body of the window

    icon
    link rel="icon" type="image/x-icon" href="">
  • script
    The HTML <script> tag is used to define a client-side script (JavaScript).
    The <script> element either contains script statements, or it points to an external script file through the src attribute.
HTML Table
  • Syntax
    <table>
        <tr>
            <th>
            <th>
        </tr>
        <tr>
            <td>
            <td>
        </tr>
    </table>
  • explanation
    1. Table start with<Table> and end with </Table> tag
    2. Each table row starts with a <tr> and ends with a </tr> tag
    3. Sometimes you want your cells to be table header cells. In those cases use the <th> and ends with a </th> tag
    4. <td> stands for table data.
    Everything between <td> and </td> are the content of the table cell.
  • Columns span
    <table>
        <tr>
            <th colspan="2">
            <th>
        </tr>
        <tr>
            <td>
            <td>
            <td>
        </tr>
    </table>
  • Rows span
    <table>
        <tr>
            <th rowspan="2">
            <th>
        </tr>
        <tr>
            <td>
            <td>
            <td>
        </tr>
    </table>
  • Table Caption
    <table>
    <caption> caption </caption>
        <tr>
            <th>
            <th>
        </tr>
        <tr>
            <td>
            <td>
            <td>
        </tr>
    </table>
  • Colgroup
    <table>
    <colgroup>
        <col span="2">
    </colgroup>
        <tr>
            <th>
            <th>
        </tr>
        <tr>
            <td>
            <td>
            <td>
        </tr>
    </table>
HTML Lists
  • Ordered List
    An ordered list starts with the ol tag. Each list item starts with the li tag.
    <ol>
       <li>
       <li>
    </ol>
  • UnOrdered List
    An unordered list starts with the ul tag. Each list item starts with the li tag.
    <ul>
       <li>
       <li>
    </ul>
  • List item
    Each list item starts with the li tag.
  • Description List
    An Description list starts with the dl tag.
    <dl>
       <dt>
       <dd>
    </dl>
  • Description term (name)
    Defines a term in a description list starts with the dt tag.
  • Description describes
    Describes the term in a description list starts with the dd tag.
Elements
  • Block-level
    A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.
    A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
    Two commonly used block elements are: <p> and ,<div>.
  • Inline Elements
    An inline element does not start on a new line.
    An inline element only takes up as much width as necessary.
    some commonly used inline elements are: <span> ,<input> ,<button>.
Attribute
  • class
    The HTML class attribute is used to specify a class for an HTML element.
    The HTML class attribute is used to specify a class for an HTML element.
    The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.
    To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces {}:

    Syntax
    < div class="city" >< /div >

    css
    .city {}
  • id
    The HTML id attribute is used to specify a unique id for an HTML element.
    You cannot have more than one element with the same id in an HTML document.
    The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.
    The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}.

    Syntax
    < h1 id="myHeader" > My Header< /h1 >

    css
    #myHeader{}
  • iframe
    The HTML iframe attribute is used to display a web page within a web page.

    Syntax
    < iframe src="url" title="description" >< /iframe >

    css
    iframe {}
Layout
  • Layout Elements
    Elements Elements
    < header > < nav >
    < section > < article >
    < aside > < footer >
    < details > < summary >
  • Layout Techniques
    CSS float property
    CSS flexbox
    CSS grid
    CSS framework
  • CSS Float
    It is common to do entire web layouts using the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work. Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility.
  • CSS Flexbox
    Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices.
  • CSS Grid
    The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.
  • CSS Frameworks
    If you want to create your layout fast, you can use a CSS framework, like Bootstrap.
Computer Code
  • kbd
    The < kbd > element defines keyboard input

    < p > Save the document by pressing < kbd > Ctrl + S < /kbd >< /p >

    Save the document by pressing Ctrl + S

  • samp
    The < samp > element defines sample output from a computer program

    < p>< samp >File not found.< br>Press F1 to continue< /samp >< /p>

    File not found.
    Press F1 to continue

  • code
    The < code > element defines a piece of computer code

    < code >
    x = 5;
    y = 6;
    z = x + y;
    < /code >

    x = 5; y = 6; z = x + y;
  • pre
    The < pre > element defines preformatted text

    < pre >
    < code >
    x = 5;
    y = 6;
    < /code >
    < /pre >
    x = 5;
    y = 6;
Forms
  • Syntax
    < form >

    form elements

    < /form >
  • Mian < input > Element
    input type="text"
    input type="radio"
    input type="checkbox"
    input type="submit"
    input type="button"
  • Form Attributes
    1. The action attribute defines the action to be performed when the form is submitted.
    2. Target Attribute
    _blank _self
    _parent _top
    framename
  • Elements
    input
    label
    select
    option
    textarea
    button
    fieldset
    legend
    datalist
  • Input Types
    < input type="color" >
    < input type="date" >
    < input type="email" >
    < input type="file" >
    < input type="image" >
    < input type="number" >
    < input type="url" >
    < input type="password" >
    < input type="time" >
    < nput type="range" >
  • placeholder Attribute
    The input placeholder attribute specifies a short hint that describes the expected value of an input field

SVG
  • circle
    circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"
    1. The cx and cy attributes define the x and y coordinates of the center of the circle
    2. The r attribute defines the radius of the circle
  • Rectangle
    rect x="50" y="20" rx="20" ry="20" width="150" height="150"
    1. The x and y attributes define the left and top position of the rectangle
    1. The rx and ry attributes rounds the corners of the rectangle
  • ellipse
    ellipse cx="200" cy="80" rx="100" ry="50"
    1. The cx and cy attributes define the x and y coordinates of the center of the ellipse
    1. The rx attributes defines the horizontal radius
    1. The ry attributes defines the vertical radius
  • polygon
    polygon points="100,10 40,198 190,78 10,78 160,198"
    The points attribute defines the x and y coordinates for each corner of the polygon
  • line
    line x1="0" y1="0" x2="200" y2="200"
    1. The x1 and y1 attribute defines the start of the line on the x-axis and Y-axis
    2. The x2 and y2 attribute defines the end of the line on the x-axis and Y-axis
  • polyline
    polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
    The points attribute defines the list of points (pairs of x and y coordinates) required to draw the polyline

HTML is the standard markup language for Web pages. created by Tim Berners-Lee in 1993. But i start learning in 2023 .


C ss

Basic
  • css
    1. CSS stands for Cascading Style Sheets
    2. CSS describes how HTML elements are to be displayed on screen, paper, or in other media
    3. CSS saves a lot of work. It can control the layout of multiple web pages all at once
    4. External stylesheets are stored in CSS files
  • Syntax
    In this example all <p> elements will be center-aligned, with a red text color:

    p {
       color: red;
       text-align: center;
    }
Selectors
  • Simple selectors
    select elements based on name, id, class
    In html In css
    < p > p { }
    id="para1" #para1 { }
    class="center" .center { }
    < p class="cen" > p.cen { }
    All html * { }
    h1 h1 { }
  • Combinator selectors
    select elements based on a specific relationship between them
    Name css
    Descendant Selector div p { }
    Child Selector (>) div > p { }
    Adjacent Sibling Selector (+) div + p { }
    General Sibling Selector (~) div ~ p { }
  • Pseudo-class selectors
    A pseudo-class is used to define a special state of an element.
    Name In css
    Anchor a:link { }
    a:hover { }
    first-child p:first-child { }
    p i:first-child { }
  • Pseudo-elements selectors
    A CSS pseudo-element is used to style specified parts of an element.
    In html In css
    < p > p::first-line { }
    p.intro::first-letter { }
    < h1 > h1 : : before { }
    h1: : after { }
    (no need) : : marker { }
    (no need) : : selectio { }
  • Attribute Selectors
    It is possible to style HTML elements that have specific attributes or attribute values.
    In html In css
    < a target=""> a [ target ] { }
    title = "flower" [ title ~ =" flower " ] { }
    class " top-text ". [class | " top " ] { }
    [ class ^ = "top" ] { }
    class = " mytest " [ class $ = " test " ] { }
    [ class * = " te " ] { }
Colors
  • Color Names
    In CSS, a color can be specified by using a predefined color name:
    red
  • Background Color
    You can set the background color for HTML elements:
    background-color: DodgerBlue;
  • Border Color
    You can set the color of borders:
    border:2px solid Tomato
    border:2px solid Violet
  • outline Color
    You can set the color of outline:

    outline: 1px solid yellow;

    outline: dotted red;
  • Color Values
    rgb(250,90,70,1)
    #b8f050
    yellow
Backgrounds
  • background-color
    background-color: red;
    background-color: #ff0000;
    background-color: rgb(255,0,0);
  • Gradients
    Linear Gradients (goes down/up/left/right/diagonally)
    Radial Gradients (defined by their center)
    Conic Gradients (rotated around a center point)

    background-image: linear-gradient(red, yellow);
  • background-image
    background-image: url("aditya.jpg");
    background-repeat: no-repeat;
    background-position: right top;
  • background-attachment
    background-image: url("aditya.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
  • element
    background-size: cover;
    background-origin: border-box;
    background-clip: content-box;
  • Multiple + Shorthand
    background: url(aditya.jpg) right bottom no-repeat, url(aditya2.jpg) left top repeat;
Text
  • Color
    The color property is used to set the color of the text. The color is specified by:
    a color name - like "red"
    a HEX value - like "#ff0000"
    an RGB value - like "rgb(255,0,0)"
  • Alignment
    text-align
    The text-align property is used to set the horizontal alignment of a text.like center

    text-align-last
    The text-align-last property specifies how to align the last line of a text. like right
  • Direction
    direction
    The direction and unicode-bidi properties can be used to change the text direction of an element.
    direction: rtl;
    unicode-bidi: bidi-override;

    Vertical
    The Vertical Alignment property sets the vertical alignment of an element.
  • Decoration
    text-decoration-line : overline

    text-decoration-color : red; (+ line)

    text-decoration-style: wavy; (+ line)

    text-decoration-thickness: auto; (+ line)
    Short hand :- text-decoration: underline aqua double 3px;
  • Spacing
    text-indent: 50px;
    letter-spacing: 5px;
    line-height: 1.8;
    word-spacing: 10px;
    white-space: nowrap;
  • Shadow
    text-shadow: 1px 1px; (x,y)
    text-shadow: 1px 1px aqua;
    text-shadow: 1px 1px 5px aqua;(x,y,blur)
    text-shadow: 1px 1px 2px yellow, 0 0 25px greenyellow, 0 0 5px green;
Some Important
  • Fonts
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
    font-weight: bold;
    font-variant: small-caps;
    font-size: 15px;
    shorthand: font: italic small-caps bold 12px/15px Georgia, serif;
  • Links
    a:link - a normal, unvisited link
    a:visited - a link the user has visited
    a:hover - a link when the user mouses over it
    a:active - a link the moment it is clicked
  • Lists
    list-style-type: circle;
    list-style-image: url();
    list-style-position: inside;
    shorthand: list-style: square inside url();
  • Tables
    border-collapse: collapse;
    border-bottom: 1px solid #ddd;
    tr:hover {background-color: coral;}
  • display
    Display: none;

    visibility: hidden;
  • z-index
    The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

    If two positioned elements overlap each other without a z-index specified, the element defined last in the HTML code will be shown on top.
position Property
  • static
    1. HTML elements are positioned static by default.
    2. An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:
    position: static;
    border: 3px solid yellow;
  • relative
    An element with position: relative; is positioned relative to its normal position.
    position: relative;
    top: 30px;
    border: 3px solid aqua;
  • fixed
    An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
    position: fixed;
    top: 40vh;90hv
    right: 10vw;
    width: 300px;/150px
    border: 3px solid purple;
  • absolute
    An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
    position: absolute;
    top: 12vh;
    left: 1vw;
    width: 300px;
    border: 3px solid greenyellow;
  • sticky
    An element with position: sticky; is positioned based on the user's scroll position.

    A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).
float and clear
  • float
    none - The element does not float (will be displayed just where it occurs in the text). This is default
    left - The element floats to the left of its container
    right - The element floats to the right of its container
    inherit - The element does not float (will be displayed just where it occurs in the text). This is default
  • clear
    none - The element is not pushed below left or right floated elements. This is default
    left - The element is pushed below left floated elements
    right - The element is pushed below right floated elements
    both - The element is pushed below both left and right floated elements
    inherit - The element inherits the clear value from its parent
  • clearfix Hack
    If a floated element is taller than the containing element, it will "overflow" outside of its container. We can then add a clearfix hack to solve this problem:

    .clearfix {
    overflow: auto; }

    .clearfix::after {
    content: "";
    clear: both;
    display: table; }
Units
  • Absolute Lengths
    The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.
    Unit Description
    cm centimeters
    mm millimeters
    in inches (1in = 96px = 2.54cm)
    px pixels (1px = 1/96th of 1in)
    pt points (1pt = 1/72 of 1in)
    pc picas (1pc = 12 pt)
  • Relative Lengths
    Relative length units specify a length relative to another length property. Relative length units scale better between different rendering mediums.
    Unit Description
    em Relative to the font-size of the element (2em means 2 times the size of the current font)
    rem Relative to font-size of the root element
    ex Relative to the x-height of the current font (rarely used)
    ch Relative to width of the "0" (zero)
    px pixels (1px = 1/96th of 1in)
    pt points (1pt = 1/72 of 1in)
    pc picas (1pc = 12 pt)
Math Functions
  • calc( )
    The calc() function performs a calculation to be used as the property value.

    CSS Syntax
    calc(expression)

    calc(100% - 100px);
  • max( )
    The max() function uses the largest value, from a comma-separated list of values, as the property value.

    CSS Syntax
    max(value1, value2, ...)

    max(50%, 300px);
  • min( )
    The min() function uses the smallest value, from a comma-separated list of values, as the property value.

    CSS Syntax
    min(value1, value2, ...)

    min(50%, 300px);
Rounded Corners
  • Syntax
    border-radius: 25px;
    background: #73AD21;
    padding: 20px;
    the value applies to all four corners, which are rounded equally
  • Four values
    first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner
    border-radius: 15px 50px 30px 5px;
    background: aqua;
    padding: 20px;
  • Three values
    first value applies to top-left corner, second value applies to top-right and bottom-left corner, third value applies to bottom-right corner
    border-radius: 15px 50px 30px;
    background: yellowgreen;
    padding: 20px;
  • Two values
    first value applies to top-left and bottom-right corner, second value applies to top-right and bottom-left corner
    border-radius: 15px 50px;
    background: purple;
    padding: 20px;
  • elliptical corners
    border-radius: 25px / 50px;
    background: red;
    padding: 20px;
Advanced Important
  • box-shadow
    box-shadow: 10px 10px 5px 12px lightblue;
    x , y , color
    x , y , blur , color
    x , y , blur , spread , color
  • Image Reflection
    -webkit-box-reflect: below;

    -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
  • object
    object-fit
         1. fill
         2. contain
         3. cover
         4. scale-down

    object-position: x y ;
  • Multiple Columns
    column-count:3;
    column-gap:10px;
    column-rule:1px solid lightblue;
    column-span:all
    column-width:100px
  • Variables
    The var( ) function is used to insert the value of a CSS variable.;
    Syntax:- var(--name, value)
    Global:- :root { var ( ) }
    Local:- class/id { var ( ) }
  • Media Queries
    @media not|only mediatype and (expressions) { CSS-Code; }
    all - Used for all media type devices
    print - Used for printers
    screen - Used for computer screens, tablets, smart-phones etc.
    speech - Used for screenreaders that "reads" the page out loud

    @media screen and (min-width: 480px) { CSS-Code; }
Transforms
  • translate()
    The translate() moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).
    translateX()
    translateY()

    transform: translate(5px,10px)
  • rotate()
    The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.
    rotateX()
    rotateY()
    rotateZ()

    transform: rotate(180deg)
  • scale()
    The scale() method increases or decreases the size of an element (according to the parameters given for the width and height).
    scaleX()
    scaleY()

    transform: scale(1, 2); >(x, y)
  • skew()
    The skew() method skews an element along the X and Y-axis by the given angles.
    skewX()
    skewY()

    transform: skew(10deg, 5deg); >(x, y)
  • matrix()
    The matrix() method combines all the 2D transform methods into one.
    The parameters are as follow: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

    transform: matrix(1, -0.3, 0, 1, 0, 0);
Transitions
  • Basic
    To create a transition effect, you must specify two things:
    1. the CSS property you want to add an effect to
    2. the duration of the effect
  • transition-delay
    The transition-delay property specifies a delay (in seconds) for the transition effect.

    transition-delay: 1s;
  • transition-duration
    Specifies how many seconds or milliseconds a transition effect takes to complete

    transition: 2s;
  • transition-property
    Specifies the name of the CSS property the transition effect is for

    transition: width 2s, height 2s, transform 2s;
  • transition-timing-function
    ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
    linear - specifies a transition effect with the same speed from start to end
    ease-in- specifies a transition effect with a slow start
    ease-out- specifies a transition effect with a slow end
    ease-in-out- specifies a transition effect with a slow start and end
    cubic-bezier(n,n,n,n)- lets you define your own values in a cubic-bezier function
Animations
  • Basic
    @keyframes - Specifies the animation code
    animation-name - Specifies the name of the @keyframes animation
    animation-duration - Specifies whether an animation should be played forwards, backwards or in alternate cycles
  • delay & iteration-count
    The transition-delay property specifies a delay (in seconds) for the transition effect.

    animation-delay: 2s;
    animation-iteration-count: infinite;
  • direction
    normal- The animation is played as normal (forwards). This is default
    reverse - The animation is played in reverse direction (backwards)
    alternate - The animation is played forwards first, then backwards
    alternate-reverse - The animation is played backwards first, then forwards
  • Shorthand
    animation: example 5s linear 2s infinite alternate;

    name duration timing-function delay iteration-count direction
  • fill-mode
    none - Default value. Animation will not apply any styles to the element before or after it is executing
    forwards - The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)
    backwards - The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
    both - The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions
  • timing-function
    ease - specifies a animations effect with a slow start, then fast, then end slowly (this is default)
    linear - specifies a animations effect with the same speed from start to end
    ease-in- specifies aanimationsn effect with a slow start
    ease-out- specifies a animations effect with a slow end
    ease-in-out- specifies a animations effect with a slow start and end
    cubic-bezier(n,n,n,n)- lets you define your own values in a cubic-bezier function
Masking
  • Basic
    -webkit-mask-image: url( );
    -webkit-mask-repeat: no-repeat;
  • Gradients
    -webkit-mask-image: linear-gradient(black, transparent);
    -webkit-mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
  • SVG
    < svg width="600" height="400">
    < mask id="svgmask">
    < polygon fill="#ffffff" points="200 0, 400 400, 0 400">< /polygon>
    < /mask>
    < image xmlns:xlink=" " xlink:href=" " mask="url(#svgmask)"> < /image>
    < /svg>
Flexbox
  • Basic
    1. Block, for sections in a webpage
    2. Inline, for text
    3. Table, for two-dimensional table data
    4. Positioned, for explicit position of an element

    syntax
    display: flex;
  • flex-flow
    flex-direction: column;
    flex-wrap: wrap;

    shorthand
    flex-flow: row wrap;
  • align
    justify-content: center;
    justify-content — controls alignment of all items on the main axis
    align-items: center;
    >align-items— controls alignment of an individual flex item on the cross axis.
    align-content: stretch;
    Modifies the behavior of the flex-wrap property.
  • order
    1. The order property specifies the order of the flex items.
    2. The order value must be a number, default value is 0.

    syntax
    style="order: 3"
  • flex
    1. The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.
    2. The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.
    3. The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.
    4. The flex-basis property specifies the initial length of a flex item.

    style="flex: 1 2 200px"
  • align-self
    Specifies the alignment for a flex item (overrides the flex container's align-items property)

    syntax
    style="align-self: flex-start"
Grid
  • Basic
    1. An HTML element becomes a grid container when its display property is set to grid or inline-grid.
    2. All direct children of the grid container automatically become grid items.

    syntax
    display: grid;
    display: inline-grid;
  • gap
    We can adjust the gap size by using one of the following properties:
    1. row-gap : 50px
    2. column-gap : 50px

    shorthand
    gap : 50px 100px;    ( row column )
  • Specifies item
    grid-row-start : 1
    grid-row-end : 3
    shorthand: grid-row: 1 / 3
    grid-column-start : 1
    grid-column-end : 3
    shorthand: grid-column: 1 / 3

    shorthand
    grid-area: 1 / 2 / 5 / 6;
    ( row-start / column-start / row-end / column-end )
  • grid-template-columns
    1. The grid-template-columns property defines the number of columns in your grid layout, and it can define the width of each column.
    2. The value is a space-separated-list.

    syntax
    grid-template-columns: 80px 200px auto 40px;
  • grid-template-rows
    1. The grid-template-rows property defines the number of rows in your grid layout, and it can define the height of each rows.
    2. The value is a space-separated-list.

    syntax
    grid-template-rows: 80px 200px
  • Good to Know
    1. grid-column: 1 / 5; here start on column 1 and end before column 5:
    2. grid-column: 1 / span 5; here start on column 1 and span 5 columns:
    3.    grid-template-areas: 'header header header'
                                                    'menu main right'
                                                    'menu footer footer'


Java Script

Basic
  • Keywords
    Keyword Description
    var Declares a variable
    let Declares a block variable
    const Declares a block constant
  • Length
    let text = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    let length = text.length;
  • Objects
    const car = {type:"Fiat", model:"500", color:"white"};
    car.type()
  • DOM
    docoment.
    getElementById('navbar');

    getElementsByClassName('item');

    querySelector('.item' / '#item');

    querySelectorAll('li');
  • Output
    1. Writing into an HTML element, using innerHTML .
    document.getElementById( "id" ).innerHTML = 5 + 6;
    2. Writing into the HTML output using document.write() .
    document.write(5 + 6);
    3. Writing into an alert box, using window.alert() .
    We can skip the window keyword.
    4. Writing into the browser console, using console.log() .
  • Events
    Event Description
    onchange An HTML element has been changed
    onclick The user clicks an HTML element
    onmouseover The user moves the mouse over an HTML element
    onmouseout The user moves the mouse away from an HTML element
    onkeydown The user pushes a keyboard key
    onload The browser has finished loading the page
Variables
  • var
    The var keyword should only be used in code written for older browsers.
    Only use var if you MUST support old browsers.

    syntax
    var x = 5;
    var y = 6;
    var z = x + y;
  • let
    The let keywords were added to JavaScript in 2015.
    Only use let if you can't use const

    syntax
    let x = 5;
    let y = 6;
    let z = x + y;
  • const
    The const keywords were added to JavaScript in 2015.
    Alway use const if the value should not be changed.

    syntax
    const x = 5;
    const y = 6;
    let z = x + y;
Data Types
  • String
    let color = "black";
    let Name = "Aditya";
  • Number
    let length = 16;
    let weight = 7.5;
  • Boolean
    let x = true;
    let y = false;
  • Object
    const person = {firstName:"John", lastName:"Doe"};
  • Array object
    const cars = ["Saab", "Volvo", "BMW"];
  • Date object
    const date = new Date("2022-03-25");
  • Undefined
    let car;
  • Null
Operators
  • Arithmetic Operators
    Operators Name Example
    + Addition x + y
    - Subtraction x - y
    * Multiplication x * y
    / Division x / y
    % Modulus (Remainder) x % y
    ++ Increment x ++ y
    -- Decrement x -- y
  • Assignment Operators
    Operators Example Same As
    = x = 10 y = 5
    += x += 5 x = x + 10
    -= x -= 5 x = x - 10
    *= x *= 5 x = x * 10
    /= x /= 5 x = x / 10
    %= x %= 5 x = x % 10
    **= x **= 5 x = x ** 10
  • Comparison Operators
    Operators Name Example
    == Equal to x == y
    === equal value & type x === y
    != Not Equal x != y
    > Greater than x > y
    < Less than x < y
    >= Greater than or equal to x >= y
    <= Less than or equal to x <= y
  • Logical Operators
    Operators Name Example
    && Logical and x < 5 && x < 10
    || Logical or x < 5 || x < 4
    ! Logical Not !(x < 5 && x < 10)
  • Bitwise operators
    Operators inpu1 inpu2 Output
    & 0101 0110 0100
    | 0101 0110 0111
    ^ 0101 0110 0011
    ~ 0101 1010
    << 0101 0001 1010
    >> 0101 0001 0010
If ... Else
  • if
    Use if to specify a block of code to be executed, if a specified condition is true
    if (condition) {}
  • else
    Use else to specify a block of code to be executed, if the same condition is false
    if (condition) {
    } else { }
  • else if
    Use else if to specify a new condition to test, if the first condition is false
    if (condition) {
    } else if (condition2) {
    } else {}
Loop
  • For Loop
    let i = 0;
    for ( i = 0; i < 5; i++) {
      console.log(i);
    }
  • For in Loop
    const person = {fname:"Aditya", lname:"Roy", age:24};
    let txt = "";
    for (let x in person) {
      console.log(txt += person[x] + " ");
    }
  • For of Loop
    let language = "JavaScript";
    let text = "";
    for (let x of language) {
      console.log(text += x);
    }
  • while loops
    let j = 0;
    while (j<4) {
      console.log(`${j} is less then 4`);
      j++;
    }
  • Do While Loop
    let k=6;
    do {
      console.log(`${k});
      k++;
    }
    while (k < 5);
Switch
  • Syntax
    let day = 1;
    switch(day) {
    case 0:
       break;
    case 1:
      break;
    default:
    }
  • Break
    for (let i = 0; i < 10; i++) {
      if (i == 4) {break;}
      console.log(text += "The number is " + i + "
    ");
    }

    for loop break and jumps out when i is equal to 4:
  • Continue
    for (let i = 0; i < 10; i++) {
      if (i == 4) {Continue;}
      console.log(text += "The number is " + i + "
    ");
    }

    This example skips the value of 4:
Arrays
  • Syntax
    1. const cars = ["Saab", "Volvo", "BMW"];
    2. let name=new Array(41,2,4,"Aditya",undefined);

    Arrays are used to store multiple values or Elements in a single variable.
  • Access the Elements
    const cars = ["Adi", "Volvo", "BMW"];
    let car = cars[0];
    console.log(car)

    Outputs Adi
  • Change an Array Element
    const cars = ["Adi", "Volvo", "BMW"];
    cars[0] = "Roy";
    console.log(cars)

    Outputs Roy
  • Array Methods
    Methods Methods
    length toString()
    pop() push()
    shift() unshift()
    join() delete()
    concat() flat()
    splice() slice()
  • Sorting
    const fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.sort();

    reverses the elements
    fruits.reverse();
Strings
  • Syntax
    let name = "Aditya Roy";
    let text = ` hi ${name} `;

    Arrays are used to store multiple values or Elements in a single variable.
  • escape sequences
    Code Result
    \' ' -Single quote
    \" " -Double quote
    \\ \ -Backslash
    /b Backspace
    /f Form Feed
    /n New Line
  • String Methods
    Methods Methods Methods
    length slice() substring()
    substr() replace() replaceAll()
    toUpperCase() toLowerCase() concat()
    trim() charAt() split()
    charCodeAt() trimStart() padStart()
  • String Search
    Search Methods
    index index of the firdt indexOf()
    index of the last lastIndexOf()
    searches for a string search()
    To match match()
    string contains or not includes()
    start with ot not startsWith()
    end with ot not endsWith()
Functions
  • Syntax
    function myFunction(a, b) {   // Create
       return a * b;
    }
    let x = myFunction(4, 3);
  • Local Variables
    function myFunction() {
    let carName = "Volvo";
    }
  • arrow function
    let sum =(a,b)=>{
    return a+b;
    }
Date
  • ways to create
    newDate()
    newDate(date string)

    newDate(year,month)
    newDate(year,month,day)
    newDate(year,month,day, hours,minutes,seconds ,ms)

    newDate(milliseconds)
  • Get Date Method
    Method Description
    getFullYear() four digit number (yyyy)
    getMonth() number (0-11)
    getDate() number (1-31)
    getDay() number (0-6)
    getHours() Get hour (0-23)
    getMinutes() Get minute (0-59)
    getSeconds() Get second (0-59)
    getMilliseconds() Get millisecond (0-999)
    getTime() milliseconds since January 1, 1970
  • Set Date Methods
    Method Description
    setFullYear() year (optionally month and day)
    setMonth() number (0-11)
    setDate() number (1-31)
    setDay() number (0-6)
    setHours() Get hour (0-23)
    setMinutes() Get minute (0-59)
    setSeconds() Get second (0-59)
    setMilliseconds() Get millisecond (0-999)
    setTime() milliseconds since January 1, 1970
Math
  • Properties (Constants)
    Math.property The syntax for any Math property
    Math.E returns Euler's number
    Math.PI returns PI
    Math.SQRT2 returns the square root of 2
    Math.SQRT1_2 returns the square root of 1/2
    Math.LN10 returns the natural logarithm of 10
    Math.LOG2E returns base 2 logarithm of E
  • Math Methods
    Math.method(x) The syntax for Math any methods
    Math.round(x) Returns x rounded to its nearest integer
    Math.ceil(x) Returns x rounded up to its nearest integer
    Math.floor(x) Returns x rounded down to its nearest integer
    Math.pow(x, y) returns the value of x to the power of y:
    Math.sqrt(x) returns the square root of x:
    Math.abs(x) returns the absolute (positive) value of x:
    Math.sin(x) returns the sine of the angle x
    Math.cos(x) returns the cosine of the angle x
    Math.min() can be used to find the lowest value in a list
    Math.max() can be used to find the highest value in a list
    Math.random() returns a random number between 0 and 1
JSON
  • Syntax
    let jsonobj={ //obj
         name :"aditya",
         Aka: "Atomic",
         food: "meat"
    }
  • obj to sting
    As Syntax

    let myjosnstr=JSON.stringify (jsonobj);
  • replace string
    As Syntax

    let myjosnstr=JSON.stringify(jsonobj);
    myjosnstr =myjosnstr.replace ('meat','fish')
  • string to obj
    As Syntax

    let myjosnstr=JSON.stringify (jsonobj);
    myjosnstr =myjosnstr.replace ('meat','fish')
    newjsonobj=JSON.parse (myjosnstr)


Compare  Languages