Forem: Suma

JAVA SCRIPT

Suma — Tue, 13 Jan 2026 07:00:35 +0000

WHAT IS JAVASCRIPT

JavaScript is a programming language used to make websites interactive and dynamic. It allows web pages to respond to user actions like button clicks, form submissions, and mouse movements

WHY WE USE JAVASCRIPT

JavaScript is one of the most popular languages because it is used everywhere on the web.
You can use JavaScript to:

Handle button click events
Perform form validation
Fetch data from APIs
Update content dynamically
Create animations, charts, and games
Build applications using frameworks like React, Angular, and Vue

WHERE CAN YOU WRITE JAVASCRIPT

1. Inside an HTML File

<script>
alert("Hello JavaScript");
</script>

2. External JavaScript File

<script src="script.js"></script>

CSS VISUAL & EFFECT STYLES

Suma — Wed, 10 Dec 2025 06:25:51 +0000

VISUAL & EFFECT STYLES

opacity : transparency level
ex : img { opacity; 0.5;}
filter: blur or brightness effects
ex : img { filter: blur(3px);}
cursor : change mouse cursor
ex : button {cursor:pointer;}

ANIMATION & TRANSITION STYLES

transition : smooth property changes
ex : div {transition:0.3s;}
transform : move,rotate,or scale
ex : div {transform : rotate(45deg);}
animation : play animation
ex : div {animation : move 2s infinite;}
@keyframes : defines animation steps
ex : @keyframes move {from {left : 0px;}
to {left:100px;}}

DISPLAY & VISIBILITY

display : none,block,inline,flex,grid
ex : p {display:none;}
visibility : hide but keep space
ex : { visibility : hidden;}
overflow : scroll,hidden,auto
ex : div { overflow : scroll;}

MEETINGS

Suma — Mon, 01 Dec 2025 06:48:55 +0000

Topic: Beyond Keyword Search: Vector Databases & OpenSearch for Modern AI Applications

Description: Traditional keyword-based search is no longer enough for AI-driven applications.

In this session, we explore how vector databases and OpenSearch deliver semantic, intelligent search at scale.

You’ll learn how embeddings work, how similarity search is implemented,
and how to build real-world AI search systems using OpenSearch’s vector engine.

Duration: 30 Mins
Speaker Name: Syed Jafer K
About Speaker: Open Source Contributor

I attended this meeting. i'm not IT graduate. I did not understand much. but, the session is good.

They talked about keyword based search, AI driven application

CSS GRID STYLES

Suma — Tue, 18 Nov 2025 12:52:24 +0000

GRID STYLES

display-grid : activates grid layout
.grid { display:grid;}

grid-template-columns : define columns
.grid{ grid-template-columns: 1fr 1fr 1fr;}

grid-template rows : define rows
.grid { grid-template-rows: 100px 100px;}

grid gap : space between grid boxes
.grid { grid-gap: 15px;}

place items : center items
.grid { place-items: center;}

justify-items : horizontal alignment inside each cell
.grid{justify-items: center;}

align-items : vertical alignment inside each cell
.grid{align-items: center;}

grid column : control width of a single item
.item { grid-column : span 2;}

grid row : control height of a single item
.item{ grid-row: span 2;}

grid template areas : name-based layout
.grid{ grid-template-areas;}

POSITIONING STYLES

position : static , relative , absolute ,fixed , sticky
div{ position: absolute; top:10px; left: 20px;}

top-bottom-left-right : move element in its positioned space
div {top: 10px; left: 20px;}

z-index : controls stacking order
div { z-index:10;}

CSS BACKGROUND AND FLEXBOX STYLES

Suma — Wed, 12 Nov 2025 06:34:34 +0000

BACKGROUND STYLES

background color : sets background color
body{ background color : blue;}

background image : sets an image as background
div { background-image : ur1("bg.jpg");}

background size : resize background image
div { background-size: cover:}

background repeat : repeat or no-repeat image
div { background-repeat:no-repeat;}

background position : move image position
div { background-position : center;}

FLEXBOX STYLES

display:flex : activates flex container
.container {display:flex;}

flex-direction : row or column layout
.container { flex-direction: column;}

justify-content : align items horizontally
.container { justify-content: space-between;}

align-items : align items vertically
.container { align-items: center;}

flex-wrap : move items to new line
.container { flex-wrap : wrap;}

gap : space between flex items
.container {gap: 10px;}

CSS STYLES

Suma — Wed, 12 Nov 2025 06:29:15 +0000

BACKGROUND STYLES

background color : sets background color
body{ background color : blue;}

background image : sets an image as background
div { background-image : ur1("bg.jpg");}

background size : resize background image
div { background-size: cover:}

background repeat : repeat or no-repeat image
div { background-repeat:no-repeat;}

background position : move image position
div { background-position : center;}

FLEXBOX STYLES

display:flex : activates flex container
.container {display:flex;}

flex-direction : row or column layout
.container { flex-direction: column;}

justify-content : align items horizontally
.container { justify-content: space-between;}

align-items : align items vertically
.container { align-items: center;}

flex-wrap : move items to new line
.container { flex-wrap : wrap;}

gap : space between flex items
.container {gap: 10px;}

CSS BOX STYLES

Suma — Fri, 07 Nov 2025 06:39:13 +0000

BOX MODEL CSS

margin : space outside element
div {margin : 20px;}

padding : space inside element
div {padding: 10px;}

border : line around element
p { border : 2px solid black;}

border-radius : rounded corners
button { border-radius: 10px;}

width/height : size of element
div {width: 200px; height:100px;}

max-width/min-width : size limits
div { max-width: 500px;}

box-shadow : adds shadow
div {box-shadow: 5px 5px 10px gray;}

overflow : what happens when content is too big
div { overflow: auto; }

CSS FONT STYLES

Suma — Wed, 05 Nov 2025 04:18:30 +0000

CSS STYLES

1. TEXT AND FONT STYLES

color : sets text color
p {color: blue;}

font size : changes text size
h1 {font-size: 30px;}

font-family : sets font style
body {font family: Arial , sans-serif;}

font-weight : makes text bold
em {font-style: italic;}

font style : makes text italic
em {font-style: italic;}

text align : aligns text left, center or right
p {text-align: center;}

text decoration : underline or remove underline
a {text- decoration: none;}

text transform : changes text case
p{text-transform: uppercase;}

letter spacing : space between letters
p {letter-spacing : 2px;}

line height : space between lines
p {line-height : 1.6;}

WHAT IS CSS

Suma — Thu, 30 Oct 2025 09:04:25 +0000

WHAT IS CSS

CSS stands for Cascading Style Sheets
It is used to style and design your HTML webpage
CSS controls the visual appearance of webpages

WHY WE USE CSS

To make the webpage look attractive and organized
To change colors,fonts,and backgrounds
To make webpages look good on mobile and computer
To separate design from content
CSS makes it beautiful_it adds colors,layouts,font and spacing

CSS EXAMPLE

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

Tags And Elements

Suma — Tue, 28 Oct 2025 15:18:59 +0000

TAGS

A tag is a keyword enclosed in angle brackets < > in HTML
Tags tell the browser what to display and how to display it
Most tags come in pairs: an opening tag and a closing tag

opening tags:
Marks the beginning of an element
ex:<p>

closing tags:
Marks the end of an element. it look the same but has a slash(/).
ex:</p>

TYPES OF TAGS

1.CONTAINER TAG:
these tags come in pairs: an opening tag and closing tag
the content is written between these two tags
ex:<p>this is a paragraph </p> , <h1> hello </h1>

2.EMPTY TAGS:
these tags don't have closing tag
they are used to insert something or make a break in content
ex:<hr> , <input>

ELEMENTS

An elements is everything from the opening tag to the close tag-including the content inside
An elements means the complete structure-opening tag + content + closing tag
ex:<h1> hello world </h1>
this whole thing is called an HTML element

TYPES OF ELEMENTS

1.BLOCK LEVEL ELEMENTS:
start on a new line
take up the full width of the page (from left to right)
often used to create structure in a webpage
ex:<div> , <p> , <header>

2.INLINE ELEMENTS:
Do not start on a new line
take only the space needed for their content
used to style or format small parts of text
ex:<a> , <b> , <strong>

WHAT IS HTML

Suma — Thu, 23 Oct 2025 04:47:55 +0000

HTML is the hypertext markup language
Hyper Text means text that connects to other pages through links, allowing users to navigate easily from one page to another page the word "Markup" means using symbols called tags links <a> , <p>
It is the foundation of every web pages
It uses tags to tell the browser how to display content
It is the standard language
It's used do create web pages and design

HTML STRUCTURE

<!DOCTYPE HTML>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>Main Heading</h1>
    <p>This is a paragraph of text.</p>
  </body>
</html>