GDG-USAR Tech winter break 2024 USAR.pdf

GDG Tech Winter Break
Web Dev Session

Contents :-
• HTML Basics
• CSS Basics – style your web page
• JavaScript –Adding Interactivity to your website
• DOM (Document Object Model)
• Node JS
• Intro to ReactJS

HTML Basics
Introduction to Web Development

Overview
• HTML stands for Hypertext Markup Language.
• It is used to create the structure of web pages.
• Common elements include headings, paragraphs, lists,
links, and images.

Focus Areas
• Understand the structure of an HTML document.
• Learn common tags and their uses:
🠶 - Headings (<h1> to <h6>).
🠶 - Paragraphs (<p>).
🠶 - Links (<a href>).
🠶 - Images (<img>).
🠶 - Lists (<ul>, <ol>, <li>).

Practical Exercise
🠶 • Create a basic HTML page with:
🠶 - A heading (e.g., 'Welcome to My Page').
🠶 - A paragraph about yourself.
🠶 - A list of hobbies.
🠶 - Links to favorite websites.
🠶 - An image of your choice.

Activity
🠶 • Build a personal webpage using
HTML:
🠶 - Add a heading and paragraph.
🠶 - Include a list and a link.
🠶 - Embed an image to complete the page.

Helpful Resources
🠶 W3Schools HTML Tutorial
🠶 MDN Web Docs: HTML
Basics
🠶 HTML Dog: HTML Beginner
Tutorial

Next Steps
• Experiment with different HTML tags.
• Create more pages and link them together.
• Get ready to learn CSS for styling your webpage.

How CSS Works
🠶 CSS
Syntax:
🠶 CSS Types:
🠶 - Inline CSS
🠶 - Internal CSS (in <style>
tags)
🠶 - External CSS (linked
.css file)

Selectors and Properties
🠶
Selectors:
🠶 Properties:
🠶 - color, font-size, background-color, margin,
padding.

CSS Basics - Styling
YourWebpage
Learn how to make your webpage visually appealing with
CSS!

What isCSS?
• CSS stands forCascading Style Sheets.
• It is used to style and layout web pages, including:
• -Changing colors, fonts, and spacing.
• -Adjusting layouts for different devices (responsive
design).

How CSS Works
• CSS Syntax:
• CSSTypes:
• - Inline CSS
• - InternalCSS (in <style> tags)
• - ExternalCSS (linked .css file)

Selectors and Properties
• Selectors:
• Properties:
• - color, font-size, background-color, margin, padding.

StylingText
• Change the look of text using:
• - font-family
• - font-size
• - color
• - text-align

Backgrounds and Images
• Use background-color to change the background.
• Add or adjust background images:
• body {
• background-color: lightblue;
• background-image: url('background.jpg');
• }

Practical Exercise
• Apply styles to yourWeek 1 HTML page:
• - Add a background color to the <body>.
• - Style the <h1> and <p> elements.
• - Adjust the image size and add a border.
• - Change the font of the list items (<ul>).
• Save the CSS in a file named styles.css and link it to your
HTML.

Helpful Resources
• MDNWeb Docs: Introduction to the DOM
• JavaScript.info: DOM Manipulation
• MDNWeb Docs:Working with Events

JavaScript Basics -
Adding Interactivity
to Your Webpage
LEARN HOW TO MAKE YOUR WEBPAGE DYNAMIC
AND INTERACTIVE!

What is JavaScript?
• JavaScript is a programming language for the web.
• It runs in the browser to make web pages interactive.
• Examples of what JavaScript can do:
- Respond to user actions (e.g., button clicks).
- Manipulate HTML and CSS dynamically.
- Validate forms, fetch data, and more!

Basic Syntax
// This is a comment
let name = "Kanak"; // Variable declaration
console.log("Hello, " + name); // Print to the console
Key Concepts:
- Variables: let, const, var
- Data types: Strings, Numbers, Booleans

Adding JavaScript to Your Page
1. Inline Script:
<script>
alert("Welcome to my website!");
</script>
2. External File:
<script src="script.js"></script>

Interactivity Example: Change
Text with a Button
HTML:
<button onclick="changeText()">Click Me</button>
<p id="message">Hello, World!</p>
JavaScript:
function changeText() {
document.getElementById("message").textcontent = "You clicked the
button!";
}

Practical Activity
1. Add a button to your HTML page.
2. Write a JavaScript function to:
- Change text.
- Display an alert box.
3. Experiment with different interactive behaviors.
Save the script in a file named script.js and link it to your HTML file.

Homework and Activities
1. Enhance your webpage with JavaScript:
- Add interactive buttons.
- Display dynamic content.
2. Try creating an alert-based quiz or message on a button click

Helpful Resources
W3Schools JavaScript Tutorial
MDN Web Docs: JavaScript Basics
JavaScript.info: The Modern JavaScript Tutorial

How can access the nodes?
►By their name or Id (it will allow you to work with one element, and it's the
easiest way)
►GetElementByName(NodeName)
►GetElementByld(IdName)
►document.querySelector(NodeName)
►By Tag Nam e (GetElem entsByTagNam e), it will return array of nodes
►By their relation to parent, child, sibling
(nextSibling,previousSibling,parentNode,lastchild, firstchild, childNode) , childNode[O] ==
first child

Build Dynamic Web
Apps with Node.js &
Express
Focus: Mastering Routing and CRUD
Presenter: Parikshit Pandey
Date: 8 December 2024

What is Node.js?
JavaScript Runtime
Node.js is a JavaScript runtime environment that enables you to
execute JavaScript code outside of a web browser. It's built on
Chrome's V8 JavaScript engine, making it fast and efficient.
Server-Side Applications
Node.js allows you to build server-side applications, handling
tasks like networking, file system interactions, and database
management, all within a single language: JavaScript.

Node.js Runtime and Features
1 Event-Driven
Architecture
Node.js utilizes an event-driven, non-
blocking I/O model for efficient
concurrent request handling,
preventing main thread blockage.
2 Package Manager (npm)
Node.js boasts a powerful package
manager (npm), offering access to a
vast library of reusable modules and
simplifying development.
3 Lightweight and
Scalable
Node.js's lightweight and scalable
nature makes it ideal for
applications needing to handle
numerous concurrent users without
performance compromise.

Introduction to Express.js
Express.js is a fast, unopinionated, minimalist web framework for Node.js. It provides a streamlined approach to building web
applications, simplifying routing, middleware, and handling HTTP requests. It's highly customizable and allows developers to build robust
applications with minimal boilerplate code.

Routing in Express.js
1
Define Routes
Express.js allows you to define routes
that map specific URL paths to
corresponding functions to handle HTTP
requests.
2
Handle HTTP Methods
You can specify the HTTP methods (GET,
POST, PUT, DELETE) associated with
each route to handle different types of
requests.
3
Dynamic Route Parameters
Express.js supports dynamic route
parameters, enabling you to create
routes that handle various URL paths
based on user input.

Handling HTTP Requests and Responses
Request Object
The request object provides
information about the incoming
request, including headers, URL
parameters, and the request body.
Response Object
The response object allows you to send
back a response to the client,
specifying the status code, headers,
and the response body.
Middleware
Middleware functions are executed in
the middle of a request-response cycle,
allowing you to perform actions like
authentication, logging, or data
validation.

CRUD Operations with
Express.js
Create
Use the POST method to create
new resources in your database.
Express.js provides methods for
handling form data and JSON
payloads.
Read
The GET method is used to
retrieve existing resources. You
can use query parameters to filter,
sort, and paginate your data.
Update
The PUT or PATCH methods allow
you to update existing resources.
Specify the resource ID and the
updated data in the request body.
Delete
The DELETE method removes a
resource from your database. You
can use query parameters to
specify the ID of the resource to
be deleted.

Real-World Use Cases of
Node.js and Express.js
Web Applications
Node.js and Express.js are ideal for building scalable, real-time web applications
like social media platforms, chat applications, and e-commerce websites.
Mobile Backends
They power mobile application backends, handling API requests, data storage,
and authentication for mobile apps.
Cloud Functions
Node.js and Express.js can be used to build serverless functions on cloud
platforms like AWS Lambda or Google Cloud Functions.

Live Code Demonstrations
Let's dive into some practical examples. We'll walk through building a simple
web application using Node.js and Express.js to demonstrate core concepts like
routing, HTTP requests, and database interactions.

Conclusion and Key Takeaways
This presentation has provided a foundation for understanding Node.js and Express.js. Key takeaways include the runtime environment,
features like event-driven architecture and npm, and the core functionalities of Express.js, including routing, middleware, and CRUD
operations. You can use these tools to create robust and scalable web applications.

GDG-USAR Tech winter break 2024 USAR.pdf

GDG-USAR Tech winter break 2024 USAR.pdf

More Related Content

Similar to GDG-USAR Tech winter break 2024 USAR.pdf

Recently uploaded

GDG-USAR Tech winter break 2024 USAR.pdf