Advanced HTML / CSS
Recap from last time
HTML

CSS

<p class=“foo”>Hello</p>

.foo {
background: white;
color: blue;
margin-left: 20px;
}

HTML objects are styled ...
HTML

CSS

Markup language
• .html file extension
• Contains actual content

•

•

Style sheets
• .css file extension
• Cont...
1. Create a project folder
2. Create a file called index.html
3. Write a basic “Hello World”
page (don’t forget title, head...
1. Create a stylesheet style.css
2. Link to your stylesheet <link href=“”
rel=“stylesheet”>
3. Give your title a color.
1. Create two more files about.html &
contact.html
2. Create a list of links from index.html
3. Copy the content from index...
We have a basic website!
Now let’s add some styling…
http://www.getbootstrap.com
Navbar
Copy-paste Basic Navbar into top of HMTL body
• Inspect element with Chrome or Firefox Firebug!
• Remove stuff we d...
Grid
Skeleton for modern Websites
• 12 columns with total span width of 960px (width container)
• Should be placed within ...
Lorem ipsum

http://www.lipsum.com
Buttons
Bootstrap gives several colours AND sizes!
• They are classes, so they an be applied to links too!
• Add a large “...
Icons
•

Used as span class: <span class="glyphicon glyphiconstar”></span> !

They size with the element they span!
• Add ...
Overruling Bootstrap styling
The lowest css file gets priority over the ones declared before
• Good site for colors: flatuic...
Patterns

http://www.subtlepatterns.com
Javascript
Introduced in 1996 by Netscape
• Originally meant to manipulate Document Object Model (DOM)
•

!
!
!
!
•

Alway...
Final Result
Deploy

http://www.knownly.net
We have a live website!
Some nice examples

http://getbootstrap.com/gettingstarted/#examples
HTML Bootstrap Workshop
Upcoming SlideShare
Loading in …5
×

HTML Bootstrap Workshop

1,024 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
1,024
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML Bootstrap Workshop

  1. 1. Advanced HTML / CSS
  2. 2. Recap from last time
  3. 3. HTML CSS <p class=“foo”>Hello</p> .foo { background: white; color: blue; margin-left: 20px; } HTML objects are styled using CSS!
  4. 4. HTML CSS Markup language • .html file extension • Contains actual content • • Style sheets • .css file extension • Contains no content, only styling
  5. 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. 6. 1. Create a stylesheet style.css 2. Link to your stylesheet <link href=“” rel=“stylesheet”> 3. Give your title a color.
  7. 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. 8. We have a basic website!
  9. 9. Now let’s add some styling…
  10. 10. http://www.getbootstrap.com
  11. 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. 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. 13. Lorem ipsum http://www.lipsum.com
  14. 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. 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. 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. 17. Patterns http://www.subtlepatterns.com
  18. 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. 19. Final Result
  20. 20. Deploy http://www.knownly.net
  21. 21. We have a live website!
  22. 22. Some nice examples http://getbootstrap.com/gettingstarted/#examples

×