rupeshbangar/Web-Development
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Orientation, Overview of Web Development

Browse Source
This commit is contained in:
rupeshbangar
2026-02-23 22:42:56 +05:30
parent e934274eb8
commit b818fce308
19 changed files with 0 additions and 809 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
Week-01/Day_02/index.html
View File

@@ -1,37 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Day 2 Internship Task</title>
</head>
<body>
<h1>Welcome to My Profile</h1>
<h2>About Me</h2>
<p>Hi! I am <strong>RUPESH BANGAR</strong>. i am live from goregaon west, an pursuing <strong>Masters Of Computer Application</strong> at Pillai HOC College Of Engineering and Technology. I have strong interest in <strong>WEB DEVELOPMENT</strong> and enjoy working on both frontend and backend technologies</p>
<h2>My Goals...</h2>
<ul>
<li>Understand HTML structure</li>
<li>Master text formatting tags</li>
<li>Learn how to link pages</li>
<li>Prepare for CSS styling</li>
</ul>
<h2>Daily Routine...</h2>
<ol>
<li>To wake up in the morning, take a bath, have breakfast and catch the train</li>
<li>Reach the office and setup my desk</li>
<li>Check internship portal for tasks, Read MDN Web Docs, Write and test code</li>
<li>Return Back to the HOME</li>
</ol>
<h2>Resources...!</h2>
<p>I am learning from the <a href="https://www.w3schools.com/html/" target="_blank">W3 School HTML Tutorial</a>.</p>
</body>
</html>

33
Week-01/Day_03/index.html
View File

@@ -1,33 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Day 3 CSS Task</title>
<!-- Linking the external CSS file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>My Internship Journey</h1>
<section class="card">
<h2>About Me</h2>
<p>I am learning <strong>CSS</strong> today to make my web pages look beautiful and organized.</p>
</section>
<section class="card">
<h2>Skills I am Learning</h2>
<ul class="skills-list">
<li>HTML5 Structure</li>
<li class="active">CSS3 Basics</li>
<li>JavaScript Logic</li>
</ul>
</section>
<a href="#" class="btn">Contact Me</a>
</div>
</body>
</html>

50
Week-01/Day_03/style.css
View File

@@ -1,50 +0,0 @@
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f9;
color: #333;
line-height: 1.6;
margin: 0;
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
}
.card {
background: white;
padding: 20px;
margin-bottom: 20px;
border-radius: 8px;
border-left: 5px solid #007bff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h1 {
color: #007bff;
text-align: center;
}
.skills-list {
list-style-type: square;
}
.active {
color: green;
font-weight: bold;
}
.btn {
display: inline-block;
background: #007bff;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 5px;
transition: background 0.3s;
}
.btn:hover {
background: #0056b3;
}

32
Week-01/Day_04/index.html
View File

@@ -1,32 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Basics Combined Task</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="container">
<div class="profile-card">
<img src="profile.jpg" alt="Profile Picture" class="profile-img">
<h1 class="user-name">Rupesh Bangar</h1>
<p class="tagline">Junior Web Developer</p>
<div class="bio-box">
<p><strong>Bio:</strong> This is a long biography to demonstrate the overflow property. CSS allows us to handle content that is larger than its container. By setting the height and the overflow property, we can ensure the layout stays intact while the user can still read all the text by scrolling inside this specific box.</p>
</div>
<form class="contact-form">
<input type="email" placeholder="Enter your email" required>
<button type="submit" id="submit-btn">Contact Me</button>
</form>
</div>
</main>
</body>
</html>

BIN
Week-01/Day_04/profile.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.5 KiB

88
Week-01/Day_04/style.css
View File

@@ -1,88 +0,0 @@
:root {
--primary-color: #4a90e2;
}
body {
font-family: 'Segoe UI', sans-serif;
background-color: #f0f2f5;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.profile-card {
background-color: white;
width: 350px;
max-width: 90%;
padding: 2rem;
border: 2px solid #ddd;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
text-align: center;
}
.profile-img {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--primary-color);
margin-bottom: 1rem;
}
.user-name {
color: #333;
margin: 0;
font-size: 1.5rem;
}
.tagline {
color: #777;
font-style: italic;
margin-bottom: 1.5rem;
}
.bio-box {
height: 80px;
overflow-y: auto;
background: #f9f9f9;
padding: 10px;
border: 1px solid #eee;
font-size: 0.9rem;
margin-bottom: 1.5rem;
text-align: left;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 10px;
}
input[type="email"] {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
}
input[type="email"]:focus {
border-color: var(--primary-color);
}
#submit-btn {
background-color: var(--primary-color);
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
transition: background 0.3s;
}
#submit-btn:hover {
background-color: #357abd;
}

22
Week-01/Day_05/index.html
View File

@@ -1,22 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic JS Task - Week 1 Day 5</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Gadget Store Inventory</h1>
<p>Click the button below to process the JSON data and calculate discounts.</p>
<button id="load-btn">Load Inventory</button>
<div id="product-container" class="product-grid"></div>
</div>
<script src="script.js"></script>
</body>
</html>

62
Week-01/Day_05/script.js
View File

@@ -1,62 +0,0 @@
const jsonInventory = `[
{"id": 1, "name": "Wireless Headphones", "price": 2500, "stock": 15},
{"id": 2, "name": "Smart Watch", "price": 5000, "stock": 3},
{"id": 3, "name": "Gaming Mouse", "price": 1200, "stock": 0},
{"id": 4, "name": "Laptop Stand", "price": 1800, "stock": 8}
]`;
const config = {
currencySymbol: "₹",
discountPercent: 15, // 15% discount for low stock items
lowStockThreshold: 5
};
const loadBtn = document.getElementById('load-btn');
const container = document.getElementById('product-container');
function updateInventory() {
const products = JSON.parse(jsonInventory);
container.innerHTML = '';
products.forEach(item => {
let currentPrice = item.price;
let badgeHTML = '';
let priceHTML = '';
if (item.stock === 0) {
badgeHTML = `<span class="badge out-of-stock">Out of Stock</span>`;
priceHTML = `<span class="price">${config.currencySymbol}${item.price}</span>`;
}
else if (item.stock < config.lowStockThreshold) {
const discountAmount = (item.price * config.discountPercent) / 100;
currentPrice = item.price - discountAmount;
badgeHTML = `<span class="badge sale">Low Stock Sale - ${config.discountPercent}% OFF</span>`;
priceHTML = `
<span class="old-price">${config.currencySymbol}${item.price}</span>
<span class="price">${config.currencySymbol}${currentPrice.toFixed(0)}</span>
`;
}
else {
badgeHTML = `<span class="badge available">In Stock: ${item.stock}</span>`;
priceHTML = `<span class="price">${config.currencySymbol}${item.price}</span>`;
}
const card = document.createElement('div');
card.className = 'card';
card.innerHTML = `
<h3>${item.name}</h3>
<p>${priceHTML}</p>
${badgeHTML}
`;
container.appendChild(card);
});
}
loadBtn.addEventListener('click', () => {
console.log("Loading Inventory...");
updateInventory();
});

72
Week-01/Day_05/style.css
View File

@@ -1,72 +0,0 @@
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5;
color: #333;
padding: 20px;
}
.container {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
button {
background-color: #007bff;
color: white;
border: none;
padding: 12px 24px;
font-size: 1rem;
border-radius: 5px;
cursor: pointer;
margin-bottom: 30px;
}
button:hover {
background-color: #0056b3;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.card {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
text-align: left;
}
.card h3 {
margin-top: 0;
color: #222;
}
.price {
font-size: 1.2rem;
font-weight: bold;
color: #28a745;
}
.old-price {
text-decoration: line-through;
color: #888;
font-size: 0.9rem;
margin-right: 10px;
}
.badge {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.75rem;
font-weight: bold;
margin-top: 10px;
}
.sale { background-color: #ffc107; color: #000; }
.out-of-stock { background-color: #dc3545; color: #fff; }
.available { background-color: #e2e3e5; color: #383d41; }