Coding Notes

  Modulo operator: Modulo operator (%) is used to find the remainder when two numbers are divided. Example: Scope of let and const: One of the major differences between var and let/const is the scope. However, one might wonder what scope exactly is. The scope of a variable is the segment of the code where the variable can be accessed. Variables declared using var have the global scope whereas let and const are blocks scoped. Here, global scope means the value of a variable is accessible globally within the code. On the other hand, block scope means the value of the variable is accessible only within the block where it is declared.      What is a block?   A block is nothing but a set of statements enclosed inside curly braces. It is also called a Compound Statement. It is used whenever we want to execute several lines whereas JS allows only one. For example, we can use a block after an if condition to execute the block code conditionally.      Exam...

  JavaScript as a scripting language: JavaScript (also known as JS) is a scripting language, but what does scripting language mean?  A scripting language is a programming language that allows some control of another software application(s). In the case of JavaScript, this application is the browser.  JavaScript is actually an interpreted language and not a compiled language.  The compilation is the process of converting high-level programming languages like Java, C++, etc. into machine code that a computer can execute. In the case of JavaScript, an interpreter in the browser interprets each line of JavaScript code and runs it. JavaScript can "display" data in different ways: Writing into an HTML element, using  innerHTML . Writing into the HTML output using  document.write() . Writing into an alert box, using  window.alert() . Writing into the browser console, using  console.log() .

 SASS and LESS is site search on google to more information  1. font-variant property in CSS The font-variant property determines if a text should be shown in small capitals or not.      Every lowercase character is changed into uppercase characters by using a small-caps font. But compared to the text's original capital characters, the converted uppercase letters have a smaller font size. Syntax for font-variant :   font-variant: value Values : normal : It shows text in normal font. Font-variant is set to normal by default.    small-caps : It displays fonts in small caps. Code : Output: 2. CSS letter-spacing Property : Character spacing in a text can be altered via the letter-spacing property.   Syntax : letter-spacing: value; Values : normal  : defines the standard character spacing. Normal value is the default value for letter-spacing        length : establishes a length that is used as the character spacing (negati...

------------------------------------------------------------------------------------------------------------------------ <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <link rel="stylesheet" href="styles.css"> <!-- Link to your external CSS file -->   <title>Your Webpage Title</title> </head> <body>   <div class="grad"></div> <!-- Your HTML element with the "grad" class --> </body> </html> @keyframes example {   0% { background-color: red; left: 0px; top: 0px; }   25% { background-color: yellow; left: 200px; top: 0px; }   50% { background-color: blue; left: 200px; top: 200px; }   75% { background-color: green; left: 0px; top: 200px; }   100% { background-color: red; left: 0px; top: 0px; } } .grad {   width: 100px;   heigh...

 :root {   --main-color: #3498db; } .element {   background-color: var(--main-color); } HTML Code: <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <link rel="stylesheet" href="styles.css">   <title>Sample Page</title> </head> <body>   <div class="element">     This is a sample element with the specified background color.   </div> </body> </html> CSS Code: :root {   --main-color: #3498db; } .element {   background-color: var(--main-color);   padding: 20px;   color: white; /* Text color to make it visible on the background */ }

 .grid{ width: 500px; height: 500px; background-image: radial-gradient(red, yellow, green); } .grid{ width: 500px; height: 500px; background-image: radial-gradient(red 15%, yellow 25%, green 50%); } .grid{ width: 500px; height: 500px; background-image:  radial-gradient(circle,  red, yellow, green); } 1. Radial gradient : The background image is set to a radial gradient using the radial-gradient() method.  It results in a gentle transition between two or more colors coming from the same source. (Center)        Its form could either be circular or elliptical.        Syntax :      background-image : radial-gradient(shape, size, position, starting color…..ending color)       Values :      Shape :  shape of the gradient, it can be circle or ellipse        Size :  denotes the size of gradient, possible values are closest side, closest-corner, farthest-sid...

.grid{ width: 500px; height: 500px; background-image: linear-grading(red, yellow); } .grid{ width: 500px; height: 500px; background-image: linear-grading(to right, red, yellow); } 1. Linear gradient :  The linear gradient is one of the most common and practical types of gradient (). You can choose to have the gradient's "axis" run from left to right, top to bottom, or at any angle. Syntax background-image : linear-gradient(direction of gradient or angle(in degrees), color-stop1, color-stop2,….) Color stop meaning : Color stops are places in a gradient that shows a certain color at the precise spot we choose. So they enable us to produce more detailed gradient effects. Example The following code will create a linear gradient transitioning from yellow to green color towards the bottom.   Code : Output : Example The following code will create a linear gradient having 3 color stops, transitioning from blue to purple to red in a diagonal direction. Code :     Output :