Web development is a rapidly advancing field, and the possibilities of virtual events having this education for everyone made things so much more fun learning. Recently, a web development workshop marked the beginning of a tech winter break for the GDG, which transformed everything for them. There is a quick walkthrough event and everything you might know to kick-start your way into web development.
Event Overview
Event Name: Web Development Workshop
Speaker: Vrijraj Singh
Focus: Frontend development, back-end development, tools and career guidance.
Who is it For: A beginner/intermediate learner.
1. Beginner's Crash Course on Web Development
Objective: Understand the building blocks of the web.
Topics Covered:
HTML: Structure of a webpage
CSS: Styling the structure
JavaScript: Adding interactivity
This session was perfect for beginners as it had a complete guide to all the key elements, from how HTML provides the framework of a web page, and how CSS and JS are layered to make a simple, yet perfect website. Everything one needed to know to kick off their journey in web development.
Takeaway: Start simple. Even basic skills like structuring with HTML and styling with CSS can go a long way.
2. Front End Development: Tools & Frameworks
Front-end development is the development of user interfaces that both work properly and look good. This session discussed several important tools:
idx.google.com: To get your coding environment all set.
Frameworks: Tool such as material.io for design resources and fonts.google.com for typography.
Version Control: Git and GitHub, which are essential for collaboration and effectively managing code versions.
3. Backend Development Basics
Backend development deals with the "logic" behind a website. The session covered:
Node.js: Server-side JavaScript, which has applications such as TensorFlow.js.
Databases: Tools like MySQL, MongoDB, Cloud Firestore, and Firebase, which provide backend services.
REST APIs: A deep dive into how data flows seamlessly between the frontend and backend.
- Tools Covered
Google Search Console: Used to sign up for web properties.
Google AI Studio: A browser-based prototyping and testing platform
for generative AI models.
Lighthouse: An automated tool for evaluating and improving the
quality of web pages.
Google Analytics: A powerful analytics tool for tracking user
behavior on websites.Note: All reference materials and tools are open-source.
Key Insight: Backend development skills pair with frontend expertise to pave the way for full-stack developer status.
4. Sample Application
The expert quickly showed us a simple demo of how the front end works. He also showed examples of how you can make any platform like Gmail to be interactive using web development.
5. Career Guidance: Career Paths in Web Development
This session elaborated upon all these career paths involved in web development:
Frontend Developers are specialized at making user interfaces.
Backend Developers focus on server-side operation and management of databases.
Full-Stack Developers have expertise at both frontend and backend.
Specializations could be at areas like UX/UI designing, mobile applications, and more.
The expert provided some excellent advice on how to secure that first job, stressing building projects and networking. The general consensus was obvious: focus on building projects and moving forward in skills step by step.
Everything You Need to Start Web Development
Beginner Roadmap
HTML: Learn how to structure websites effectively.
CSS: Get comfortable with layouts and styling techniques.
JavaScript: Introduce interactivity to your projects.
Projects: Create small, practical applications such as:
1. A personal portfolio
2. A weather app
3. A blog page
Top comments (0)