DEV Community: Karthick (k)

Conditional branching: if, '?'

Karthick (k) — Thu, 04 Jun 2026 06:29:09 +0000

Q1, JavaScript - Conditional Statements

JavaScript conditional statements are used to make decisions in a program based on given conditions. They control the flow of execution by running different code blocks depending on whether a condition is true or false.

Conditions are evaluated using comparison and logical operators.
They help in building dynamic and interactive applications by responding to different inputs.

Types of Conditional Statements

1. if Statement

The if statement checks a condition written inside parentheses. If the condition evaluates to true, the code inside {} is executed; otherwise, it is skipped.

if (condition) { // code runs if the condition is true }
2. if-else Statement

The if-else statement executes one block of code if a condition is true and another block if it is false. It ensures that exactly one of the two code blocks runs.

3. else if Statement

The else if statement is used to test multiple conditions in sequence. It executes the first block whose condition evaluates to true.

Q2.Explain The Concept of Truthy & Falsy Values in JavaScript

In JavaScript, truthy and falsy values are concepts related to Boolean evaluation. Every value in JavaScript has an inherent boolean "truthiness" or "falsiness," which means they can be implicitly evaluated to true or false in boolean contexts, such as in conditional statements or logical operations.

What Are Truthy Values?

Truthy values are values that are evaluated to be true when used in a Boolean context. Simply put, any value that is not explicitly falsy is considered truthy.

These are some truthy values

Non-zero numbers: 42, -1, 3.14
Non-empty strings: "hello", "0", " "
Objects and arrays: {}, []
Functions: function() {}
Dates: new Date()
Symbols: Symbol()
BigInt values other than 0n: 10n

if (42) console.log("This is truthy!"); if ("hello") console.log("Non-empty strings are truthy!"); if ({}) console.log("Objects are truthy!");

What Are Falsy Values?

Falsy values are values that evaluate to false when used in a Boolean. JavaScript has a fixed list of falsy values

false
0 (and -0)
0n (BigInt zero)
"" (empty string)
null
undefined
NaN
document. all (used for backward compatibility)

if (0) console.log("This won't run because 0 is falsy."); if ("") console.log("This won't run because an empty string is falsy."); if (null) console.log("This won't run because null is falsy.");

JavaScript Tutorial

Karthick (k) — Wed, 03 Jun 2026 05:49:28 +0000

Q1.Primitive and Non-primitive data-types in JavaScript.

Primitive Data Types.
Primitive data types are the built-in data types provided by JavaScript. They represent single values and are immutable, meaning their values cannot be changed directly after creation. JavaScript supports the following primitive data types:
Non-primitive Data Types
Non-primitive data types, also known as reference types, are objects and derived data types. They can store collections of values or more complex entities. The two key non-primitive data

Q2.JavaScript Number parseInt() Method.

The parseInt() method parses a value by converting it to a string and returns the first integer found. It also accepts an optional radix parameter that specifies the base of the numeral system.

Converts a string into an integer value.
Supports different number systems using the radix parameter.
Stops parsing when a non-numeric character is encountered.

Q3:JavaScript Number parseFloat() Method.

The JavaScript parseFloat() method accepts a string and converts it to a floating-point number. If the string does not contain a numerical value, or if the first character of the string is not a number, then it returns NaN, i.e., not a number. It actually returns a floating-point number parsed up to that point where it encounters a character that is not a Number.

Q4:Post-Increment (x++) || Pre-Increment (++x) && Pre-Decrement (--x) || Post-Decrement (x--).

Post-Increment (x++):

The post-increment operator evaluates the current expression using the variable's original value, and then adds 1 to the variable right after.

`let x = 5;
let y = x++; // y gets the original value (5), then x becomes 6

console.log(y); // Output: 5
console.log(x); // Output: 6
`

Pre-Increment (++x):

The pre-increment operator adds 1 to the variable first, and then returns the newly updated value to the expression

`let x = 5;
let y = ++x; // x becomes 6 first, then y gets the new value (6)

console.log(y); // Output: 6
console.log(x); // Output: 6
`

Pre-Decrement (--x):

In a prefix operation, JavaScript updates the variable instantly before evaluating the rest of the statement

`let x = 5;

// Decrements x to 4, then returns 4 to be assigned to 'result'
let result = --x;

console.log(result); // Output: 4
console.log(x); // Output: 4`

Post-Decrement (x--)

In a postfix operation, JavaScript saves the original value to use in the expression, then subtracts 1 from the variable behind the scenes

`let y = 5;

// Returns the original value (5) to 'result', then decrements y to 4
let result = y--;

console.log(result); // Output: 5 (the old value)
console.log(y); // Output: 4 (the updated value)`

Introduction - JavaScript

Karthick (k) — Tue, 02 Jun 2026 06:45:37 +0000

Q1. Client-side scripting :

Web browsers execute client-side scripting. It is used when browsers have all the code. Source code is used to transfer from the web server to the user's computer over the internet and run directly in browsers. It is also used for validations and functionality for user events.

Q2. Server-side scripting :

Web servers are used to execute server-side scripting. They are basically used to create dynamic pages. It can also access the file system residing on the web server. A server-side environment that runs on a scripting language is a web server.

Q3.What is Localhost?

In computer networking, a host means a “server”. Just like you can put a website on the internet by hosting it on a server, you can make your own computer that serves as a server. This connection is called loopback. The IP address for that loopback is 127.0.0.1.

Q4.JavaScript Data Types

JavaScript data types define what kind of values a variable can hold and how those values behave in a program. They determine how data is stored in memory and how operations like comparison, calculation, and conversion work.

Q5.Here is a list of JavaScript Engines for major Internet browsers:

V8 — JavaScript Engine developed by Google for Chrome
SpiderMonkey — The JavaScript Engine used by Mozilla Firefox
JavaScriptCore — Developed by Apple for Safari
Rhino — Managed by Mozilla Foundation for Firefox
Chakra — A JavaScript Engine for Microsoft Edge
JerryScript — A JavaScript Engine employed for the Internet of Things (IoT).

Q8.JavaScript Operators

JavaScript operators are symbols or keywords used to perform operations on values and variables. They are the building blocks of JavaScript expressions and can manipulate data in various ways.

&-->JavaScript Arithmetic Operators

Arithmetic Operators perform mathematical operations such as addition, subtraction, and multiplication.

const sum = 5 + 3; // Addition const diff = 10 - 2; // Subtraction const p = 4 * 2; // Multiplication const q = 8 / 2; // Division console.log(sum, diff, p, q);
&--> JavaScript Assignment Operators

Assignment operators are used to assign values to variables. They can also perform operations like addition or multiplication while assigning the value.

let n = 10; n += 5; n *= 2; console.log(n);
&--> JavaScript Comparison Operators

Comparison operators compare two values and return a Boolean (true or false). They are useful for making decisions in conditional statements.

console.log(10 > 5); console.log(10 === "10");

&--> JavaScript Logical Operators

Logical operators are mainly used to perform logical operations that determine equality or difference between values.

const a = true, b = false; console.log(a && b); // Logical AND console.log(a || b); // Logical OR

&--> JavaScript Bitwise Operators

Bitwise operators perform operations on binary representations of numbers.

const res = 5 & 1; // Bitwise AND console.log(res);

&--> JavaScript Ternary Operator

The ternary operator is a shorthand for conditional statements. It takes three operands.

const age = 18; const status = age >= 18 ? "Adult": "Minor"; console.log(status);

&--> JavaScript Comma Operator

Comma Operator (,) mainly evaluates its operands from left to right sequentially and returns the value of the rightmost operand.

let n1, n2 const res = (n1 = 1, n2 = 2, n1 + n2); console.log(res);

&--> JavaScript Unary Operators

Unary operators operate on a single operand (e.g., increment, decrement).

`let x = 5;

console.log(+x);
console.log(-x);

console.log(++x);
console.log(--x);

console.log(!x);`

&--> JavaScript Relational Operators

JavaScript Relational operators are used to compare their operands and determine the relationship between them. They return a Boolean value (true or false) based on the comparison result.

const obj = { length: 10 }; console.log("length" in obj); console.log([] instanceof Array);

&--> JavaScript BigInt Operators

BigInt operators allow calculations with numbers beyond the safe integer range.

const big1 = 123456789012345678901234567890n; const big2 = 987654321098765432109876543210n; console.log(big1 + big2);
&--> JavaScript String Operators

JavaScript String Operators include concatenation (+) and concatenation assignment (+=), used to join strings or combine strings with other data types.

const s = "Hello" + " " + "World"; console.log(s);

&--> JavaScript Chaining Operator (?.)

The optional chaining operator allows safe access to deeply nested properties without throwing errors if the property doesn’t exist.

const obj = { name: "Aman", address: { city: "Delhi" } }; console.log(obj.address?.city); console.log(obj.contact?.phone);

Q8:typeof

The typeof operator returns a string indicating the type of the operand's value.

Q9:JavaScript Type Conversion

In JavaScript, Type Conversion can be defined as converting the data type of the variables from one type to another manually by the programmer(explicitly) or automatically by JavaScript(implicitly).

Implicit Type Conversion (Coercion): Implicit Type Conversion occurs automatically in JavaScript.

Explicit Type Conversion: Explicit Type Conversion occurs when the programmer manually changes the type of the variables using the functions Number(), String(), and Boolean().

JavaScript Introduction

Karthick (k) — Mon, 01 Jun 2026 06:27:07 +0000

Q1.ASCII Values Alphabets ( A-Z, a-z & Special Character Table )

ASCII (American Standard Code for Information Interchange) is a character encoding standard that assigns unique numeric values to letters, digits, punctuation marks and symbols. Since computers work only with binary data (0s and 1s), ASCII acts as a bridge by converting human-readable characters into machine-readable numbers.

Q2.Binary Number System

The Binary Number System, also known as the base-2 system, uses only two digits, '0' and '1', to represent numbers. It forms the fundamental basis for how computers process and store data. This base-2 system is the backbone of how computers process and store information, representing everything from text to images as sequences of 0s and 1s.

Q3 Compiler and Interpreter

Compiler:

A compiler is a software program that transforms high‐level source code that is written by a developer in a high‐level programming language into low-level object code (binary code) in machine language, which can be understood by the processor. The process of converting high‐level programming into machine language is known as compilation.

Interpreter:

An interpreter transforms or interprets a high‐level programming code into code that can be understood by the machine (machine code) or into an intermediate language that can be easily executed as well. The interpreter reads each statement of code and then converts or executes it directly.

Q4.What is a byte?

In most computer systems, a byte is a unit of data that is eight binary digits long. A byte is the unit most computers use to represent a character, such as a letter, number or typographic symbol.

Q5.Introduction to JavaScript

JavaScript is a versatile, dynamically typed programming language that brings web pages to life by making them interactive. It is used for building interactive web applications and supports both client-side and server-side development.

Interpreted language: Code is executed line by line.
Dynamically typed: Variable types are determined at runtime.
Single-threaded: Executes one task at a time (but supports asynchronous operations).

Q6.JavaScript Variables

Variables in JavaScript are used to store data values. They can be declared in different ways depending on how the value should behave.

Variables can be declared using var, let, or const.
JavaScript is dynamically typed, so types are decided at runtime.
You don’t need to specify a data type when creating a variable

Declaring Variables in JavaScript

ES6 Introduction: let and const were introduced to provide safer alternatives for declaring variables.
Scope: let and const are block-scoped (limited to { } block) or global-scoped, reducing errors compared to var.

var keyword var is a keyword in JavaScript used to declare variables; it is Function-scoped and hoisted, allowing redeclaration, but it can lead to unexpected bugs.

var a = "Hello Geeks"; var b = 10; console.log(a); console.log(b);

let keyword

let is a keyword in JavaScript used to declare variables,and it is Block-scoped and not hoisted to the top, suitable for mutable variables

let a = 12 let b = "gfg"; console.log(a); console.log(b);

const keyword

const is a keyword in JavaScript used to declare variables, and it is Block-scoped, immutable bindings that can't be reassigned, though objects can still be mutated.

const a = 5 let b = "gfg"; console.log(a); console.log(b);

Q7.Core Key Features of ES6

ES6, which stands for ECMAScript 6, is the sixth major edition of the ECMAScript standard that defines how JavaScript works. Released in June 2015 and officially named ECMAScript 2015, it introduced the most significant syntax updates and features to JavaScript since its inception

CSS variable

Karthick (k) — Sat, 30 May 2026 17:11:07 +0000

Q1.padding: var(--section-pad);

This applies internal spacing (padding) to an element using a CSS variable. Instead of writing a fixed size like 20px or 2rem, the browser checks your CSS for-- section-pad (usually defined at the top of your stylesheet) and uses that specific value.

Q2. What are:: before and:: after?

These are CSS pseudo-elements. They allow you to create virtual boxes in your HTML that are styled by CSS but don't actually exist in your physical HTML file.

.::before creates a virtual element before the actual content of your target box.::after creates a virtual element after the actual content. Crucial Rule: They require the content: ""; property to work at all (even if the quotation marks are empty).

Common Uses: CSS variable, adding decorative icons or text before a heading.Creating background shapes, underlines, or borders without adding extra

tags to your HTML

CSS property

Karthick (k) — Fri, 29 May 2026 05:40:46 +0000

1.CSS The position Property

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left physical properties and the inset-block-start, inset-block-end, inset-inline-start, and inset-inline-end flow-relative logical properties can be used to determine the final location of positioned elements.

static

The element is positioned according to the document's Normal Flow. The top, right, bottom, left, and z-index properties have no effect. This is the default value.

relative

The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if the position were static.

absolute

The element is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to its closest positioned ancestor (if any) or to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

fixed

The element is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to its initial containing block, which is the viewport in the case of visual media. Its final position is determined by the values of top, right, bottom, and left.

sticky

The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.

What is a Z Index?

Z-index (z-index) is a CSS property that defines the order of overlapping HTML elements. The element with a higher index will be placed on top of the element with a lower index.

Note: Z index only works on positioned elements (position: absolute, position: relative, or position: fixed).

CSS property

Karthick (k) — Thu, 28 May 2026 15:16:05 +0000

1.scale() CSS function:

The scale() CSS function defines a transformation that resizes an element on the 2D plane because the amount of scaling is defined by a vector [sx, sy],

2.CSS @keyframes Rule

The CSS @keyframes rule defines animations by specifying keyframes that describe the styles to be applied at various points during the animation duration. It allows smooth transitions and transformations of web elements, controlled by percentages or from-to values.

@keyframes animation-name { keyframes-selector { css-styles; } }

3.CSS Animations

CSS animations control the movement and appearance of elements on web pages. We can animate HTML elements without using JavaScript.

Use @keyframes to define the animation steps.
Apply animations with properties like animation-name and animation-duration.
Control the animation flow using animation-timing-function and animation-delay.

The Ultimate Guide to CSS

Karthick (k) — Wed, 27 May 2026 06:09:54 +0000

Date: 27-05-2026

===================================================================
Topic 1: CSS Selectors

A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should have the CSS property values inside the rule applied to them. The element or elements selected by the selector are referred to as the subject of the selector.

Basic CSS Selectors
A CSS selector targets the specific HTML elements we want to style. Here are the core basic selectors:

Type selectors (Element Selector): Targets elements directly by their HTML tag name.

Class selectors: Target elements using a dot (.) followed by the class name.

ID selectors: Targets a single unique element using a hash (#) followed by the ID name.

Universal Selector (*): Matches and applies styles to every single element on the page.


Code Example:
/* Universal Selector */

{
margin: 0;
padding: 0;
}

/* Type / Element Selector */
p {
font-size: 16px;
}

/* Class Selector */
.card-box {
padding: 20px;
}

/* ID Selector */
#unique-profile {
border-radius: 50%;
}

Combinator Selectors

Combinators show the relationship between different selectors to precisely target nested elements.

Descendant Selectors (space): Matches all specified elements nested inside a parent element.

Child Selector (>): Matches only the immediate, direct children of a parent element.

Adjacent Sibling Selector (+): Matches an element that directly follows another element.

General Sibling Selector (~): Matches all sibling elements that follow another element.

Code Example:
/* Descendant Selector */
div p {
color: blue;
}

/* Child Selector */
ul > li {
list-style: none;
}

/* Adjacent Siblincolourector */
h1 + p {
margin-top: 5px;
}

/* General Sibling Selector */
h2 ~ p {
color: gray;
}

Attribute Selectors

Attribute selectors target elements based on the source patterns inside their HTML attributes.

Presence Selector: Targets an element if it has a specific attribute, regardless of its value.

Attribute Value Selector: Targets an element with an exact attribute match.

Substring Matching (^=): Matches if the attribute value starts with the specified text.

Wildcard Selector (*=): Matches if the attribute value contains the specified text anywhere inside it.

Ends With Selector ($=): Matches if the attribute value ends with the specified text.

Word Match Selector (~=): Matches if the attribute value contains a specific word in a space-separated list.

Hyphen Match Selector (|=): Matches if the attribute value is exactly the specified text or starts with it, followed by a hyphen.

Code Example:
/* Presence Selector */
input[disabled] {
background-color: #eee;
}

/* Attribute Value Selector */
input[type="text"] {
border: 1px solid black;
}

/* Substring Matching (Starts with) */
a[href^="https"] {
colour: green;
}

/* Wildcard Selector (Contains) /
div[class="btn"] {
cursor: pointer;
}

/* Ends With Selector */
a[href$=".png"] {
border: 1px solid red;
}

Pseudo-Classes

Pseudo-classes define a special state of an element, such as user interaction or structural placement.

:hover: Styles the element when the user moves their mouse pointer over it.

:focus: Styles the elements when the user focuses on any particular element (like clicking an input field).

:first-child: Styles the element which is the first child of its parent.

:last-child: Styles the element which is the last child of its parent.

Code Example:
/* Hover state */
button: hover {
background-colour: darkblue;
}

/* Focus state */
input:  focus {
border-colour: blue;
}

/* First Child placement */
li:first-child {
font-weight: bold;
}

/* Last Child placement */
li:last-child {
border-bottom: none;
}

Pseudo-Elements

Pseudo-elements are used to style specific parts of an element or insert virtual content.

::before: Inserts some content before an element.

::after: Inserts some content after an element.

::first-line: Styles the first line of text within a block element. Line breaks mark the beginning of a new line.

::first-letter: Styles the first letter of a word or a sentence.

::placeholder: Styles the placeholder text of a specific input field.

Code Example:
/* Inject content before an item */
h2::before {
content: "📌 ";
}

/* Inject content after an item */
span::after {
content: " (read more)";
}

/* Style the first letter */
p::first-letter {
font-size: 24px;
colour: red;
}

/* Style the placeholder text */
input::placeholder {
colour: lightgray;
font-style: italic;
}

===================================================================

Topic 2: CSS Outline

CSS outline is a property used to draw a line around an element's border. It does not affect the layout, unlike borders. It's often used to highlight elements, providing a visual emphasis without altering the dimensions of the element.

Layout Isolation: Outlines are drawn outside the element's border boundaries and do not add to the element's calculated width or height.

Visual Focus: Commonly applied by browsers to form fields and buttons during keyboard navigation to indicate focus state.

Code Example:
/* Highlight a box with an outline without moving nearby text /
.focused-box {
outline: 3px dashed red;
outline-offset: 4px; / Space between border and outline */
}

===================================================================
Topic 3: CSS Media Queries

CSS media queries allow you to apply styles based on the characteristics of a device or the environment displaying the web page. They are essential for creating responsive web pages. The CSS @media rule is used to add media queries to your style sheet.

Media Query Syntax:
A media query consists of an optional media-type and one or more media-features, which resolve to either true or false.

@media [not] media-type and (media-feature: value) and (media-feature: value) {
/* CSS rules to apply */
}

The media-type is optional. However, if you do not, you must also specify mediatype.

The result of a media query is true if the specified media-type matches the type of device, and all media-features are true.

Keyword Meanings:

not: This optional keyword inverts the meaning of the entire media query.

and: This keyword combines a media-type and one or more media-features.

Code Example:
/* Apply responsive background styling for mobile devices up to 768px wide */
@media screen and (max-width: 768px) {
body {
background-colour: lightblue;
}
}

===================================================================

Topic 4: Transitions

CSS transitions are used to create smooth animations between two states of an element, enhancing interactivity and user experience.

Transitions can animate properties like colour, size, opacity, and position.

Use selectors and pseudo-classes (e.g., hover: focus) to trigger transitions smoothly.

Key Transition Properties:

transition-property: Specifies the name of the CSS property you want to animate (e.g., background-colour, all).

transition-duration: Specifies how many seconds or milliseconds the transition takes to complete (e.g., 0.3s).

transition-timing-function: Specifies the speed curve of the transition (e.g., linear, ease-in-out).

transition-delay: Specifies a delay (in seconds) before the transition animation actually starts.

Code Example:
/* Smoothly animate a button colour change on hover /
.interactive-btn background-colour: blue;
colour: white;
padding: 12px 24px;
/ Shorthand configuration property | duration | timing */
transitionbackground-colouror 0.4s ease-in-out;
}

.interactive-btn: hoverbackground-colour: darkblue;
}

===================================================================
Topic 5: Em and REM

Both em and rem are relative units of measurement in CSS, but they calculate their values based on completely different structural reference points.

rem (Root EM): Calculates its size relative to the root element () font size of the browser. By default, most browsers set the root font size to 16px. Therefore, 1rem is equal to 16px everywhere on the page.

em: Calculates its size relative to the font size of its immediate parent element (or the element itself when used for properties like margins and padding).

Code Example:
/* Reference sizing example /
html {
font-size: 16px; / Base root element */
}

.parent-card {
font-size: 20px; /* Parent element container override */
}

/* rem values remain tied to root 16px /
.rem-text {
font-size: 2rem; / Calculates to 2 * 16px = 32px */
}

/* em values look at parent container 20px /
.em-text {
font-size: 2em; / Calculates to 2 * 20px = 40px */
}

===================================================================

Web Dev Quick Tips: Font Awesome, CSS Layouts, Pseudo-Classes, and Overflow

Karthick (k) — Tue, 26 May 2026 06:23:03 +0000

26-05-2026

1. Font Awesome Introduction 🎨

Font Awesome is an immensely popular icon library and toolkit used by millions of web developers and designers. Instead of downloading individual image files for UI elements (like search bars, shopping carts, or social icons), Font Awesome lets you load them instantly as scalable vector graphics.

2. Space Between 📐

Use the "justify-between" utility to justify items along the container's main axis such that there is an equal amount of space between each item.

3.nth-child(n)

The CSS:nth-child(n) pseudo-class matches any element that is the nth child of its parent. This pseudo-class matches elements based on the indexes of their parents' child list. n can be a number/index, a keyword (odd or even), or a formula (like an + b).

4. The overflow CSS Property 📦

The overflow CSS shorthand property specifies the desired behaviour when content does not fit within an element's padding box (overflow) in the horizontal and/or vertical direction.

The Practical Debugging & Research Angle

Karthick (k) — Mon, 25 May 2026 06:56:15 +0000

Learning how to subscribe to a mailing list and read through technical threads is an essential skill for any software engineer wanting to contribute to major projects like the Linux Kernel.

KanchiLUG (kanchilug.wordpress.com): Another fantastic regional Linux User Group showcasing that tech passion isn't restricted to major IT parks—it's spreading everywhere.

4. How Real Software Engineers Solve Problems 🔍

We wrapped up the day looking at how engineers debug complex issues. Anyone can write code when things are working, but a software engineer's true value shines when things break.

We looked at an interesting real-world debugging thread on StackOverflow: Python API shared variable already used after undef works fine in VSCode.

Seeing how developers analyse issues—like how variables persist in memory, how different execution environments (like VSCode vs. interactive terminals) handle state, and how scope works—made me realise that:

Error messages are your friends: They are clues, not stop signs.
Asking the right questions matters: The way engineers structure their queries on StackOverflow or forums with clear logs and context is an art form in itself.

Final Thoughts: My Next Steps 🚀

Today changed my mindset. I am no longer just a student writing isolated code in my room. I am an aspiring software engineer entering a massive, collaborative, and deeply supportive global ecosystem.

My goals for this week are clear:

[ ] Bookmark and actively check the Tamil Linux Community Forums to see how I can get involved.
[ ] Read through the daily digest on the ILUGC Mailing List to understand how experienced devs discuss system administration and open-source tools.
[ ] Keep focusing on the "Learn by Doing" mindset—building, breaking, and improving my projects daily.

To my fellow beginners: Are you learning in isolation, or have you reached out to your local tech communities yet? If you are based in Chennai or anywhere in India, let's connect in the comments and share our learning journeys!

Huge thanks to my staff for pointing me toward these resources today!

Technical Interview Prep: Core HTML & CSS Concepts Explained Simply

Karthick (k) — Sat, 23 May 2026 07:20:03 +0000

23-05-2026
Second Mock Interview

title: "Technical Interview Prep: Core HTML & CSS Concepts"
published: false
description: "Quick breakdown of essential web development concepts covering units, semantics, selectors, and Flexbox layout from my second mock interview."

tags: webdev, beginners, css, html

Sharing my notes from my second mock interview! Here is a quick breakdown of essential web development concepts.

1. Units: px vs vh

The main difference lies in whether the unit is fixed or fluid.

px (Pixel): An absolute, fixed unit representing the smallest digital image point.
vh (Viewport Height): A relative unit based on the browser window height.

Quick Reference

200px stays exactly 200 pixels wide on mobile, laptop, or 4K monitors.
1vh = 1% of the current viewport height.
100vh = 100% of the viewport height (fills the full screen vertically).

2. Structure: `<footer>` vs `<div>`

The core difference here is Semantics (meaning).

<div> (Division): A generic, non-semantic block element. It holds no meaning and is used purely for styling or grouping elements together.
<footer>: A semantic element. It explicitly tells the browser and search engines that the content inside represents the bottom section of a page or component.

3. CSS Selectors: Connecting HTML to Styles

A CSS selector targets specific HTML elements to apply styles. Here are the five fundamental types:

Element Selector: Targets all elements of a specific tag type (e.g., p, h1).
ID Selector: Targets a single, unique element using the # symbol.
Class Selector: Targets multiple reusable elements using the . symbol.
Universal Selector: Targets every single element on the page using *.
Grouping Selector: Combines multiple selectors separated by a comma to share identical styles (e.g., h1, p).

4. Identity: id vs class

The primary difference is uniqueness and reusability.

ID Selector: Must be unique. Used once per page. Uses the # symbol in CSS. Best for unique structural sections.
Class Selector: Reusable. Applied to multiple elements. Uses the . symbol in CSS. Best for repeating styles.

5. SEO & Metadata: The `<meta>` Tag

The <meta> tag provides structural data about the HTML document that users cannot see on the page.

Location: Always placed inside the <head> section.
Purpose: Communicates directly with browsers, search engines (SEO), and web services.
Common Uses: Defining character sets (e.g., UTF-8), configuring mobile viewports for responsiveness, and adding SEO page descriptions.

6. Layout: justify-content vs align-items

Both properties control alignment in CSS Flexbox, but they operate on different axes.

justify-content: Aligns items along the Main Axis (default: horizontal). It handles horizontal distribution like centering, pushing items to edges, or spacing them evenly.
align-items: Aligns items along the Cross Axis (default: vertical). It handles vertical positioning like top alignment, bottom alignment, or vertical centering.

Core HTML & GitLab

Karthick (k) — Fri, 22 May 2026 05:36:54 +0000

22-05-2026
^^ How to link an external CSS to HTML?
&To Link an external CSS file to an HTML Document, you need to use the element within the

section of your HTML file.

Ex:

^. Fit-Content:
& The fit-content sizing keyword represents an element size that adapts to its content while staying within the limits of its container.

& When  fit-content is set, the element grows or shrinks to fit its content, but stops expanding after the relevant dimension reaches the size limit of its
container.


ex:width: fit-content;

^. text-decoration CSS property
& the text-decoration property is used to control the decoration of text, such as underlines, overlines, line-throughs, and blink effects. This property accepts values like none, underline, overline, and line-through, and inherits to style text decorations accordingly.

^. git add

& The git add command stages specific files or changes so they can be included in the next commit.
ex: git add filename.txt.

^. Git Commit
& git commit saves a snapshot of staged changes into the Git repository, creating a point in history that helps track and manage project progress.

ex: git commit -m "Initial commit"

^. Git push:
& git push uploads commits from the local repository to a remote repository so that changes become available to other collaborators.

DEV Community: Karthick (k)

Conditional branching: if, '?'

JavaScript Tutorial

Introduction - JavaScript

JavaScript Introduction

CSS variable

CSS property

CSS property

The Ultimate Guide to CSS

Web Dev Quick Tips: Font Awesome, CSS Layouts, Pseudo-Classes, and Overflow

1. Font Awesome Introduction 🎨

2. Space Between 📐

3.nth-child(n)

4. The overflow CSS Property 📦

The Practical Debugging & Research Angle

4. How Real Software Engineers Solve Problems 🔍

Final Thoughts: My Next Steps 🚀

Technical Interview Prep: Core HTML & CSS Concepts Explained Simply

tags: webdev, beginners, css, html

1. Units: px vs vh

Quick Reference

2. Structure: <footer> vs <div>

3. CSS Selectors: Connecting HTML to Styles

4. Identity: id vs class

5. SEO & Metadata: The <meta> Tag

6. Layout: justify-content vs align-items

Core HTML & GitLab

2. Structure: `<footer>` vs `<div>`

5. SEO & Metadata: The `<meta>` Tag