1 / 12

Frontend technique

Frontend technique. Frontend overview. HTML CSS Complete framework: Html5boilerplate Bootstrap. HTML review & mistakes. DOCTYPE Table vs Tableless Block vs Inline Class vs ID Alt text Close tags Encoding special characters. HTML5 - Semantic. DOCTYPE. < header>, <footer >,

ailani
Download Presentation

Frontend technique

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Frontend technique

  2. Frontend overview • HTML • CSS • Complete framework: • Html5boilerplate • Bootstrap

  3. HTML review & mistakes • DOCTYPE • Table vsTableless • Block vs Inline • Class vs ID • Alt text • Close tags • Encoding special characters

  4. HTML5 - Semantic • DOCTYPE • <header>, <footer>, • <aside>, <navigation> • <article>, <section>

  5. HTML5 - Form • Types: color, date, email, number, range… • Form validation • Required fields WYSIWYG • Edit inline ‘ContentEditable’

  6. CSS - Common mistakes • Global styles • Shorthand code • Over-Qualifying Selectors • Unique IDs • Positions CSS3: http://css3generator.com/ • Border radius • Box shadow • Gradient

  7. Complete framework • HTML5 Boilerplate • Bootstrap • Scaffolding • Base CSS • Components • Javascript plugins http://www.initializr.com/

  8. Summary • HTML vs HTML5 • CSS vs CSS3 • H5BP, Bootstrap

  9. Exercise #1 • Duration: 3 days • Deadline: May 17, 2013 • Content: • Use complete framework to build pages • Simple pages without content/styling

More Related