DEV Community: Mark Tony

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.

Bootstrap

Mark Tony — Sun, 02 Aug 2026 05:05:14 +0000

Bootstrap is a free,open-source front-end framework. It provides the build in CSS templates for developers to create a responsive and mobile-first websites.

Bootstrap was originally created by Twitter and now it has been used worldwide.

Benefits

Responsive Design: Automatically fits phones, tablets, and computers.

Pre-built Components: Saves development time with ready-to-use components like dropdowns, accordions, alerts, cards, and carousels.

Grid System: Uses a 12-column setup to arrange page items easily.

Same Look Everywhere: Works well and looks uniform across different web browsers.

Easy to Change: Allows you to customize colors and styles to fit your project.

Positioning in CSS

Mark Tony — Thu, 30 Jul 2026 04:25:06 +0000

** What is CSS position property?**

The CSS position property controls how an element is placed in a document, determining whether it follows the normal document flow or is positioned at a specific location using coordinates. It accepts five keyword values that define the element's relationship to its containing block, siblings, and the viewport.

** Key Position Values**

static: The default value. Elements follow the normal document flow, and top, right, bottom, left, and z-index properties have no effect.

relative: The element remains in the normal flow, but can be offset relative to its original position using top, right, bottom, or left. The space originally occupied by the element is preserved.

absolute: The element is removed from the normal flow, meaning it does not take up space in the layout. The elements align in respect with the body of the web page (entire screen)

fixed: Like absolute, the element is removed from the normal flow. It remains in the same place even when the page is scrolled, making it ideal for sticky headers or footers.

sticky: A hybrid of relative and fixed. The element behaves like a relatively positioned element until it crosses a specified scroll place (defined by top, bottom, etc.), at which point it behaves like a fixed element, sticking to that position within its container.

Z-index

The z-index CSS property specifies the stack order of positioned elements, determining which element appears in front or behind others along the third dimension (z-axis). Elements with a higher z-index value are closer to the viewer, covering elements with lower values.

This property only works on elements with a position value other than static (i.e., absolute, relative, fixed, or sticky) and on flex or grid items.

Key characteristics include:

Default Behavior: If no z-index is set, elements stack in source order (later HTML elements appear on top).

Stacking Contexts: z-index values are only compared within the same stacking context; nested contexts create local stacking rules.

Values: Accepts integers (positive, negative, or zero) and the keyword auto.

Common Usage: Used for modals, dropdowns, tooltips, and overlapping layouts where visual hierarchy is critical.

HTML Attributes

Mark Tony — Wed, 15 Jul 2026 12:53:02 +0000

If HTML tags are the skeleton of a webpage, attributes are the features that give that skeleton personality, functionality, and style.

Whether you want to center a paragraph, change a font's color, or make your website accessible to a global audience, HTML attributes are the tools you need. Let’s break down exactly what they are, how they work, and the core attributes you will use every single day.

What is an HTML Attribute?
Attributes are modifiers used to adjust or provide additional information about the content within an HTML tag. They always look like a name-value pair and are separated by an equals sign (=).

<div style="text-align: center;">Centered text</div>
By adding style="text-align: center;"

we change the default layout of the

to fit our specific design goals.

The Golden Rules of HTML Attributes

Before you start coding, keep these 5 essential characteristics in mind:

They are opening-tag exclusive: Attributes must always be written inside the opening tag, never the closing tag.
They are optional (but crucial): While elements can function without them, attributes unlock advanced styling and functionality.
Space-separated: An HTML element can have multiple attributes. Just separate them with a space.
Name-Value formatting: Most attributes require a value enclosed in quotes (name="value").
Boolean Attributes exist: Some attributes don't need a value at all. If the attribute name is present (like required, disabled, or checked), the browser automatically treats it as true.

The Big Three: Core Global Attributes

While some attributes only work on specific tags, Global Attributes can be used on almost any HTML element. Here are the three most popular.

1. The id Attribute
The id attribute acts as a social security number for your HTML element—it must be completely unique on the page.

Developers use id for two main reasons:

To target a specific, unique element with JavaScript or CSS.
To differentiate between two identical tags on the same page.

<body>
   <p id="html-desc">This paragraph explains what HTML is.</p>
   <p id="css-desc">This paragraph explains what CSS is.</p>
</body>

2. The class Attribute

The class attribute is built for sharing. You can assign the same class name to multiple elements to apply uniform styling. You can even assign multiple classes to a single element by separating them with a space.

<!-- One element sharing three distinct style classes -->
<div class="card card-dark text-bold">Card Content</div>

3. The style Attribute

The style attribute allows you to write inline CSS directly inside your HTML element. While it's generally better practice to use external style sheets, the style attribute is perfect for quick fixes or dynamic shifts.

<p style="font-family: Arial, sans-serif; color: #FF0000;">
   Welcome to HTML!
</p>

Going Global: Internationalization Attributes (i18n)

*Building a website for the world? *
HTML includes specific internationalization attributes to tell browsers and screen readers how to handle different languages and text flows.

The dir Attribute (Direction)
Not every language reads from left to right. The dir attribute tells the browser which direction the text should flow:

ltr: Left-to-right (Default for English, Spanish, etc.)

rtl: Right-to-left (Used for Arabic, Hebrew, etc.)

auto: Lets the browser dynamically decide based on the content.

<p dir="rtl">هذا النص مكتوب من اليمين إلى اليسار.</p>

The lang Attribute (Language)
This is arguably the most important internationalization attribute. Placed on the opening tag, it tells search engines and screen readers the primary language of the page.

<html lang="en"> <!-- Sets the language to English -->

The translate Attribute
Sometimes, you don't want automated tools (like Google Translate) messing with your text—such as your brand name or a code snippet. The translate attribute solves this:

<p>Welcome to our platform!</p>
<p translate="no">Apple</p> <!-- Keeps the brand name from being translated -->

Summary

Mastering attributes is your first major step toward writing semantic, clean, and accessible code. By combining id, class, and internationalization tags, you gain full control over how browsers interpret and display your web pages.

Git Lab - Login & more

Mark Tony — Fri, 10 Jul 2026 07:35:44 +0000

Git Lab
This blog is about the Git lab login and its applications. It provides a common forum for the developers to collaborate and do their projects effectively.

Initially, I faced a issue to sign in to the #Gitlab as it required 3-steps of verification.

It includes

E- mail verify
Phone number verify
Credit card verify

If you face the same issue, Try to create a new email and sign to the Gitlab. It actually works!

Terminal Commands:

Additionally, I learnt about the terminal commands that makes the job easier.

1.cd - Change Directory (using this we can move to any folder)

2.ls - List files (Which is used to list the files which are present in the particular folder)

3.mkdir - Make directory (It is used to used a Directory / folder)

4.git --version - it is used to check the version of the git.

5.git init - it is used for creating a new repository.

6.git add - it is used for adding a selected file to our repository.

7.git add . - it is used for adding the entire folder to our repository.

8.git commit -m "commit message" - it is Used to commit the changes with commit message, this commit message is useful for the other developers.

9.git clone - It is used to clone a existing repository.

10.git push - Used to push our updated code.

Being flexible with #Flex

Mark Tony — Thu, 09 Jul 2026 05:50:30 +0000

I want to share a bit of my knowledge on the Attribute "Flex" in Html designing. Here we go!

"Flex is used to make elements come into a box which called the 'Flex Box'.
E.g:

<style>
 .Container{
display: flex}

The outer frame is known as Flex box and the elements within are called flex items. The flex can be modified accordingly with these flex properties.

These flex properties can be classified into two. Thus,
1.Parent Properties
2. Children Properties

Parent Properties:

display - Must be set to flex or inline-flex
flex-direction - Sets the display-direction of flex items
flex-wrap - Specifies whether the flex items should wrap or not
flex-flow - Shorthand property for flex-direction and flex-wrap
justify-content - Aligns the flex items when they do not use all available space on the main-axis (horizontally)
align-items- Aligns the flex items when they do not use all available space on the cross-axis (vertically)
align-content- Aligns the flex lines when there is extra space in the cross axis and flex items wrap

Children Properties:

order- Specifies the display order of the flex items inside the flex container
flex-grow - Specifies how much a flex item will grow relative to the rest of the flex items
flex-shrink - Specifies how much a flex item will shrink relative to the rest of the flex items
flex-basis - Specifies the initial length of a flex item
align-self - Specifies the alignment for the flex item inside the flex container

It's conducive to align the elements as desired and obtain inviting web pages.

Learning Kick Started!

Mark Tony — Wed, 08 Jul 2026 05:43:48 +0000

I would like to do a write up of my initial learning at @payilagam_135383b867ea296

To begin with, The course details were briefed. I obtained the clarity about the course. Moreover, we discussed the basics of HTML (HyperText Markup Language) and CSS (Cascading Style Sheet). It was simple and clear.

In Addition, We learnt how to prepare the Login web page of Instagram using HTML and CSS. It was a simple hands-on task that we did with the instruction of the Trainer. I understood the Tags and Attributes in HTML. It was Fab.

Moreover, I had the doubts in between and got clarified. CSS is inevitable in designing the web page without which it remains unbeautified.

Ultimately, I had a exciting hands-on experience in formulating the Login Web page. Let's have a look at my craft!

DEV Community: Mark Tony

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?

Bootstrap

Positioning in CSS

HTML Attributes

The Golden Rules of HTML Attributes

The Big Three: Core Global Attributes

2. The class Attribute

3. The style Attribute

Going Global: Internationalization Attributes (i18n)

Summary

Git Lab - Login & more

Being flexible with #Flex

Learning Kick Started!

Key Differences from `<img>`