Frontend Fiesta
- 1. Complete Web-development Roadmap Web Devlopment Workshop By GDSC DAVIET
- 2. Introduction HIMANSHU The goal of our session is to give you an overview of what Web Development is. I will guide you on how to start your Web Development journey, what stack to choose and where to learn. @_himanshu_325
- 3. Let's begin! Are you ready?
- 5. M - MongoDB E - Express R - React N - Node Start
- 6. Our journey roadmap 1 2 3 connecting backend with frontend Redux Done DevOps JavaScript Express MongoDB Milestone #3 Milestone #1 Milestone #2 Ultimate Goal Backend NodeJS, ExpressJS and MongoDB Front End Libraries like ReactJS front end including html, css and javascript How internet works React
- 7. 1 Scrimba 2 Freecodecamp 3 MDN Docs 4 W3Schools HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages Time: 15% HTML & CSS Basics of Web Development
- 8. Anatomy of a web page Page metadata Elements Attributes Layout & semantic markup Lists Emphasising Citations & quotes Abbreviations Details & addresses Superscript & subscript Adding code snippets Times & dates Hyperlinks Forms Tables Media Responsive enhancements Accessibility SEO enhancements HTML Styling HTML, just like the skeleton, has little to do with style & appearance.
- 9. CSS Logic CSS (Cascading Style Sheet) is concerned with the physical appearance of a web page. If we say HTML is the skeleton then CSS is what we see, the body Language fundamentals Selectors Inheritance & cascading Values & units Colors States The box model DOM flow Layout Alignment Positioning Sizing Spacing Fonts & typography Images & media Media queries Responsive design Animations & transforms Shorthand syntax Organisation Methodologies Debugging styles Legacy browsers
- 10. JavaScript Designing JavaScript (JS) gives us the ability to make interactive, feature rich web pages. In its most basic form it allows us to trigger events when certain conditions are met, like when a user clicks a button. What is JS & ECMAScript? Types & Data structures Declarations & scope Control flow & Errors Targeting & manipulating the DOM. Events & UI interaction Iterating / Loops Functions Expressions & operators Numbers, maths & dates Strings Arrays Objects & Classes More collection types Promises & async/await Advanced functions Modules Security Debugging Legacy browsers
- 11. 1 2 GET POST Server PUT Client HTTP Methods Server - Client How Web Works What happens when you view a webpage in a web browser on your computer or phone Lets make the web work
- 12. 1 2 NodeJS As an asynchronous event-driven JavaScript runtime. Package Manager NPM/Yarn Narive APIS - Filesystem, HTTP
- 13. Servers It is a back end web application framework for Node.js Express MongoDB MongoDB is a source-available cross-platform document- oriented database program Database Servers with NodeJS The Node. js framework can be used to develop web servers using the 'http' module
- 14. Express VS Node
- 15. 1 2 3 Additional Stuff Authentication and Authorization Sessions/ JWT Fetch / Axios Libraries Pug EJS Nunjucks Templating Engines Sockets.io Passport.js Postman VSCode Mongo ose.js MongoDB API Testing Libraries
- 16. Projects Learn By Building Projects Express NodeJS MongoDB Real-time chat apps Web Scraper Complex Single-Page Applications Basic Users System 1. Book directory Real-time Collaboration Apps Keep Building
- 17. React Roadmap Vue React Angular Choco cake! Yaaayyyy! - Noriko React JS Front-end JavaScript library for building user interfaces or UI components. It is maintained by Facebook. Basics JSX Styling Class Components Functional Components
- 18. 1 2 3 5 4 Hooks State Management - Redux Styling - Chakra UI / Tailwind CSS Mobile Development - React Native Next JS