❌

Normal view

There are new articles available, click to refresh the page.
Before yesterdayMain stream

Important topics in CSS

✇Sevaki Rajasekar
By: Sevaki Rajasekar
25 June 2025 at 17:36

Hello everyone! Welcome to my blog. Today we are going to explore some most important topics in CSS.

1. Box model:
In CSS all the HTML elements are considered as box model. The Box Model in CSS is a fundamental concept that explains how HTML elements are rendered on a web page. Every element in a webpage is treated as a rectangular box, and the box model defines the structure of that box.

Image description

2. CSS selectors:
CSS selectors are patterns used to select and style the HTML elements you want to apply styles to. They are the most basic part of CSS—you use them to target specific elements on a page.

  • Class selector
  • ID selector
  • Element selector
  • Combination selector, etc.

3. CSS position:
The position property in CSS is used to control how an HTML element is placed on a webpage.By default, elements appear one after the other in the normal document flow. But when you use position, you can move elements anywhere on the screen — relative to the page, their parent, or even the screen itself.

Types of Position:

  • Static
  • Relative
  • Absolute
  • Fixed
  • Sticky

Image description

4. Flex and Grid:
Flexbox: Flexbox(Flexible Box) is a one-dimensional layout system — it helps you align items in a row or a column, especially when the size of items is dynamic or unknown.

When to use?

  • When you're laying out items in a single direction (row or column).
  • Ideal for navbars, menus, buttons, and simple alignment tasks.

Grid: CSS Grid is a two-dimensional layout system — it lets you layout items in rows and columns at the same time.

When to use?

  • When your layout is complex (like a website layout with header, sidebar, main, footer).
  • You want to control both rows and columns precisely.

Image description

5. Media query and Animation:
Media query: Media queries are a way to apply CSS only when a certain condition is true — like screen size, resolution, or orientation.
They’re essential for responsive design — so your site works well on all devices.
Parts:

  • @media – This tells the browser “Start a media query.”
  • Media Type – Like screen, print, all. Most common is screen.
  • Media Feature – Conditions like width, height, orientation, etc.
  • Logical Operators – Use and, or, not to combine conditions.

Animation: Animations let you change CSS properties over time — making your webpage look more dynamic or interactive.
Required:

  • animation-name – Refers to the @keyframes block.
  • animation-duration – How long the animation takes (e.g. 2s, 1.5s).
  • animation-timing-function – The speed curve (ease, linear, etc.).
  • animation-delay – How long to wait before starting.
  • animation-iteration-count – How many times to repeat (1, infinite).
  • animation-direction – normal, reverse, alternate.

That's it. When I am prepare for my interviews I found that these are the important topics in CSS. Moreover In my past two interviews they ask question in these topics as well. So I thought It would be great to share these with you.Thank you for reading this. I hope you like this. Will see you in my next blog

My First Week Learning Front-End Development: A Beginner's Experience

✇Sevaki Rajasekar
By: Sevaki Rajasekar
12 June 2025 at 02:33

Hi! everyone!
I'm just one week into my front-end development journey, and I wanted to share what I've learned, how it's going so far, and what I plan to do next. I hope this blog inspires and helps other beginners like me!

Why I choose Front-End Development

I've always been curious about how websites and apps are built, especially the designs and interactive parts. That's what led me to Front-end development. I love the idea of creating things people can actually see and use. My goal is to become a UI/UX developer, so front-end is my first step towards that dream.

What I Learned This Week

In the First week of course, I got introduced to the core building blocks of the web:

*HTML (HyperText Markup Language): *
I learned how to create the structure of a webpage using tags like <h1>, <p>, <a>, <div>, etc.

*CSS (Cascading Style Sheet): *
I explored how to add colors, fonts, spacing, and layout to a webpage using selectors, properties, and values.

*Basic layout techniques: *
I got a basic idea of to position elements using properties like padding and flex.

Resources and methods I used

These really helped me understand better:

  • Practice the code by using pen and paper.
  • Reading my running notes often.
  • Write blogs what I actually leaned each day.

What's next?

Next week, I'll be diving deeper into:

  • Creating a small project.
  • Use Linux OS often for better understanding about Open-source.

Final Thoughts

Start something new can feel overwhelming, especially in tech. But this first week showed me that ''Consistency is the key to Success''. Each day i learn something new, I'm one step closer to my goal.
If you're also learning front-end development or thinking about it, just start you don't need to know everything. Just be consistency.

Thanks for reading!
Feel free to connect with me or drop your tips for beginners in the comments.

Place button on wiki Page.

✇Kalai Arasan
By: kalaiarasanpandi
10 January 2025 at 14:14

I got a task, that to add a cody in wiktionary side. For do this we have knowledge of Wiki Gadget.

Create an Account on wiki page:

  • If we want to change in wiki page. First we want to create account in wiki.
  • Then we create a own javascript page for make change.
  • The changes can be seen in our page only.
  • If we want to change globally, i have a knowledge of Gadget_kitchen in wiki.

Find the place that have to change

  • Go to wiktionary site and seach any word it.
  • open F12 to view inspect and find the place heading usi.
  • I found in
    • body -> div(mw-page-container) -> div(mw-page-container-inner) -> div(mw-content-container) ->main -> header.
    • header contains nav, h1, div(title-shortlink-container), div(vector-dropdown.
    • h1 must be copy and button place near to h1 or div(title-shortlink-container).

Create common.js page and paste the code

Code:
const observer = new MutationObserver(() => {
    const heading = document.querySelector(".title-shortlink-container");
    if (heading) {
        // Create the button element
        const button = document.createElement("button");
        button.textContent = "Copy Text";
        button.style.marginLeft = "10px"; // Add some spacing from the container

        // Insert the button next to the .title-shortlink-container
        heading.insertAdjacentElement("afterend", button);

        // Add an event listener to copy the text
        button.addEventListener("click", () => {
            const textToCopy = heading.textContent.trim(); // Get only the container's text
            navigator.clipboard.writeText(textToCopy).then(() => {
                alert("Text copied: " + textToCopy);
            }).catch(err => {
                console.error("Failed to copy text: ", err);
            });
        });

        observer.disconnect(); // Stop observing once the element is found
    }
});

// Observe the document for dynamic changes
observer.observe(document.body, { childList: true, subtree: true });

Code Explanation :

  1. Use Document. querySelector for get the element of the .title-shortlink-container class. This class is for shortURL className and assign to variable Heading.
  2. If the Heading is not null. Then we create the button and styles.
  3. The Button is placed next to link. Use heading.insertAdjacentElement(“afterend”, button);
  4. Button action create a function in addEventListener.
  5. Get the link by heading.textContent and store in textToCopy
  6. For copy the text use navigator.clipboard.writeText(textToCopy)
  7. Then pop alert for the event.
  8. if error catch throw error message.
Problem faced (dynamically loaded content)
  1. First i use DOMContentLoaded. It cannot work in wiki.
  2. Then i use Polling (Setintervel for a Certain time). It works partcially.
  3. Then i use MutationObserver. I works perfectly to all pages.

Reference:

https://ta.wikipedia.org/wiki/Special:MyPage/common.js

https://stackoverflow.com/questions/24344022/how-to-use-mutationobserver

https://stackoverflow.com/questions/7707074/creating-dynamic-button-with-click-event-in-javascript

Place button on wiki Page.

✇Journey of Full stack developer
By: kalaiarasanpandi
10 January 2025 at 14:14

I got a task, that to add a cody in wiktionary side. For do this we have knowledge of Wiki Gadget.

Create an Account on wiki page:

  • If we want to change in wiki page. First we want to create account in wiki.
  • Then we create a own javascript page for make change.
  • The changes can be seen in our page only.
  • If we want to change globally, i have a knowledge of Gadget_kitchen in wiki.

Find the place that have to change

  • Go to wiktionary site and seach any word it.
  • open F12 to view inspect and find the place heading usi.
  • I found in
    • body -> div(mw-page-container) -> div(mw-page-container-inner) -> div(mw-content-container) ->main -> header.
    • header contains nav, h1, div(title-shortlink-container), div(vector-dropdown.
    • h1 must be copy and button place near to h1 or div(title-shortlink-container).

Create common.js page and paste the code

Code:
const observer = new MutationObserver(() => {
    const heading = document.querySelector(".title-shortlink-container");
    if (heading) {
        // Create the button element
        const button = document.createElement("button");
        button.textContent = "Copy Text";
        button.style.marginLeft = "10px"; // Add some spacing from the container

        // Insert the button next to the .title-shortlink-container
        heading.insertAdjacentElement("afterend", button);

        // Add an event listener to copy the text
        button.addEventListener("click", () => {
            const textToCopy = heading.textContent.trim(); // Get only the container's text
            navigator.clipboard.writeText(textToCopy).then(() => {
                alert("Text copied: " + textToCopy);
            }).catch(err => {
                console.error("Failed to copy text: ", err);
            });
        });

        observer.disconnect(); // Stop observing once the element is found
    }
});

// Observe the document for dynamic changes
observer.observe(document.body, { childList: true, subtree: true });

Code Explanation :

  1. Use Document. querySelector for get the element of the .title-shortlink-container class. This class is for shortURL className and assign to variable Heading.
  2. If the Heading is not null. Then we create the button and styles.
  3. The Button is placed next to link. Use heading.insertAdjacentElement(“afterend”, button);
  4. Button action create a function in addEventListener.
  5. Get the link by heading.textContent and store in textToCopy
  6. For copy the text use navigator.clipboard.writeText(textToCopy)
  7. Then pop alert for the event.
  8. if error catch throw error message.
Problem faced (dynamically loaded content)
  1. First i use DOMContentLoaded. It cannot work in wiki.
  2. Then i use Polling (Setintervel for a Certain time). It works partcially.
  3. Then i use MutationObserver. I works perfectly to all pages.

Reference:

https://ta.wikipedia.org/wiki/Special:MyPage/common.js

https://stackoverflow.com/questions/24344022/how-to-use-mutationobserver

https://stackoverflow.com/questions/7707074/creating-dynamic-button-with-click-event-in-javascript

Why Skeleton Screens Improve Perceived Loading in Apps like LinkedIn

✇Parotta Salna
By: Mr.ParottaSalna
18 February 2025 at 11:55

Introduction

What do Reddit, Discord, Medium, and LinkedIn have in common? They use what’s called a skeleton loading screen for their applications. A skeleton screen is essentially a wireframe of the application. The wireframe is a placeholder until the application finally loads.

skeleton loader image

Rise of skeleton loader.

The term “skeleton screen” was introduced in 2013 by product designer Luke Wroblewski in a blog post about reducing perceived wait time. In this lukew.com/ff/entry.asp?1797 post, he explains how gradually revealing page content turns user attention to the content being loaded, and off of the loading time itself.

Skeleton Loader

Skeleton loading screens will improve your application’s user experience and make it feel more performant. The skeleton loading screen essentially impersonates the original layout.

This lets the user know what’s happening on the screen. The user interprets this as the application is booting up and the content is loading.

In simplest terms, Skeleton Loader is a static / animated placeholder for the information that is still loading. It mimic the structure and look of the entire view.

Why not just a loading spinner ?

Instead of showing a loading spinner, we could show a skeleton screen that makes the user see that there is progress happening when launching and navigating the application.

They let the user know that some content is loading and, more importantly, provide an indication of what is loading, whether it’s an image, text, card, and so on.

This gives the user the impression that the website is faster because they already know what type of content is loading before it appears. This is referred to as perceived performance.

Skeleton screens don’t really make pages load faster. Instead, they are designed to make it feel like pages are loading faster.

When to use ?

  1. Use on high-traffic pages where resources takes a bit long to load like account dashboard.
  2. When the component contains good amount of information, such as list or card.
  3. Could be replaced by spin in any situation, but can provide a better user experience.
  4. Use when there’s more than 1 element loading at the same time that requires an indicator.
  5. Use when you need to load multiple images at once, a skeleton screen might make a good placeholder. For these pages, consider implementing lazy loading first, which is a similar technique for decreasing perceived load time.

When not to use ?

  1. Not to use for a long-running process, e.g. importing data, manipulation of data etc. (Operations on data intensive applications)
  2. Not to use for fast processes that that take less than half a second.
  3. Users still associate video buffering with spinners. Avoid skeleton screens any time a video is loading on your page.
  4. For longer processes (uploads, download, file manipulation ) can use progress bar instead of skeleton loading.
  5. As a replacement for poor performance: If you can further optimize your website to actually load content more quickly, always pursue that first.

Let’s design a simple skeleton loading

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Skeleton Loading</title>

	<style>
		.card {
			width:  250px;
			height:  150px;
			background-color: #fff;
			padding: 10px;
			border-radius: 5px;
			border:  1px solid gray;
		}

		.card-skeleton {
			background-image: linear-gradient(90deg, #ccc, 0px, rgb(229 229 229 / 90%) 40px, #ccc 80px);
			background-size: 300%;
			background-position: 100% 0;
			border-radius: inherit;
			animation: shimmer 1.5s infinite;
		}

		.title {
			height: 15px;
			margin-bottom: 15px;
		}

		.description {
			height: 100px;
		}

		@keyframes shimmer{
			to {
				background-position: -100% 0;
			}
		}
	</style>

</head>
<body>
	<div class="card">
		<div class="card-skeleton title"></div>
		<div class="card-skeleton description"></div>
	</div>

</body>
</html>

Skeleton Loading .card { width: 250px; height: 150px; background-color: #fff; padding: 10px; border-radius: 5px; border: 1px solid gray; } .card-skeleton { background-image: linear-gradient(90deg, #ccc, 0px, rgb(229 229 229 / 90%) 40px, #ccc 80px); background-size: 300%; background-position: 100% 0; border-radius: inherit; animation: shimmer 1.5s infinite; } .title { height: 15px; margin-bottom: 15px; } .description { height: 100px; } @keyframes shimmer{ to { background-position: -100% 0; } }

Suggestions to keep in mind

  1. The goal is to design for a perception of decreased waiting time.
  2. Contents should replace skeleton exactly by position and size immediately after they are loaded.
  3. Using motion that moves from left to right (wave) gives a better perception of decreased waiting time than fading in and out (pulse).
  4. Using motion that is slow and steady gives a perception of decreased waiting time.

HTML- ChessBoard

✇VS Raj
By: vsraj80
10 January 2025 at 02:57

<!DOCTYPE html>

<html>

<head>

<style>

html{

background-color: gray;

}

body{

width:400px;

height:400px;

margin:0 auto;

margin-top: 50px;

background-color: red;

}

.row{

width:50px;

height:50px;

float:left;

}

.color1{

width:50px;

height:50px;

background-color:white;

border-color: black;

border-right:none;

border-style:groove;

border-width: 1px;

float:left;

}

.color2{

width:50px;

height:50px;

background-color:red;

border-color: black;

border-right:none;

border-style:groove;

border-width: 1px;

float:left;

}

</style>

</head>

<body>

<div class=”row”>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

</div>

<div class=”row”>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

</div>

<div class=”row”>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

</div>

<div class=”row”>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

</div>

<div class=”row”>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

</div>

<div class=”row”>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

</div>

<div class=”row”>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

</div>

<div class=”row”>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

<div class=”color2″></div>

<div class=”color1″></div>

</div>

</body>

</html>

Address Book v2.0 as on 08Nov2024 – (DEVELOPMENT IN PROGRESS)

✇Sugi
By: Sugirtha
8 November 2024 at 16:08

Project Title : Address Book

S/w Used : HTML, CSS, JavaScript with LocalStorage for storing data (little Bootstrap)

Framework Used : Text Editor

Description : A small addressbook which is having name, email, contact no, and city which is having CRUD operations.

Till Today :

  • From v1.0, design changed completely.
  • Code done for Adding new Contact with modal window.
  • And whenever new entry added that will get displayed in the table dynamically with del and edit buttons.
  • Delete button action also done.
  • Alignment I could not able to do well, so took chatGPT help.

To Do:

  • Edit action and Search are pending.
  • Add New screen is not getting closed after adding – has to be rectified.
  • Design should get changed in AddNew screen
  • Table – Headings font size should get changed. (As used bootstrap table class – th is not getting changed through css – have to research in it.
  • Some Code duplication is there, have to be optimized like keep in one function (inside validationPassed & addNewContact).

Technical WorkFlow:

function validationPassed : This function checks all the fields are not empty.

function getAddrBook : This function returns an Array which extracts the existing contacts from localStorage, if available, and parse it. Otherwise an empty array will be returned.

function addNewContact : If validationPassed, then new contact entry is created from 4 fields (Name, Email, ContactNo and City), together will form an object and pushed into addrBook array (got through getAddrBook) and will get saved into localStorage. showBook() function is getting called immediately to show the added contact.

function showBook() : This is actually a table where rows(contacts) with delete and edit buttons are getting added dynamically and will be shown.

function deleteCont(idx) : As the name suggests it will take the index of the array as input and delete the contact when the delete button pressed.

Output till now :

This image has an empty alt attribute; its file name is image-5.png

AddNew Screen:

gitlab : https://gitlab.com/Sugirtha/Kaniyam.git

2D Matrix Addition, Multiplication, Largest in EachRow, Is Descending Order

✇Sugi
By: Sugirtha
27 October 2024 at 17:25
package taskPkg;

public class MatrixCalc {
	public static void main(String[] args) {
		// 1. MATRIX ADDITION ( A + B )
		// 2. MATRIX MULTIPLICATION ( C*D ) IF C is nxk AND D IS kxm RESULTANT MUST BE
		// nxm
		int[][] A = { { 4, 2, 5 }, { 6, 3, 4 }, { 8, 1, 2 } };
		int[][] B = { { 5, 1, 3 }, { 2, 3, 2 }, { 1, 6, 4 } };
		int[][] C = { { 4, 2 }, { 2, 1 }, { 5, 3 } };
		int[][] D = { { 1, 2, 3 }, { 3, 2, 5 } };
		int[] desc = { 9, 5, 2, 1 };
		int[][] M = new int[C.length][D[0].length];

		MatrixCalc matOp = new MatrixCalc();
		matOp.add(A, B);
		System.out.println("-------------------------");
		matOp.multiply(C, D, M);
		System.out.println("-------------------------");
		matOp.LargestInEachRow(M);
		System.out.println("-------------------------");
		matOp.isDescendingOrder(desc);
	}

	private void add(int[][] A, int[][] B) {
		int r = A.length, c = A[0].length;
		int[][] S = new int[r][c];
		for (int i = 0; i < r; i++) {
			for (int j = 0; j < c; j++) {
				S[i][j] = A[i][j] + B[i][j];
			}
		}
		print2Darray(A, "A");
		print2Darray(B, "B");
		System.out.println("SUM : S = A+B");
		print2Darray(S, "S");
		System.out.println();
	}

	private void multiply(int[][] C, int[][] D, int[][] M) {
		int n = C.length, q = D.length, m = D[0].length;
		for (int i = 0; i < n; i++) {
			for (int j = 0; j < m; j++) {
				for (int k = 0; k < q; k++) {
					M[i][j] += C[i][k] * D[k][j];
				}
			}
		}
		print2Darray(C, "C");
		print2Darray(D, "D");
		System.out.println("MULTIPLY : M = CxD");
		print2Darray(M, "M");
	}

	private void LargestInEachRow(int[][] M) {
		int L[] = new int[M.length];
		System.out.println("LARGEST IN EACH ROW OF : M ");
		System.out.print("[");
		for (int i = 0; i < M.length; i++) {
			L[i] = M[i][0];
			for (int j = 0; j < M[0].length; j++) {
				L[i] = L[i] < M[i][j] ? M[i][j] : L[i];
			}
			System.out.print(" " + L[i] + " ");
		}
		System.out.println("]");
	}

	private void isDescendingOrder(int[] des) {
		boolean desc = true;
		System.out.print("Array des [");
		for (int i = 0; i < des.length; i++) {
			System.out.print(" " + des[i] + " ");
			if (i > 0 && desc && des[i - 1] < des[i])
				desc = false;
		}
		System.out.println("]");
		if (desc)
			System.out.println("Given Array des is In Descending Order");
		else
			System.out.println("Given Array des is NOT In Descending Order");
	}

	private void print2Darray(int[][] ar, String arName) {
		System.out.print("Array " + arName + " : ");
		for (int i = 0; i < ar.length; i++) {
			if (i > 0)
				System.out.print("          ");
			System.out.print("[");
			for (int j = 0; j < ar[0].length; j++) {
				System.out.print(" " + ar[i][j] + " ");
			}
			System.out.println("]");
		}
		System.out.println();
	}

}

OUTPUT:

Address Book v1.0 as on 26thOct 2024 – (DEVELOPMENT IN PROGRESS)

✇Sugi
By: Sugirtha
26 October 2024 at 18:29

Project Title : Address Book

S/w Used : HTML, CSS, JavaScript with LocalStorage for storing data (little Bootstrap)

Framework Used : Text Editor

Description : A small addressbook which is having name, email, contact no, and city which is having CRUD operations.

Till Today : Just designed the front screen for Adding New Contact – simple html screen with css only done.

<html>
<head>
 <title>Address Book</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="author" content="Sugirtha">
 <meta name="description" content="Simple AddressBook with Name, Contact No, Email and City">
 <link rel="stylesheet" href="addr.css">
</head>
<body>
 <h3>Simple Address Book</h3>
 <form id="frmAddr" name="formAddr">
 <div class="container">
  <table>
   <tr>
    <th>Name</th>
    <td><input type="text" id="txtName" placeholder="Enter your Name"></td>
   </tr>
   <tr>
    <th>Email</th>
    <td><input type="text" id="txtEmail" placeholder="Enter your Email"></td>
   </tr>
   <tr>
    <th>Contact No.</th>
    <td><input type="text" id="txtPhone" placeholder="ContactNo. including ISD Code"></td>
   </tr>
   <tr>
    <th>City</th>
    <td><input type="text" id="txtCity" placeholder="Enter your City here"></td>
   </tr>
  </table>
   <div class="submitPos">
    <input type="submit" id="btnSubmit" value="SAVE" class="button">
    <input type="button" id="btnCancel" value="CLEAR" class="button">
   </div>

 </div>
 </form>
</body>
</html>

CSS

body
{
    background-color:#3d4543;
    color:white;
}
h3
{
    text-align:center;  
    font-family:Helvetica;
}
input[type=text]
{

    background-color:#bccd95;
    color:black;
    height:30px;
    width:220px;
    border-radius:3px;
    border-color:white;
}
::placeholder
{
    opacity: 1;
    font-family:Helvetica;
    font-size:15px;
}
.container 
{
    background-color:#3d4543;
    position: relative;
    top:4px;
    left:38%;
    width:450px;
    height:350px;
}
.submitPos
{
    position: relative;
    top:38px;
    left:10%;   
}
th
{
    text-align:left;
    font-family:Helvetica;
    font-size:15px;
    font-weight:bold;
}
.button
{
    position:relative;
    color:white;
    border:none;
    border-radius:3px;
    width:100px;
    height:26px;
    margin-left:10px;
    background-color:#303030; 
    border-radius:8px;
    border-bottom:black 2px solid;  
    border-top:2px 303030 solid; 
    font-family:Helvetica;
    font-size:13px;
    font-weight:bold;
}

OUTPUT

Project Title: Personal Portfolio Website

✇SAKTHIVEL S
By: Sakthivel
17 August 2024 at 13:19

Objective: Create and host a personal portfolio website using HTML and CSS.

Step 1: Design Selection

  • Objective: Choose a user interface (UI) and user experience (UX) design that aligns with your vision for the portfolio.
  • Action:
    • Searched online for a simple and clean portfolio design template.
    • Selected and saved the design to serve as a foundation for your project.

Step 2: Code Reference and Customization

  • Objective: Obtain a starting point for your HTML and CSS code and customize it to suit your needs.
  • Action:
    • Uploaded the selected design to ChatGPT and requested a sample code.
    • Used the provided code as a reference.
    • Opened the code in Visual Studio Code (VS Code) and began customizing it to reflect your personal information and preferences.
    • Downloaded and included necessary images and emojis, such as your profile photo, ensuring they were all stored in a folder named “portfolio.”

Step 3: Code Implementation and Testing

  • Objective: Implement the code and ensure it functions correctly.
  • Action:
    • Edited the HTML and CSS files in VS Code, adapting the layout, text, and images to create a personalized portfolio.
    • Regularly saved changes and previewed the website in your browser to ensure it displayed as intended.
    • Made adjustments and refinements until the portfolio met your satisfaction.

(HTML)index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SAKTHIVEL | Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>SAKTHIVEL <span class="highlight">S</span></h1>
        <p>FullStack Developer</p>
    </header>

    <section class="container">
        <div class="sidebar">
            <img src="profile.jpg" alt="sakthi" style="width:150px; height:150px;">
            <h3>SAKTHIVEL SARAVANAN</h3>
            <div class="contact-info">                
                <a href="https://www.linkedin.com/in/sakthivel-saravanan" target="_blank" style="margin-right: 20px;"><img src="linked-in.svg" alt="LinkedIn" style="width:40px; height:40px;"></a>
                <a href="https://github.com/SakthivelS2001" target="_blank"><img src="github.svg" alt="GitHub" style="width:50px; height:45px;"></a>

            </div>
            <div class="details">
                <p><strong>Phone:</strong> +91 9514552154</p>
                <p><strong>Email:</strong> sakthivelricky@gmail.com</p>
                <p><strong>Location:</strong> Velachery, Chennai</p>
                <a href="resume.pdf" target="_blank" class="download-resume">Download Resume</a>
            </div>
        </div>

        <div class="main-content">
            <section class="about">
                <h2>ABOUT ME</h2>
                <p>I'm Sakthivel, a passionate software developer with a strong foundation in computer science, holding a Bachelor's degree in Computer Science from Sri Sankara Arts and Science College, Kanchipuram. Currently, I'm advancing my expertise with a Master's degree in Information Technology from Arignar Anna Arts and Science College, Cheyyar.</p>
                <p>With a deep interest in front-end development, I have honed my skills in HTML, CSS, and JavaScript, creating user-friendly and visually appealing interfaces. My proficiency in Python, along with a basic understanding of SQL and version control using Git/GitHub, equips me to tackle various programming challenges.</p>
                <p>I thrive in collaborative environments where teamwork and innovation are key. I'm also committed to continuous learning, constantly seeking new ways to improve my skills and stay up-to-date with the latest industry trends.</p>
                <p>In addition to my technical abilities, I'm dedicated to overcoming personal challenges like stage fear, which has made me a more confident and effective communicator.</p>
                <p>Whether you're here to explore my work or discuss potential opportunities, I'm excited to connect and share more about how I can contribute to your projects.</p>
            </section>
            
            <section class="skills">
                <h2>Education & Skills</h2>
                <div class="skill-card">
                    <h3>Post Graduate</h3>
                    <p><b>Master's degree, Information Technology <b></p>
                    <p>Marks % : 77 |  Year : 2018 - 2021<p>

                </div>
                <div class="skill-card">
                    <h3>Under Graduate</h3>
                    <p><b>Bachelor's degree, Computer Science <b></p>
                    <p>Marks % : 77 |  Year : 2018 - 2021<p>
                </div>
                <div class="skill-card">
                    <h3>Skills</h3>
                    <p>Python|SQL|HTML|CSS|JAVASCRIPT|Git/Github</p>
                </div>
                <div class="skill-card">
                    <h3>Operating System</h3>
                    <p>Windows | Linux</p>
                </div>
            </section>
        </div>
    </section>
</body>
</html>

(CSS)styles.css:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #f8f8f8;
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

header h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 400;
}

header .highlight {
    color: orange;
    font-weight: 700;
}

header p {
    margin: 5px 0;
    font-size: 18px;
    color: #555;
}

.container {
    display: flex;
    max-width: 1200px;
    margin: 20px auto;
}

.sidebar {
    flex: 1;
    max-width: 300px;
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.sidebar img {
    width: 100px;
    border-radius: 50%;
    margin-bottom: 20px;
}

.contact-info a {
    margin: 0 10px;
}

.details {
    margin-top: 20px;
}

.details p {
    margin: 10px 0;
    font-size: 14px;
}

.download-resume {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: orange;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.main-content {
    flex: 2;
    margin-left: 20px;
}

.about {
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.about h2 {
    font-size: 24px;
    border-bottom: 2px solid orange;
    padding-bottom: 10px;
}

.skills {
    background-color: white;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.skills h2 {
    font-size: 24px;
    border-bottom: 2px solid orange;
    padding-bottom: 10px;
}

.skill-card {
    margin-top: 20px;
}

.skill-card h3 {
    font-size: 20px;
    color: orange;
}

.skill-card p {
    font-size: 14px;
    color: #555;
    margin-top: 10px;
}

Now the output was displaying in local browser

Step 4: Web Hosting

  • Objective: Host your portfolio online so it can be accessed publicly.
  • Action:
    • Chose Neocities.org as your hosting platform, a site known for its ease of use in hosting simple websites.
    • Uploaded the entire project folder (named “portfolio”) to Neocities.org.
    • Successfully received a unique online link for your website, making it accessible to others.

Search the neocities from google and click the official website

Enter your website name you like to host use different name if username taken notify is shown.

Enter the password and Mail ID

And verify the “I am human” Box and click “Create My Site” Button

Now click the Free option.

Enter the verification code from gmail.

click the dashboard to continue.

now we need to upload our project folder

click the “New Folder”

enter the name

folder created

next we upload the files

click the folder

click upload

select the files to upload

now open the index.html file

this was open click to view button on right side top

now our project successfully hosting on internet

copy the above link and share your friends and family

Portfolio Link : https://sakthivels.neocities.org/Sakthivel%20Portfolio/

Git Link : https://github.com/SakthivelS2001/portfolio.git

Step 5: Final Review

  • Objective: Ensure everything is working properly and the portfolio is complete.
  • Action:
    • Conducted a final review of the live website to verify all elements were displayed correctly.
    • Confirmed that the website was fully functional and ready to share.

Skills Used:

  • HTML & CSS: For structuring and styling the website.
  • Web Hosting: Using Neocities.org to make your website accessible online.
  • VS Code: For code editing and customization.

Outcome: Successfully created and hosted a personalized portfolio website.

Conclusion:

This project marks my first real-time experience in creating and hosting a personal portfolio website. Throughout the process, I gained valuable knowledge and practical skills, which were instrumental in the successful completion of this project.

I would like to extend my gratitude to the following resources that significantly contributed to my learning:

  • ChatGPT: For providing guidance and code references that helped shape the structure of my portfolio.
  • YouTube Channel: Error Makes Clever: For offering insightful tutorials that deepened my understanding of HTML, CSS, and web development practices.
  • Youtube Channel: Brototype Tamil: For sharing practical tips and techniques that enhanced my coding skills.

This project not only allowed me to apply my skills but also provided an opportunity to explore new tools and methods, reinforcing my passion for web development.

CALCULATOR

✇Sugi
By: Sugirtha
21 October 2024 at 13:01
<html>
<head>
    <title>Simple Calculator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Sugirtha">
    <meta name="description" content="Calculator using HTML, CSS, JavaScript">   
    <link rel="stylesheet" href="calc.css">
</head>
<body>
    <h2 align="center">CALCULATOR</h2>
<div class="borderContainer">
<div class="container" >
<div class="resultsContainer" ><input type="text" id="results" name="results" class="result" readonly></div>
<div class="numPadContainer">
    <p>
    <input type="button" value="7" class="button black" onclick='calc("7")'>
    <input type="button" value="8" class="button black" onclick='calc("8")'>
    <input type="button" value="9" class="button black" onclick='calc("9")'>
    <input type="button" value="/" class="button opr" onclick='calc("/")'>
    </p>
    <p>
    <input type="button" value="4" class="button black" onclick='calc("4")'>
    <input type="button" value="5" class="button black" onclick='calc("5")'>
    <input type="button" value="6" class="button black" onclick='calc("6")'>
    <input type="button" value="*" class="button opr" onclick='calc("*")'>
   </p>
    <p>
    <input type="button" value="1" class="button black" onclick='calc("1")'>
    <input type="button" value="2" class="button black" onclick='calc("2")'>
    <input type="button" value="3" class="button black" onclick='calc("3")'>
    <input type="button" value="-" class="button opr" onclick='calc("-")'>
    </p>
    <p>
    <input type="button" value="0" class="button black" onclick='calc("0")'>
    <input type="button" value="00" class="button black" onclick='calc("00")'>
    <input type="button" value="." class="button black" onclick='calc(".")'>
    <input type="button" value="+" class="button opr" onclick='calc("+")'>

    </p>
    <p>
    <input type="button" value="mod" class="button opr" onclick='calc("%")'>
    <input type="button" value="C" class="button red" onclick='results.value=""'>
    <input type="button" value="=" class="button orange" onclick='doOper()' >

   </p>
</div>
</div>
</div>
<script>
    var answered=false;
    function calc(val) 
    {
        optrs = "+-*/%"
        if (answered && !optrs.includes(val)) 
        {
         
                //alert("not included opr - clearing ans")
                document.getElementById("results").value="";
                
            
        }
        document.getElementById("results").value += val;
        answered=false;
    }
    function doOper()
    {
        try
        {
            dispAns(eval(document.getElementById("results").value));
            
        }
        catch
        {
            dispAns("Input Error");
        }
    }
    function dispAns(output) 
    {
        document.getElementById("results").value = output;
        answered=true;
    }

</script>
</body>
</html>

body 
{
    background-color:black;
    color:lightgrey;
}



.borderContainer 
{
    position:relative;
    top:10px;
    left:36%;
    width:370;
    height:500;
    background-color: lightgrey;
}
.container
{
    position:relative;
    left:8%;
    top:25px;
    width:310px;
    height:450px;
    background-color:#3d4543;
    border-radius:3px;
}
.numPadContainer
{
    position:relative;
    left:25px;
    top:40px; 
}
.result
{
    position:relative;
    left:24px;
    top:28px;
    background-color:#bccd95;
    color:black;
    text-align:right;
    height:40px;
    width:260px;
    border-radius:10px;
    border-color:white;
}
.button
{
    position:relative;
    color:white;
    border:none;
    border-radius:8px;
    cursor:pointer;
    width:48px;
    height:42px;
    margin-left:10px;
}
.button.black
{
    background-color:#303030; 
    border-radius:8px;
    border-bottom:black 2px solid;  
    border-top:2px 303030 solid; 
}
.button.red
{
    background-color:#cf1917;  
    border-bottom:black 2px solid; 
    font-weight:bold;
}
.button.opr
{
    background-color:grey;  
    border-bottom:black 2px solid; 

}
.button.orange
{
    background-color:orange;
    border-bottom:black 2px solid;
    width:110px;
    font-weight:bold;
}

OUTPUT:

Task-Password Validation

✇Sugi
By: Sugirtha
9 October 2024 at 00:59

Code: TBD

<html>
    <head>
        <title> Password Validation </title>
        <style>
            body {
                background-color:black;
                color:green;
            }
            h1 {
                text-align:center;
                text-decoration:underline;
            }
           .inputTxt{
                color:black;
                background-color:lightgrey;
                border:green 2px solid;
                padding-left:10px;
                width:170px;
                height:24px;
                }
            .lbl {
                 padding:25px;
                 font-weight:bold;
                   
                }
            
            .button {
                background-color:lightgreen;
                color: black;
                border:2px solid green;
                border-radius:15px;
                font-size: 15px;
                vertical-align:9px;
                font-family:"sans-serief";
                font-variant:small-caps;
                font-weight:bold;
                width:170px;
                height:30px;
                text-align:center;
            }
            
        </style>
    </head>
    
    <body>
        <h1 > Password Validation </h1>
            <div align="center">
                <br>
                <form id="frmPw">
                    <table align="center">
                    <tr> 
                        <td> <label for = "idPw" class="lbl"> Password</label> </td>
                        <td> <input type="Password" name="namPw" id="idPw" class="inputTxt" placeholder="Pls enter the Password" minlength=8 maxlength=12>  </td>
                    </tr>
                    </table>
                <br><br>
                <input type="button" value="CLEAR" class="button" onclick="doClear()">&nbsp;&nbsp;
                <input type="submit" value="SUBMIT" class="button" onclick="validatePw()">
                </form>
            </div>
    </body>

    <script>
        function validatePw() {
            const pw = document.getElementById("idPw").value;
            var msg="";
            if (pw.length>12) msg += "Max 12 characters.  Limit exceeded....";
            else if (pw.length<8) msg += "Min 8 characters needed...";
            var containsNumbers = /\d/.test(pw); //TBD
            if (!containsNumbers) msg += "Atleast one digit expected    ";
            var containsUcaseAlphabet = /[A-Z]/.test(pw);  
            if (!containsUcaseAlphabet) msg+="Atleast one Upper Case Alphabet expected  ";
            var containsSpecial = /[!@#$%^&*]/.test(pw); 
            if (!containsSpecial) msg+="Atleast one Special Character expected";             
            if (msg  !== null && msg!='')  //TBD
            {
                alert(msg);
                return false;
            }
            else 
            {
                alert("Password Validation passed successfully...");
                return true;
            }
        }

        function doClear() {
            document.getElementById("frmPw").reset();      
        }
    </script>
</hmtl>

Output:

Task – ToDo List

✇Sugi
By: Sugirtha
6 October 2024 at 17:08
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scaler=1">
    <style>
        body {
            background-color:black;
            color:green;
        }
        h1 {
            text-align:center;
            font-family:"courier";
            font-size:3em;
        }
        .inputTxt{
            background-color:lightgrey;
            width:250px;
            height:30px;
            color:black;
            border:green 2px solid;
            position:absolute;
            top:85px;
            left:560px;
            padding-left:10px;
            font-size:20px;
            font-family:"courier";
        }
        .todoList {
            border:solid 2px white;
            background-color:lightgreen;
            color:black;
            width:250px;
            position:fixed;
            top:115px;
            left:558px;
        }
        .lstitm {
             border:solid 0.5px green;
        }
        .delBtn {
            background-color:darkgreen;
            color:white;
            cursor:pointer;
            border:solid 2px black;
        }
        .paraText {
            padding:15px;
           // font-weight:bold;
            font-size:20px;
            font-family:"courier";
         }

    </style>
</head>
<body>
    <h1> TO-DO LIST</h1>
    <div id="divToDo" class="todoList"></div>
    <input id="txtInput" class="inputTxt" placeholder="Type your Task">  
    <script>
        var cnt=0;   //Maintain cnt for number of tasks here initialize to 0
        const input = document.getElementById("txtInput");     //Taking text control and assigning in input
        input.addEventListener("keydown",
            function(event) 
            {
                if (event.key=="Enter" && !input.value=="")   //Enter key pressed and textbox is not empty
                {
                    const para = document.createElement("para");
                    para.className="paraText";
                    para.textContent = input.value;           //assigning input value into para

                    const del = document.createElement("span"); //Delete button "x"
                    del.textContent = "X";          
                    del.className = "delBtn";

                    const listitem = document.createElement("div"); //creating parent container for both para(input text) and del
                    listitem.className="lstitm";
                    listitem.appendChild(del);
                    listitem.appendChild(para);

                    const list = document.getElementById("divToDo");  //adding that div listitem into another parent div(id=divToDo)
                    list.appendChild(listitem);
                    cnt++;                              //while adding the listitem, increment the count
                    input.value = "";
    
                    del.addEventListener("click",
                        function() 
                        {
                            cnt--;          //del button pressed, so count decremented and listitem removed
                            this.parentElement.remove();
                            if (cnt==0) 
                            {
                                alert("Wow!  Awesome!!! You have completed all Works!!! Now Plant a Tree...");
                            }
                        });           
                }
            });
    </script>

</body>
</html>

Output:

Task – SSLC Marks Total

✇Sugi
By: Sugirtha
29 September 2024 at 12:22
<html>
    <head>
        <title> SSLC Marks </title>
        <style>
            body 
            {
                background-color:black;
                color:pink;
                font-family:arial;
            }
            h1 
            {
            text-align:center;
            color:pink;
            font-variant:small-caps;
            }

            th {
                background-color:pink;
                color:black;
                font-size: 20px;
                font-variant:small-caps;
               }
           .inputTxt{
                color:black;
                background-color:lightgrey;
                border:green 2px solid;
                padding-left:10px;
                width:170px;
                height:30px;
                font-size:20px;
                font-family:"Arial";
                }
            .lbl {
                 padding:25px;
                 font-weight:bold;
                   
                }
            
            .button {
                background-color:lightgrey;
                color: black;
                border:2px solid pink;
                border-radius:15px;
                font-size: 15px;
                vertical-align:9px;
                font-family:"sans-serief";
                font-variant:small-caps;
                font-weight:bold;
                width:170px;
                height:30px;
                text-align:center;
            }
            .output {
                font-family:"Arial";
                font-size:20px;
                font-weight:bold;
                padding-left:25px;
            }


            
        </style>
    </head>
    
    <body>
        <h1> SSLC Marks </h1>
        <table border="1" align=center>
            <thead>
                <th>Subjects</th> <th>Marks</th> 
            </thead>
            <tbody>
            <form id="frmMarks">
            <tr> 
                <td > <label for = "idTamil" class="lbl"> Tamil</label> </td>
                <td> <input type="text" name="txtTamil" id="idTamil" class="inputTxt">  </td>
            </tr>
            <tr> 
                <td> <label for = "idEng"  class="lbl"> English</label> </td>
                <td> <input type="text" name="txtEng" id="idEng" class="inputTxt"> </td>
            </tr>
            <tr> 
                <td> <label for = "idMath" class="lbl"> Maths</label> </td>
                <td> <input type="text" name="txtMath" id="idMath" class="inputTxt"> </td>
            </tr>
            <tr> 
                <td> <label for = "idSci"  class="lbl"> Science</label> </td>
                <td> <input type="text" name="txtSci" id="idSci" class="inputTxt"> </td>
            </tr>
            <tr> 
                <td> <label for = "idSS"  class="lbl"> Social Science</label> </td>
                <td> <input type="text" name="txtSS" id="idSS" class="inputTxt"> </td>
            </tr>
            <tr><td></td></tr<tr><td></td></tr>
             <tr> 
                <td> <label for = "idTot" class="output">Total Marks</label> </td>
                <td align="center"><output name="totMarks" id="idTot" class="output" form="frmMarks"></output</td>
            </tr>  
             <tr> 
                <td > <label for = "idPercent" class="output">Percentage %</label> </td>
                <td align="center"><output name="percent" id="idPercent" class="output" form="frmMarks"></output</td>
            </tr>  
        </tbody>
        </table>
        <br><br>
        <div align="center">
            <input type="button" value="CLEAR" class="button" onclick="doClear()"> &nbsp;&nbsp;&nbsp;
            <input type="button" value="CALC TOTAL & %"  class="button" onclick="calcTot()">
        </div>
        </form>

    </body>
    
    <script>
        function calcTot() {
            const tot = parseInt(document.querySelector("#idTamil").value) + parseInt(document.querySelector("#idEng").value) + parseInt(document.querySelector("#idMath").value) + parseInt(document.querySelector("#idSci").value) + parseInt(document.querySelector("#idSS").value);
            document.querySelector("#idTot").innerHTML = tot;
            alert(tot/5);
            document.getElementById("idPercent").innerHTML = Math.round((tot/5)*100)/100+"%";
        }
        function doClear() {
            document.querySelector("#frmMarks").reset();
            document.querySelector("#idTot").innerHTML="";    
            document.getElementById("idPercent").innerHTML="";       
        }
    </script>
</hmtl>

Output:

❌
❌