Download presentation
Presentation is loading. Please wait.
Published byNathan Morgan Modified over 9 years ago
1
Frontend - HTML5 - CSS3 - Bootstrap 3.x
3
SemanticsPerformanceCSS3
4
Semantics,
5
Semantics, Form Types: email, url, number, range, date, search… Form validation Required fields WYSIWYG Edit inline ‘ContentEditable’
6
CSS Mistakes Shorthand Over-Qualifying Selectors Duplicate CSS3 - http://css3generator.com/http://css3generator.com/ Border radius Box shadow Gradient
7
Complete framework HTML5 BoilerplateBootstrapJquery UIFont-Awesome
8
Bootstrap 3 – How to build Step 1: http://www.initializr.com/http://www.initializr.com/ Step 2: http://www.bootstrapzero.com/http://www.bootstrapzero.com/ Step 3: Customize Step 4: Testing (responsive) ◦ Firefox Web Developer Tool Step 5: Testing (browsers) ◦ https://browsershots.org/ https://browsershots.org/
9
Bootstrap 3 - Responsive “Mobile first” = Mobile friendly Devices xssmmdlg 768px992px1200px
10
Bootstrap 3 - Grid http://960.gs/ 12 columns “row” class “col-” class “fixed” vs “fluid” width
11
Bootstrap 3 - Form Style ◦ Basic ◦ Inline ◦ Horizontal Validation states
12
Bootstrap 3 - Images Shapes ◦ img-rounded ◦ img-circle ◦ img-thumbnail Responsive ◦ “img-responsive”
13
Bootstrap 3 - Components Icons Navigation ◦ Navs ◦ Navbar Pagination Thumbnails Alerts
14
Bootstrap 3 - Javascript Modals Tab Collapse Carousel
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.