DEV Community: Guna Ramesh

Python

Guna Ramesh — Mon, 25 May 2026 13:53:49 +0000

1.Excepted output:
10 8 6 4 2
program:
a=10
while a>=1:
print(a,end=" ")
a=a-2
output:
10 8 6 4 2

What happens in this program?

Initially, the value of a is set to 10. The while loop checks whether a is greater than or equal to 1.

Since the condition is true, the loop starts executing. Inside the loop, the current value of a is printed, followed by a space.

After printing, the value of a is decreased by 2 (a = a - 2), and the updated value is stored back in the same variable.

This process continues:

First iteration → a = 10
Second iteration → a = 8
Third iteration → a = 6
Fourth iteration → a = 4
Fifth iteration → a = 2

When a becomes 0, the condition a >= 1 becomes false, and the loop stops.

Output:
10 8 6 4 2

This task for you
15 12 9 6 3

Javascript Variables.

Guna Ramesh — Sun, 24 May 2026 15:52:51 +0000

Task 1:Create Variables

Create 3 variables:

Your name
Your age
Your city

Use let for age, const for name
program:
let name="gunalan"
let age="23"
const city="pattukkottai"
console.log(name)
console.log(age)
console.log(city)

output:
gunalan
23

pattukkottai

Task 2: Update Value

let score = 10;
Change it to 50 and print it using:
console.log(score);

program:
let score=10;
score=50;
console.log(score)

output:

50

Task 3: Const Error Check

const country = "India";
Try to change it to "USA"
What happens? (observe error)

program:
const country="india";
country="usa";
console.log(country);

output:

TypeError: Assignment to constant variable.

Understanding Concepts

Task 4: Identify Output

program:
var x = 10;
var x = 20;
console.log(x);

output:

20

Task 5: Fix Error

let y = 30;
let y = 40;

Fix this code without error

program:
let y=30;
y=40;
console.log(y)

output:

40

Task 6: Scope Test
{
let a = 100;
}
console.log(a);

Will it work or error? Why?

program:
{
let a = 100;
}
console.log(a);

output:
a is not defined . variable is inside a block but the print statement is outside
so couldn't print the output because let is a block-scope, if you did the print statement inside the

block it is printed.

Level 3: Real-Life Task (Your Project Style)
Task 7: Shopping Cart

Create variables:

const shopName = "RuralCart";
let items = 0;
let price = 100;

Do this:

Add 3 items → update items
Increase price → price = price + 50
Print all values

program:
const shopName = "RuralCart";
let items = 0;
let price = 100;
items=items+3;
price=price+50;
console.log(shopname)
console.log(items);
console.log(price);

output:
RuralCart
3

150

Bonus Challenge

Task 8: Combine Everything

Write a program:

productName
productPrice
quantity

Calculate total:

total = productPrice * quantity;

Print:

Product: Rice
Total Price: 500

program 1:

let productName="Rice";
let productPrice=50;
let quantity=10;
total=productPrice*quantity;
console.log(total)

output:
500

program 2:
let productName="Rice";
let productPrice=50;
let quantity=10;
console.log(productPrice*quantity)

output:

500

Task 9: String + Variable

Create:

let name = "Guna";
let age = 23;

Print like this:

My name is Guna and I am 23 years old

program:
let name = "Guna";
let age = 23;
console.log("My name is "+name+" and I am "+age+" years old")

output:

**My name is Guna and I am 23 years old**

Task 10: Total Price (Clean Output)
let product = "Sugar";
let price = 40;
let qty = 5;

expect Output:

Product: Sugar
Total: 200

program:
let product = "Sugar";
let price = 40;
let qty = 5;
let total=price*qty
console.log("Product:"+product)
console.log("Total:"+total)
output:
Product: Sugar

Total: 200

Python progarming to Print the output in decending order using while loop

Guna Ramesh — Sun, 24 May 2026 07:47:20 +0000

Expected Output is 5 4 3 2 1
Print the Program using Python
count=1
price=5
while count<=5:
print(price,end=' ')
price=price-1
count=count+1

What happens here? Step 1: Create a variable named count and assign the value 1.

Step 2:
Create a variable named price and assign the value 5.

Step 3 (Condition):
The loop runs as long as the value of count is less than or equal to 5.
If count becomes greater than 5, the loop stops.

How the loop works
First, the loop checks the value of count. Initially, it is 1.

The condition count <= 5 is true, so the loop starts.

It prints the value of price and adds a space using end=' '.

Then:

count is increased by 1

price is decreased by 1

Now:

count = 2

price = 4

Again, the condition is checked. Since 2 <= 5, it is still true.

This process continues until count becomes 6. At that point, the condition becomes false, and the loop stops.

Output
5 4 3 2 1
Why is the output horizontal instead of vertical?
Normally, print() moves to the next line after printing.

But here we use:

end=' '
This means:

After printing, a space is added instead of a new line.

So the cursor stays on the same line.

Different end examples
end=' ' → 5 4 3 2 1

end='.' → 5.4.3.2.1.

end='' → 54321

JavaScript Basics

Guna Ramesh — Sun, 24 May 2026 07:11:40 +0000

1.What is JavaScript?
JavaScript is a scripting programing language used to make website interactive.
example: click a button -> something happens.
used with
Html for make Content Structue.
Css for to make Design and Style.
JS for to make a Behaviour.

2.what is Interpreter?
Interpreter is a program thats reads and executes a program line by line instead of execute whole program at once.Js also called Interpreter
programming language because its executes a program line by line.

Advantage:     Error shown instantly.
           Execute line by line.
Disadvantage:  Slower than Compiler.

3.What is Variable In JavaScript and How to use?
Variable are declared a keyword like var , let and const.

example:       var a=10;
           let a=20;
           let name="gunalan";
           const a=true;

4.What is the Difference between Var Let and Const?
In JavaScript, variables are declared using three keywords: var, let, and const.
Each has different behavior in terms of scope, reusability, and mutability.

1.var is the oldest way to declare variables in JavaScript.
    var name = "Guna";
Features:
        Function-scoped (not block-scoped)
        Can be allow redeclared
        Can be reinitialized
        Gets hoisted (moved to top internally)

        var x = 10;
        var x = 20; //its allowed
var is not recommended in modern development due to unexpected behavior.
example:
        {
            var a=10;
            console.log(a);
        }
        output:10
        ---------------------
        {
            var a=10;
        }
            console.log(a);
        output:10


2.let is used for variables that may change.But cant to redeclare. And its only access inside the block. Because its block-scope.
    let a=10;
    let a=15; //cant allow redeclare 
        a=15;//allow to reinitial.
Features:
        Block-scoped ({ })
        Can be updated
        Cannot be redeclared in the same scope  
example:
        {
            let a=10;
            console.log(a);
        }
        output:10
        ---------------------
        {
            let a=10;
        }
            console.log(a);
        output:a is not defined

3.const is used for values that should not change.
    const age = 23;
Features:
        Block-scoped
        Cannot be updated
        Cannot be redeclared
        Must be initialized during declaration
example:
        {
            const a=10
            console.log(a)
        }
        output:10   
        --------------------------
        {
            const a=10
        }
        console.log(a)
        output:a is not defined.

Facebook Layout

Guna Ramesh — Fri, 22 May 2026 07:20:43 +0000

Facebook Login Page Clone using HTML & CSS
Introduction
In this project, I created a clone of the Facebook login page using HTML and CSS. The goal was to understand real-world UI design and improve my frontend development skills.

Technologies Used
HTML for structuring the webpage
CSS for styling and layout design
CSS Grid and Flexbox for alignment

Features
Two-column layout using CSS Grid
Left section with logo and image
Right section with login form
Styled buttons with hover effects
Footer with multiple language options

What I Learned
Through this project, I learned how to:
Use CSS Grid for page layout
Use Flexbox for alignment and spacing
Design responsive UI structures
Style forms, buttons, and text effectively
Organize code for better readability

Challenges Faced
Aligning the left and right sections properly
Managing spacing between elements
Making the layout similar to the original Facebook design

Improvements
Added responsive design using media queries
Improved button hover effects
Enhanced UI with better spacing and shadows

Conclusion
This project helped me gain hands-on experience in building real-world UI designs. It improved my understanding of layout techniques and boosted my confidence in frontend development.

Future Scope
Add JavaScript form validation
Connect to backend for login functionality
Improve mobile responsiveness further

CSS-Cascading Style Sheet

Guna Ramesh — Thu, 21 May 2026 08:14:09 +0000

1.What is CSS and Why we use this?
CSS is used to style the html tags.
Like:
Color
Background Color
Size
Border etc...
Because html is a tag if we enter the value inside any tag its will display in browser. But its look normal,ok now i ask one question we see two sites one is display in black and white without style and other is look color-fully and use more styles.
I think all are like the second one right!
That's why we using CSS.
2.How many ways to using CSS?
we must know

1.Inline CSS
2.Internal CSS
3.External CSS
Inline-Inline CSS is applied directly inside an HTML element using the style attribute.
<p style="color: red;">Hello World</p>
Use one element only
can't reusable.
Internal-Internal CSS is written inside the <style> tag in the <head> section of an HTML page.
<head>
<style>
p {
color: blue;
}
</style>
</head>
Works for single page
Easy to manage inside same file
External-External CSS is written in a separate .css file and linked to HTML.
These is the format to link CSS file to Html file.
<link rel="stylesheet" href="style.css">
We go clearly from basics of css.
1.create a one div class fix any name to that div.
1.i am using the name is container.
2.Container is created but cant visible.
3.Use css to make color and set width and height.
how to use
div class name is container
.container{
border:1px solid green; //now border is visible like green color.
height:100vh;//why we did a height 100vh -view of height 100 fully covered. But dont need to set width because div tag is block level so take full width.
}

Without CSS Property

Border 2px solid green

Border 2px solid
100vh

Upcoming days i will update next properties.

HTML

Guna Ramesh — Fri, 15 May 2026 13:21:51 +0000

Last Month I was start to learn html in Payilagam Institute Chennai.For my carrer growth, Because i want to see myself as a frontend developer,So i choose to learn java script and React js.
what i learn?
1.what is html?
Html-Hypertext Markup Language.
2.What is Element?
One of the tag open and close properly with text that is called element.
3.Its not a logical language, then why use this?
Its helps to create a structure.All the browser like google ,chrome etc only know html for display structue.
4.is it case sensitive?
No, but mostly recommented lowercase.
5.What is meta?
If one of the content inside head that is called meta.
6.Difference Between Block level and Inline element?
If we type one line then type next line its show continue in same line is called inline element.
But goto next line its called block level.
7.i think these tags must know beginners.
<html> root of an language all the tag must inside this.
<head> head tag is all the other css file and js file link should be inside this tag and title also.
<body> body all the element inside this.
<div>for set of tags inside one container(generic container)
<span>inline container
<p>paragraph
<h1>to<h6>for text size
<a>anchor tag for look like a link .
<img> for add a image
8.semantic tags
<header> <footer> <main> <nav> <article> iam not clear in article i will update.|
9.Forms
<input> <button>
and etc
10.Table (less common but useful)
<table> <tr> <td> <th>
and <li>tags <ul> <ol >
this is for begginers.

i know my english is very difficult to understand others.
but iam improving.

[Boost]

Guna Ramesh — Fri, 03 Apr 2026 05:13:11 +0000

[Boost]

Guna Ramesh — Fri, 03 Apr 2026 05:07:34 +0000