Your SlideShare is downloading. ×
HTML Bootstrap Workshop
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

HTML Bootstrap Workshop

593
views

Published on

Published in: Education

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
593
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Advanced HTML / CSS
  • 2. Recap from last time
  • 3. HTML CSS <p class=“foo”>Hello</p> .foo { background: white; color: blue; margin-left: 20px; } HTML objects are styled using CSS!
  • 4. HTML CSS Markup language • .html file extension • Contains actual content • • Style sheets • .css file extension • Contains no content, only styling
  • 5. 1. Create a project folder 2. Create a file called index.html 3. Write a basic “Hello World” page (don’t forget title, header and body!)
  • 6. 1. Create a stylesheet style.css 2. Link to your stylesheet <link href=“” rel=“stylesheet”> 3. Give your title a color.
  • 7. 1. Create two more files about.html & contact.html 2. Create a list of links from index.html 3. Copy the content from index to the other two pages
  • 8. We have a basic website!
  • 9. Now let’s add some styling…
  • 10. http://www.getbootstrap.com
  • 11. Navbar Copy-paste Basic Navbar into top of HMTL body • Inspect element with Chrome or Firefox Firebug! • Remove stuff we don’t need • Put a paragraph ( <p>! ) below the header •
  • 12. Grid Skeleton for modern Websites • 12 columns with total span width of 960px (width container) • Should be placed within container ( <div class=“container”> ) • Coluns should be placed within row • ! => Make two rows; 1 with 2 columns and one with 3
  • 13. Lorem ipsum http://www.lipsum.com
  • 14. Buttons Bootstrap gives several colours AND sizes! • They are classes, so they an be applied to links too! • Add a large “succcess” button below your tagline •
  • 15. Icons • Used as span class: <span class="glyphicon glyphiconstar”></span> ! They size with the element they span! • Add a large “succcess” button below your tagline • Put a star icon before all your three banner elements •
  • 16. Overruling Bootstrap styling The lowest css file gets priority over the ones declared before • Good site for colors: flatuicolors.com • Nested elements get priority: • <div class=“jumbotron”>! ! <h1>Foo</h1>! </div> h1 {! ! color: green;! } .jumbotron h1 {! ! color: blue;! } You can change this by using !important
  • 17. Patterns http://www.subtlepatterns.com
  • 18. Javascript Introduced in 1996 by Netscape • Originally meant to manipulate Document Object Model (DOM) • ! ! ! ! • Always activate JS itself and JS libraries you use at the bottom of your Webpage for better performance: • Let’s activate a Javascript Modal / Layover
  • 19. Final Result
  • 20. Deploy http://www.knownly.net
  • 21. We have a live website!
  • 22. Some nice examples http://getbootstrap.com/gettingstarted/#examples