Date:7 January – 2025 to 13 January – 2025

Venue: Lab B

Number of Participants:51

Name of the Speaker: Mr. Rohit Jain & Mr. Dheeraj Jangid

Name of the Coordinator: Dr. Neha Tiwari & Ms Anisha Kataria

Objective of the Workshop

The objective of the 6-day workshop on Tailwind CSS and React.js was to provide participants with practical knowledge and advanced skills in web development using Tailwind CSS and React.js. Key objectives included:

• Mastering Modern CSS Layout Techniques: Equip participants with a deep understanding of CSS layout features, including Flexbox, CSS Positioning, and Pseudo Selectors, to create responsive and aesthetically pleasing designs.

• Advanced JavaScript Skills: Introduce participants to new-age JavaScript concepts, such as higher-order functions, the spread operator, and destructuring, for efficient and dynamic web development.

• Proficiency in Tailwind CSS: Enable participants to harness the power of Tailwind CSS, demonstrating its utility for rapid, responsive design compared to traditional frameworks like Bootstrap. This included creating various layouts using Tailwind.

• Rapid Web Development with React.js: Guide participants in using React.js for efficient web application development, focusing on components, state management, and advanced features such as routing and context.

• Project Selection: Guided participants to identify their interests and make a suitable project and get a roadmap for the same.

• Hands-on Project Development: Allow participants to implement their learning through projects, including building sticky sidebars, responsive headers, button animations, and a React-based eCommerce application.

• Exploring Career and Industry Trends: Foster discussions on the impact of Artificial Intelligence in programming, the importance of version control with Git and GitHub, maintaining a professional online presence, and crafting effective resumes.

By the end of the workshop, participants were expected to apply these skills to create responsive, interactive web applications and advance their careers in the tech industry.

Outcomes of the Workshop

Upon completion of the 6-day workshop, participants achieved the following:

• CSS and Layout Mastery: Ability to create responsive layouts using Flexbox, positioning, and pseudo-classes to enhance web interactivity and design.

• JavaScript Fundamentals and Beyond: Developed skills in JavaScript DOM manipulation and modern features such as map(), filter(), reduce(), destructuring, and more.

• Proficient Use of Tailwind CSS: Built responsive, visually appealing components using Tailwind classes, significantly speeding up the development process.

• ReactJS Skills: Gained knowledge of React’s component-driven architecture and were able to implement routing, context, and dynamic UI logic.

• Completed Web Projects: Created projects like sticky sidebars, responsive headers, animated buttons, and a functional React e-commerce application.

• Career and Tech Readiness: Understood the relevance of AI in programming, Git/GitHub collaboration, and how to build an impactful resume and online profile for tech careers.

Schedule and Summary

Day 1: Flexbox and CSS Essentials

Topics Covered:

• Introduction to Flexbox for efficient website design.

• Exploring CSS Position properties: static, relative, absolute, fixed, and sticky.

• Understanding and utilizing CSS pseudo-selectors like :hover, :before, and

:after for dynamic styling.

Activities:

• Designed layouts using Flexbox for responsiveness.

• Experimented with pseudo-selectors to enhance interactivity.

Day 2: JavaScript DOM Manipulation and New-Age JavaScript

Topics Covered:

• DOM Manipulation: Selecting, modifying, and creating elements dynamically.

• New JavaScript Features:

  • Higher-order functions like map(), filter(), and reduce().

  • Spread operator and array/object destructuring for cleaner, efficient code.

Activities:

• Built small interactive components using JavaScript DOM.

• Hands-on exercises on using higher-order functions for data manipulation.

Day 3: Tailwind CSS – A New Era in Styling

Topics Covered:

• Introduction to Tailwind CSS: Understanding its utility-first approach.

• Advantages of Tailwind over Bootstrap in terms of customization and flexibility.

• Creating responsive layouts using Tailwind’s pre-defined classes.

Activities:

• Designed various layouts, including responsive headers and sticky sidebars, using Tailwind CSS.

• Explored the integration of Tailwind with project workflows.

Day 4: React Basics – Rapid Web Development

Topics Covered:

• Introduction to React and its component-based architecture.

• Creating React components and managing state.

• Implementing event handling and dynamic rendering with React.

Activities:

• Built simple React components to display dynamic content.

• Created button animations using React’s logic and Tailwind CSS for styling.

Day 5: Advanced React Concepts – Routing and Context

Topics Covered:

• React Router: Adding navigation and multi-page functionality to applications.

• Context API: Managing global state and sharing data between components.

• Combining Tailwind CSS with React for seamless design and development.

Activities:

• Developed a React e-commerce application with routing and state management.

• Applied responsive design techniques using Tailwind CSS.

Day 6: Beyond Web Development – AI, Git, and Career Growth

Topics Covered:

• Identify the Project Topic: Discussed what projects participants will make on their 6th sem Project .

• The Impact of AI in Programming: Discussed how AI tools enhance developer productivity and innovation.

• Version Control with Git and GitHub: Hands-on exploration of Git commands, repositories, and collaboration.

• Building a Professional Online Presence: Insights into leveraging LinkedIn and GitHub for career advancement.

• The Art of Resume Writing: Tips on crafting impactful resumes tailored for tech roles.

Activities:

• Conducted mock Git collaborations and repository sharing.

• Interactive session on creating effective resumes.

Projects Completed

• Sticky sidebars and responsive headers using Tailwind CSS.

• Button animations with React and Tailwind.

• A full-fledged React e-commerce app showcasing routing and state management.

View Gallery...