DEV Community: Raja B

Truthy and Falsy JavaScript

Raja B — Thu, 04 Jun 2026 09:28:03 +0000

In JavaScript, truthy means a value behaves like true in an if condition, and falsy means a value behaves like false

Easy explanation:

Truthy = treated as true
Falsy = treated as false

Data Type	Falsy Example	Truthy Example
Boolean	false	true
String	"" (Empty String)	"hello", " ", "0"
Number	0, -0, NaN	1, -10, 3.14
Object / Structural	None	{}, [], new Date()
Empty / Missing	null, undefined	None

Undefined:

In JavaScript, undefined is a primitive data type and a global property that signifies a variable has been declared but has not yet been assigned a value

Simple example

let a;
console.log(a); // undefined

undefined vs not defined:

- undefined means the variable exists, but no value is set yet

Example:

let name;
console.log(name); // undefined

Here, name is declared, but it has no value, 
so JavaScript shows undefined

- not defined means the variable was never declared

Example:

console.log(x);

This gives an error because x was never declared anywhere

Example:

function test() {
  console.log(y);
}
test();

If y was never declared, JavaScript cannot find it,
 so it is not defined

NAN:

NaN means Not a Number in JavaScript. It usually appears when a number operation fails or when you try to convert something invalid into a number

Example


let result = 10 / "abc";
console.log(result); // NaN

Here, "abc" cannot be treated as a valid number, 
so the result becomes NaN

Conditional Statements

Raja B — Thu, 04 Jun 2026 08:47:36 +0000

In JavaScript, conditional statements 
let your code make decisions based on 
whether something is true or false. 
The main ones are
 if, else, 
else if, 
switch, and 
the ternary operator 
? :

1) if statement:

Use if when you want code to run only if a condition is true

let age = 20;

if (age >= 18) {
  console.log("You are an adult");
}

Here, the message prints only when age >= 18 is true

2) if...else:

Use else when you want one block for true and another for false.

let age = 16;

if (age >= 18) {
  console.log("You are an adult");
} else {
  console.log("You are a minor");
}

If the condition is false, the else block runs instead

Flow Chart

3) if...else if...else:

Use else if when you have multiple conditions to check in order

let marks = 72;

if (marks >= 90) {
  console.log("Grade A");
} else if (marks >= 75) {
  console.log("Grade B");
} else if (marks >= 60) {
  console.log("Grade C");
} else {
  console.log("Not Pass");
}

JavaScript checks each condition from top to bottom and runs the first matching block

Flow Chart:

4) switch:

Use switch when one value can match many different cases

let day = "Monday";

switch (day) {
  case "Monday":
    console.log("Start of the week");
    break;
  case "Friday":
    console.log("Weekend soon");
    break;
  default:
    console.log("Normal day");
}

switch is useful when you compare the same variable against several possible values

5) Ternary operator:

The ternary operator is a short form

let age = 19;
let status = age >= 18 ? "Adult" : "Minor";

console.log(status);

It follows this pattern: condition ? expression1 : expression2

Simple rule:

Use if for one condition
Use if...else for two outcomes
Use else if for multiple conditions
Use switch for many fixed values
Use ternary for short, simple decisions

Reference:

JavaScript operators

Raja B — Wed, 03 Jun 2026 14:32:37 +0000

JavaScript operators are symbols that perform actions on values and variables. The main types are arithmetic, assignment, comparison, logical, bitwise, string, ternary, and special operators.

Arithmetic operators:

These are used for math operations

- +  Addition: 5 + 2 = 7

- - Subtraction: 5 - 2 = 3

- * Multiplication: 5 * 2 = 10

- / Division: 5 / 2 = 2.5

- % Modulus: gives the remainder, 5 % 2 = 1

- ** Exponentiation: 5 ** 2 = 25

Assignment operators:

These assign or update values in variables

- = assign

- += add and assign

- -= subtract and assign

- *= multiply and assign

- /= divide and assign

- %= remainder and assign

Example:

let x = 10;
x += 5; // x becomes 15  but "x=x+5"

Comparison operators:

These compare two values and return true or false

- == equal to

- === equal value and equal type

- != not equal

- !== not equal value or type

- > greater than

- < less than

- >= greater than or equal to

- <= less than or equal to

Example:

console.log(5 === "5"); // false
console.log(5 == "5");  // true

Logical operators:

These are used in conditions

- && logical AND

- || logical OR

- ! logical NOT

- ?? nullish coalescing, gives the right value only 
when the left side is null or undefined (TBD)

Bitwise operators:

These work on binary bits of numbers

- & bitwise AND

- | bitwise OR

- ^ bitwise XOR (TBD)

- ~ bitwise NOT  (TBD)

- << left shift  (TBD)

- >> signed right shif  (TBD)

- >>> unsigned right shift  (TBD)

String and ternary operators:

JavaScript also has operators for text and short conditional logic

- + can join strings: "Hello" + " World"

- ?: ternary operator: condition ? value1 : value2 (TBD)

Example:

let result = marks >= 40 ? "Pass" : "Fail";

Special operators:(TBD)

These are useful in different situations

typeof checks the type of a value
instanceof checks whether an object is an instance of a class or constructor
delete removes a property from an object
in checks whether a property exists in an object
?. optional chaining, safely accesses nested values
... spread operator, expands arrays or objects.

Html and css learn pharma

Raja B — Wed, 03 Jun 2026 13:57:58 +0000

CSS, opacity: 0.9;

opacity: 0.9; = 90% visible (10% transparent/see-through)
The element is mostly solid but slightly transparent

mdash:

— is the HTML entity code for an em dash (—), which is a long dash used in punctuation.

Key facts:

What it displays as: — (a long dash, width of capital "M")

Name: Em dash (also called "mdash")

Length: Longer than an en dash (–) and hyphen (-)

Purpose: Marks a strong break in a sentence, sets off extra information like parentheses, or replaces a colon/semicolon

When you see the code itself: If — appears literally on a webpage, the HTML wasn't written correctly (often missing the semicolon ; at the end)

JavaScript History

Raja B — Mon, 01 Jun 2026 15:19:18 +0000

What?

JavaScript is a scripting programming language used to make web pages interactive and dynamic. It runs in the browser and is one of the core technologies of the web (alongside HTML and CSS).

Why?

Netscape wanted a lightweight scripting language to add interactivity to web pages (like form validation, animations).
Java was too heavy/complex for simple web tasks, so they needed something easier and faster.

When?

Event	Date / Period
Netscape Navigator 1.0 Released	December 15, 1994
JavaScript Invented	1995
Created In	10 days only
First Standard (ECMAScript)	1997

How?

Invented by: Brendan Eich (employee at Netscape Communications)
Original names: First called "Mocha" → then "LiveScript" → finally renamed "JavaScript" (marketing move to ride Java's popularity, though they are completely different)
Standardized: Submitted to Ecma International → became ECMA-262 (ECMAScript) standard in 1997
Evolution: Started for browser → now used for server (Node.js), mobile apps, games, etc.

Key Facts:

Event / Fact	Detail / Date
Netscape Navigator 1.0 Released	December 15, 1994
JavaScript Invented	1995
JavaScript Creators	Brendan Eich (Netscape)
Time taken to build	10 days only
First Standard (ECMAScript)	1997
Used by	90%+ websites (Google, Facebook, YouTube, Twitter)
Most popular	#1 programming language (StackOverflow 2020 survey)

Reference:

@media css

Raja B — Fri, 29 May 2026 13:06:10 +0000

@media is a CSS rule that applies different styles based on device characteristics (screen size, orientation, resolution, etc.) — the foundation of responsive web design.

What use???

@media applies CSS styles only when certain conditions are met
It checks: screen width, height, orientation, resolution, device type
Core technology for responsive web design (RWD)

Why use???

Different screen sizes:Mobile, tablet, desktop need different layouts.

Better UX:Content adapts to device for better user experience.

Print vs Screen: Different styles for printing vs displaying on screen

When use???

Use @media when:

Screen width changes — e.g., mobile (< 600px), tablet (600-900px), desktop (> 900px).
Orientation changes — portrait vs landscape.
Device type — screen, print, speech (screen readers).
User preferences — reduced motion, dark mode, data usage.

How to Use???

Basic Syntax:

@media media-type and (media-feature: value) {
  /* CSS rules */
}

Common Examples:

1. Mobile First: (screen width ≤ 600px)


/* Default (mobile) */
.container 
{
  width: 100%;
  padding: 10px;
}


/* Tablet and Desktop */
@media (min-width: 600px) 
{
  .container {
    width: 540px;
    padding: 20px;
  }
}

/* Large Desktop */
@media (min-width: 900px) 
{
  .container {
    width: 720px;
  }
}

2. Orientation (Portrait vs Landscape):

/* Portrait mode */
@media (orientation: portrait) 
{
  .image 
  {
    width: 100%;
  }
}


/* Landscape mode */
@media (orientation: landscape) 
{
  .image 
 {
    width: 50%;
  }
}

3. Print Styles:

@media print {
  .no-print {
    display: none;
  }

  body {
    font-size: 12pt;
  }
}

4. Multiple Conditions:

@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* Applies to tablets only */
  .grid {
    columns: 2;
  }
}

Quick Reference Table:

Media Feature	Example	What it checks
min-width	`@media (min-width: 600px)`	Screen width ≥ 600px
max-width	`@media (max-width: 768px)`	Screen width ≤ 768px
orientation	`@media (orientation: portrait)`	Portrait or landscape mode
resolution	`@media (resolution: 2dppx)`	Screen resolution (retina displays)
print	`@media print`	When printing document
prefers-reduced-motion	`@media (prefers-reduced-motion: reduce)`	User wants less animation

Complete Working Example:


<!DOCTYPE html>
<html>
<head>
<style>

.body {
  background: lightblue; /* Default (mobile) */
}

/* Tablet */
@media (min-width: 600px) {
  .body {
    background: lightgreen;
  }
}

/* Desktop */
@media (min-width: 900px) {
  .body {
    background: lightcoral;
  }
}
</style>
</head>
<body>
  <div class="body">Resize browser to see color change!</div>
</body>
</html>

Background color changes based on screen width.

@media lets your website adapt to different devices automatically, making it responsive and user-friendly across phones, tablets, and desktops.

Reference:

Mysite Border learn

Raja B — Fri, 29 May 2026 12:12:30 +0000

list-style-type: none; is a CSS property that removes bullets (for unordered lists) or numbers (for ordered lists) from HTML lists.

What it does:

Removes the marker (bullet/number) from list items

Where to use:

Apply to <ul>, <ol>, or <li>elements

Common use:

Creating navigation menus, custom-styled lists without bullets

Example:

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

The none value means no marker is shown at all.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

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

This removes the default bullets from the list.

transition: color 0.3s; is a CSS shorthand property that creates a smooth animation when an element's color changes, taking 0.3 seconds to complete.

transition: CSS shorthand for animating property changes smoothly.

color:The CSS property being animated (text color).

0.3s: Duration: transition takes 0.3 seconds (300 milliseconds).

What it does: When the color changes (e.g., on :hover), instead of instant change, it gradually fades from old color to new color over 0.3 seconds.

Default timing: Uses ease (starts slow, speeds up, then slows down) if not specified.

.button {
  color: black;
  transition: color 0.3s; /* color change 0.3sec */
}

.button:hover {
  color: red; /* color change 0.3sec slow move */
}

When you hover over .button, 
the text color smoothly 
changes from black to red over 0.3 seconds.

Tools Learn for understand practical

Raja B — Thu, 28 May 2026 13:00:23 +0000

.form-group > label{

        border: 1px solid blue;

    }

.form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="date"],
    .form-group textarea{

        border: 1px solid #ccc;

        flex: 1;
        padding: 8px;
         border-radius: 4px;

    }

 .inline-group{

        border: 1px solid red;
    }

label and Input Tag

Raja B — Thu, 28 May 2026 09:23:26 +0000

1.Input Tag

The <input> tag defines an input field where users can enter data in a form.
It is the most important form element in HTML.
<input> is a self-closing tag (it does not need a closing tag).
Its behavior changes based on the type attribute:

type="text" → single-line text box
type="password" → hidden text
type="checkbox" → checkbox

4.type="radio" → radio button

5.type="email", type="number", type="date", etc.

Example:

<input type="text" name="username">

2.Label Tag

The <label> tag represents a caption (text) for a form element like <input>
It improves accessibility: screen readers read the label when the input is focused.
Clicking the label text automatically focuses on the associated input field.
This is especially helpful for small targets like checkboxes and radio buttons.

There are two ways to connect

<label> with <input>:

Method 1: Using for and id (explicit association)

<label for="username">Username:</label>
<input type="text" id="username" name="username">

for attribute in <label>must match the id of <input>
This explicitly binds the label to the input.

Method 2: Wrapping input inside label (implicit association)

<label>
  Username:
  <input type="text" name="username">
</label>

Here, the <input> is inside the <label>, so for and id are not needed.
Clicking any part of the label (including the text) focuses the input.

Example:

<form>
  <label for="email">Email :</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br><br>

  <label>
    <input type="checkbox" name="agree">
    I agree to terms 
  </label>
</form>

for="email" matches id="email" → label and input are connected.
Checkbox uses the wrapping method (input inside label).

4. Key Points:

<input>: The field where users enter data (text, password, checkbox, radio, etc.).

<label>: The text that provides a name/description for the input; crucial for accessibility.

for and id : To connect a label with an input, the for attribute must match the id attribute (for = id).

Clicking label: Auto-focuses on the input; makes it easier to click checkboxes and radio buttons.

Screen readers: Reads the label aloud, which is highly important for accessibility.

Reference:

Question And Answer

Raja B — Sun, 24 May 2026 15:32:49 +0000

What is the purpose of box-sizing: border-box in your project?

1. Purpose of box-sizing: border-box

box-sizing: border-box means: when you set width or height, that size already includes
padding and border.
So if you say width: 300px, the total box (content + padding + border) will be 300px, not bigger. This makes layouts easier and avoids unexpected overflow.

How does grid-template-columns: 2fr 1fr work?

2. How grid-template-columns: 2fr 1fr works

In CSS Grid, fr means “fraction of available space”.

grid-template-columns: 2fr 1fr creates 2 columns:

First column = 2 parts
Second column = 1 part
Total = 3 parts → first gets 2/3 of the width, second gets 1/3.

What is the difference between semantic tags like `<main>` and `<footer>` versus normal `<div>` tags?

3. Semantic tags (<main>, <footer>) vs <div>

<div>: no meaning, just a generic box. You use it only for layout/styling.
Semantic tags like <main>, <header>, <footer>, <nav>: names show what that section is

Search engines, screen readers, and other tools understand your page structure better.
So the browser looks almost the same, but semantic tags improve accessibility, SEO, and code readability.

Why is vh used instead of px?

4. Why use vh instead of px

px = fixed size, does not change with screen.
vh = “viewport height”. 1vh = 1% of browser window height.

If you write height: 100vh, the element will always match the screen height, so it’s good for full‑screen sections and responsive designs.

Difference between padding and margin?

5. Difference between padding and margin

Padding: space inside the element, between content and border. Makes the content “breathe” inside the box.
Margin: space outside the element, between this element and other elements.

Shortcut:

Padding = “inner space”
Margin = “outer space”

Difference between Grid and Flexbox?

6. Difference between Grid and Flexbox

Flexbox: one-dimensional → you mainly control layout in one direction (row or column). Great for navbars, buttons in a row, etc.
Grid: two-dimensional → you control rows and columns together. Great for full page layouts, dashboards, card grids, etc.

What are self-closing tags?

7. What are self‑closing tags

Self-closing tags are elements that do not have content inside and traditionally don’t need a separate closing tag. Examples:

<img>, <br>, <hr>, <input>, <meta>, <link>.
In HTML5 you usually write them as <img src="..."> (no need for </img>).

What is the purpose of the meta viewport tag?

8. Purpose of the meta viewport tag

Typical code:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This tells the browser on mobile:

Page width = device screen width
Start at normal zoom (no auto zoom‑out)
So the page becomes mobile-friendly and responsive.

Reference:

perplexity.ai

NonSemantic Tags in HTML

Raja B — Sun, 24 May 2026 14:31:54 +0000

What are Non Semantic Tags in HTML?

Non semantic tags are HTML tags that do not tell you what kind of content they contain. They are just general-purpose containers with no clear meaning.

Let’s understand step-by-step.

1. What Does “Non Semantic” Mean?

The word “non semantic” means “no meaning.” So, non semantic tags don’t tell anything about what’s inside them.

For example, if you see:

<div>This is something</div>

You have no idea what “something” is. It could be: - a paragraph - a form - a sidebar - a heading - or anything else. This is why it’s called non semantic — it doesn’t give meaning to the content.

2. Why Are Non Semantic Tags Used?

Even though they don’t have meaning, non-semantic tags are still very useful. Here’s why developers use them:

a) Flexible Containers
You can put any content inside a non semantic tag. It acts like an empty box or a wrapper.

b) Grouping Elements
They help you group multiple elements together to apply styles or scripts.

For example:

<div class="card">
  <h2>Title</h2>
  <p>Description</p>
</div>

Here, the <div> groups the title and paragraph so you can style them as one unit.

c) Used with CSS and JavaScript
You can add classes or IDs to these tags to apply CSS styles or add JavaScript functionality.

3. Common Non Semantic Tags

Here are the most common non semantic tags:

Tag	Meaning (in simple words)
<div>	A container or block-level box (used for layout)
<span>	An inline container (used for small styling)

1. <div>: It’s short for “division”. It’s used to create sections or blocks in a webpage.
Example: <div class="footer">This is footer</div>

2. <span>: It’s used for inline elements, like styling a single word or phrase inside a sentence.
Example: <p>This is a <span class="highlight">special</span> word.</p>

4. When Should You Use Non Semantic Tags?

There is no suitable semantic tag for your content
You are just grouping elements for design or scripting
You want full control using CSS or JavaScript
You are creating custom layouts that don’t fit standard tag meanings

Will be learn

Non-semantic tags are like blank boxes in HTML. They don’t explain what’s inside, but they help you group and control content using CSS or JavaScript.

The most common non semantic tags are:

<div> — for block-level containers
<span> — for inline-level containers

Use them wisely when there is no meaningful tag available.

Reference:

https://eduitlearning.in/semantic-and-non-semantic-tags/

Semantic Tags in HTML

Raja B — Sun, 24 May 2026 11:41:13 +0000

What are Semantic Tags in HTML?

Semantic tags are HTML tags that clearly describe the meaning or purpose of the content inside them.

semantic means “with meaning.” So, a semantic tag tells both the developer and the browser what the content is about.

Let’s break it down step by step.

1. Why Are They Called “Semantic”?

The word “semantic” comes from “meaning.”
When you use semantic tags, you’re telling the browser, “Hey, this part is a heading” or “This section is a navigation bar” or “This area is the main content.”

This helps:

Browsers understand how to display it
Search enginesunderstand what’s important
Screen readers(used by blind users) read the content properly
A semantic tag (like , , , etc.) clearly tells you what the content is for.

Example:

<article>This is a blog post</article>

Now, even without looking at the content, we know it’s a blog post, because it’s inside an <article>tag.

2. Why Should You Use Semantic Tags?

Using semantic tags has many benefits:

a) Improves Code Readability

When other developers (or even future-you) read your HTML code, it’s easier to understand.

Instead of seeing this:

<div id=”header”>

<div id=”nav”>

<div id=”main”>

You can write this:

<header>

<nav>

<main>

This is much cleaner and meaningful.

b) Helps Search Engines (SEO)

Search engines like Google look at your HTML tags to decide what your page is about.

Using semantic tags helps them:

Index your site correctly
Show your site in search results more accurately

c) Better for Accessibility

People who can’t see use screen readers. These tools read your HTML and speak it aloud.

If you use proper tags, the tool can say:

“This is the main content”
“This is a navigation menu”
“This is a footer”

This gives a better experience for disabled users.

d) Future-Proof Your Code

Browsers and tools are built to understand semantic tags better. They may add new features, improve performance, or give better support in future updates if your code is semantic.

Semantic Tags

Tag          Meaning (in simple words)
<header>     Top part of the page (like a title or logo)
<nav>            Navigation menu (links to other pages)
<main>           Main content area of the page
<section>    A section of content (like a chapter)
<article>    An independent piece (like a blog post)
<aside>          Side content (like ads or side notes)
<footer>     Bottom part of the page (like copyright)
<figure>     A picture or diagram with a caption
<figcaption>     The caption for a figure or image
<time>           Shows a date or time value
<mark>           Highlights important text
<address>    Contact information
<summary>    Summary of collapsible content
<details>    Expandable section for hidden content

3. Do Semantic Tags Affect How the Website Looks?

No, not directly. Semantic tags don’t change the appearance of the webpage by default.

You need to use CSS to style them. But their main job is to add meaning, not design.

4. Where Are Semantic Tags Used?

You use semantic tags almost everywhere in an HTML document:

Website layout (header, footer, main)
Blog posts (article, section)
Menus (nav)
Images with captions (figure, figcaption)

They make the entire HTML page more understandable.

Will be learn

Semantic tags are like labels that explain what each part of your page does.

Without them, your HTML is just a pile of boxes.
With them, it becomes a well-organized, meaningful structure that is:

Easier to read
Easier to maintain
Better for Google
Better for users

DEV Community: Raja B

Truthy and Falsy JavaScript

Conditional Statements

Reference:

JavaScript operators

Html and css learn pharma

JavaScript History

Reference:

@media css

Reference:

Mysite Border learn

Tools Learn for understand practical

label and Input Tag

1.Input Tag

2.Label Tag

There are two ways to connect

Method 1: Using for and id (explicit association)

Method 2: Wrapping input inside label (implicit association)

4. Key Points:

Reference:

Question And Answer

What is the purpose of box-sizing: border-box in your project?

How does grid-template-columns: 2fr 1fr work?

What is the difference between semantic tags like <main> and <footer> versus normal <div> tags?

Why is vh used instead of px?

Difference between padding and margin?

Difference between Grid and Flexbox?

What are self-closing tags?

What is the purpose of the meta viewport tag?

Reference:

NonSemantic Tags in HTML

What are Non Semantic Tags in HTML?

1. What Does “Non Semantic” Mean?

2. Why Are Non Semantic Tags Used?

3. Common Non Semantic Tags

4. When Should You Use Non Semantic Tags?

Will be learn

Reference:

Semantic Tags in HTML

What are Semantic Tags in HTML?

1. Why Are They Called “Semantic”?

2. Why Should You Use Semantic Tags?

a) Improves Code Readability

b) Helps Search Engines (SEO)

Will be learn

Reference:

What is the difference between semantic tags like `<main>` and `<footer>` versus normal `<div>` tags?