This code creates a new paragraph and adds it to the existing div at the end of its content. JS

//calling the function in window.onload to make sure the HTML is loaded
window.onload = function() {

    //creating a new paragraph
    var p = document.createElement("p");
    p.innerHTML = 'Some new text 1';
       
    //adding the paragraph to the div
    var div = document.getElementById("demo"); 
    div.appendChild(p);
};

HTML

<div id="demo">some content</div>

Properties (attributes):

name

,

gender

,

username

,

email

Methods (behavior):

addFriend

,

deleteFriend

,

postStatus

,

follow

,

unfollow

class User {
    public $username;
    public $friends;
    
    public function addFriend($friend_name) {
        $this->friends[] = $friend_name;
    }
    
    public function removeFriend($friend_name) {
        $this->friends = array_filter($this->friends, fn ($m) => $m != $friend_name);
    }
}

$user1 = new User();
$user1->username = 'Adam';

$user1->addFriend('Tom');
$user1->addFriend('David');
$user1->addFriend('George');

$user1->removeFriend('David');
print_r($user1->friends);
echo $user1->username;

class

- blueprint, skeleton, basic structure of an object

property

- data of an object, equivalent to PHP variables

method

- behavior of an object, equivalent to PHP functions

inheritance

- ability to use properties and methods of an existing class

polymorphism

- ability to have many forms, when a class has varying functionality while sharing a common interfaces

encapsulation

- to hide or protect certain properties or methods of an object

abstraction

- a concept in which a class has methods without implementation

Input group example

<div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
</div>

If we have a complex object, and we’d like to convert it into a string, to send it over a network, or just to output it for logging purposes, we can use

toString

method

let user = {
  name: "John",
  age: 30,
  toString() {
    return `{name1: "${this.name}", age1: ${this.age}}`;
  }
};

document.write(user);
// document.write(JSON.stringify(user));

The code above will produce the following result:

{name1: "John", age1: 30}

The first row is not responsive and there will be 4 columns for any breakpoints but the second row is responsive based on

md

and

lg

device sizes

<div class="container">
        <div class="row">
          <div class="col">
            One of three columns
          </div>
          <div class="col">
            One of three columns
          </div>
          <div class="col">
            One of three columns
          </div>
          <div class="col">
            One of three columns
          </div>
        </div>

        <br><br><br>
        
        <div class="row">
          <div class="col-md-6 col-lg-3">
            One of three columns
          </div>
          <div class="col-md-6 col-lg-3">
            One of three columns
          </div>
          <div class="col-md-6 col-lg-3">
            One of three columns
          </div>
          <div class="col-md-6 col-lg-3">
            One of three columns
          </div>
        </div>
    </div>

To assign margin related properties using the classes:

.mt-3

- margin-top

.mr-3

- margin-right

.mb-3

- margin-bottom

.ml-3

- margin-left

.mx-3

- margin-left, margin-right

.my-3

- margin-top, margin-bottom

.m-3

- margin-top, margin-bottom, margin-left, margin-right The same for padding properties:

.pt-3

- padding-top

.pr-3

- padding-right

.pb-3

- padding-bottom

.pl-3

- padding-left

.px-3

- padding-left, padding-right

.py-3

- padding-top, padding-bottom

.p-3

- padding-top, padding-bottom, padding-left, padding-right

<header>

- defines a header for a document or section;

<nav>

- defines a set of navigation links;

<main>

- specifies the main content of a document;

<footer>

- defines a footer for a document or section;

<article>

- defines an article;

<section>

- defines a section in a document;

<aside>

- defines content aside from the page content;

100, 200, 300, 400, 500, 600, 700, 800, 900 Defines from thin to thick characters. 400 is the same as normal, and 700 is the same as bold. In earlier versions of the font-weight specification, the property accepts only keyword values and the numeric values 100, 200, 300, 400, 500, 600, 700, 800, and 900; non-variable fonts can only really make use of these set values, although fine-grained values (e.g. 451) will be translated to one of these values for non-variable fonts using the Fallback weights system

.no-gutters

on the

.row

removes padding from columns