ABES_PrimeBatch

ABES PRIME BATCH - Full Stack Development Course

Welcome to the ABES PRIME BATCH repository for the Full Stack Development Course. This repository contains day-wise folders, each covering different topics related to Full Stack Development.

📅 Daily Updates

Day 1 : Introduction to Web Development & Git Basics

• Overview of Git & GitHub for version control.
• Setting up a repository, adding files, and handling commits.
• Common Git Commands like git init, git add, git commit, and git push.
• Basic HTML, CSS, and JavaScript concepts.

  Link: index.html

Day 2 : HTML Fundamentals

1. Text Formatting & Decoration
   • Using <b>, <i>, <u>, <small>, <del>, <ins>, <mark>, <code>, <blockquote>, and <abbr> for different text styles and emphasis.
2. Lists & Addressing
   • Creating ordered (<ol>), unordered (<ul>), and description lists (<dl>).
   • Using the <address> tag for contact details.
3. Tables
   • Structuring a weekly timetable using <table>, <tr>, <th>, <td>, colspan, and rowspan.
4. Forms & Input Handling
   • Building a registration form using <form>, <input>, <label>, <select>, <textarea>, and <button>.
   • Implementing form validation with required attributes.

Assignments:

• Assignment 1
• Assignment 2
• Assignment 3
• Assignment 4

Day 3 : JavaScript Basics & CSS Specificity

1. HTML & Styling Basics

• CSS specificity order:
  inheritance < browser < universal < tags/elements < class < id < inline < !important

2. JavaScript Fundamentals

• Variable Declarations:
  • var: Function-scoped, can be redeclared and reassigned.
  • let: Block-scoped, can be reassigned but not redeclared.
  • const: Block-scoped, cannot be reassigned or redeclared.
• Comparison Operators:
  • == (Loose comparison): Compares values but ignores types.
  • === (Strict comparison): Compares both values and types.

Link: index.html

Day 4 : JavaScript Functions, Arrays, Loops & Objects

1. Functions in JavaScript

• Function Hoisting: Functions are hoisted, allowing them to be called before their declaration.
• Function Types:
  • Function Declaration: Traditional function definition.
  • Function Expression: Can be named or anonymous, assigned to a variable.
  • Arrow Functions (ES6+): Concise syntax with implicit return for single expressions.
• Nested Functions & Scope: Inner functions are accessible only within their parent function, maintaining encapsulation.

2. Arrays

• Creation: const arr = [value1, value2, ...]
• Operations: .push(), accessing by index, updating values.
• Incorrect Practices: Sparse arrays (empty indices), delete leaves holes.

3. Loops

• For Loop: for (init; condition; increment) {}
• For-in: Iterates over object keys.
• For-of: Iterates over array values.
• While & Do-While Loops: Execute based on conditions.

4. Objects

• Definition: Key-value pairs { key: value }.
• Operations: Access (obj.key or obj["key"]), update, delete.
• Dynamic Access: Access properties dynamically using obj[key].

Day 5: Callbacks & Array Methods

• Callbacks & Higher-Order Functions: Functions passed as arguments to other functions, enabling flexible execution.
• Student Grading System: Implemented using callbacks to calculate percentages, highest scoring subjects, and grades dynamically.
• forEach & map:
  • forEach: Iterates over an array, applying a function to each element.
  • map: Returns a new array with transformed values.
• reduce: Aggregates an array into a single value, useful for sum, multiplication, and custom operations.
• Use Cases: Implemented reduce to calculate sum, product, and modify arrays like forEach and map.

Day 6 : DOM Basics & Manipulation

DOM Basics:

• Understanding document and window objects.
• Selecting elements using:
  • getElementById(), getElementsByClassName(), getElementsByTagName()
  • querySelector(), querySelectorAll()
• Modifying styles dynamically (color, backgroundColor, textDecoration).

  Link: DOM Basics

DOM Manipulation:

• Accessing and navigating elements using .children and .style properties.
• Changing text content dynamically using JavaScript.
• Iterating over elements using Array.from() and forEach().
• Creating, appending, and removing elements (appendChild(), removeChild()).
• Using innerText and innerHTML for dynamic content updates.

  Link: DOM Manipulation

Day 7 : JavaScript Events & DOM

1. Form Events: Captured onchange, onkeydown, and onkeyup events for user input.
2. DOM Manipulation: Created dynamic cards using document.createElement and event listeners.
3. Event Handling: Click events changed card and text background colors with stopPropagation().
4. Background Change: Button triggered random color changes for the webpage.
5. Styling: Applied hover effects, shadows, and transitions for better UI interaction.

Link: index.html

Link: form.html

Day 8 : Dynamic Forms & Data Filtering

1. Form Handling: Captured form submissions, validated unique emails, and dynamically added user data.
2. Dropdown Filtering: Populated <select> options dynamically based on unique city names.
3. Card Display: Rendered user details as cards with delete functionality.
4. Data Filtering: Displayed cards based on selected city, updating UI accordingly.
5. DOM Updates: Used innerHTML and event-driven rendering for seamless UI updates.

Link: formEvents.html

Day 9 : Async Callbacks and Promises

1. Event Listeners – Handling asynchronous events using addEventListener.
2. setTimeout – Delays execution of a function using browser-provided setTimeout().
3. Callback Functions – Executing functions within functions, handling asynchronous operations.
4. Real-world Asynchronous Case – User authentication, payment handling using callbacks and promises.
5. Promises – Understanding fetch(), .then(), .catch() for handling API responses.
6. DOM Manipulation – Fetching and displaying data dynamically using JavaScript.
7. Local Storage – Storing fetched API data in localStorage for persistence.

Link: index.html

Day 10: YouTube Clone Mini-Project

This project replicates a basic YouTube UI with video playback and history tracking using HTML, CSS, and JavaScript.
A beginner-friendly project showcasing DOM manipulation, event handling, and LocalStorage. 🚀

• HTML: Multi-page structure (index.html, video.html, history.html), navbar, search bar, and sidebar.
• CSS: Flexbox, Grid, icons, dark theme UI.
• JavaScript:
  • Dynamic Video Embedding: Uses iframe with URL parameters.
  • Watch History: Stores viewed videos in LocalStorage.
  • Dummy Data for Videos: Simulates API response.
• YouTube API Setup.

Link: YouTube Clone

📧 Contact

For any queries, feel free to reach out:

• 📩 Email: ishanvi.chauhan@gmail.om
• 🔗 LinkedIn: https://www.linkedin.com/in/ishanvi-chauhan/

Happy Coding! 🚀