Table of contents
Beyond the Browser: Freshers Dive into Web Dev Basics
“What's the best way to get lost and found at the same time? Start coding!" This phrase perfectly encapsulated the spirit of "Beyond the Browser," a lively workshop hosted by the Microsoft Learn Student Club (MLSC) for first-year engineering students. Held on October 19, 2024, at the Sharad Arena on Bibwewadi Campus, this event gathered 360 freshers eager to learn the essentials of web development.
From the first welcome cheer to the final applause, the day was an exhilarating mix of engaging sessions, competitive quizzes, and hands-on projects. Participants journeyed from having zero coding knowledge to crafting their own websites and even designing games. Guided by experienced mentors and cheered on by their peers, these budding developers didn’t just attend an event; the workshop wasn’t merely about learning to code—it was an immersive experience where creativity met logic, and each line of code became a step towards discovering a new passion.
The aim? To take students from zero coding knowledge to creating a website and even a game—all while having a blast.
Excited yet? Let’s dive deeper into what made this event unforgettable.
1. The Kickoff Session: Placements, Pathways, and a Rapid-Fire Q&A
The day started with a highly-anticipated guest session featuring Poorva Thosar, a Software Engineer with 2+ years in Product Development, currently working at Microsoft.Poorva shared valuable insights on navigating college life and preparing for a successful tech career. Freshers learned her strategies for competitive programming, DSA (Data Structures and Algorithms), communication skills, and interview preparation.
One of the most inspiring parts was her unfiltered recount of her own college journey. In her first year, she participated in various clubs to explore, build a network, and gain experience. By the second year, she strategically narrowed her focus to tech clubs, honing her skills in her preferred field. She advised students to make the most of their first year academically, saying, “If you’re aiming for a 9 CGPA or higher, first year is your best shot!” She also highlighted her third-year experience, where she dedicated herself to preparing for internships, dealing with rejections, identifying her weaknesses, and working through them to land her dream roles.
As a full-stack developer, Poorva described her experience with multiple tools and languages, including React, TypeScript, HTML, CSS, JavaScript, and Bootstrap for front-end development and C#, .NET, PHP, Go, Java, Spring Boot, and Python for back-end work. Her practical insights showed students what it takes to grow from college projects to production-ready code.
The session wrapped up with an engaging rapid-fire Q&A.Students asked her everything from “Java or C++?” to “Frontend or Backend?” She shared her love for backend development, and her perspective on Java’s versatility in real-world applications had the room buzzing.
2. HTML Workshop: Building the Basics
The coding sessions began with HTML, led by club members guiding students through creating their first webpage. Starting with the basic structure, students added paragraphs, images, and even a table that displayed the day's presenters. As they joked, "HTML is the skeleton, and we’re here to bring it to life!" A light-hearted moment followed when someone quipped, "Well, we successfully coded HTML without any errors—because HTML doesn’t make errors!" which had everyone laughing as they appreciated HTML’s forgiving nature.
Once the basics were covered, a quick quiz session on HTML fundamentals was held on the quiz platform Menti. The competitive spirit was high, and winners received goodies like pens, badges, and stickers. This set the stage for the next step in their web dev journey.
3. CSS Styling: Adding Color to Code
With the HTML foundation set, the next session covered CSS, the styling hero that transforms structure into something visually appealing. Students learned how to change colors, adjust layouts, and apply background images, creating a professional look for their webpages. It was all about dressing up HTML: “HTML is the bones; CSS is the outfit—no pajamas for our website!”
Another quiz followed the CSS session, testing students on concepts like styling syntax and properties. The prizes kept the energy up, with more students snagging goodies to celebrate their progress.
4. JavaScript & Bootstrap: Adding Interaction and Responsive Design
The final teaching session introduced JavaScript, the magic that brings interactivity to websites. Students learned simple functions and event-driven actions, gaining skills to make their pages dynamic with elements that respond to button clicks and input changes. This part of the workshop was particularly exciting, as students realized they could bring their sites to life, moving beyond static pages.
To expand on this, students were also introduced to Bootstrap, a popular CSS framework for building responsive and mobile-first websites. They learned about Bootstrap’s grid system, pre-designed components, and utilities that make creating clean, responsive layouts easier. With Bootstrap, they could now make their websites look great on any screen size.
Following the session, a quiz on JavaScript and Bootstrap basics tested students’ knowledge, with prizes for those who mastered these new skills.
5. Game Time: Building Whack-a-Ghost
After the coding lessons, students dove into their first project—Whack-a-Ghost. This simple game allowed them to put their newfound HTML, CSS, JavaScript, and Bootstrap skills into action. With the goal of making the game as interactive and engaging as possible, students added personalized tweaks, showing off creativity and problem-solving skills that impressed even the mentors.
6. Wrapping Up and Looking Forward
By the end of the event, everyone had a better understanding of web development and the first steps they could take in their coding journey. The MLSC team reminded them that while this was only an introduction, the world of web development has endless opportunities waiting to be explored. As one fresher said, "Coding feels like magic… until you hit an error. Then it’s more like a mystery novel. But hey, I’m learning to love the mystery."