Web Development Workshop 2024

ACM-DBIT organized a two-day web development workshop on the 6th and 7th of August 2024, specifically designed to equip second-year students with essential web development skills. The workshop aimed to provide foundational knowledge crucial for their upcoming mini-projects.

Day 1: Introduction to HTML and CSS

The first day of the workshop commenced promptly at 2:00 PM on the 6th of August 2024. The session began with Ms. Susanne Lobo, Secretary of ACM-DBIT, who introduced the students to HTML. She explained that HTML is the backbone of web content, used to structure and organize elements on a webpage such as text, images, and links. Ms. Lobo emphasized the significance of HTML in ensuring that content is accessible and well-organized across different devices and browsers, laying the groundwork for CSS and JavaScript to create dynamic and visually appealing web pages.

Following this, Mr. Andre Fernandes, Product Designer, elaborated on the basic HTML tags used to build web pages. He explained that HTML tags are the fundamental building blocks that define the structure and meaning of content on a webpage. Mr. Fernandes covered various tags, such as those for headings, paragraphs, links, and images, discussing how these tags work together to categorize content and enable browsers to display it appropriately. He also introduced students to lists, media elements, and the 'href' tag, offering a comprehensive overview of how to construct a webpage using HTML.

The session then moved on to Mr. Joshua Menezes, Chairperson of ACM-DBIT, who introduced CSS (Cascading Style Sheets) and discussed how it is used to style web pages by selecting HTML elements and applying various properties and values. Mr. Menezes covered topics such as the types of CSS, selectors, properties, and styling lists and media elements, demonstrating how CSS can transform the appearance of a webpage. Finally, Mr. Jayesh Wani, Technical Head, continued the focus on CSS by further explaining how to style lists and media elements. He provided practical examples, showcasing how CSS could be used to enhance the design and usability of web pages.

Day 1 concluded with a strong foundation in HTML and CSS, setting the stage for more advanced topics on Day 2.

Day 2: Introduction to JavaScript and Hands-On Practice

The second day of the workshop began at 11:15 AM on the 7th of August 2024. The focus of the day was to build upon the foundational knowledge gained on Day 1 and provide students with practical experience in web development.

Mr. Gaven D’Costa, a B.E. Computer Engineering student, started the session by showcasing a website he had developed as a project. He demonstrated how he used JavaScript to make the website interactive and visually appealing. His presentation served as an inspiration for the students, illustrating the potential of combining HTML, CSS, and JavaScript to create engaging web applications. Mr. D’Costa then introduced JavaScript, explaining its basic concepts and how it can be used effectively to enhance web functionality. He also led the students in a hands-on activity where they created a calculator using HTML, CSS, and JavaScript.

Following Gaven, Mr. Sahil Singh, another B.E. Computer Engineering student, took over the session to cover more advanced JavaScript topics, including the Document Object Model (DOM) and event loops. He provided additional insights and shared his experiences, enriching the students' understanding of how JavaScript interacts with web pages. Mr. Singh also took the time to address and resolve any doubts raised by the participants, ensuring clarity on the topics discussed.

The day concluded with a felicitation ceremony, where the speakers were honored with gifts and certificates. Additionally, all attendees were awarded certificates for their participation, marking the successful completion of the workshop.

This web development workshop equipped second-year students with essential skills in HTML, CSS, and JavaScript, laying a strong foundation for their upcoming projects. The hands-on activities and interactive sessions ensured that the concepts were well-understood and practically applied. With the knowledge gained, the students are now better prepared to embark on their web development journey with confidence.