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

📧 Contact

For any queries, feel free to reach out:

• 📩 Email: [email protected]
• 🔗 LinkedIn: https://www.linkedin.com/in/ishanvi-chauhan/

Happy Coding! 🚀