Front-End Development Frameworks Workshop by Dr. Mohammed Misbhauddin

What is Front-End Development

What is Front-End Development A mix of programming and layout that powers the visuals and interactions of the web.

Web Development Technologies

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

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

Why should I use a framework? TIME BUDGET PRODUCTIVITY EARLY CONCEPT CROSS-BROWSER CROSS-PLATFORM

Bootstrap

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

So what do I need to know before I begin It’s all about classes

Page Layout CSS Grids

▪ Fluid Grid Layout ▪ 12 max grids ▪ Can be nested CSS Grids

Viewport Tiers in Bootstrap xs sm md lg