Web Development

21 Days Web Development Project Plan 👇👇
https://xn--r1a.website/webdevcoursefree/720

Day 8: Pricing Table

1. Plan Your Pricing Table: Decide on the product or service for which you're creating a pricing table. Determine the different pricing tiers and features associated with each tier.

2. Create a New HTML File: Open your text editor and create a new file named pricing_table.html.

3. Set Up the Structure: Add the basic structure of an HTML document, including the <!DOCTYPE html> declaration, <html>, <head>, and <body> tags.

4. Build the Table: Inside the <body> tag, use the <table>, <thead>, <tbody>, <tr>, <th>, and <td> tags to create your pricing table.

   <!DOCTYPE html>
   <html>
   <head>
       <title>Pricing Table</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <h1>Pricing Plans</h1>
       <table class="pricing-table">
           <thead>
               <tr>
                   <th>Plan</th>
                   <th>Price</th>
                   <th>Features</th>
               </tr>
           </thead>
           <tbody>
               <tr>
                   <td>Basic</td>
                   <td>$10/month</td>
                   <td>Feature 1, Feature 2, Feature 3</td>
               </tr>
               <tr>
                   <td>Standard</td>
                   <td>$20/month</td>
                   <td>Feature 1, Feature 2, Feature 3, Feature 4</td>
               </tr>
               <tr>
                   <td>Premium</td>
                   <td>$30/month</td>
                   <td>All features included</td>
               </tr>
           </tbody>
       </table>
   </body>
   </html>

5. Add Basic CSS Styling: Create a new file named styles.css and link it to your HTML document. Add basic styles to make your table visually appealing.

   body {
       font-family: Arial, sans-serif;
       background-color: #f8f8f8;
       color: #333;
       padding: 20px;
   }

   h1 {
       text-align: center;
       margin-bottom: 20px;
   }

   .pricing-table {
       width: 100%;
       border-collapse: collapse;
       margin-bottom: 20px;
   }

   .pricing-table th, .pricing-table td {
       border: 1px solid #ddd;
       padding: 10px;
       text-align: left;
   }

   .pricing-table th {
       background-color: #f2f2f2;
   }

   .pricing-table tr:nth-child(even) {
       background-color: #f9f9f9;
   }

   .pricing-table tr:hover {
       background-color: #eaeaea;
   }

6. Save and View: Save your pricing_table.html and styles.css files. Open the HTML file in a web browser to see how it looks. Adjust the layout or styling as needed.

7. Optional: Advanced Styling: Enhance the visual appeal of your pricing table with more advanced styling, such as adding hover effects, animations, or icons.

   .pricing-table th, .pricing-table td {
       text-align: center;
   }

   .pricing-table td {
       font-size: 18px;
   }

   .pricing-table .highlight {
       background-color: #ffd700;
       font-weight: bold;
   }

8. Publish Your Pricing Table: Once you're satisfied with your pricing table, upload your HTML and CSS files to your hosting service to share it online.

Web Development Best Resources: https://topmate.io/coding/930165

Share with credits: https://xn--r1a.website/webdevcoursefree

ENJOY LEARNING 👍👍

👍20❤9👏4

14K views17:41

Web Development

✅ CSS Basics You Should Know 🎨💻

CSS (Cascading Style Sheets) is used to style HTML elements — adding colors, spacing, layout, and more.

1️⃣ CSS Syntax

selector {
  property: value;
}

Example:

h1 {
  color: blue;
  font-size: 32px;
}

2️⃣ How to Add CSS
⦁ Inline:

<p style="color: red;">Hello</p>

⦁ Internal (within HTML):

<style>
  p { color: green; }
</style>

⦁ External (best practice):

<link rel="stylesheet" href="style.css">

3️⃣ Selectors
⦁ * → All elements
⦁ p → All <p> tags
⦁ .class → Elements with class
⦁ #id → Element with specific ID

#title { color: blue; }.red-text { color: red; }

4️⃣ Colors & Fonts

body {
  background-color: #f2f2f2;
  color: #333;
  font-family: Arial, sans-serif;
}

5️⃣ Box Model
Every HTML element is a box:
content + padding + border + margin

6️⃣ Layout with Flexbox

 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

7️⃣ Responsive Design

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}

8️⃣ Hover Effects

button:hover {
  background-color: black;
  color: white;
}

9️⃣ Common Properties
⦁ color – Text color
⦁ background-color – Background
⦁ margin & padding – Spacing
⦁ border – Border style
⦁ width / height – Size
⦁ text-align – Alignment

💡 Tip: Organize your styles using class names and external CSS files for better scalability.

💬 Tap ❤️ for more!

❤13👏1😁1

4.78K views14:32

Web Development

Now, let's move to the the next topic:

✅ CSS & Layouts Part-1: Flexbox and Grid

🚧 Problem Layouts Solve
- HTML stacks elements vertically by default
- Real websites need alignment and spacing
- Navbars break
- Cards misalign
- Pages look unstructured

Layouts help you control:
- Direction
- Alignment
- Spacing

Modern CSS gives you two tools:
➡️ Flexbox
➡️ Grid

🔹 Flexbox
Flexbox controls layout in one direction.
- Horizontal or vertical
- Best for components
- Parent controls children

🧠 Mental Model:
- One container
- Multiple items
- Items follow a single axis

🧭 Flexbox Axes
- Main axis: Direction items move
- Cross axis: Perpendicular direction

If direction is row:
- Main axis → horizontal
- Cross axis → vertical

If direction is column:
- Main axis → vertical
- Cross axis → horizontal

🎛️ Key Flexbox Properties
📦 Container controls layout:
- display: flex: Turns on Flexbox
- flex-direction: row, column
- justify-content: Aligns items on main axis (start, center, space-between)
- align-items: Aligns items on cross axis (center, stretch)

📌 Where Flexbox Works Best
- Navigation bars
- Buttons with icons
- Cards in a row
- Centering content

🎯 Classic use case:
- Vertical centering
- Horizontal centering
- Both together

🔹 Grid
Grid controls layout in two directions.
- Rows
- Columns
You design structure first.

🧠 Mental Model:
- Page divided into cells
- Items placed inside cells
- Layout stays stable

❓ Why Grid Exists
- Flexbox struggles with full page layout
- Multiple rows become messy
- Uneven spacing appears
Grid solves this cleanly.

🎛️ Key Grid Concepts
- display: grid
- Columns
- Rows
- Gap

You decide:
- Number of columns
- Column widths
- Row behavior

📌 Where Grid Works Best
- Page layouts
- Dashboards
- Galleries
- Admin panels

🧩 Example Structure:
- Header full width
- Sidebar left
- Content center
- Footer bottom
Grid handles this without hacks.

⚖️ Flexbox vs Grid. Simple Rule
Use Flexbox when:
- You align items
- You control flow
- You build components

Use Grid when:
- You design structure
- You control rows and columns
- You build page skeletons

🚫 Common Beginner Mistakes
- Using Flexbox for full page layout
- Deep nesting of Flexbox
- Ignoring Grid for dashboards

✅ Real-World Best Practice
- Grid for page layout
- Flexbox inside components
This is how production apps are built.

🧪 Mini Practice Task
- Build a navbar with Flexbox
- Build a card grid with Grid
- Resize screen and observe behavior

✅ Mini Task Solution

🧭 1. Navbar using Flexbox
HTML

<nav class="navbar">
  <div class="logo">MySite</div>
  <ul class="menu">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>

CSS

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background-color: #222;
  color: #fff;
}
.menu {
  display: flex;
  gap: 20px;
  list-style: none;
}

What happens:
- Logo stays on left
- Menu stays on right
- Items align vertically
- Layout stays clean on resize

🗂️ 2. Card Grid using CSS Grid
HTML

<div class="grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
}
.card {
  padding: 40px;
  background-color: #f2f2f2;
  text-align: center;
  border-radius: 8px;
}

What happens:
- Cards align in rows and columns
- Equal width columns
- Clean spacing using gap

📱 3. Responsive Behavior on Resize
Add this media query:

@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .menu {
    gap: 12px;
  }
}

Observed behavior:
- Grid shifts from 3 columns to 1 column
- Navbar stays aligned
- No overlap
- No broken layout

Tap ❤️ For More

❤19🤔1

4.24K views12:27

Web Development

Now, let's move to the the next topic:

CSS Animations & Transitions Breakdown ✅

✨ Why animations matter
- Guide user attention
- Improve user experience
- Make UI feel alive
- Give feedback to actions
Good animation is subtle, not flashy.

🔁 Transitions vs Animations

🔹 Transition
- Used for simple state changes
- Triggered by hover, focus, click
- One start → one end

🔹 Animation
- Runs automatically
- Can repeat
- Multiple steps

Rule of thumb
👉 Use transitions for interactions
👉 Use animations for continuous effects

🎯 CSS Transitions Explained
Transition smoothly changes a property.

Basic properties
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
Most common shorthand transition: all 0.3s ease;

🖱️ Transition Example. Button hover

button {
  background-color: #007bff;
  color: white;
  padding: 12px 20px;
  border: none;
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: #0056b3;
}

What happens
- Color changes smoothly
- No sudden jump

🎞️ CSS Animations Explained
Animations use keyframes.
Keyframes define steps.
Basic syntax

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Apply animation

.box {
  animation: fadeIn 1s ease-in-out;
}

🎛️ Animation properties you must know
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
Example animation: bounce 1s infinite;

📌 Real-world animation examples
- Loading spinner
- Fade-in cards
- Button pulse
- Skeleton loaders

⚠️ Common beginner mistakes
- Overusing animations
- Long durations
- Animating layout-breaking properties
- Ignoring performance

Avoid animating
- width
- height
- margin

Prefer animating
- opacity
- transform

✅ Best practices
- Keep duration between 0.2s–0.5s
- Use ease or ease-in-out
- Animate only when needed
- Test on low-end devices

🧪 Mini practice task
- Add hover transition to a button
- Animate card fade-in on load
- Create a simple loading spinner

✅ Mini Practice – Solutions

🎨 CSS Transitions & Animations

🟦 1️⃣ Add hover transition to a button

HTML
<button class="btn">Click Me</button>

CSS

.btn {
  background-color: #007bff;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.btn:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}

✅ Result
- Smooth color change
- Slight zoom on hover
- Feels responsive

🗂️ 2️⃣ Animate card fade-in on page load

HTML
<div class="card">Card Content</div>

CSS

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.card {
  padding: 30px;
  background-color: #f2f2f2;
  border-radius: 8px;
  animation: fadeIn 0.6s ease-in-out;
}

✅ Result
- Card fades in smoothly
- Slight upward motion
- Professional UI feel

🔄 3️⃣ Create a simple loading spinner

HTML
<div class="spinner"></div>

CSS

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ddd;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

✅ Result
- Continuous spinning loader
- Used during API calls
- Common in real apps

🧠 Key takeaway
- Transitions handle interactions
- Animations handle motion
- transform and opacity are performance-friendly
- Less animation = better UX

Double Tap ♥️ For More

❤17👍3

4.98K views20:20

Web Development

🌐 DOM Selection Manipulation using Javascript

❓ What is DOM
DOM means Document Object Model
👉 It converts HTML into a tree-like structure
👉 JavaScript uses DOM to control webpage elements

Simple meaning
• HTML creates elements
• DOM allows JavaScript to change them

🧠 Why DOM is important
Without DOM
• JavaScript cannot change UI
• No dynamic websites
• No interactive apps

Real examples
• Form validation
• Button clicks
• Updating text dynamically
• Showing or hiding sections

🌳 DOM Tree Concept
Browser converts HTML into nodes.
Example structure
• Document
• HTML
• Body
• Div
• Paragraph
• Button

JavaScript can access each node.

🔍 Selecting Elements in DOM
This is the most important skill.

✅ Select by ID
document.getElementById("title");

• Selects one unique element
• Fastest method

✅ Select by Class
document.getElementsByClassName("card");

• Returns multiple elements
• Stored as HTML collection

✅ Select by Tag
document.getElementsByTagName("p");

• Selects all tags of same type

⭐ Modern Method (Most Used)
document.querySelector(".card");
• Selects first matching element
document.querySelectorAll(".card");
• Selects all matching elements

✏️ Manipulating Elements
Once selected, you can change them.

📝 Change text
element.textContent = "New Text";

🧾 Change HTML
element.innerHTML = "<b>Hello</b>";

🎨 Change style
element.style.color = "red";

🧩 Add or remove class
element.classList.add("active");
element.classList.remove("active");

➕ Creating New Elements
let newDiv = document.createElement("div");
newDiv.textContent = "Hello DOM";
document.body.appendChild(newDiv);

⚠️ Common Beginner Mistakes
• Forgetting # for ID
• Forgetting . for class
• Using innerHTML incorrectly
• Not handling multiple elements

🧪 Mini Practice Task
• Select a heading using ID and change text
• Select all cards using class and change background
• Add a new paragraph dynamically
• Add or remove a class using JavaScript

✅ Mini Practice Task – Solution

🟦 1️⃣ Select a heading using ID and change text
HTML: <h1 id="title">Old Title</h1>

JavaScript:
const heading = document.getElementById("title");
heading.textContent = "New Title Changed by JS";
✔️ Heading text updates instantly

🟩 2️⃣ Select all cards using class and change background
HTML:
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>

JavaScript:
const cards = document.querySelectorAll(".card");
cards.forEach(card => {
card.style.backgroundColor = "#f2f2f2";
});
✔️ All cards get the same background
✔️ querySelectorAll + forEach is the modern way

➕ 3️⃣ Add a new paragraph dynamically
JavaScript:
const para = document.createElement("p");
para.textContent = "This paragraph was added using JavaScript";
document.body.appendChild(para);
✔️ New paragraph appears at the bottom of the page

🎨 4️⃣ Add or remove a class using JavaScript
HTML: <button id="btn">Toggle</button>

CSS:
.active {
background-color: green;
color: white;
}

JavaScript:
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
btn.classList.toggle("active");
});
✔️ Class added on click
✔️ Removed on next click
✔️ Clean and reusable

➡️ Double Tap ♥️ For More

❤24

4.75K views08:40

About

Blog

Apps

Platform