Download to read offline
More Related Content
Similar to Web dev presentation
![CH-1[Introduction to web technology].pdf](https://cdn.slidesharecdn.com/ss_thumbnails/ch-1introductiontowebtechnology-250304052552-9237dd95-thumbnail.jpg?width=640&height=640&fit=bounds)
Web dev presentation
- 1. Ground Rules ! Forthis 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.
- 3.
- 4. Web Development Lead RupalDas Pre Final Year
- 5. • Why WebDevelopment • How web works • HTML vs CSS vs JS • HTML • CSS • BootStrap • Javascript Table Of Contents
- 6.
- 7. 7 How Web Works? ClientServer DNS Request Response Google 126.46.192.58
- 8.
- 9. Front-End Development HTML VsCSS Vs JavaScript
- 10. Code Editors & Manymore…………….
- 11.
- 12. HTML (Hyper TextMarkup Language) <h1>Hello World</h1> Opening tag Closing tag <hr>,<img>,<br> (Self Closing tag) Content
- 13.
- 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.
- 16.
- 17. Box Model inCss
- 18. CSS (Cascading StyleSheets)
- 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.
- 21.
- 22. ● border ● align ●color ● background-color ● opacity ● transition ● rotation ● padding ● margin CSS Properties ● width ● height ● display ● font-size ● font-family
- 23.
- 24.
- 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.
- 30. Membership Join Us OnDiscord !! Join Us On Discord !!
- 31.
- 32.
- 33.
- 34. Ground Rules ! Forthis 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.
- 36.
- 37. • Why WebDevelopment • How web works • HTML vs CSS vs JS • HTML • CSS • BootStrap • Javascript Table Of Contents
- 38.
- 39. JavaScript JavaScript is theprogramming 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.
- 42. Program in JavaScript UsingMath.random() Random no Generation Program
- 43. Let's Build aProject
- 45.
- 46. Membership Join Us OnDiscord !! Join Us On Discord !!
- 47.
- 48.