- This document provides ground rules and an agenda for an introduction to web development session. Participants are asked to mute themselves and use the chat for questions. - The session will cover why web development, how the web works, HTML vs CSS vs JavaScript, HTML, CSS, Bootstrap, and JavaScript. There will also be hands-on activities and a project. - Contact information is provided for the student organization hosting the session.

1. Ground Rules !
For this session
🔇 Please mute yourself
💬 Use chat box for any queries
😮 Feel free to turn off your video, we don't mind
❌ Please don't spam
🔈 Let us know if you having issues with audio/video
✌ You got questions, shoot them at FAQ session

2. GDSC
Welcome
To
GECBSP

3. Introduction To
Web Development

4. Web Development Lead
Rupal Das
Pre Final Year

5. • Why Web Development
• How web works
• HTML vs CSS vs JS
• HTML
• CSS
• BootStrap
• Javascript
Table Of Contents

6. Why Web Development?

7. 7
How Web Works?
Client Server
DNS
Request
Response
Google 126.46.192.58

8. Submarine Cable map

9. Front-End Development
HTML Vs CSS Vs JavaScript

10. Code Editors
& Many more…………….

11. HTML

12. HTML (Hyper Text Markup Language)
<h1>Hello World</h1>
Opening tag Closing tag
<hr>,<img>,<br> (Self Closing tag)
Content

13. HTML Document
Structure

14. ● <h1>heading tag</h1>
● <p>paragraph tag</p>
● <ol>ordered list</ol>,<ul>unordered list<ul>
● <a href=”#”>anchor tag</a>
● <img>
● <table>table tag<table>
● <div>division tag</div>
● <section>section tag</section>
● <form>form tag</form>
HTML Tags

15. Hands On

16. CSS

17. Box Model in Css

18. CSS (Cascading Style Sheets)

19. ● Tag selector
● Class selector
○ Preceded by a dot(.)
○ Can be used for multiple places
● Id selector
○ Preceded by a hash(#)
○ Can be used for single place
Selectors
Examples: -

20. Ways of including CSS

21. CSS Document Structure

22. ● border
● align
● color
● background-color
● opacity
● transition
● rotation
● padding
● margin
CSS Properties
● width
● height
● display
● font-size
● font-family

23. Hands On

24. Bootstrap

25. What is Bootstrap?
● Bootstrap is a free front-end framework for faster
and easier web development
● Bootstrap includes HTML and CSS based design
templates as well as optional JavaScript plugins.
● Bootstrap also gives you the ability to easily create
responsive designs

26. Why Use Bootstrap?
● Easy to use
● Responsive features
● Mobile-first approach
● Browser compatibility

27. Includes:-
● Typography
● Grid
● Navbar
● Containers
● Buttons
● Panels
● Carousel
● Modal

28. Example with BootStrap

30. Membership󰥓
Join Us On Discord !!
Join Us On Discord !!

31. C
n
n
e
c
t
G
r
o
w
Connect
Learn

32. Membership
bit.ly/dscgecbsp_join

33. How to Contact?
dscgecbsp@gmail.com
https://twitter.com/dscgecbsp/
https://www.linkedin.com/in/dscgecbsp/
https://www.facebook.com/dscgecbsp/
https://www.instagram.com/dscgecbsp/

34. Ground Rules !
For this session
🔇 Please mute yourself
💬 Use chat box for any queries
😮 Feel free to turn off your video, we don't mind
❌ Please don't spam
🔈 Let us know if you having issues with audio/video
✌ You got questions, shoot them at FAQ session

35. GDSC
Welcome
To
GECBSP

36. Introduction To
Web Development
Day 2

37. • Why Web Development
• How web works
• HTML vs CSS vs JS
• HTML
• CSS
• BootStrap
• Javascript
Table Of Contents

38. Javascript

39. JavaScript
JavaScript is the programming language of the Web.
● JavaScript which is often known as JS,is a high-level dynamic programming
language
● It allows client-side scripting to create completely dynamic web applications
and website

40. Introduction to JavaScript
● Ways to include JavaScript
● JavaScript console API
● Variables
● Operators
● Data Types
● Conditionals
● Function
● Objects
● Strings

41. Hands On

42. Program in JavaScript
Using Math.random()
Random no Generation Program

43. Let's Build a Project

45. Membership
bit.ly/dscgecbsp_join

46. Membership󰥓
Join Us On Discord !!
Join Us On Discord !!

47. How to Contact?
dscgecbsp@gmail.com
https://twitter.com/dscgecbsp/
https://www.linkedin.com/in/dscgecbsp/
https://www.facebook.com/dscgecbsp/
https://www.instagram.com/dscgecbsp/

48. C
n
n
e
c
t
G
r
o
w
Connect
Learn