Presentation is loading. Please wait.

Presentation is loading. Please wait.

Frontend - HTML5 - CSS3 - Bootstrap 3.x. SemanticsPerformanceCSS3.

Similar presentations


Presentation on theme: "Frontend - HTML5 - CSS3 - Bootstrap 3.x. SemanticsPerformanceCSS3."— Presentation transcript:

1 Frontend - HTML5 - CSS3 - Bootstrap 3.x

2

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


Download ppt "Frontend - HTML5 - CSS3 - Bootstrap 3.x. SemanticsPerformanceCSS3."

Similar presentations


Ads by Google