Modern Web Development

VET IAS School of Computing, Department of Computer Science jointly organized a workshop titled "Modern Web Development Techniques Building Application-Oriented Projects" from 9th December to 14th December 2024. The event featured Mr. Yoga Prakash S, Web Developer and Trainer from IDM Tech Park, Coimbatore, as the resource person.

On Day 1, the workshop was designed to equip the students with hands-on skills in modern web development practices, focusing on creating application-oriented projects. Attendees learned advanced techniques and tools to build dynamic and responsive web applications using Advanced HTML with CSS, empowering them to design and develop industry-relevant solutions effectively.

On Day 2, A wide range of topics were covered in today's sessions, including web design, which involves creating a device-specific webpage utilizing an event handler and a cascading style sheet and a brief introduction to web page animation. By the workshop's conclusion, students had mastered the use of current web technologies to effectively address pressing issues.

On Day 3, the session focused on Bootstrap and CSS, students learned how to use Bootstrap's grid system to create responsive layouts and implement common components like buttons and navigation bars. They gained an understanding of CSS basics, including selectors, properties, and the box model. The session covered how to style web elements and make designs responsive across different devices. Students also explored advanced layout techniques using Flexbox and CSS Grid. They learn how to create a login page for the application. Practical exercises helped students apply their learning to real projects. By the end, they were confident in using Bootstrap and CSS to build modern, mobile-first websites.

On Day 4, the session focused on introducing JavaScript, Node.js, and React.js to help students understand modern web development. We began by covering the basics of JavaScript, including variables, functions, and data types, along with important ES6 features like arrow functions and template literals. Moving to Node.js, we explored its event-driven, non-blocking architecture and how it allows for building scalable server-side applications, emphasizing the use of npm for managing dependencies. In React.js, we covered the core concepts of components, JSX, state, and props, along with lifecycle methods and event handling. Finally, we discussed how these technologies can be combined to build full-stack applications, where Node.js serves as the backend and React.js handles the frontend. The session provided a solid foundation for developing dynamic and efficient web applications.

On Day 5, the session focused on backend development and the role of npm (Node Package Manager) in Node.js projects. We discussed how Node.js, with its non-blocking, event-driven architecture, is used to build efficient server-side applications, while npm helps manage dependencies and simplifies project setup. Students learned the difference between various backend technologies and how Node.js stands out for its scalability. To inspire CS students, we explored project ideas like building RESTful APIs, real-time chat applications, and task management systems. These projects provide hands-on experience with backend logic, databases, and user authentication. The session aimed to prepare students for real-world backend development challenges using Node.js and npm.

On Day 6, the Session focuses on collaborative project allocation and idea sharing, enabling participants to work together on cutting-edge techniques like responsive design, front-end frameworks, and serverless architectures. Attendees will exchange innovative solutions, discuss best practices, and gain hands-on experience building scalable, user-centric web applications. The goal is to foster creativity, knowledge-sharing, and teamwork in the rapidly evolving web development landscape.