Web Dev presentation day1

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. Front End Web-Dev
Workshop 2023

4. Web Development Lead
Swikrit Shukla
2nd 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. Differences b/w Frontend and Backend

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. CSS (Cascading Style Sheets)

18. ● 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: -

19. Ways of including CSS

20. CSS Document Structure

21. ● background
● box-sizing
● color
● background-color
● opacity
● transition
● rotation
● padding
● margin
CSS Properties
● width
● height
● display
● font-size
● font-family
● border

22. Box Model in Css

23. Hands On