Web Development - Roadmap to MERN stack development

Web Development

1. Getting started with Web Development By:- Swapnil Narayan Software Engineer at Microsoft

2. About the Speaker Hey there, I’m Swapnil Narayan, a graduate from at IIT(ISM) Dhanbad with Computer Science majors. I’m a Software Engineer at Microsoft India, and have also got offers from Amazon and Oracle for Software Engineering roles. I’m a very passionate Web Dev Instructor and have a decent experience for the same at various Edtech Companies. I have taken webinars with various IITs, NITs, IIITs and other Engineering Colleges in India. I will be your mentor for the Web App Development Session and will walk you through the topics the following slides.

3. Timeline Why learn web dev? Web Dev - Frontend Web Dev - Backend Databases Intro to APIs, JSON IDE’s and Environment

4. Internships GSoC Startups Tech Fests Native Apps Why Web Dev?

5. Frontend Vs Backend https://news.codecademy.com/front-end-vs-back-end/ The front end of an application typically refers to the layer that represents the UI (user interface). It is what a user sees in a website Backend is usually where the login part comes in. It includes the code that runs on the server and is not visible to the user.

6. Timeline Why learn web dev? Web Dev - Frontend Web Dev - Backend Databases Intro to APIs, JSON IDE’s and Environment

7. Web Dev - Frontend

8. Prerequisites Notepad Wordpad GEdit Sublime Atom Chrome Firefox Safari

9. HTML

10. CSS

11. CSS

12. Javascript

13. JS Logic in Web Apps Javascript != Java Libraries - JQuery, NodeJS, ReactJS JSON - JavaScript Object Notation

14. JS console.log alert document.write

15. ReactJS

16. React JS A JavaScript library for building User Interfaces. ReactJS is not a JS framework. It is also known as React or React.js

17. ReactJS - History Designed by Jordan Walke, a Software Engineer at Facebook. First deployed on Facebook News Feed on 2011. In 2013, React was open sourced at JS conference.

18. ReactJS - Features Component based approach. Reusability Modularity DOM updates are handled gracefully. Speed Scalability Huge Community

19. Timeline Why learn web dev? Web Dev - Frontend Web Dev - Backend Databases Intro to APIs, JSON IDE’s and Environment

20. Web Dev - Backend

21. NodeJS Node.js is a JavaScript runtime built on the Chrome V8 JavaScript Engine for executing JS Scripts. Node.js is neither a language nor a framework. It is written in C++ to run JS code on the server.

22. JS - Script for Browser

23. Question was How to run JS Scripts in Server Side?

24. Birth of Node.js

25. Why Node.js? Server Side Development. Creating Web Servers, Business logic and providing Database Access. Node.js runs a single threaded, non-blocking and asynchronous programming which makes it very memory efficient. Huge Community for MERN.

26. PHP

27. PHP Xampp Works with My SQL DB. phpMyAdmin

28. Timeline Why learn web dev? Web Dev - Frontend Web Dev - Backend Databases Intro to APIs, JSON IDE’s and Environment

29. Database

30. Timeline Why learn web dev? Basics of HTML, CSS, JS Chrome Dev Tools Caesar Cipher Intro to APIs, JSON IDE’s and Environment

31. APIs

32. APIs Application programming interface Defines how software communicates GET(easy) - POST(secure)

33. APIs - JSON Dictionary Of Data

34. Timeline Why learn web dev? Basics of HTML, CSS, JS Chrome Dev Tools Caesar Cipher Intro to APIs, JSON IDE’s and Environment

35. VS Code/ Sublime Postman IDEs

36. Timeline Why learn web dev? Basics of HTML, CSS, JS Chrome Dev Tools Caesar Cipher Intro to APIs, JSON IDE’s and Environment

37. Develop Websites/ Apps Collaborate in startups Take online courses Google!! Key Takeaways