front-end web ui framework bootstrap - imran ihsanimranihsan.com/upload/lecture/rww1801.pdf•...
TRANSCRIPT
![Page 1: Front-end Web UI Framework BootStrap - Imran Ihsanimranihsan.com/upload/lecture/RWW1801.pdf• Hybrid Mobile Frameworks: Ionic, Cordova and NativeScript • Server-side Development:](https://reader036.vdocuments.site/reader036/viewer/2022062311/5ee14c16ad6a402d666c3a83/html5/thumbnails/1.jpg)
Imran IhsanAssistant Professor, Department of Computer ScienceAir University, Islamabad, Pakistanwww.imranihsan.com
Responsive Web Design – BootStrap
Front-end Web UI Framework – BootStrap
Course Overview
![Page 2: Front-end Web UI Framework BootStrap - Imran Ihsanimranihsan.com/upload/lecture/RWW1801.pdf• Hybrid Mobile Frameworks: Ionic, Cordova and NativeScript • Server-side Development:](https://reader036.vdocuments.site/reader036/viewer/2022062311/5ee14c16ad6a402d666c3a83/html5/thumbnails/2.jpg)
Expected Background
You should have good working knowledge of:
– HTML
– CSS
– JavaScript
![Page 3: Front-end Web UI Framework BootStrap - Imran Ihsanimranihsan.com/upload/lecture/RWW1801.pdf• Hybrid Mobile Frameworks: Ionic, Cordova and NativeScript • Server-side Development:](https://reader036.vdocuments.site/reader036/viewer/2022062311/5ee14c16ad6a402d666c3a83/html5/thumbnails/3.jpg)
Web Design and Development
Design
• User Interface (UI)/ User Experience (UX) Design
• Visual Design
• Prototyping
• Colors, Graphics and Animation
Development, Building and Deployment
• Web UI Frameworks: Bootstrap 4
• JavaScript Frameworks: Angular
• Hybrid Mobile Frameworks: Ionic, Cordova and NativeScript
• Server-side Development: Node + Express + MongoDB
![Page 4: Front-end Web UI Framework BootStrap - Imran Ihsanimranihsan.com/upload/lecture/RWW1801.pdf• Hybrid Mobile Frameworks: Ionic, Cordova and NativeScript • Server-side Development:](https://reader036.vdocuments.site/reader036/viewer/2022062311/5ee14c16ad6a402d666c3a83/html5/thumbnails/4.jpg)
Full Stack Web Development
![Page 5: Front-end Web UI Framework BootStrap - Imran Ihsanimranihsan.com/upload/lecture/RWW1801.pdf• Hybrid Mobile Frameworks: Ionic, Cordova and NativeScript • Server-side Development:](https://reader036.vdocuments.site/reader036/viewer/2022062311/5ee14c16ad6a402d666c3a83/html5/thumbnails/5.jpg)
Outline
Bootstrap
Responsive Design and Bootstrap Grid System
Bootstrap CSS and JavaScript Components
Web Tools:
Git
Node.js and NPM
Grunt and Gulp
![Page 6: Front-end Web UI Framework BootStrap - Imran Ihsanimranihsan.com/upload/lecture/RWW1801.pdf• Hybrid Mobile Frameworks: Ionic, Cordova and NativeScript • Server-side Development:](https://reader036.vdocuments.site/reader036/viewer/2022062311/5ee14c16ad6a402d666c3a83/html5/thumbnails/6.jpg)
Bootstrap Overview
Full Stack Web Development: The Big Picture
Setting up your Development Environment:
Git and Node
Introduction to Bootstrap
Responsive Design and Bootstrap Grid System
Assignment 1
![Page 7: Front-end Web UI Framework BootStrap - Imran Ihsanimranihsan.com/upload/lecture/RWW1801.pdf• Hybrid Mobile Frameworks: Ionic, Cordova and NativeScript • Server-side Development:](https://reader036.vdocuments.site/reader036/viewer/2022062311/5ee14c16ad6a402d666c3a83/html5/thumbnails/7.jpg)
Bootstrap CSS Components
Navigation and Navigation Bar
User Input: Buttons and Forms
Displaying Content: Tables and Cards
Images and Media:
Images, Thumbnails, Media Objects
Alerting Users: Tags, Alerts, Progress Bars
Assignment 2
![Page 8: Front-end Web UI Framework BootStrap - Imran Ihsanimranihsan.com/upload/lecture/RWW1801.pdf• Hybrid Mobile Frameworks: Ionic, Cordova and NativeScript • Server-side Development:](https://reader036.vdocuments.site/reader036/viewer/2022062311/5ee14c16ad6a402d666c3a83/html5/thumbnails/8.jpg)
Bootstrap JavaScript Components
Bootstrap JavaScript Components Overview
Tabs, Pills and Tabbed Navigation
Hide and Seek: Collapse and Accordion
Revealing Content: Tooltips, Popovers & Modals
Carousel
Assignment 3
![Page 9: Front-end Web UI Framework BootStrap - Imran Ihsanimranihsan.com/upload/lecture/RWW1801.pdf• Hybrid Mobile Frameworks: Ionic, Cordova and NativeScript • Server-side Development:](https://reader036.vdocuments.site/reader036/viewer/2022062311/5ee14c16ad6a402d666c3a83/html5/thumbnails/9.jpg)
Web Tools
Bootstrap and JQuery
Less is More!: Less and Sass
Building and Deployment: NPM Scripts
Building and Deployment: Task Runners:
Grunt and Gulp
Assignment 4
![Page 10: Front-end Web UI Framework BootStrap - Imran Ihsanimranihsan.com/upload/lecture/RWW1801.pdf• Hybrid Mobile Frameworks: Ionic, Cordova and NativeScript • Server-side Development:](https://reader036.vdocuments.site/reader036/viewer/2022062311/5ee14c16ad6a402d666c3a83/html5/thumbnails/10.jpg)
Full Stack Development
![Page 11: Front-end Web UI Framework BootStrap - Imran Ihsanimranihsan.com/upload/lecture/RWW1801.pdf• Hybrid Mobile Frameworks: Ionic, Cordova and NativeScript • Server-side Development:](https://reader036.vdocuments.site/reader036/viewer/2022062311/5ee14c16ad6a402d666c3a83/html5/thumbnails/11.jpg)
Front end and Back end
Front end / Client-side
HTML, CSS and Javascript
Back end / Server-side
Various technologies and approaches
PHP, Java, ASP.NET, Ruby, Python
![Page 12: Front-end Web UI Framework BootStrap - Imran Ihsanimranihsan.com/upload/lecture/RWW1801.pdf• Hybrid Mobile Frameworks: Ionic, Cordova and NativeScript • Server-side Development:](https://reader036.vdocuments.site/reader036/viewer/2022062311/5ee14c16ad6a402d666c3a83/html5/thumbnails/12.jpg)
Three Tier Architecture
![Page 13: Front-end Web UI Framework BootStrap - Imran Ihsanimranihsan.com/upload/lecture/RWW1801.pdf• Hybrid Mobile Frameworks: Ionic, Cordova and NativeScript • Server-side Development:](https://reader036.vdocuments.site/reader036/viewer/2022062311/5ee14c16ad6a402d666c3a83/html5/thumbnails/13.jpg)
Traditional Web Development
![Page 14: Front-end Web UI Framework BootStrap - Imran Ihsanimranihsan.com/upload/lecture/RWW1801.pdf• Hybrid Mobile Frameworks: Ionic, Cordova and NativeScript • Server-side Development:](https://reader036.vdocuments.site/reader036/viewer/2022062311/5ee14c16ad6a402d666c3a83/html5/thumbnails/14.jpg)
Full Stack JavaScript Development
![Page 15: Front-end Web UI Framework BootStrap - Imran Ihsanimranihsan.com/upload/lecture/RWW1801.pdf• Hybrid Mobile Frameworks: Ionic, Cordova and NativeScript • Server-side Development:](https://reader036.vdocuments.site/reader036/viewer/2022062311/5ee14c16ad6a402d666c3a83/html5/thumbnails/15.jpg)
Full Stack Web Development