Visual Code Editor

--Double Click for screen size large or small

--code . // for open project from project folder terminal

or project tene ene cere dilei open hoye jabe

 

--Screencast Mode on from command pallete jodi shortcut

command calano show korte chaw

 

--settings.json file ta te nijer settings gulo add kore dewa

--install fira code form google and font familly te fira code use korbo

--theme: andromeda, dracula, community material theme

--plugin: vscode icons for icons, live server, auto rename tag, path autocomplete, Turbo Console Log,

ESLint, Prettier - Code formatter, ES7 React/Redux/GraphQL/React-Native snippets, emoji = for fun purpose

Turbo Consloe Log, PHP IntelliSense,  PHP Intelephense, code runner, phpfmt

--linting and code formatting

--User Snippet/Create Shortcut

    --File->Preference->User Snippet

--Multiple Cursor

    --CTRL+SHIFT+L, CTRL+D(Navigate Kora)

--Hyper Terminal (Extension)

 --Material Icon Theme

--One Dark Pro Theme

--Font Size Access orthat choto boro kora

    --Setting theke font size

    --Setting theke Mouse Wheel Zoom

--Font Zoom Reset

    --ctrl+shift+p --> font zoom reset

--Keybinding

    --file+preferences+keyboard shortcuts

    --Add shortcut or remove shortcut

--Moves line

    --alt+up/down key press

--Minimap

    --Active minimap from settings

--Splitting Editor

    --split+up/down

    --split right/left

--Qucikly Access Tab Navigate

    --ctrl+ tab navigate number such as 1, 2, 3

--Qucikly Created Nested Folder

--Using Multiple Cursors:

    --alt+select specific text

--Qucikly Increment/Decrement

    --Set increment/decrement by keyboard shortcut

--Opeing files in new Tab:

    --Uncheck workbeance enable preview from settings

 

--Access Integrated Terminal:

--Formatter

    --ALT+SHIFT+F

    --phpfmt extension for format

--Php extension for Developers:

    --PHP IntelliSense

    --PHP Intelephense

--Instantly Run Code:

    --code runner extension

--Snippet

    --snippet-creator

    --create snippet

   

Keyboard Shortcuts:

 

Copy:

--SHIFT+ALT+DOWNARROW  //COPY LINE DOWN

--SHIFT+ALT+UPARROW   //COPY LINE UP

--CTRL+D              //DUPLICATE SELECTION

Turbo Consloe Log (After Installed This Extension)

--CTRL+ALT+L //Add Console Log Multiple Row

--SHIFT+ALT+D //Delete Console Log Multiple Row

--SHIFT+ALT+C //Comment Console Log Multiple Row

--SHIFT+ALT+U //Uncomment Console.Log Multiple Row

   

Quickly Access File:

--CTRL+HOME or HOME

--CTRL+END or END

 

--CTRL+N            //NEW FILE

--CTRL+W CTRL+W        //CLOSE ALL

--CTRL+F4            //CLOSE

--CTRL+SHIFT+T         //REOPEND CLOSED EDITOR

--CTRL+,           //SETTINGS

--CTRL+H           //REPLACE

--CTRL+SHIFT+P     //COMMAND PALETTE

--CTRL+P           //QUICK OPEN, GO TO FILE

--CTRL+B           //TOGGLE SIDEBAR VISIBILITY

--CTRL+G           //GO TO LINE

--CTRL+TAB           //OPEN NEXT

--CTRL+SHIFT+TAB   //OPEN PREVIOUS

--CTRL+SHIFT+O       //GO TO SYMBOL

Cheeat Sheet:

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

Visual Code Learning Path

 Visual Code Editor Learing Channel:

1. From Sumit Saha --> Learn with Sumit Channel

https://www.youtube.com/watch?v=3iG1IBJHTgE&list=PLHiZ4m8vCp9O5_QoMvQbOAOR5WolyZ4OS&index=3

2. From Hasin Hyder --> Learn with Hasin Hayder Channel

https://www.youtube.com/watch?v=ItSlnBMZHjA&list=PLoR56CteKZnBmefc8NTiG8GOHlU1vN3-F

3. From Stack Learner --> Stack Learner Channel

https://www.youtube.com/watch?v=KLcDpBRku-0&list=PL_XxuZqN0xVB_lroSm_xvTqvVBCpR4PQE

CSS Position

CSS Layout - The position Property

 The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).

---

The position Property

The position property specifies the type of positioning method used for an element.

There are five different position values:

• static
• relative
• fixed
• absolute
• sticky

Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.

---

position: static;

HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right properties.

An element with position: static; is not positioned in any special way; it is always positioned according to the normal flow of the page:

This <div> element has position: static;

Here is the CSS that is used:

Example

div.static {
  position: static;
  border: 3px solid #73AD21;
}

---

position: relative;

An element with position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

This <div> element has position: relative;

Here is the CSS that is used:

Example

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

position: 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. The top, right, bottom, and left properties are used to position the element.

A fixed element does not leave a gap in the page where it would normally have been located.

Notice the fixed element in the lower-right corner of the page. Here is the CSS that is used:

Example

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note: A "positioned" element is one whose position is anything except static.

Here is a simple example:

This <div> element has position: relative;

This <div> element has position: absolute;

Here is the CSS that is used:

Example

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

---

position: 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).

Note: Internet Explorer does not support sticky positioning. Safari requires a -webkit- prefix (see example below). You must also specify at least one of top, right, bottom or left for sticky positioning to work.

In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.

Example

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4CAF50;
}

---

Overlapping Elements

When elements are positioned, they can overlap other elements.

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

An element can have a positive or negative stack order:

This is a heading

Because the image has a z-index of -1, it will be placed behind the text.

Example

img {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: -1;
}

An element with greater stack order is always in front of an element with a lower stack order.

Note: If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top.

---

Positioning Text In an Image

How to position text over an image:

Example

All CSS Positioning Properties

CSS Display

 CSS Layout - The display Property

The display property is the most important CSS property for controlling layout.

The display Property

The display property specifies if/how an element is displayed.

Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

Click to show panel

Block-level Elements

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

The <div> element is a block-level element.

Examples of block-level elements:

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary.

This is an inline <span> element inside a paragraph.

Examples of inline elements:

• <span>
• <a>
• <img>

---

Display: none;

display: none; is commonly used with JavaScript to hide and show elements without deleting and recreating them. Take a look at our last example on this page if you want to know how this can be achieved.

The <script> element uses display: none; as default. 

Override The Default Display Value

As mentioned, every element has a default display value. However, you can override this.

Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, and still follow the web standards.

A common example is making inline <li> elements for horizontal menus:

Example

li {
  display: inline;
}

Note: Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display: block; is not allowed to have other block elements inside it.

The following example displays <span> elements as block elements:

Example

span {
  display: block;
}

The following example displays <a> elements as block elements:

Example

a {
  display: block;
}

Hide an Element - display:none or visibility:hidden?

Hiding an element can be done by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there:

Example

h1.hidden {
  visibility: hidden;
}

visibility:hidden; also hides an element.

However, the element will still take up the same space as before. The element will be hidden, but still affect the layout:

Example

h1.hidden {
  visibility: hidden;
}

CSS Lists

HTML Lists and CSS List Properties

In HTML, there are two main types of lists:

• unordered lists (<ul>) - the list items are marked with bullets
• ordered lists (<ol>) - the list items are marked with numbers or letters

The CSS list properties allow you to:

• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker
• Add background colors to lists and list items

Different List Item Markers

The list-style-type property specifies the type of list item marker.

The following example shows some of the available list item markers:

Example

ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}

Note: Some of the values are for unordered lists, and some for ordered lists.

An Image as The List Item Marker

The list-style-image property specifies an image as the list item marker:

Example

ul {
  list-style-image: url('sqpurple.gif');
}

---

Position The List Item Markers

The list-style-position property specifies the position of the list-item markers (bullet points).

"list-style-position: outside;" means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically. This is default:

• Coffee - A brewed drink prepared from roasted coffee beans...
• Tea
• Coca-cola

"list-style-position: inside;" means that the bullet points will be inside the list item. As it is part of the list item, it will be part of the text and push the text at the start:

• Coffee - A brewed drink prepared from roasted coffee beans...
• Tea
• Coca-cola

Example

ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

---

Remove Default Settings

The list-style-type:none property can also be used to remove the markers/bullets. Note that the list also has default margin and padding. To remove this, add margin:0 and padding:0 to <ul> or <ol>:

Example

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

---

List - Shorthand property

The list-style property is a shorthand property. It is used to set all the list properties in one declaration:

Example

ul {
  list-style: square inside url("sqpurple.gif");
}

When using the shorthand property, the order of the property values are:

• list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
• list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
• list-style-image (specifies an image as the list item marker)

If one of the property values above are missing, the default value for the missing property will be inserted, if any.

---

Styling List With Colors

We can also style lists with colors, to make them look a little more interesting.

Anything added to the <ol> or <ul> tag, affects the entire list, while properties added to the <li> tag will affect the individual list items:

Example

ol {
  background: #ff9999;
  padding: 20px;
}

ul {
  background: #3399ff;
  padding: 20px;
}

ol li {
  background: #ffe5e5;
  padding: 5px;
  margin-left: 35px;
}

ul li {
  background: #cce5ff;
  margin: 5px;
}

Result:

1. Coffee
2. Tea
3. Coca Cola

• Coffee
• Tea
• Coca Cola

All CSS List Properties

Property	Description
list-style	Sets all the properties for a list in one declaration
list-style-image	Specifies an image as the list-item marker
list-style-position	Specifies the position of the list-item markers (bullet points)
list-style-type	Specifies the type of list-item marker

CSS Links

 With CSS, links can be styled in many different ways.

---

Text Link Text Link Link Button Link Button

---

Styling Links

Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

Example

a {
  color: hotpink;
}

In addition, links can be styled differently depending on what state they are in.

The four links states are:

• 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

Example

/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}

When setting the style for several link states, there are some order rules:

• a:hover MUST come after a:link and a:visited
• a:active MUST come after a:hover

---

---

Text Decoration

The text-decoration property is mostly used to remove underlines from links:

Example

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}

---

Background Color

The background-color property can be used to specify a background color for links:

Example

a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
} 

---

Link Buttons

This example demonstrates a more advanced example where we combine several CSS properties to display links as boxes/buttons:

Example

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}

---

More Examples

Example

This example demonstrates how to add other styles to hyperlinks:

a.one:link {color: #ff0000;}
a.one:visited {color: #0000ff;}
a.one:hover {color: #ffcc00;}

a.two:link {color: #ff0000;}
a.two:visited {color: #0000ff;}
a.two:hover {font-size: 150%;}

a.three:link {color: #ff0000;}
a.three:visited {color: #0000ff;}
a.three:hover {background: #66ff66;}

a.four:link {color: #ff0000;}
a.four:visited {color: #0000ff;}
a.four:hover {font-family: monospace;}

a.five:link {color: #ff0000; text-decoration: none;}
a.five:visited {color: #0000ff; text-decoration: none;}
a.five:hover {text-decoration: underline;}

Example

Another example of how to create link boxes/buttons:

a:link, a:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: green;
  color: white;
}

Example

This example demonstrates the different types of cursors (can be useful for links):

<span style="cursor: auto">auto</span><br>
<span style="cursor: crosshair">crosshair</span><br>
<span style="cursor: default">default</span><br>
<span style="cursor: e-resize">e-resize</span><br>
<span style="cursor: help">help</span><br>
<span style="cursor: move">move</span><br>
<span style="cursor: n-resize">n-resize</span><br>
<span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor: nw-resize">nw-resize</span><br>
<span style="cursor: pointer">pointer</span><br>
<span style="cursor: progress">progress</span><br>
<span style="cursor: s-resize">s-resize</span><br>
<span style="cursor: se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
<span style="cursor: text">text</span><br>
<span style="cursor: w-resize">w-resize</span><br>
<span style="cursor: wait">wait</span>