Add Week-01 and Week-02 content
This commit is contained in:
52
Week-01/Day_01/README.md
Normal file
52
Week-01/Day_01/README.md
Normal file
@@ -0,0 +1,52 @@
|
||||
# Web Development Internship - Week 1
|
||||
|
||||
## Day 1: Orientation and Web Development Overview
|
||||
|
||||
### Overview
|
||||
The first day focused on understanding the professional environment, the roadmap for the internship, and a high-level overview of how the modern web functions.
|
||||
|
||||
---
|
||||
|
||||
### Web Development Fundamentals
|
||||
|
||||
#### 1. What is Web Development?
|
||||
Web development is the process of building and maintaining websites. It ranges from creating a simple plain-text webpage to complex web applications and social networks.
|
||||
|
||||
#### 2. The Three Pillars
|
||||
- **Frontend (Client-Side):** What the user sees and interacts with.
|
||||
- *Technologies:* HTML (Structure), CSS (Styling), JavaScript (Interactivity).
|
||||
- **Backend (Server-Side):** The "behind-the-scenes" logic, databases, and servers.
|
||||
- *Technologies:* Node.js, Python, PHP, Databases (SQL/NoSQL).
|
||||
- **Full Stack:** A developer who can handle both frontend and backend development.
|
||||
|
||||
---
|
||||
|
||||
### Environment Setup
|
||||
On Day 1, the following tools were installed and configured:
|
||||
- **Code Editor:** [Visual Studio Code](https://code.visualstudio.com/) (installed with essential extensions like Prettier and Live Server).
|
||||
- **Version Control:** [Git](https://git-scm.com/) and a [GitHub](https://github.com/) account for hosting code.
|
||||
- **Browser:** Google Chrome / Firefox for testing and Developer Tools.
|
||||
|
||||
---
|
||||
|
||||
### Key Concepts Learned
|
||||
- **Client-Server Architecture:** How a browser (client) sends a request to a server, and the server sends back files (HTML/CSS/JS).
|
||||
- **The Role of the Browser:** How browsers parse code to render visual elements.
|
||||
- **HTTP/HTTPS:** The protocols used for transferring data across the web.
|
||||
|
||||
---
|
||||
|
||||
### Goals for this Internship
|
||||
- [ ] Master Semantic HTML and Responsive CSS.
|
||||
- [ ] Build a strong foundation in JavaScript logic.
|
||||
- [ ] Learn to collaborate using Git/GitHub.
|
||||
- [ ] Deploy a functional personal portfolio website.
|
||||
|
||||
---
|
||||
|
||||
### Daily Progress Log
|
||||
| Day | Topic | Status |
|
||||
| :--- | :--- | :--- |
|
||||
| **Day 1** | **Orientation & Overview** | Completed |
|
||||
| Day 2 | HTML Basics | ⏳ Next |
|
||||
| Day 3 | HTML Multimedia & Forms | ⏳ Upcoming |
|
||||
37
Week-01/Day_02/index.html
Normal file
37
Week-01/Day_02/index.html
Normal file
@@ -0,0 +1,37 @@
|
||||
<!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
Normal file
33
Week-01/Day_03/index.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!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
Normal file
50
Week-01/Day_03/style.css
Normal file
@@ -0,0 +1,50 @@
|
||||
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
Normal file
32
Week-01/Day_04/index.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<!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
Normal file
BIN
Week-01/Day_04/profile.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
88
Week-01/Day_04/style.css
Normal file
88
Week-01/Day_04/style.css
Normal file
@@ -0,0 +1,88 @@
|
||||
: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
Normal file
22
Week-01/Day_05/index.html
Normal file
@@ -0,0 +1,22 @@
|
||||
<!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
Normal file
62
Week-01/Day_05/script.js
Normal file
@@ -0,0 +1,62 @@
|
||||
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
Normal file
72
Week-01/Day_05/style.css
Normal file
@@ -0,0 +1,72 @@
|
||||
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; }
|
||||
45
Week-02/Day_01/index.html
Normal file
45
Week-02/Day_01/index.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Advanced HTML & CSS - Simple Form</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="wrapper">
|
||||
|
||||
<form class="form" id="userForm">
|
||||
<h3>User Form</h3>
|
||||
|
||||
<input type="text" id="name" name="name" placeholder="Name" required>
|
||||
<input type="email" id="email" name="email" placeholder="Email" required>
|
||||
<input type="text" id="city" name="city" placeholder="City">
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
|
||||
<div class="display">
|
||||
<h3>Entered Details</h3>
|
||||
<p>Name: <span id="displayName">______</span></p>
|
||||
<p>Email: <span id="displayEmail">______</span></p>
|
||||
<p>City: <span id="displayCity">______</span></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('userForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
var name = document.getElementById('name').value.trim();
|
||||
var email = document.getElementById('email').value.trim();
|
||||
var city = document.getElementById('city').value.trim();
|
||||
|
||||
document.getElementById('displayName').textContent = name || '______';
|
||||
document.getElementById('displayEmail').textContent = email || '______';
|
||||
document.getElementById('displayCity').textContent = city || '______';
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
32
Week-02/Day_01/style.css
Normal file
32
Week-02/Day_01/style.css
Normal file
@@ -0,0 +1,32 @@
|
||||
body {
|
||||
font-family: Arial;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
width: 500px;
|
||||
margin: 50px auto;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
background: white;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
background: white;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
input, button {
|
||||
padding: 8px;
|
||||
}
|
||||
65
Week-02/Day_02/index.html
Normal file
65
Week-02/Day_02/index.html
Normal file
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Advanced HTML & CSS - Simple Form</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<nav class="nav">
|
||||
<ul>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#product">Product</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="wrapper">
|
||||
|
||||
<form class="form" id="userForm">
|
||||
<h3>User Form</h3>
|
||||
|
||||
<input type="text" id="name" name="name" placeholder="Name" required>
|
||||
<input type="email" id="email" name="email" placeholder="Email" required>
|
||||
<input type="text" id="city" name="city" placeholder="City">
|
||||
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
|
||||
<div class="display">
|
||||
<h3>Entered Details</h3>
|
||||
<p>Name: <span id="displayName">______</span></p>
|
||||
<p>Email: <span id="displayEmail">______</span></p>
|
||||
<p>City: <span id="displayCity">______</span></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div class="pagination">
|
||||
<a href="#" class="prev">«</a>
|
||||
<a href="#" class="page active">1</a>
|
||||
<a href="#" class="page">2</a>
|
||||
<a href="#" class="page">3</a>
|
||||
<a href="#" class="next">»</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
document.getElementById('userForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
var name = document.getElementById('name').value.trim();
|
||||
var email = document.getElementById('email').value.trim();
|
||||
var city = document.getElementById('city').value.trim();
|
||||
|
||||
document.getElementById('displayName').textContent = name || '______';
|
||||
document.getElementById('displayEmail').textContent = email || '______';
|
||||
document.getElementById('displayCity').textContent = city || '______';
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
79
Week-02/Day_02/style.css
Normal file
79
Week-02/Day_02/style.css
Normal file
@@ -0,0 +1,79 @@
|
||||
body {
|
||||
font-family: Arial;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
max-width: 700px;
|
||||
margin: 40px auto;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
background: white;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.display {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
background: white;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
input, button {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
background: #ffffff;
|
||||
box-shadow: 0 1px 4px rgba(0,0,0,0.06);
|
||||
padding: 12px 0;
|
||||
}
|
||||
header .nav ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
header .nav a {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Footer / Pagination */
|
||||
footer {
|
||||
margin: 30px auto 50px;
|
||||
max-width: 700px;
|
||||
text-align: center;
|
||||
}
|
||||
.pagination {
|
||||
display: inline-flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.pagination a {
|
||||
display: inline-block;
|
||||
padding: 6px 10px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
.pagination a.active {
|
||||
background: #007acc;
|
||||
color: #fff;
|
||||
border-color: #007acc;
|
||||
}
|
||||
43
Week-02/Day_03/index.html
Normal file
43
Week-02/Day_03/index.html
Normal file
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Responsive Task - Week 2 - Day 3</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>Responsive News</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#">Home</a></li>
|
||||
<li><a href="#">Articles</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="grid">
|
||||
<article class="card">
|
||||
<img src="https://via.placeholder.com/400x200" alt="Sample">
|
||||
<h2>Article 1</h2>
|
||||
<p>This layout uses CSS Grid to stay organized on desktop.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<img src="https://via.placeholder.com/400x200" alt="Sample">
|
||||
<h2>Article 2</h2>
|
||||
<p>On mobile, these cards will stack one on top of the other.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<img src="https://via.placeholder.com/400x200" alt="Sample">
|
||||
<h2>Article 3</h2>
|
||||
<p>Responsive design makes the web accessible to everyone.</p>
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
53
Week-02/Day_03/style.css
Normal file
53
Week-02/Day_03/style.css
Normal file
@@ -0,0 +1,53 @@
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
gap: 20px;
|
||||
background: #1a08e9;
|
||||
padding: 10px;
|
||||
}
|
||||
nav a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 2px solid #271e1e;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
19
Week-02/Day_04/README.md
Normal file
19
Week-02/Day_04/README.md
Normal file
@@ -0,0 +1,19 @@
|
||||
### I mastered the 5 Basic Steps of the GitHub workflow:
|
||||
|
||||
1. **Repository:** I created a "home" for my project files.
|
||||
2. **Branching:** I made a "copy" of my project to work on safely (so I don't break the main version).
|
||||
3. **Committing:** I saved my progress with a clear note about what I changed.
|
||||
4. **Pull Request (PR):** I asked for my changes to be checked and added to the main project.
|
||||
5. **Merging:** I combined my new work into the final project.
|
||||
|
||||
## Checklist of Tasks Completed
|
||||
- [1] Created a new repository called `hello-world`.
|
||||
- [2] Created a new branch called `readme-edits`.
|
||||
- [3] Edited the README file and saved (committed) the changes.
|
||||
- [4] Opened a Pull Request to share my work.
|
||||
- [5] Merged the Pull Request into the main branch.
|
||||
|
||||
## Tools Used
|
||||
* **GitHub:** To host my project online.
|
||||
* **Git:** To track the history of my work.
|
||||
* **Markdown:** To write this simple and clean README file.
|
||||
36
Week-02/Day_05/README.md
Normal file
36
Week-02/Day_05/README.md
Normal file
@@ -0,0 +1,36 @@
|
||||
### Key Concepts Learned
|
||||
|
||||
1. **Repositories:** Creating a project container on GitHub to track history.
|
||||
2. **Branching:** Creating an isolated environment (`readme-edits`) to test new ideas without affecting the `main` code.
|
||||
3. **Commits:** Saving "checkpoints" in the project with descriptive messages.
|
||||
4. **Pull Requests (PR):** Proposing changes to the project and starting a discussion before merging.
|
||||
5. **Merging:** Successfully incorporating changes from a branch back into the master project.
|
||||
|
||||
|
||||
### To complete this task, I performed the following steps:
|
||||
|
||||
- [x] **Initialized Repository:** Created the `hello-world` repository.
|
||||
- [x] **Created Branch:** Created a branch named `readme-edits` to follow the branching strategy.
|
||||
- [x] **Modified Content:** Updated the `README.md` with professional information.
|
||||
- [x] **Committed Changes:** Used the Conventional Commits format for the commit message.
|
||||
- [x] **Opened Pull Request:** Documented the changes and submitted them for review.
|
||||
- [x] **Merged PR:** Finalized the changes into the `main` branch.
|
||||
|
||||
|
||||
### During this task, I practiced the following CLI commands:
|
||||
|
||||
```bash
|
||||
# Clone the repository locally
|
||||
git clone https://github.com/[username]/hello-world.git
|
||||
|
||||
# Create a new branch
|
||||
git checkout -b readme-edits
|
||||
|
||||
# Stage changes
|
||||
git add .
|
||||
|
||||
# Commit changes
|
||||
git commit -m "docs: add intern profile and workflow log"
|
||||
|
||||
# Push to GitHub
|
||||
git push origin readme-edits
|
||||
Reference in New Issue
Block a user