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

19. 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

20. Final Result

21. Deploy
http://www.knownly.net

22. We have a live website!

23. Some nice examples
http://getbootstrap.com/gettingstarted/#examples