NETX IoT Workshop Session 05 – Front-End and Back-End Development

Description

The fifth session of the NETX IoT Workshop Series , titled “Front-End and Back-End Development” , was conducted on 6th of June from 16:30 to 18:00 at L221A, Faculty of Engineering, University of Sri Jayewardenepura (USJ) . The session was conducted by Mr. Hiran and Mr. Dilum . Objectives of the Session Introduce participants to the fundamentals of web development and the role of front-end and back-end components. Provide an understanding of how web applications communicate through the Internet. Familiarize participants with the basic structure and functionality of front-end development technologies. Introduce the concepts of server-side development and back-end integration. Explain the role of communication protocols in web-based applications. Provide hands-on experience in developing basic web interfaces and integrating front-end components with back-end systems. Learning Outcomes By the end of the session, participants were able to: Understand the concept of the World Wide Web and its role in Internet-based communication. Identify the differences between front-end and back-end development. Understand the basic workflow of the HTTP response cycle. Identify the importance of communication protocols used in web applications. Understand the purpose and functionality of HTML, CSS, and JavaScript in front-end development. Develop a basic web page structure and apply styling and interactive elements. Gain knowledge about integrating front-end interfaces with back-end services. Technical Topics Covered Introduction to Web Technologies Overview of the World Wide Web (WWW) and its role as a global information-sharing system. Understanding the interaction between users, web browsers, servers, and web applications. Introduction to the HTTP request-response cycle. Front-End and Back-End Development Introduction to front-end development and its role in creating user interfaces. Introduction to back-end development and its role in server-side processing and data management. Understanding the relationship between front-end interfaces and back-end services. Internet Communication Protocols Introduction to protocols used for communication between devices over the Internet. Overview of: Transmission Control Protocol (TCP): Connection-oriented communication. Applications such as email services and file transfer. User Datagram Protocol (UDP): Connectionless communication. Applications such as live streaming, VoIP calls, and online gaming. Front-End Development Fundamentals Introduction to the main pillars of front-end development: HTML (HyperText Markup Language): Used for defining the structure of web pages. CSS (Cascading Style Sheets): Used for designing and styling web interfaces. JavaScript: Used for adding functionality, interaction, and dynamic behavior. Practical Activity: Front-End Development Creating a basic HTML webpage. Understanding webpage structure using HTML elements. Applying CSS styling to enhance webpage appearance. Implementing JavaScript-based interactions. Saving and testing web pages using basic development tools. Back-End Integration Introduction to connecting front-end interfaces with back-end systems. Understanding the flow of data between client-side and server-side components. Overview of integrating web interfaces with backend services. Overall, the Front-End and Back-End Development Workshop Session provided participants with fundamental knowledge of modern web development concepts and application structures. Through theoretical discussions and practical activities, participants gained an understanding of web technologies, communication protocols, front-end design principles, and the integration between client-side and server-side components, establishing a foundation for developing IoT-based web applications.