Front-End Web Development Frameworks

The presentation was used as a preface to talk about front-end development frameworks, its use and advantages before the workshop on using Twitter's Bootstrap for Website Prototyping.

Transcript

1. Front-End Development Frameworks Workshop by Dr. Mohammed Misbhauddin
2. What is Front-End Development
3. What is Front-End Development A mix of programming and layout that powers the visuals and interactions of the web.
4. Web Development Technologies
5. Front-End Development Issues 1. HTML 11. Responsive Web Design 21. HTML5/CSS3 Polyfills 2. CSS 12. Cross-Browser Dev. 22. CMS 3. JavaScript / Ajax 13. Document Object Model 23. Data Formats 4. jQuery 14. CSS Pre-Processors 24. Internationalization 5. Modular coding 15. Version Control 25. Content Strategy 6. CSS Grids 16. HTML5 APIs 26. Offline Web Apps 7. Graceful Degradation 17. Scaffolding, Task Runner 27. Regular Expressions 8. UX / Usability 18. MVC Frameworks 28. SVG 9. Website Speed 19. Accessibility / WAI-ARIA 29. Web Font Embedding 10. Debugging Tools 20. Microdata / formats 50. SEO
6. What is a front-end framework? ”Our goal is to provide a refined, well-documented, and extensive library of flexible design components built with HTML, CSS, and JavaScript for others to build and innovate on.” - Mark Otto creator of Bootstrap
7. Why should I use a framework? TIME BUDGET PRODUCTIVITY EARLY CONCEPT CROSS-BROWSER CROSS-PLATFORM
8. Bootstrap
9. What does Bootstrap Provide? 1. Layout Grid System 11. Transitions 2. Typography 12. Modal 3. Inline Code 13. Dropdown Menus 4. Tables 14. Smooth Scroll 5. Buttons 15. Tabs 6. Images 16. ToolTip 7. Forms 17. Popover 8. Responsive Util. 18. Alert 9. Glyphicons 19. Collapse 10. Nav Bars 20. Carousel JavaScript CSS
10. So what do I need to know before I begin It’s all about classes <sometag class=“……………………….”></sometag>
11. Page Layout CSS Grids
12. ▪ Fluid Grid Layout ▪ 12 max grids ▪ Can be nested CSS Grids
13. Viewport Tiers in Bootstrap xs sm md lg