html bootstrap workshop

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 using CSS!

HTML CSS• Markup language • .html file extension • Contains actual content

• Style sheets • .css file extension • Contains no content, only styling

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!)

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 to the

other two pages

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 don’t need • Put a paragraph ( <p>! ) below the header

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

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 “succcess” button below your tagline

Icons• Used as span class: <span class="glyphicon glyphicon-star”></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

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

Patterns

http://www.subtlepatterns.com

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

Final Result

http://www.knownly.net

Deploy

We have a live website!

http://getbootstrap.com/getting-started/#examples

Some nice examples