DEV Community: Mark Tony

JS - Loops

Mark Tony — Tue, 01 Sep 2026 04:51:44 +0000

What is loop?
JavaScript loops are control structures that are used for executing a block of code repeatedly as long as the specified condition evaluates true.

Various types of loops

1.for loop
The most common loop, used when the number of iterations is known. It initializes a variable, checks a condition, and updates the variable in a single line.

 let star= "";
for (let count = 0; count< 5; count++) {
 star = star + "1 "
 console.log(star);
 }

2. while loop
It executes a block of code as long as a condition is true, checking the condition before each iteration. It is ideal when the number of iterations is unknown.

 let count = 0 
 while (count<5){
    console.log(3);

    count = count +1;

 }

3. do...while loop
It is similar to the while loop, but it guarantees that the code block executes at least once before checking the condition.

do {
    console.log(3);
    count = count + 1;    

 } while (6 < 5);

JS - If, else and else if Statements

Mark Tony — Thu, 27 Aug 2026 09:51:34 +0000

Conditional Statements

JavaScript uses the conditional Statements (if,else and else if) to decide the flow of the code based on the validation of statements. The statements are the boolean values (True/False).

1. if Statement:
The if statement executes the block of code when the condition is true. Otherwise it skips it.

function calculate (){
  const leftOperand = Number (previousValue);
  const rightOperand = Number (currentValue);
  if(operator == "+") {
    currentValue = leftOperand + rightOperand;
      }

This if statement will execute the block of code, when the operator is + addition.

2. if else Statement:
The else statement will be executed when the if statement is false and the block of code of the else statement takes up the flow.

    <script>
let mark = 80

if(mark > 90 && mark <= 100){
  console.log("Grade O");

}</script>

When the condition is true, the output will be

you are eligible to vote

when the conditon is false, the output will be

you are not eligible to vote

3. else if statement:

The else if statement is used to check more than one conditions. It executes the different block of code in a chain pattern.

let mark = 91

if(mark > 90 && mark <= 100){
  console.log("Grade O");

} else if (mark > 80) {
  console.log("Grade A");
} else if (mark > 70) {
  console.log("Grade B");
} else if ( mark < 40) {
  console.log("you are fail");  
} else {
  console.log("Invalid mark Entered, Please enter the mark within 100"); 
}

Here the else if statement is used to test the different block of code for a grade validation function. The flow of code is decided based on the input.

CSS Selectors

Mark Tony — Wed, 26 Aug 2026 05:40:40 +0000

CSS selectors are patterns used to select HTML elements so we can apply CSS styles to them.
CSS selectors are patterns used to select HTML elements so that CSS styles can be applied to them.

1. Element Selector

An element selector selects all HTML elements of a particular type.

p {
  color: blue;
}

This selects all <p> elements.

2. Class Selector

A class selector selects elements using their class attribute.

.box {
  color: red;
}

It starts with a dot (.).

3. ID Selector

An ID selector selects an element using its id attribute.

#header {
  background-color: blue;
}

It starts with a hash (#)An ID is normally unique on a page.

4. Attribute Selector

An attribute selector selects elements based on their attributes or attribute values.

input[type="text"] {
  border: 1px solid black;
}

This selects text input elements.

5. Universal Selector

The universal selector (*) selects all elements on the page.

* {
  margin: 0;
  padding: 0;
}

6. Group Selector

A group selector allows you to apply the same style to multiple selectors.

h1, h2, p {
  color: green;
}

7. Descendant Selector

A descendant selector selects elements that are inside another element.

div p {
  color: red;
}

This selects all <p>elements inside a <div>.

8. Child Selector

A child selector (>) selects only the direct children of an element.

div > p {
  color: blue;
}

9. Adjacent Sibling Selector

The adjacent sibling selector (+) selects the element immediately following another element.

h1 + p {
  color: red;
}

10. General Sibling Selector

The general sibling selector (~) selects all matching siblings that come after an element.

h1 ~ p {
  color: green;
}

11. Nesting Selector

The nesting selector (&) is used to show a relationship between a parent selector and its nested rules.

.box {
  color: black;

  & p {
    color: red;
  }
}

12. Pseudo-class Selector

A pseudo-class selects an element based on its state or position.

button:hover {
  background-color: blue;
}

Common Examples:
:hover
:focus
:first-child
:last-child
:nth-child()

13. Pseudo-element Selector

A pseudo-element styles a specific part of an element.

p::first-letter {
  font-size: 30px;
}

Common Examples:
::before
::after
::first-letter
::first-line

Data Types in JavaScript

Mark Tony — Tue, 25 Aug 2026 09:59:40 +0000

A data type tells the computer what kind of data a variable stores and what operations can be done with it.

For example:

10 → number
"Hello" → text
true → boolean

In simple words, a data type defines what kind of value a variable can hold.

There are Two types of Data types used in JavaScript:

Primitive Data Type
Non- Primitive Data Type

Primitive Data Type:
It can hold only single value. For example:
let Name= "Tony"

A memory will be created on the key "Name" and the value "Tony" will be stored. The Primitive Data Types are immutable.

If I give another value in the same key "Name" and give the value "Parthipan"

Name="Parthipan"

A new memory will be created and the value "Parthipan" will be stored.

Non- Primitive Data Type
Unlike Primitive,It can Store multiple values. It is called an Object. The object contains the Arrays and Functions.

  let userDetails = {
      name: "Mark Tony",
      email: "tony@gmail.com",
      location: "chennai",
      welcome: function (a,b){
        return a+b;
      },
    };

Various Primitive data types:

String: A string is a sequence of text or characters written inside single quotes (' ') or double quotes (" ").
Number: A number represents both integer and decimal (floating-point) values.
BigInt: BigInt is used to represent very large integers accurately beyond the safe range of the Number type.
Boolean: A Boolean represents a logical value that can be either true or false.
Null: Null represents the intentional absence of a value.
Undefined: Undefined means a variable has been declared but no value has been assigned to it.
Symbol: A Symbol is a unique and immutable primitive value, commonly used to create unique object property keys.

Easy way to remember

String → Text
Number → Numbers
BigInt → Very large integers
Boolean → True/False
Null → Intentional empty value
Undefined → No value assigned
Symbol → Unique value

HTML, CSS - Interview Questions

Mark Tony — Fri, 21 Aug 2026 05:37:11 +0000

1. What is HTML?

HTML stands for HyperText Markup Language. It is the standard markup language used to create and structure web pages. HTML defines the different elements on a webpage, such as headings, paragraphs, images, links, buttons, tables, and forms. HTML provides the basic structure of a website, while CSS is used for styling and JavaScript is used for functionality.

2. What is CSS?

CSS stands for Cascading Style Sheets. It is used to style and design HTML elements on a webpage. With CSS, we can change colors, fonts, sizes, spacing, borders, backgrounds, and layouts. CSS also helps us make websites responsive, so they can work properly on different screen sizes like desktops, tablets, and mobile phones. We can use CSS with layouts such as Flexbox and Grid to arrange elements.

3. What are HTML Attributes?

HTML attributes provide additional information about HTML elements. They are written inside the opening tag and usually have a name and value. For example, in an image tag, src specifies the image location and alt provides alternative text. Other common attributes are id, class, href, style, and title. Attributes help us control or provide additional information about how an HTML element behaves or is identified.

4.What is CSS Grid?

CSS Grid is a two-dimensional layout system in CSS. It allows us to arrange elements using rows and columns. It is especially useful when creating complex webpage layouts. For example, we can create a layout with a header, sidebar, main content, and footer using Grid. We can define columns and rows using properties like grid-template-columns and grid-template-rows. Grid is useful when we need precise control over both horizontal and vertical layouts.

5.What is Flexbox?

Flexbox, or Flexible Box Layout, is a CSS layout system used to arrange elements in one direction at a time, either horizontally or vertically. It makes it easy to align, distribute, and resize elements within a container. Some commonly used properties are display: flex, justify-content, align-items, flex-direction, and gap. Flexbox is commonly used for navigation bars, buttons, cards, and other simple layouts.

6.What are Ordered and Unordered Lists?

HTML provides two common types of lists: ordered lists and unordered lists. An ordered list uses the <ol> tag, and its items are displayed with numbers or letters. An unordered list uses the <ul> tag, and its items are normally displayed using bullet points. In both cases, individual items are written using the<li> tag. Ordered lists are useful when the order is important, while unordered lists are useful when the order doesn't matter.

7.What are Main Axis and Cross Axis in Flexbox?

In Flexbox, there are two important directions called the main axis and cross axis. The main axis is the direction in which the flex items are arranged. The cross axis is perpendicular to the main axis. By default, Flexbox uses flex-direction: row, so the main axis is horizontal and the cross axis is vertical. justify-content generally controls alignment along the main axis, while align-items controls alignment along the cross axis.

8. What is Box Sizing?

box-sizing is a CSS property that determines how the width and height of an element are calculated. There are two common values: content-box and border-box. By default, the value is content-box, where padding and border are added to the specified width and height. With border-box, the specified width and height include the content, padding, and border. Many developers use box-sizing: border-box because it makes sizing elements easier and more predictable.

Variables in JavaScript

Mark Tony — Sat, 15 Aug 2026 06:55:27 +0000

Variables are containers that store data. In JavaScript a variable can be declared in three ways:

let
Const
Var

The variable method was used earlier. The other two were added to simplify the coding.The Variable and let method are almost similar.

1.let:

let is a block-scoped variable that can be reassigned.
let prevents scope leakage and accidental redeclaration within the same scope.
Temporal Dead Zone (TDZ): Accessing a let variable before its declaration results in a ReferenceError, unlike var which hoists and initializes as undefined.
Global Scope Behavior: At the top level, let does not create a property on the global object.

Declaring the variable with value:

<body>
    <script>
        let a = 10
        console.log(a);
        </script>
</body>

Reassigning the value:

<body>
    <script>
        let a = 10
        a = a+ 20
        console.log(a);
        </script>
</body>

2. Const:

Const is a block-scoped variable that cannot be neither reassigned nor redeclared.
Like let, const is limited to the block in which it is defined, avoiding the hoisting and scoping issues associated with var.
A value must be provided at the time of declaration; attempting to declare const without initialization throws a syntax error.

<body>
    <script>
        const a = 10
        a = a+ 20
        console.log(a);
        </script>
</body>

3. Var:

var is the original method used for declaring variables.
The same variables can be redeclared in Var.
Variables are scoped to the entire function they are declared in, or globally if declared outside any function, ignoring block boundaries like if statements or for loops.

Note

Prefer const: Use const for all variables that are not intended to be reassigned, as it signals intent and helps prevent accidental bugs.
Use let: Only use let for variables that require reassignment, such as loop counters or values that change based on user interaction.
Avoid var: The var keyword is no longer in use due to its function scope and hoisting behavior, which can lead to unexpected bugs.

JavaScript - Variables

Mark Tony — Wed, 12 Aug 2026 09:17:58 +0000

Variables = Data Containers
JavaScript variables are containers for data.

JavaScript variables can be declared in 3 ways:

Modern JavaScript

Using let
Using const

Older JavaScript

Using var

Examples of Using let:
let x = 5;
let y = 6;
let z = x + y;

Examples of Using Const
const x = 5;
const y = 6;
const z = x + y;

Variables are labels for data values. Variables are containers for storing data.

JavaScript Identifiers

Variables are identified with names called identifiers.
Names can be short like x, y, z.
Names can be descriptive like age, sum, carName.

The rules for constructing names (identifiers) are:

Names can contain letters, digits, underscores, and dollar signs.
Names must begin with a letter, a $ sign or an underscore (_).
Names are case sensitive (X is different from x).
Reserved words (JavaScript keywords) cannot be used as names.

Javascript

Mark Tony — Wed, 12 Aug 2026 08:58:17 +0000

Javascript is a versatile,high level programming language. It is used for creating an interactive and dynamic content on web page.
Javescript is a single-threated language that executes one task at a time.It is also interpreted language the executes the code line by line.
Javascript is dynamically typed language where type checking is done during runtime rather that at compile time.

Compiler:

Compiler converts the entire source code into machine code and saves it as a binary file.

Interpreter:

An interpreter is a computer program that executes instructions written in a high-level programming language directly, without requiring the entire program to be compiled into machine code beforehand. It processes code line-by-line or statement-by-statement.

JIT Compiler

JIT- Just-in-time compiler is used in Javascript which is a combination of Interpreter and compiler.

Responsive Web Design

Mark Tony — Tue, 11 Aug 2026 10:22:29 +0000

What is Responsive Web Design?

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones)

Responsive web design uses HTML and CSS to automatically adjust a website's layout, size, and visibility to ensure it looks good on all devices, from mobile phones to large desktops.

This is achieved through three core techniques:
flexible grid layouts using relative units like percentages, fluid images that scale proportionally, and CSS media queries that apply specific styles based on screen characteristics.

Modern approaches also favor mobile-first design, where styles are written for small screens first, then expanded for larger screens using min-width media queries. Additionally, using CSS Flexbox or Grid allows for more flexible and complex responsive layouts without relying on floats or fixed pixel widths.

Media Elements

Mark Tony — Wed, 05 Aug 2026 07:39:47 +0000

IN HTML, we can add media elements using media elements tags such as
<picture> <audio> <video> <iframe>

Media Elements in HTML:

Picture
Audio
Video
Maps
youtube Videos

<audio>
It is used to add the audio files to our web page. We can add the following attributes for additional features:
controls- start,stop,pause,volume
loop- continuous process
muted- mutes the audio unless it is disabled

<audio controls loop muted>
      <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mp3" />
    </audio>

<video>
we can add video files to our web page using this video tag. we can enable the following features by using the attributes.

controls- start,stop,pause,volume
loop- continuous process
muted- mutes the audio of the video unless it is turned off

<video controls loop muted>
      <source
        src="https://www.w3schools.com/html/mov_bbb.webm" type="video/webm"/>
    </video>

<iframe>
This tag is used for adding the maps and external website video to the web page. Users can modify according to their convenience.

Youtube Videos

<iframe
      width="560"
      height="315"
      src="https://www.youtube.com/embed/ZNWu2BWfPYc?si=wTXoCtVNSVbfW9OP"
      title="YouTube video player"
      frameborder="0"
      allow="
        accelerometer;
        autoplay;
        clipboard-write;
        encrypted-media;
        gyroscope;
        picture-in-picture;
        web-share;
      "
      referrerpolicy="strict-origin-when-cross-origin"
      allowfullscreen
    ></iframe>

Maps

<iframe
      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31469.911010189822!2d78.70012115992618!3d9.617737652610943!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3b01a96e6c257f2b%3A0x7ee4a4b8935d1295!2sSalaigramam%2C%20Tamil%20Nadu!5e0!3m2!1sen!2sin!4v1785915373307!5m2!1sen!2sin"
      width="600"
      height="450"
      style="border: 0; margin-top: 2%; margin-left: 5%;"
      allowfullscreen=""
      loading="lazy"
      referrerpolicy="strict-origin-when-cross-origin"
    ></iframe>

Media Elements

Mark Tony — Tue, 04 Aug 2026 04:19:30 +0000

<Picture> element is a container that allows developers to specify multiple image resources for different display conditions. It works by containing one or more <source> elements and a single fallback <img>element, enabling the browser to choose the most appropriate image automatically.

Key Differences from `<img>`

While the standard <img> tag is suitable for a single source, the <picture> tag provides flexibility for responsive design and art direction.

Syntax and Attributes

The <picture>element itself does not have specific attributes; functionality is derived from its child elements:

<source>: Defines alternative image sources. Common attributes include:
media: Specifies a media query (e.g., (min-width: 800px)) to determine when this source is used.
srcset: Provides the URL and optional width/pixel density descriptors for the image.
type: Specifies the MIME type (e.g., image/webp) to enable format switching.
<img>: Acts as the fallback option. It must be the last child element and includes the src and alt attributes to ensure compatibility with browsers that do not support the tag.

<picture>
  <source media="(min-width: 1200px)" srcset="large.jpg" type="image/jpeg">
  <source media="(min-width: 800px)" srcset="medium.jpg" type="image/jpeg">
  <img src="default.jpg" alt="Example image">
</picture>

Grid Layout

Mark Tony — Mon, 03 Aug 2026 05:03:12 +0000

Grid

The Grid Layout Module offers a grid-based layout system, with rows and columns.
The Grid Layout Module allows developers to easily create complex web layouts.
The Grid Layout Module makes it easy to design a responsive layout structure, without using float or positioning.

Variation between Grid and Flex:

CSS Grid is used for two-dimensional layout, with rows AND columns.
CSS Flexbox is used for one-dimensional layout, with rows OR columns.

How to use Grid?

To use Grid, you set

display: grid or display: inline-grid

on a parent element, which becomes the grid container, while its direct children become grid items.

Key properties include

grid-template-columns
grid-template-rows to define track sizes, the fr unit for flexible space distribution, and gap for spacing between items.

This system simplifies creating consistent, flexible layouts that adapt to different screen sizes without relying on floats or complex positioning hacks.

DEV Community: Mark Tony

JS - Loops

JS - If, else and else if Statements

Conditional Statements

CSS Selectors

Data Types in JavaScript

HTML, CSS - Interview Questions

Variables in JavaScript

1.let:

2. Const:

3. Var:

JavaScript - Variables

JavaScript Identifiers

Javascript

Compiler:

Interpreter:

JIT Compiler

Responsive Web Design

What is Responsive Web Design?

Media Elements

Media Elements in HTML:

Media Elements

Key Differences from <img>

Syntax and Attributes

Grid Layout

Grid

Variation between Grid and Flex:

How to use Grid?

Key Differences from `<img>`