DEV Community: Sudhakar V

Built My Personal Portfolio Using HTML CSS and JavaScript

Sudhakar V — Sat, 28 Jun 2025 09:13:16 +0000

I'm happy to share my newly created personal portfolio website developed using HTML CSS and JavaScript

The portfolio showcases my skills projects events I’ve attended and includes a contact section with an embedded map and downloadable resume It is fully responsive and designed to reflect my style and frontend development focus

Tech Stack

HTML for structuring content
CSS for styling and responsive layout
JavaScript for interactivity and animations

What I Learned

Building a responsive and modern UI from scratch
Structuring clean semantic HTML and reusable CSS
Implementing smooth animations and interactive UI features
Improving design consistency and user experience

Live Project and Source Code

Live Site https://porffolio.onrender.com/
GitLab Repo https://gitlab.com/payligam/porffolio

Built a Weather App using Spring Boot and Thymeleaf

Sudhakar V — Sat, 28 Jun 2025 09:07:07 +0000

I recently completed a Weather App using Spring Boot and Thymeleaf and I'm excited to share it with you all

This project allows users to enter any city name and fetch current weather data using the OpenWeatherMap API It integrates a dynamic form-based UI using Thymeleaf with backend logic in Spring Boot

Tech Stack

Spring Boot to handle backend logic and API requests
Thymeleaf for rendering server-side HTML views
OpenWeatherMap API to retrieve live weather data

What I Learned

Connecting Spring Boot to external REST APIs
Handling forms and validation with Thymeleaf
Structuring a clean MVC application
Building a fully functional Java web app end to end

Special Thanks

I would like to thank my mentors Vijay and Muthuramalingam for their consistent support and valuable feedback throughout this project

Source Code

GitLab Repo https://gitlab.com/payligam/weatherapp

Spring Boot Color Picker Web App

Sudhakar V — Mon, 23 Jun 2025 11:22:43 +0000

Project Overview:

This is a simple Spring Boot web application that allows users to pick a color from the URL and view a background rendered in that color dynamically using Thymeleaf template rendering.

Technologies Used:

Spring Boot (Java)
Thymeleaf
HTML/CSS
Maven

Code

ColourPickerApplication.java`

java
package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class ColourPickerApplication {
public static void main(String[] args) {
SpringApplication.run(ColourPickerApplication.class, args);
}
}

ColourController.java`
java
package com.example.demo.Controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
public class ColourController {

@GetMapping("/")
public String getColorPicker(@RequestParam(defaultValue = "#123456") String color, Model model) {
    model.addAttribute("selectedcolor", color);
    return "color";
}

}


  color.html` (in `src/main/resources/templates/`)

html
<!DOCTYPE html>

Color Picker
<br> body {<br> margin: 0;<br> height: 100vh;<br> display: flex;<br> justify-content: center;<br> align-items: center;<br> flex-direction: column;<br> font-family: Arial, sans-serif;<br> }<br> h2 {<br> color: white;<br> text-shadow: 1px 1px 2px black;<br> }<br>

Selected Color:




Before:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ebw9tl2n03fj2ynm072e.png)

After :

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohqnb720h9o6zmxtk3wx.png)

Source :
GitLab Repository: https://gitlab.com/payligam/springboot/-/tree/main/ColourPicker?ref_type=heads

  Credits:

  Developer: Sudhakar
  Mentorship: Mr. Muthuramalingam (Mentor)

HTML TAGS

Sudhakar V — Tue, 10 Jun 2025 16:24:19 +0000

Here is a list of commonly used HTML tags in bullet point format, grouped by their purpose:

Basic Structure Tags

<!DOCTYPE html> – Declares the document as HTML5.
<html> – Root element of the HTML document.
<head> – Contains metadata (not displayed on the page).
<title> – Sets the title of the page (appears in browser tab).
<body> – Contains all the visible content on the page.

Text Formatting Tags

<h1> to <h6> – Headings (h1 is the largest, h6 the smallest).
<p> – Paragraph.
<br> – Line break.
<hr> – Horizontal rule (line).
<b> – Bold text.
<i> – Italic text.
<u> – Underlined text.
<strong> – Important (bold).
<em> – Emphasized (italic).

Links and Media

<a href="URL"> – Hyperlink.
<img src="image.jpg" alt="description"> – Image.
<video> – Embed video.
<audio> – Embed audio.

List Tags

<ul> – Unordered list (bullets).
<ol> – Ordered list (numbers).
<li> – List item.

Table Tags

<table> – Table element.
<tr> – Table row.
<td> – Table data/cell.
<th> – Table header.
<thead>, <tbody>, <tfoot> – Table sections.

Form Tags

<form> – Form container.
<input> – Input field (text, checkbox, etc.).
<textarea> – Multi-line input.
<label> – Label for inputs.
<select> – Dropdown menu.
<option> – Option in a dropdown.
<button> – Clickable button.

Template literals (Template strings)

Sudhakar V — Thu, 29 May 2025 16:40:48 +0000

JavaScript Template Literals (Template Strings)

Template literals, introduced in ES6 (ES2015), are an improved way to work with strings in JavaScript. They provide several powerful features over traditional string literals.

Basic Syntax

Template literals use backticks (`) instead of single or double quotes:

const message = `Hello World`;

Key Features

1. Multi-line Strings

No need for \n or concatenation:

const multiLine = `
  This is 
  a multi-line
  string
`;

2. String Interpolation

Embed expressions using ${expression} syntax:

const name = 'Alice';
const age = 25;

// Traditional way
const greeting1 = 'Hello ' + name + ', you are ' + age + ' years old';

// With template literal
const greeting2 = `Hello ${name}, you are ${age} years old`;

3. Expression Evaluation

Expressions inside ${} are evaluated:

const a = 5;
const b = 10;
console.log(`The sum is ${a + b}`); // "The sum is 15"

4. Tagged Templates

Advanced feature for custom string processing:

function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => 
    `${result}${str}<span class="highlight">${values[i] || ''}</span>`, '');
}

const name = 'John';
const age = 30;
const highlighted = highlight`Hello ${name}, you are ${age} years old`;

Practical Examples

1. HTML Templates

const user = {
  name: 'Sarah',
  role: 'Developer'
};

const html = `
  <div class="user-card">
    <h2>${user.name}</h2>
    <p>Role: ${user.role}</p>
    <p>Joined: ${new Date().getFullYear() - 2}</p>
  </div>
`;

2. Complex Expressions

const items = ['Coffee', 'Tea', 'Milk'];
const total = items.length;

const list = `
  <ul>
    ${items.map(item => `<li>${item}</li>`).join('')}
  </ul>
  <p>Total items: ${total}</p>
`;

3. Conditional Rendering

const isLoggedIn = true;
const welcomeMessage = `
  Welcome back!
  ${isLoggedIn ? 'You have 3 new notifications' : 'Please log in'}
`;

Advantages Over Traditional Strings

Cleaner syntax for string concatenation
Better readability for complex strings
No need to escape single/double quotes inside the string
Support for multi-line strings without workarounds[TBD]

REFERENCES- Template Literals - MDN Web Docs -https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

HTML DOM Document createElement()

Sudhakar V — Thu, 29 May 2025 16:32:43 +0000

In an HTML document, the document.createElement() is a method used to create the HTML element. The element specified using elementName is created or an unknown HTML element is created if the specified elementName is not recognized.

Syntax

let element = document.createElement("elementName");
In the above syntax, elementName is passed as a parameter. elementName specifies the type of the created element. The nodeName of the created element is initialized to the elementName value. The document.createElement() returns the newly created element.

Example 1: This example illustrates how to create a

element. Input :

<!DOCTYPE html>

<br> function createparagraph() {<br> let x = document.createElement("p");<br> let t =<br> document.createTextNode("Paragraph is created.");<br> x.appendChild(t);<br> document.body.appendChild(x);<br> }<br>

CreateParagraph

Output:

Explanation:

Start with creating an

element using document.createElement().
Create a text node using document.createTextNode().
Now, append the text to

using appendChild().
Append the

using appendChild().
Example 2: This example illustrates how to create a

element and append it to a

element. Input :

<!DOCTYPE html>

<br> function createparagraph() {<br> let x = document.createElement("p");<br> let t =<br> document.createTextNode("Paragraph is created.");<br> x.appendChild(t);<br> document.getElementById("divid").appendChild(x);<br> }<br>

A div element
CreateParagraph

Output:

Supported Browser: The browsers supported by DOM createElement() Method are listed below:

Google Chrome
Edge
Firefox
Opera
Safari
REFERENCE:https://www.w3schools.com/jsref/met_document_createelement.asp

Event Handling Functions

Sudhakar V — Wed, 28 May 2025 16:57:24 +0000

In JavaScript, event handling functions like click and others are commonly used to interact with HTML elements. Here's a breakdown of the .click() function and other similar event-related functions:

`.click()` Function

The .click() method programmatically triggers a click event on an element.

document.getElementById("myButton").click(); // Simulates a click

But normally, we use .addEventListener() or onclick to respond to a real user click.

<button id="myButton">Click Me</button>
<script>
  document.getElementById("myButton").addEventListener("click", function () {
    alert("Button clicked!");
  });
</script>

Common Event Listener Functions

You can handle many types of events using .addEventListener():

Event Type	Description
`click`	Fires when an element is clicked
`dblclick`	Fires on double-click
`mouseover`	Fires when the mouse is over an element
`mouseout`	Fires when the mouse leaves an element
`mousedown`	Fires when mouse button is pressed
`mouseup`	Fires when mouse button is released
`mousemove`	Fires when the mouse moves
`keydown`	Fires when a keyboard key is pressed
`keyup`	Fires when a keyboard key is released
`input`	Fires when the value of `<input>` changes
`change`	Fires when input or select changes
`submit`	Fires when a form is submitted
`load`	Fires when the page or image is fully loaded
`scroll`	Fires when an element is scrolled

Basic Example

<input type="text" id="nameInput" placeholder="Type something" />
<p id="output"></p>

<script>
  document.getElementById("nameInput").addEventListener("input", function (event) {
    document.getElementById("output").textContent = "You typed: " + event.target.value;
  });
</script>

Shorthand `onclick` Method

Instead of .addEventListener, you can also directly assign a function:

document.getElementById("myButton").onclick = function () {
  alert("Clicked via onclick");
};

What is HTTP?

Sudhakar V — Wed, 28 May 2025 06:56:13 +0000

HTTP is the communication protocol used by web browsers and servers to talk to each other.

It's like a language used by your browser (Chrome, Firefox, etc.) to ask for web pages from a server.

Easy Analogy: Ordering a Burger

Imagine going to a fast-food counter:

You place an order: “One cheeseburger, please.”
This is like an HTTP request.
The staff makes the burger and gives it to you.
This is like an HTTP response.

HTTP in Action (Real World)

You type www.google.com in your browser.
The browser sends an HTTP request to Google's server.
Google's server sends back an HTTP response (the web page).
The browser shows you the page.

Basic Structure

HTTP Request

GET /index.html HTTP/1.1
Host: www.example.com

GET – Method (what you want to do)
/index.html – Resource you want
HTTP/1.1 – Version of HTTP
Host: – Which website

HTTP Response

HTTP/1.1 200 OK
Content-Type: text/html

<html>
  <body>Hello!</body>
</html>

200 OK – Status code (successful)
Content-Type – What kind of data (HTML, JSON, etc.)
Body – The actual data (web page content)

Common HTTP Methods

Method	Description
`GET`	Retrieve data (e.g., a web page)
`POST`	Send new data (e.g., form data)
`PUT`	Update existing data
`DELETE`	Remove data

Common HTTP Status Codes

Code	Meaning	Description
200	OK	Success
404	Not Found	Page/resource doesn’t exist
500	Internal Server Error	Something went wrong on server
403	Forbidden	No permission
301	Moved Permanently	Page has a new URL

Why Is HTTP Important?

Without HTTP, websites wouldn’t load.
It's the foundation of the web.
It's stateless – each request is independent.

Great question: Why is HTTP important?

Let’s explain why HTTP exists and why it’s important in simple terms.

Why HTTP?

1. It connects the web

HTTP is the standard language that allows your browser (client) to talk to a web server.

Without HTTP, your browser wouldn’t know how to ask for a web page or send data.

2. Simple and universal

Works everywhere: phones, tablets, laptops.
Can be used by any programming language (Java, Python, JavaScript, etc.).
Easy to use and understand.

3. Stateless communication

Each request is independent:

You ask for something → you get a reply.
The server doesn't need to remember past requests.

This makes it fast and scalable for millions of users.

4. Supports many operations

Using HTTP methods (GET, POST, PUT, DELETE), it allows:

Browsing pages
Submitting forms
Uploading files
Interacting with APIs

5. Secure communication (HTTPS)

With HTTPS (HTTP Secure), data is encrypted, making it safe from hackers during transfer.

That's why modern websites use HTTPS — secure version of HTTP.

Real-Life Example:

When you search “best pizza near me”:

Your browser sends an HTTP GET request to Google.
Google replies with an HTTP response containing search results.
You see the results on your screen.

All of this happens through HTTP.

Summary: Why HTTP?

Benefit	Why It Matters
Web Communication Standard	All websites use it
Simple & Fast	Easy to implement and efficient
Stateless Design	Great for high performance
Versatile Methods	Enables all kinds of web interactions
Secure with HTTPS	Keeps data safe during transmission

Applets vs Servlets in Java

Sudhakar V — Wed, 28 May 2025 06:46:47 +0000

Applets and Servlets are both Java technologies, but they serve very different purposes:

Applets

What is an Applet?

A Java program that runs in a web browser.
Meant for client-side execution.
Requires a Java plugin in the browser (now deprecated and unsupported by most browsers).

Characteristics:

Feature	Description
Execution	Runs on the client machine (browser).
GUI Support	Yes (Swing or AWT).
Use Case	Old-school interactive web UIs.
Security	Runs in a sandbox (restricted).
Obsolete?	✅ Yes. No longer supported by browsers.

Example:

import java.applet.Applet;
import java.awt.Graphics;

public class HelloApplet extends Applet {
    public void paint(Graphics g) {
        g.drawString("Hello from Applet!", 20, 20);
    }
}

Servlets

What is a Servlet?

A Java class that runs on a server and handles HTTP requests and responses.
Used to build web applications (server-side logic).
Forms the foundation for Spring MVC, JSP, and Java EE web apps.

Characteristics:

Feature	Description
Execution	Runs on the server (inside servlet container like Tomcat).
GUI Support	No GUI (sends HTML or data as response).
Use Case	Handling requests, processing forms, serving data.
Modern Usage	Backbone of Java web development.

Example:

import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class HelloServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        out.println("<h1>Hello from Servlet!</h1>");
    }
}

Applet vs Servlet Comparison Table

Feature	Applet	Servlet
Runs On	Client (Browser)	Server (Web container)
Purpose	GUI applications in browsers	Handle web requests/responses
GUI Support	Yes (AWT/Swing)	No (Returns HTML or data)
HTML Interaction	Embedded in HTML pages	Processes requests from HTML forms
Browser Support	Deprecated	Widely supported
Security	Runs in restricted sandbox	Server-side security (authentication etc.)
Modern Usage	Obsolete	Still heavily used (Spring Boot, JSP)

Conclusion

Applets are outdated and no longer used.
Servlets are foundational for modern Java web development (including Spring Boot).

MVC Architecture

Sudhakar V — Wed, 28 May 2025 06:43:54 +0000

Using MVC (Model-View-Controller) architecture in Spring Boot (or any web application) provides clear separation of concerns, making your code easier to manage, scale, and test. Here's why MVC is important:

✅ 1. Separation of Concerns

Each layer (Model, View, Controller) has a specific responsibility:

Model: Handles data and business logic.
View: Displays data (HTML, Thymeleaf, etc.).
Controller: Manages HTTP requests and responses.

🔍 Result: Easier debugging, testing, and maintenance.

✅ 2. Scalability

As your application grows:

You can add new views without changing the business logic.
You can change data logic without touching the UI or controller.

✅ 3. Reusability

Business logic in services and data models can be reused across multiple controllers or APIs.

✅ 4. Testability

You can unit test each layer independently:
- Mock the repository for service tests.
- Mock the service for controller tests.

✅ 5. Maintainability

Cleanly structured projects are easier to understand for new developers.
Reduces coupling and increases cohesion.

✅ 6. Industry Standard

Widely adopted pattern in enterprise applications.
Encouraged by Spring Boot's auto-configuration and annotations.

🧠 Example Scenario

If you're building a banking app:

Model: Account, Transaction entities.
View: HTML pages showing account details.
Controller: Handles requests like /balance or /transfer.
Service: Contains logic like calculating interest or validating transfers.

🚀 Summary: Why MVC?

Layer	Responsibility	Benefits
Model	Business logic & data	Reusable & testable logic
View	User Interface	Clean and maintainable UI
Controller	Request handling & flow	Centralized control & routing

Spring Boot MVC (Model-View-Controller) architecture

Sudhakar V — Wed, 28 May 2025 06:41:32 +0000

In a Spring Boot MVC (Model-View-Controller) architecture, your application is divided into three main layers:

🔁 1. Model

Represents the data and business logic of the application.

Typically includes:
- Java classes (POJOs) representing the data.
- Entities (annotated with @Entity).
- Repository interfaces (usually extending JpaRepository or CrudRepository).

✅ Example:

@Entity
public class User {
    @Id
    @GeneratedValue
    private Long id;
    private String name;
    private String email;
    // Getters and setters
}

🎮 2. Controller

Handles HTTP requests and maps them to the correct service methods. It acts as the entry point for the web layer.

Annotated with @Controller or @RestController.
Uses annotations like @GetMapping, @PostMapping, etc.
Communicates with the service layer.

✅ Example:

@RestController
@RequestMapping("/users")
public class UserController {
    @Autowired
    private UserService userService;

    @GetMapping
    public List<User> getAllUsers() {
        return userService.getUsers();
    }
}

🧠 3. Service

Encapsulates business logic. Called by the controller and interacts with the repository (data access) layer.

✅ Example:

@Service
public class UserService {
    @Autowired
    private UserRepository userRepository;

    public List<User> getUsers() {
        return userRepository.findAll();
    }
}

🗃️ Repository

Handles database operations. Interfaces extend JpaRepository, CrudRepository, etc.

✅ Example:

@Repository
public interface UserRepository extends JpaRepository<User, Long> {
}

🖼️ View (optional in RESTful APIs)

In traditional MVC, views (HTML pages, Thymeleaf, JSP) are returned to the user. For APIs, JSON is typically returned.

Views are placed in src/main/resources/templates/ (for Thymeleaf).
Use @Controller (not @RestController) when returning views.

✅ Example (Thymeleaf View):

@Controller
public class PageController {
    @GetMapping("/home")
    public String home(Model model) {
        model.addAttribute("message", "Hello, Spring MVC!");
        return "home"; // maps to home.html
    }
}

🧭 Spring Boot MVC Project Flow

Client (Browser / Postman)
      ↓
Controller (handles HTTP requests)
      ↓
Service (business logic)
      ↓
Repository (database access)
      ↓
Database (e.g., PostgreSQL)

ES5 = ECMAScript 5

Sudhakar V — Wed, 28 May 2025 05:01:19 +0000

What is ECMAScript?

ECMAScript is the standard specification on which JavaScript is based. It is developed by ECMA International, and the goal is to standardize the language.

ECMAScript 5 (ES5) Details:

Feature	Description
Full Name	ECMAScript 5 (5th Edition)
Released Year	December 2009
Standard Number	ECMA-262, 5th Edition
Main Goal	Add new features, improve security, and better language support

Key Features Introduced in ES5:

use strict mode
Array methods: forEach(), map(), filter(), reduce()
Object.defineProperty()
JSON.parse() and JSON.stringify()
Better property access control
Safer coding practices

Example:


javascript
"use strict";  // ES5 feature

var nums = [1, 2, 3];
var doubled = nums.map(function(n) {
  return n * 2;
});
console.log(doubled);  // [2, 4, 6]

DEV Community: Sudhakar V

Built My Personal Portfolio Using HTML CSS and JavaScript

Tech Stack

What I Learned

Live Project and Source Code

Built a Weather App using Spring Boot and Thymeleaf

Tech Stack

What I Learned

Special Thanks

Source Code

Spring Boot Color Picker Web App

Selected Color:

HTML TAGS

Basic Structure Tags

Text Formatting Tags

Links and Media

Grouping & Layout Tags

List Tags

Table Tags

Form Tags

Template literals (Template strings)

JavaScript Template Literals (Template Strings)

Basic Syntax

Key Features

1. Multi-line Strings

2. String Interpolation

3. Expression Evaluation

4. Tagged Templates

Practical Examples

1. HTML Templates

2. Complex Expressions

3. Conditional Rendering

Advantages Over Traditional Strings

HTML DOM Document createElement()

Event Handling Functions

.click() Function

Common Event Listener Functions

Basic Example

Shorthand onclick Method

What is HTTP?

Easy Analogy: Ordering a Burger

HTTP in Action (Real World)

Basic Structure

HTTP Request

HTTP Response

Common HTTP Methods

Common HTTP Status Codes

Why Is HTTP Important?

Why HTTP?

1. It connects the web

2. Simple and universal

3. Stateless communication

4. Supports many operations

5. Secure communication (HTTPS)

Real-Life Example:

Summary: Why HTTP?

Applets vs Servlets in Java

Applets

What is an Applet?

Characteristics:

Example:

Servlets

What is a Servlet?

Characteristics:

Example:

Applet vs Servlet Comparison Table

Conclusion

MVC Architecture

✅ 1. Separation of Concerns

✅ 2. Scalability

✅ 3. Reusability

✅ 4. Testability

✅ 5. Maintainability

✅ 6. Industry Standard

🧠 Example Scenario

🚀 Summary: Why MVC?

Spring Boot MVC (Model-View-Controller) architecture

🔁 1. Model

🎮 2. Controller

🧠 3. Service

`.click()` Function

Shorthand `onclick` Method