Curs - Web Design

I.
HTML5 & CSS3

A. Basics
A.1. Requirements
What do I need to start developing with HTML?
There are absolutely no requirements to start learning HTML, but you will need some tools to help you
along the way. There are two tools that are essential to becoming an efficient and professional Web
Developer.
Firstly, you will need a Text Editor. Windows users, you can get an awesome text editor from notepadplusplus.org. As you have probably guessed from the name of the URL, this text editor is Notepad ++
and includes some cool syntax highlighting! Mac fans, you can get a text editor from Bare Bones. This
handy text editor-Text wrangler also supports syntax highlighting for a range of programming
languages. Personally I use Text Wrangler. Linux lovers, you can use the default gnome text editorgedit. If its not already installed, you can get it over here at gnome.org.
Do I need syntax highlighting? What is syntax highlighting?
Syntax highlighting allows you to easily see certain elements of your code in a designated color. For
example, when using a WYSIWYG (what you see is what you get) editor with syntax highlighting
some editors may render the HTML structure as blue, comments as grey and attributes and values as
different colors. This allows you to easily distinguish between the sections of code, elements and
comments.
Secondly, you will need a browser to render your code. I recommend Firefox. We will download and
install Mozilla's Firefox (Cross-platform) Browser and the Firebug add-on for Firefox. The Firebug
add-on will be your new best friend as a learned web developer. The Fire-bug Firefox add-on provides
the ability to closely "inspect" the elements of an HTML document and see whats going on behind the
scenest his will play a big part in your web development career!
Alternatively you can use any other browser that supports HTML5- including Safari, Googles Chrome
and Opera.
A.2. Introduction to HTML
Definition of HTML
HTML stands for Hyper Text Mark-up Language. HTML is the basis for all things Web and is a
necessary skill for any Web Developer. Almost every website is comprised of HTML whether that is a
variation of HTML or plain old HTML.
Structure
Let's start with a basic HTML5 structure:
The first thing we should do is set up the skeleton of the page.
a. Always put <!DOCTYPE html> on the first line. This tells the browser what language it's reading (in
this case, HTML).
b. Always put <html> on the next line. This starts the HTML document.
c. Always put </html> on the last line. This ends the HTML document.
Already you have seen we use <>s a lot.

Things inside <>s are called tags.
Tags nearly always come in pairs: an opening tag and a closing tag.
Example of opening tag: <html>
Example of closing tag: </html>
You can think of tags as being like parentheses: whenever you open one, you should close it. Tags also
nest, so you should close them in the right order: the most recently opened tag should be the first one
closed, like in the example below.
<first tag><second tag>Some text!</second tag></first tag>
Exercise one:
1. Type out the above code into a new text file.
2. Save the file with an .html extension (i.e. structure.html).
3. Open the html file with your Browser.
4. What do you see?
No Output? The Browser didn't seem to show us any content did it?
The browser would not show us any content (output), as we have not yet told the html document to
output anything to the browser. All we have told the browser is that we have an HTML document.
Validation
Even though all we have created is a HTML structure and we are not seeing any results (yet), the
HTML document we have should validate with W3C's online HTML validation tool.
W3C is the World Wide Web Consortium- they set the standards for HTML (and many other Web
Based Languages) to provide a similar cross-browser experience; meaning that web browsers will be
more inclined to output (or render) data in a similar fashion.
Exercise two:
1. Go to W3C's online HTML validation tool,
2. Select the third tab along- "Validate by Direct Input",
3. Copy and paste your HTML5 document code into the window and click 'Check'.
4. Notice how the document passed validation with three warnings.

Let's fix these warnings
1) The warning- "Using Experimental Feature- HTML5 Conformance Checker" is basically telling us
that all major browsers do not officially support HTML5 yet.
2) The next warning- 'No character encoding declared at document level'- this is because we havent
declared our character encoding within the HTML structure.
3) The final warning is telling us that no matter what our character encoding is set to within our HTML
document that we are validating, it is going to assume and treat is as UTF-8. The logical way to
overcome this last warning is to use the file upload tool, rather than the Direct Input.
Now, lets try and use the W3C validation tool to upload our HTML document, by selecting the second
tab on the W3C's online HTML validation tool page and uploading our HTML document.
More Warnings
If you notice we still have our 'Using Experimental Feature- HTML conformance checker' warning
(which is perfectly fine, as we are using HTML5 and it is not yet fully supported by all browsers), the
other 2 warnings are related to our character encoding and so is the Error we are now seeing.
Lets fix this, by declaring our Character Set. We will be using the UTF-8 Character encoding and we
can do this by adding some simple mark-up to our head section.
We have just added our first HTML Meta tag!

This Meta tag lets the browser know that we are using UTF-8 character encoding. UTF-8 is the most
commonly used character encoding, basically it provides a standard format (encoding) for text (code)
that will assist against the problems of endianness, which could result in incorrect or invalid characters
displaying.
Tags inside the head element of a HTML document are often used to tell the browser information about
the HTML document that we don't need to output as part of our content, such as our HTML title and
character encoding.
Comments
In every programming language comments are widely used to help remind other developers what is
happening in the code, to make note of extra code that will be added to the web application at a later
date and notes to others who may be working on the same project.
In HTML, comments are easily added to the document, by adding the opening and closing comment
tags.
Our browser will not render anything placed inside the comment tag.
Example of Comments
HTML5 Structure revisited

Lets go through our HTML document and talk about the structure step-by-step, using comments.
Exercise three (Part 1):

1. Type the above code into a new file.
2. Save the file with an .html extension (i.e. template.html).
3. Open the html file with your Browser.
4. What do you see?
Nothing has been output by the Browser, as we have used comments to explain the
structure and have not yet added any real content.
Inspecting with Fire-bug
Exercise three (Part 2):
1. Open up the Fire-bug Firefox add-on. You can do this by right clicking on
the Firefox Browser window and selecting Inspect Element with Fire Bug.
2. Notice how we can see exactly what we have typed into our HTML
document on the left-hand side of the Firebug window.
So how can we tell the browser to output some data?
It's actually quite simple. But before we add any content to the document, let's talk about the title tag.
The title tag allows us to specify the name of the website- more specifically, the web page. It is good
practice to be as relevant as you can when giving your web page a title. As you can see in the previous
examples, the title tag is inserted into the head section of the HTML document.
If we load up this HTML document in our Browser now, we wont see any changes to the webpage.
But, have a look at the top of your browser window or current tab- this is where the Title of your
HTML document is shown.
Adding Content
We can add our content in-between our body tags like so:
Exercise four:
1. Type the above code into a new file with your text editor.
2. Save the file with an .html extension (i.e. hello_world.html)
3. Open the html file with your Browser and see what the browser is rendering.
4. Remove the Hello World text and replace it with a sentence about your
favourite season and start to get comfortable with coding in HTML.
5. Make sure you view your html document in your browser and validate it.
HTML Notes:
All versions of HTML require the basic HTML structure, but the version of HTML depicts a vast
difference in the required elements and doc type declarations. HTML4.01, XHTML and HTML5.
Notice how every tag is closed in order of which they were opened? This is a very important element
to valid HTML.
HTML5 is not currently supported by all major browsers, but provides plenty of extra features for us
to work with and stay ahead of the curve. Although all major browsers do not support HTML5,
Google's Chrome, Opera and FireFox are currently the most useful tools for Modern Web
Development.
If you are not seeing this "Inspect Element with Fire-bug" option in the dropdown menu, when you
right 'click' on your browsers main area- Take a look at this helpful documentation at mozillaZine.
A.3. HTML Elements

The Paragraph tag
In HTML, the paragraph tag is part of the block level elements group. Block level elements will
generally start on a new line and any Mark-up under or after the block level element will also start on a
new line. Here is an example of a paragraph tag in HTML, followed by some text after the ending
paragraph tag. Even though all of the text is on one line, the paragraph tag (block level element) will
place the text after the closing paragraph tag on a new line.
Output:
Other Block Level Elements

There are a variety of other block level elements available in HTML; including Headings, logical (or
document) divisions, horizontal rules, ordered lists and unordered lists.
Now let's learn how to make ordered lists. An ordered list is simply a list that is numbered, like the one
below.
On line 13, we begin the ordered list with the opening tag <ol>.
On lines 14 16, we wrap (i.e. surround) each individual item with <li> and </li> tags.
Because each listed item is only on one line, we put the entire element on one line.
On line 17, we finish the ordered list with the closing tag </ol>.
How cool is this? We can now add ordered lists to headings and paragraphs as things we can use in our
HTML body.
We just learned how to make ordered lists, but what if the order doesn't matter, what if we just want
bullet points?
On line 18, we open our list with an unordered list <ul> tag.
For each item we wish to add to the list, we use a list item tag <li> with text in between.
On line 22, we then tell the browser we are done with our list by calling our closing </ul> tag.
Output:
Ordered HTML Lists - The Type Attribute

A type attribute can be added to an ordered list, to define the type of the marker:
Type
type="1"
type="A"
type="a"
type="I"
type="i"
Description
The list items will be numbered with numbers (default)
The list items will be numbered with uppercase letters
The list items will be numbered with lowercase letters
The list items will be numbered with uppercase roman numbers
The list items will be numbered with lowercase roman numbers
Numbers:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lowercase Letters:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Uppercase Roman Numbers:
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Lowercase Roman Numbers:
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag
describes each term:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Nested HTML Lists
List can be nested (lists inside lists):
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Exercise five:
1. Take note of the code above.
2. Type out the code into a new html document.
3. Change the content of the code to be about your favourite dessert.
4. Add an extra ordered list (containing 7 list items) and a logical division (containing a paragraph
element) to the end of the page.
5. Save the html document as block_level_elements.html.
6. Open the document with your browser and make sure it appears as intended.
7. Upload the html document to the online validator and correct any warnings using the skills you have
learned thus far.
Line Breaks vs. Paragraphs
The break element or tag in HTML (as you can guess) provides a line break (or new line). Some people
may like to 'over-use' this element, but I suggest using the paragraph element when dealing with text
(where possible), to provide formatting and appropriate spacing.
We could do the same thing with the paragraph tag, but with a better format.
Exercise six:
1. Type out the above code into a new html document.

2. Add some additional break tags and paragraph elements containing text.
3. Save the file with as break.html.
4. Open the html file with your Browser and take note of how each tag
performs almost the same task.
Inline Elements
Now we have an understanding of what block level elements are, its time to move on to some inline
elements.
Text Modifiers- Introducing the strong and em tags.
As you may have guessed, the strong tag is used to define important text and will render text as bold.
The em tag is a little harder to guess. The em tag renders text as Italic and is used to 'emphasize' text.
The Strong and em tags are both part of the Text Modifiers group.
Example:
Text modifiers can be a simple way to make certain text stand out or add character to a document. Just
like this!
Images
Images are an important part of any form of content, especially websites. As a web developer, you will
find it very helpful and necessary to be able to place images onto a web page.
We would then put the URL for our image inside the src (source) attribute. The URL could be relative
or absolute.
Here is an example of using an absolute URL with the src attribute of the img tag:
When working in a Live or Development environment it is good Practice to use relative file Paths,
rather than absolute or full file Paths.
A relative file Path can be defined as being a localised link; using the current directory Structure as a
means of navigation between files.
An absolute file Path is a direct link or URL to a file.
If we had an image titled 'logo.png' in the same folder or directory as our Current html file, we could
simply link to that file just by using the files name:
If our image or file were in a directory titled "images" inside our Current folder or directory we would
then link to The Image using
Sometimes we need to navigate downwards (as opposed to upwards) in our directory Structure. If our
directory Structure looked something like:
/home/html/Public/Current/
And our Current html document is in our "current folder; we could link to our Image (which Could be
located at /home/html/Public/Images/) by using:
../images/ basically tells the browser to navigate one directory down and then into our Images directory.
Alternate Text
When an image is unable to be displayed by a browser we need a fallback method. So the alt (alternate
text) can be used as our fallback method- meaning we will have some descriptive text to display if the
image itself is unable to be displayed for any reason.
An example of an image not displaying could be a HTML email (Gmail will, by default hide any
images and ask the user if they want to show images) or the results in a search engine. Search Engines
cannot read images, so they can only render alternate text in Search Engine Result Pages (SERPs).
It is good to be descriptive and short with the alt attribute, like so:
Displaying an Image
So lets try out our image tag with a real image!
Output:
I feel as though it would be a better idea to have the image a little smaller, wouldnt you agree?
Specifying the Size of an Image
We can specify both height and width attributes inside our image tag like so:
Note: The height and width values are in px (pixels).

So, lets try out this image with the height and width attributes specified!
I am going to guess... It looks a little more appropriate now!

Exercise seven:
1. Create a new HTML5 document.
2. Using the skills you have learned so far, add an image (of your choice) with a width and height of
your choosing to your HTML5 document.
3. Load your HTML5 document in your browser and make sure it renders as expected.
4. Head over to the W3Cs HTML Validator and validate your HTML5 Document. Correct any errors
you receive.
Anchor Tags/ Hyperlinks
What if you wanted to send the user to another part of your website, or another website altogether? You
use hyperlinks, or links for short!
Now, lets move on to the ever-so important anchor tags.
<a href="http://glorified.me">This is a Hyperlink</a>
First, there's an opening <a> tag and that tag has an attribute called href. The href value tells your link
where you want it to go, in this case http://glorified.me
Then you have a description of your link between your opening <a> and your closing </a> tags. This is
what you will be able to click on.
Finally, you have your closing </a> tag.
We use an anchor tags like so:
The above code will render as:
Let's try a simple link to Google:
The above example will render:
Type out the above code and Try it out, notice that the browser will now load Googles homepage when
you click on the link.
Click on image
Now you know how to add links and images to your website. Why not make that image a link? For
example:
<a href="https://www.google.ro/">
<img src="https://www.google.ro/images/nav_logo231.png"/>
</a>
First we open our <a> tag and point the href to https://www.google.ro/ again.
But this time, instead of using text inside the <a> tag, we use an <img> tag.
Finally, we have our closing </a> tag.
Now when you click on the Google image, you will be taken to https://www.google.ro/!
Link oppened in new window
We have covered how to link to a page, but what if we want our users to go to our linked page, but in a
new window (so they don't leave our interesting website)?
We can do just this by using the target attribute of the anchor tag and passing in a value of _blank.
Opening in a New Window:
The above example will render:
Type out the above code and Try it out!

Notice that the browser will now load Googles homepage in a new window when you click on the
link.
Hypertext Reference
The most important attribute for the anchor tag is the href attribute. The href (Hypertext Reference)
attribute will tell the anchor tag where to link to, or where to send the user once clicked on.
This example is slightly different to the previous examples:
Linking inside a HTML document

Basically, the '#' symbol can also act as a page anchor, when nothing is assigned to the '#' in the href
attribute of an anchor tag- when the user clicks on it, as the link does not have a specific location- it
will generally go nowhere.
Now, we can assign id attributes to some of our elements, to use our anchor tags to link to specific parts
in our HTML, rather than just having the '#' symbol, we would use:
I have added a logical or document division at the start of the above example with an id of top.
Ids are a very useful feature of HTML, but for now we are just going to use it for an anchor link
(something to link to). We could assign our div with any id value, as long as we reference it in our href
attribute of our anchor tag.
Exercise eight:
1. Create a new HTML document and save it as anchors#.html.
2. Add a logical division with an id of top and an anchor tag with a href value of #top.
3. Head on over to lipsum.com and generate some dummy text, copy it and paste it in between the
logical division and the anchor tag you have placed in your HTML document. Save your document.
4. Open your anchors#.html document in your browser, scroll down to the bottom of the page and click
on the link you have created.
3. Notice how the link takes you to the top of the page (The logical division with an id of top).
Note: Make sure that there is enough text to actually cover the height of the page.
Email Links
In HTML we can create a matilto: link, when the user clicks on this link their email client will open and
the mailto: value (our email address) will be added to the TO: field.
This makes it easy and enticing for a user to quickly send us some email, regarding our web page.
You may have noticed that I have added '?Subject=Email', this will add Email to the subject field
within the email. You can change the mailto and Subject values to suit your needs.
Directories
You will often be using a folder structure. The folder structure is a crucial part of good coding practice
and helps to tidy up our files (an images folder and an html folder).
A basic html folder structure would look similar to this:
Note: When working with folder in Web Development, we refer to folders as directories.
As you can see we have a few html files in different locations. We have our index.html file, which;
when working in a server environment will automatically load once we navigate or load the specific
folder that index.html resides in. As we are not working in a server environment this is not required
knowledge at this point in time. We have an about.html and a contact.html file in our html directory.
The content of these two files are irrelevant at this point in time. The purpose of the following exercise
is to make sure you have a grasp of 'navigating the directory structure'.
Example of linking to the about.html page from index.html:
Exercise nine:
1. Create three new html documents named; about.html, contact.html and index.html.
2. Create the same directory structure as shown above and place your new html files in the appropriate
directories.
3. Give each html file an appropriate title tag and a level 1 heading (h1).
4. Add a paragraph of appropriate text to each of our html pages and a mailto: link to the contact page.
5. Now that we have some text and a heading for each html document, we need place an image (you
can use any image you would like) on each page.
6. Using you skills, you can add an image under the paragraph tag to each html document and a link to
each other html document in the directory structure under the image.
7. Test out your html documents by saving them with the same names as detailed above. Make sure the
images in your html documents are appearing in the browser and when you click the links under the
images, you are taken to the respective html document (i.e. a link to about.html should take you to the
about.html page when you click on the link) in your browser.
8. Now that you have completed your three html pages, go ahead and validate them with the online
validator and fix any errors that appear.
Inline Elements in Action
Let's check out these inline elements in action.
Output:
Notice how the contents of the strong, em, anchor and image tags are being displayed on the same line,
rather than being displayed on separate lines- like the block level elements.
Inline & Block Elements in Action
So, lets try some block level and inline elements together.
Output:
Tables
Sometimes when we have some information to display on our web page, it makes sense to display that
information or data in a table. Tables in HTML are relatively simple. We have the Opening Table Tag
and The closing Table tag. Inside of our Table element, we have table rows. Inside the table rows we
have tabular data or cells. But, for our table headers, we will be using the table header tags inside our
table row.
Tables are defined with the <table> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.
By default, all major browsers display table headings as bold and centered.
Table data <td> are the data containers of the table.

They can contain all sorts of HTML elements like text, images, lists, other tables, etc.
To make a cell span more than one column, use the colspan attribute:
<th colspan="2">Telephone</th>
To make a cell span more than one row, use the rowspan attribute:
<th rowspan="2">Telephone:</th>
To add a caption to a table, use the <caption> tag:
<table>
<caption>Monthly savings</caption>
<tr>
....
The following HTML table will be displayed with borders around the table cells:
<table border="1"> ... </table>
Forms
One of the many things you may have noticed on a web page is a contact form for example. We can
create a form in HTML by using the form opening and closing tags. Inside of our Form element we
have inputs and a submit button. Some of our inputs will be of type text and our submit button will
actually be an input of type submit.
When we work with HTML forms in the real world, there are two attributes that we need to add to our
opening form tag.
Method and Action:
For the action attribute, you will enter in the destination of the Form data. The method will take either a
POST or GET value. POST and GET are used with server-side processing.
For the action attribute, you would enter in the destination of the Form data. The method will take
either a POST or GET value. You would generally be using POST to submit most forms of data. The
main difference between POST and GET is that POST sends data to the server 'behind the scenes',
whereas GET will form a query string. A query string consists of name attribute values and the values
input by the user. As you can imagine, if we were submitting sensitive data to the server we would
definitely not use GET; in the case that we did, all information input by the user would be clearly
visible in the URL address bar.
We will be taking a look at forming a query string, using GET.
Type out the following code and select some values from the form and click the submit button. Take a
look in your URL Address bar; this is called a query string- the part following the '?'.
Again, type out the following code, load it up in your browser, enter some text into the inputs in the
form and click the submit button. Take a look in your URL Address bar.
The label tag allows us to add descriptive text regarding the input expected from the user and when the
user clicks the label text, focus will be drawn to the input.
To use labels properly, you must give the label a for attribute and a value of the for attribute that
corresponds to the inputs id.
When you use an input of type password, you may think that because the input entered renders as dots
that it must be secured. This is a common misconception. The dots that render for password inputs are
only a masking mechanism. Meaning that the input is actually still just the plain text that the user
enters, but the password field will mask this to prevent prying eyes when a user is entering in a
password. By using GET, you have just seen (in the query string) that the input entered into a password
field remains plain text.
Exercise ten:
1. Create a new .html file titled tables-forms.html.
2. Add a table (4x7) and type in 4 of your favourite bands and seven of their best songs, to fill out the
table. By doing this simple exercise, you will learn how to create a HTML table of any size.
3. Under the new table that you have created; add a form.
4. This form will have 4 radio inputs, 3 Check boxes, 1 text and 1 password input field.
5. Appropriately name each input and test that you have done so correctly by entering in text/ making
selections and submitting the form (clicking 'submit'). Pay close attention to the query string that has
formed in your URL address bar.
6. Create some new inputs of type: color, number, URL, date and email and test them out in your
browser!
A.4. The Basics of CSS

CSS Inheritance
In this example, well focus on a css property value that I guess many of you ignore (do not use) while
styling elements on websites.
It is inherit. Before we go straight into that, know the following:
Each element in HTML is part of a tree, and every element (except the initial html element) has a
parent element that encloses it.
Whatever styles applied to the parent element can be applied to the elements inside it if the properties
are inherited.
Below, were going to have a look at several cases of inheritance property.
Create a html document with the basic syntax inside like this:
<!DOCTYPE html>
<html>
<head>
<title>CSS Inheritance Property Value</title>
</head>
<body>

<style type="text/css">
</style>

</body>
</html>
In the html section, well add some elements to show their relation to other elements and understand
when they automatically inherit property values from their parents and when not.
Lets first see a basic application of the inherit property value.
Basic Application of Inherit
The inherit property value is at some cases automatically applied to child elements, and at other cases
needs to be applied manually.
Automatic Inheritance
I always tend to give the body element a custom font-family so that all elements have the same font
applied. In other words, all elements inherit the font-family property from the body parent.
Look at the code below:
This is a <span>parent</span> element.
<div class="child">This is a <span>child</span> element.
This is a <a href="#">link</a> inside a paragraph

</div>
I have added a parent division and inside that two children, another div and a paragraph.
The classes given are so that we can give attributes to parent and see the results to children.
Now below look at the some initial properties Ive given to these elements:
body {
font-family: "Aller","sans-serif";
}
.parent {
width: 15em;
height: 5em;
color: gray;
font-weight: bold;
font-size: 2em;
border: 0.1em solid red;
}
.parent span {
color: green;
}
</style>
Now to see what what properties have been inherited look at the browser view:
Seen this result, we can state that the following elements get inherited properties automatically:
1. All elements inherit the font-family property from a higher level parent, which is body. Notice all
three lines have the same font applied.
2. All child elements inherit the color (font-color) from the parent element. Notice all the lines have the
same gray color applied (except span and link).
3. The parent span element is set to have a green color, but also the child span gets a green font-color.
So the child inherits from parent automatically span elements too.
Think everything is inherited?
The a anchor element has not been styled, but it shows in blue and underlined. Thats because these two
properties are set to be default ones for all anchor tags over the page.
The link did not inherit the color from its parent element, because it has a different color (blue). Look
at the border. It has only been applied to the parent element, and it shows only there. Thats why we
sometimes need to apply inheritance manually to make these element fit the desired view.
Forced/Applied Inheritance
Simple as that, refer to the .child class and inherit the border for the child and color property from
parent for the link:
.parent a { /* you can refer even to the child class */
color: inherit; /* inherited color from the parent class */
}
.child {
border: inherit; /* inherited the border attributes to child and elements - inside */
}
The browser view:
Notice that:
1. The link became the same color as the parent (its parent can be considered both the parent class
element and the child class element, because the paragraph is nested inside the child element).
2. The border attributes got applied to the child element which contains another element inside, thats
why you see the second smaller red border wrapping both the second and third line (child and
paragraph elements).
That was a basic application of the inherit property value. Now lets see other cases and examples.
Here we look at some essential cases and examples where we can use the inherit property value.
Size and Background Inheritance
Change the html code to accommodate the following image and text elements:
<h4>Everything you can imagine is real.<br>-The Parent Image</h4>
<div class="child-image">
<h4>Glad to have looked after you.<br>-The Child Image</h4>

</div>
and the css code accordingly:

.parent-image {
width: 30em;
height: 30em;
background-image: url("images/img1.jpg");
background-repeat: no-repeat;
}
.parent-image h4 {
color: gray;
text-align: center;
line-height: 1.5em;
/* vertically align text in the center */
padding: 1em;
/* just to differentiate the two elements */
}
.child-image {
width: inherit;
/* inherited width */
height: inherit;
/* inherited height */
background-image: inherit;
/* inherited background */
background-repeat: inherit;
}
Now notice the child element inherits the background and size attributes from the parent:
Inheritance Manipulations
You can also use the inherit property value to avoid inheritance from one level higher parent.
Look at the codes below:
HTML:

<div class="child1">
<h3>A title here</h3>
A paragraph text here
<button>A button here</button>

CSS:
.parent h3 {
font-variant: small-caps;
color: red;
}
.parent p {
text-indent: 1em;
color: blue;
}
.parent button {
padding: 1em 2em;
background-color: gray;
color: white;
border-radius: 0.5em;
border: 0.1em solid gray;
}
.child2 p {
/* declined inherited attributes from parent */
text-indent: inherit;
color: inherit;
}
.child2 h3 {
/* declined inherited attributes from parent */
font-variant: inherit;
color: inherit;
}
.child2 button {
/* declined inherited attributes from - parent */
background-color: inherit;
color: inherit;
}
Lets look at the browser view and then comment it:
Notice that the parent attributes are applied to the first child but not to the second one.
That is because we chose to inherit attributes when they were already automatically inherited.
This case would result in an inheritance of the default attributes of a higher level parent (i.e
body).
Tag and Location Inheritance
Tag Inheritance
To explain this, take for example the button tag of html:
<button>Button</button>
With no styling at all, this element has already a view (attributes):
You can see it has a border, a gradient background, a hover state ect.
This is called tag inheritance, it means the element inherits default properties/attributes pre set by the
browser.
Whenever you style a button, you just override the browser default properties for that element.
Location Inheritance
Basically, location inheritance means using the same attributes for a set of elements under the same
tag/class.
For example, if you want to have all titles styled with a green color and bold you could just refer to the
following:
.title {
color: green;
font-weight: bold;
font-size: 2em;
}
And apply this class to all elements wrapping a title like so:
2. Why us?
Just a paragraph to show that this is not a title.
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
3. Help Center
Notice that elements given the title class now have a title look and feel.
Class Inheritance
Class inheritance is more and more being used in nowadays websites.
It means to apply certain styles from a predefined class, and other styles from another predefined class.
Take, for example, the multiple classes application in css, like below:
HTML
Just a paragraph here. It could be lorem ipsum.
<ul class="text-style-1">
<li>This will be just a text line</li>

<li class="link bold">Download Now</li>
<li>Third line goes here</li>
</ul>
CSS
.text-style-1 {
color: #50838e;
font-weight: italic;
font-size: 1.2em;
}
.link {
color: blue;
text-decoration: underline;
}
.bold {
font-weight: bolder;
}
So above I have declared three classes and given them attributes.

Then, I have used them to style the elements by giving them these classes.
Now all three lines will have the attributes of text-style-1 but in addition to that, the second li is going
to have added the attributes of the link class and the bold class.
We can say that the second line inherits all ul attributes and just keeps adding new (or overriding
existing) attributes.
On a more professional approach, we can state that using inheritance is not of much usage as most
elements will need specific styling and independence from parent elements they are in.
However, when using inheritance property value to give elements styling attributes, keep in mind that
inherit can be applied just as a single value (i.e you cant have something like: border: inherit 1em
#ccc; ) so you dont get individual values inherited.
If you want to see the browser default styles (from which your element attributes are inherited), you
can inspect element and check "Show Inherited Properties" in Chrome.
CSS Multiple Classes
In this example we are going to have a look at multiple classes that you can apply on an element of
html.
It has become more and more useful declaring some standard classes in CSS (actually referring to
them, even though they do not exist) and using these classes whenever we need in our elements.
It basically is the inverse process of giving an element a class on html and then referring to that element
in css to give attributes. In this case, you predefine some classes (that is, give them attributes) and then
include them in your elements.
Predefine Classes & Attributes in CSS

In this step, lets create different kind of classes and give attributes to them to set up a group of classes
that we can later use in html. So, first create a basic html file with a style tag in it where we can add
the css, like below:
<!DOCTYPE html>
<html>
<head>
<title>Multiple Classes on Elements</title>
</head>
<body>
</style>
</body>
</html>
Alignment Classes
Creating alignment classes will enable us to easy align elements on the web page. Lets name two
alignment classes: .pull-left - this will align an element to the left .pull-right - this will align an element
to the right.
The respective CSS code for these classes would be:
body{
font-family: "Arial", "sans-serif";
}
/* just added custom font */
/* ALIGNMENT CLASSES */
.pull-left {
/* pull-left class referred and given attributes */
float: left !important;
}
.pull-right {
/* pull-right class referred and given attributes */
float: right !important;
}
</style>
Color Classes
Creating color classes will let us color elements/backgrounds on the web page easier.
Lets name four color classes and three background color classes:
.red - this will give a text element or the border of a shape the red color. .green - this will give a text
element or the border of a shape the green color. .blue - this will give a text element or the border of a
shape the blue color. .white - this will give a text element or the border of a shape the white color.
.bg-red - this will give an element a red background color. .bg-green - this will give an element a green
background color.
.bg-blue - this will give an element a blue background color.
/* COLOR CLASSES */
.red, .red li, .red a {
/* red class referred and given color attribute */
color: #e85139;
}
.green, .green li, .green a {
/* green class referred and given color attribute */
color: #4ca640;
}
.blue, .blue li, .blue a {
color: #319cd6;
}
.white, .white li, .white a {
color: white;
}
.bg-red {
/* bg-red class referred and given backgrounf color attr */
background-color: #e85139;
}
.bg-green {
/* bg-green class referred and given background color attr */
background-color: #4ca640;
}
.bg-blue {
/* bg-blue class referred and given background color attr */
background-color: #319cd6;
}
Note that we also added the color attributes for li or a tags on the html.
That is so we can access lis or as directly with these classes.
Size Classes
Creating size classes will let you control the elements sizes on the web page. Lets name three size
classes:
.small - this will make an element look small on the screen. .normal - this will make an element look
medium on the screen.
.large - this will make an element look large on the screen.
/* SIZE CLASSES */
.small {
/* small class referred and given sizing attributes */
font-size: 1em;
padding: 0.2em;
width: 50%;
height: 50%;
}
.normal {
/* normal class referred and given sizing attributes */
font-size: 1.5em;
padding: 0.4em;
width: 100%;
height: 100%;
}
.large {
/* large class referred and given sizing attributes */
font-size: 2em;
padding: 0.6em;
width: 150%;
height: 150%;
}
Text Classes
Creating text classes will make it easier to control text appearance. Lets name four text classes:
.decor1 - this will make the text underline and uppercase. .decor2 - this will make the text overline and
lowercase. .decor3 - this will make the text line-through and capitallize. .center - this will make the
text align center.
/* TEXT CLASSES */
.decor1 {
/* decor1 class referred and given text attributes */
text-decoration: underline;
text-transform: uppercase;
font-weight: bold;
}
.decor2 {
text-decoration: overline;
text-transform: lowercase;
font-weight: bold;
}
.decor3 {
text-decoration: line-through;
text-transform: capitalize;
font-weight: bold;
}
.center {
/* center class referred and given attributes */
position: relative;
bottom: 0px;
text-align: center;
}
Elements Classes
It is time to create some specific elements classes, which will represent the initial attributes of the
elements we are going to give several classes. Here is what we will create:
.button - a very popular element which will be used to demonstrate. .menu - a four links menu with
very little prestyled attributes. .rectangular - a prestyled fixed width and height element as example.
/* ELEMENTS CLASSES */
.button {
/* refers to a button class, given several attributes */
border: 0.1em solid;
border-radius: 0.3em;
width: 5em;
height: 2em;
line-height: 2em;
margin-top: 5em;
margin-bottom: 2em;
}
.menu li {
/* refers to a menu class, given several attributes */
display: inline;
padding-right: 1em;
text-decoration: none;
}
.menu {
margin-bottom: 2em; /* just a margin for better view of the elements */
}
.rectangular { /* refers to a rectangular class, given several attributes */
border: 0.1em solid;
width: 10em;
height: 5em;
line-height: 5em;
margin-bottom: 2em;
}
Application of Multiple Classes in HTML

Here is where the magic happens, we will first create the basic elements structure in html and then
continue adding appropriate classes to each elements to see the results of what we;ve done so far!
Set up the HTML
Under your tag start the html code. Add four elements: a button, a menu, a rectangular and an image
like so:
(Do not give these elements classes, we will do that next)

<a href="#">Button</a>

<ul>
<li class=""><a
<li class=""><a
<li class=""><a
<li class=""><a
</ul>
href="#">Home</a></li>
href="#">About</a></li>
href="#">Help</a></li>
href="#">Contact</a></li>


Im a rectangular

<img src="images/image.png">
Because none of these elements is styled (or better say, not given a class) the view we would get is this:
Add multiple classes

Now lets go ahead and add classes that weve already given attributes to in css to make elements look
better.
The way you apply multiple classes to an element is just by seperating them with a space inside the
quotes like this:

class="example class1 class2 class3 class4 class5"
1. Adding Classes to the Button
I will add 4 more classes to our button element:
center - add this class to make the text align center.
bg-blue - this class will make the button background blue.
white - this will change the color of the text to white.
large - add this class to make the whole element larger.
And this is how the code will look like:

<a href="#" class="center bg-blue white large">Button</a>
Now look at this nice button view we get:

2. Adding Classes to the Menu
Lets add 3 more classes, 2 of them to the menu and 1 to the lis:
red - gives the text of this element a red color. pull-right - alignes the whole element on the right side of
the screen.
decor1 - makes the text in the list underlined, uppercase and bold.
This is how it should be in the code:

<ul>
<li
<li
<li
<li
class="decor1"><a
class="decor1"><a
class="decor1"><a
class="decor1"><a
href="#">Home</a></li>
href="#">About</a></li>
href="#">Help</a></li>
href="#">Contact</a></li>
</ul>
And the expected view in the browser would be like this:
Note that the decor1 attributes also define underlined text, but you dont see it because of this code I
added when dealing with the button element, which had the browser pre-styled any-link underlined
attribute:
a:-webkit-any-link {
color: -webkit-link;
text-decoration: none;
}
It means do not underline any links by default, and that was needed for our button.
3. Adding Classes to the Rectangular
For the rectangular element, lets add 5 more classes after the rectangular basic class:
center - this will center the text inside the rectangular. bg-green - this will give it a green background
color. white - this will make the text color white decor3 - this decor will make the text line-through,
capitallize and bold. normal - this will adjust the size of the rectangular to what we defined normal.
By now you should have learned how to add these classes, it will look like this in the code:

Im a rectangular
Now notice the rectangular view:

4. Adding Classes to the Image
B. HTML5
4. Main HTML5 Specific Elements
So far we have only really learned about general HTML tags and elements, now it's time to get into
some HTML5 specific elements.
As you may notice when you start to work with HTML and build some of your own web pages, it
would be really helpful if there was a logical way to define the header and footer of our web page.
With HTML5, we can just that with the header and footer tags:
Header & Footer
The header element defines a header for our html document. We could also have multiple headers in
our html document, to define headers for different parts of our html.
The footer element defines a footer for our html document; just as we can with the header element we
can also have multiple footer elements within our html documentdefining footers for different parts of
our html.
Along with these new header and footer elements, there are also a few more important elements that
have been introduced with HTML5.
Navigation
We can now define a navigational element with the nav tag:
We would use this element to hold our main navigational content.

Section
We can now define a section of our HTML document. Do keep in mind that the contents of a section
should be related.
Article
We can now define an 'article' within our HTML document. Within a section, we could have several
articles:
Aside
We can now define an 'aside'; a part of our HTML content that is 'aside' from our main content, but is
still related:
The Meter Element

One of the really cool things with HTML5 is the ability to add meters. We define the meter element
with the opening and closing meter tags.
The HTML5 meter tag will take a few attributes, min, max and value.
The Min and Max values will define a range in which our value will be compared. For example, with a
min of 0 and a max of 100, a value of 50 will show a gauge that is 50% complete:
The text that I have entered in between the opening and closing meter tag is fallback text. This fallback
text will be rendered in older browsers that do not yet support the meter tag.
The new HTML5 Elements in Action
Exercise eleven:
1. Using only the new HTML5 tags, create a Valid HTML5 document with some content about your
favourite holiday.
2. Validate this HTML5 specific document with the online validator and fix any errors.
Video
One of the greatest features of HTML5 is the ability to implement a fully featured Video with Controls.
We start out with the opening Video tag, passing in a height & width and the controls attribute, so the
video player will have controls. Next we need to add the source tag and actually add the Video URL to
the src attribute of the source tag. Again this can be an absolute or relative URL.
Along with our actual video src, we need to tell the browser the mime-type. A mimetype basically lets
the browser know what kind of format or media type to expect. To provide a similar cross-browser
experience you will need to supply multiple formats, contained within separate source tags.
Here we have the video Element set to 640x480px with controls displayed, some fallback text (to
display some text in a browser that doesnt support the video element) and two sources- each have a
different format and mime-type.
Audio
As you have just learned about HTML5 Video, HTML5 Audio isnt going to be all that difficult to
grasp. HTML5 audio isnt all that different from HTML5 Video (apart from the fact that its audio and
not video).
With the audio element, we do not need to set the size, but it is ALWAYS good practise to use the
controls attribute so your users can actually operate the Audio Player.
Just as we can have multiple sources in our video element, we do the same thing with our audio
element; passing in audio files and appropriate mime-types.
5. The Basics of CSS

Definition of CSS
CSS stands for Cascading Style Sheets and provides HTML with layout and design. Along with making
things pretty and aesthetically pleasing, CSS also provides a general structure to HTML.
Some of the most important CSS properties (in my opinion) are (in no order):
Color - specifying text color.

Font-family - specifying font type.
Font-size - specifying font size.
Text-decoration - specifying text decorations, such as underline.
Font-style - specifying font styling, such as italics.
Font-weight - specifying font weight, such as bold.
Width - specifying the width of an element.
Height - specifying the height of an element.
Background - specifying the background.
Border - specifying a border.
Text-shadow - specifying a shadow for our text.
Float - specifying the float of an element, such as left or right.
Position - specifying the position of an element, such as absolute or relative.
Z-index - specifying the z-index of an element, such as 999; which would put that styled element 'ontop' of all other elements that either have a negative z-index specified or no z-index specified.
Padding - specifying padding inside an element, such as padding around text.
Margin - specifying the margin between elements.
CSS can be implemented in three different ways to our HTML:
1. Inline
2. Internal
3. External
Using Inline CSS
So, lets use some inline CSS to change a few things in our HTML structure.
Output:
Color
As you have probably noticed, we have used the English word for the color that we want to use. But
there are two other ways we can define colors in CSS; the rgb color values and something called
Hexadecimal.
All three types of defining colors in CSS are acceptable; you can read more about colors in CSS here:
http://www.w3schools.com/cssref/css_colors.asp
We will be using a mixture of the three different ways to define colors in CSS.
Using Internal CSS

As you can see, our inline CSS is very effective, but perhaps not very efficient. Inline CSS is good for
adding slight changes or specifying colors for different text elements, but it starts to get a little 'wordy'
and messy.
When we add CSS to HTML either; externally or in the head section, we can use selectors.
Selectors allow us to 'select' or 'point' to a specific element of our HTML. CSS can use HTML elements
as selectors, such as the paragraph, anchor, em and strong tags. If we referred to these elements as
selectors in our CSS we would be styling every paragraph, anchor, em and strong element in our
HTML.
Lets try the same thing, but this time adding our CSS to the head section of our HTML document and
using selectors.
I have added an additional em tag, to demonstrate using classes as selectors in CSS.

Using ids in CSS
As you may have guessed, we are using a class to identify our bottom em tag. The dot notation before
the class name allows us to select or target an element in our HTML by its class name.
We can use ids like so:
All we have to do is change 'class' to 'id' for the element we are referring to, and change the '.' in front
of our CSS selector (in the head element) to the '#' symbol.
The # symbol (when not used as href attribute) is generally used to signify an id within the HTML. The
major different between using classes and id's is; classes can be re-used time and time again in the same
HTML document, whereas id's can only be used once in a single HTML document. You can think of a
class as a group or multiple items, and an id as a single identification.
The output of the above code is the same (we have also set a font-size for the #bottom em tag) as the
output for the previous code example, we are getting the same results as we are basically telling the
browser the same thing, just in a different way.
There are several ways to make selectors 'unique' or point to only 'some' parts of the HTML.
A class is an effective way of referencing a specific part of our HTML; we can basically pinpoint the
section of our code that contains the content we wish to style.
Note: When using em in CSS it's slightly different to the em tag in HTML. In HTML the em tag renders
italic text. In CSS the em value can be used as a unit of measurement. A font size with a value greater
than 1em will generate text larger than the default for that web page or User Agent, but does not
render text as italic.
Ids must be unique, we can only use the same id only once in our HTML page.
With classes, we can 'reuse' the class several times in our HTML page.
Creating External CSS
To add an external CSS to our HTML, we need to tell the HTML all about it- what relation it has to our
HTML, the type of file it is and its location and name.
Remember the Meta tags from before?
Well this is implemented in the same way (completely different concepts), by adding a line of code into
our head section of our HTML document. We use a rel value to tell HTML what the CSS file's relation
is to the HTML, a type value to tell the HTML the type of file it is and a href value telling the HTML
where the file is located and its name.
Note: CSS files have a file extension of .CSS
We can add an external style sheet to our HTML by using link tag.
So, lets create a small CSS file, to use externally.
Go ahead and save the above styling into a new CSS file, titled style.css.
Linking to External CSS
If our style sheet (CSS) were located in the same directory (or folder) as our HTML file, we would add
the tag to the head section of the HTML document, like so:
Just as our CSS example before, no matter of its location (inline, internal and external), the CSS will
tell the browser to render the styles for our HTML in the same way.
Inefficient Selectors
Lets have a look at some inefficient CSS selectors with some external CSS:
The advantages of using external CSS include the ability to completely separate the HTML from the
CSS, to reduce individual file size and length, make things more readable and use effective selectors;
meaning selectors that target multiple elements where necessary. Rather than having a large portion of
CSS repeating and applying the same styling to different elements, we could join the selectors
together to create a smaller file size or to simply be more efficient with our use of CSS.
We can target or select multiple elements by separating the selectors with a comma in the CSS.
Lets fix this up!
Efficient Selectors
Exercise twelve:
1. Create your HTML5 document structure and create a file titled style.css
2. Add the new HTML5 elements and style the HTML accordingly:
- Articles within a section will have a font-size of 2 times the default font-size.
- The Footer and Header will have a text-decoration of underline and a color of red.
- The aside will have a font-weight of bolder and a color of blue.
3. Save your CSS and HTML files and load them into your browser, checking that they render as
expected.
HTML Element State
With our new CSS abilities, we are able to style a HTML element, based on its 'state'.
HTML Element state refers to the 'state' that the elements are in; some of these include: Hover and
Active.
You may have noticed that when you hover over a link on a web page, that the link will change color
(among other aspects). We can do this with almost any HTML elements.
In the above example we have styled all 'hovered' over articles and the anchor tags, when the article is
being 'hovered' over with a background of red and a text color of white.
Along with defining hover style, we can define active style. Active is defined by an element that is
'actively' being clicked on, i.e. if you are clicking a button, that button's state is now active.
In the above example, an article that is 'active' will have a background color of almost black.
Exercise thirteen:
1. Create a new HTML document with an external Style sheet.
2. Add some styles that will target specific elements, based on their 'state'.
3. Make sure to make use of the rgb and hexadecimal color values.
4. Test your work in your browser and make sure it renders as expected.
The CSS Box Model
One of the fundamental understandings of CSS is the Box Model. The Box model helps us to
understand the layout and design of HTML and CSS.
The CSS Box model is made up of content, Padding, Borders and Margins.
So, what are Padding, Margins and Borders?

As you can see, padding is the space that surrounds our content; borders are what surround the padding
and margins are what surround the borders.
By definition:
-The padding is the area that separates the content from the border.
-The border is the area that separates the padding from the margin.
-The margin is the area that separates our box from surrounding elements.
How do we define these?
In the above example, we have set the padding for the top and bottom of the element to 50px and the
left and right to 30px. The margin has been set to 0px for the top and bottom and the left and right
margin is set to auto. When we set a value of auto in our margins, it will basically 'centre' the element
within the containing or parent element.
As you may have noticed, we have also set our border. Our border is 1px wide for each side, is solid
and has a color of black.
The above code renders the following output:
Note that the rendered output will be 152px in height (top and bottom padding, plus the width of our
borders and the specified height of our element) and 562px in width (left and right padding, plus the
width of our borders and the specified width of our element).
Exercise fourteen:
1. Create a new HTML file and an external Style sheet.
2. Using your knowledge of the CSS Box Model, create a box that has a height of 60px, a width of
260px, a solid border of 3px (you can pick any color you wish), top and bottom padding of 55px, left
and right padding of 25px and a top and bottom margin of 0px and a left and right margin set to auto.
3. Save, test your work in your browser and calculate the exact size of your box.
Fonts
When using CSS we can change the font-family of our text. We can specify multiple font-families for
any given element. If the user has the first specified font on their system; that is the font that will be
used. If the user does not have our first specified font on their system, the browser will attempt to
render the next font and so on until one of the fonts are located on the users system. These font-families
are separated with a comma and the proceeding fonts are referred to as fallback fonts.
In the above example we are saying that our header should have a font-family of Helvetica Neue, if that
is not located on the users system, we will try Helvetica. If Helvetica is not located on the user's
system, we will 'fall-back' to a generic sans-serif font.
You can find out more about sans-serif fonts here: http://en.wikipedia.org/wiki/Sansserif
6. Main CSS3.0 Specific Properties
Opacity
In CSS3.0 we can easily specify opacity for an element:
In the above code we are saying that every article within a section should have opacity of 50%. This
will make all of our articles within a section appear transparent.
When we set the opacity of an element, we are also setting the opacity of the contents as well and this
can have undesired effects.
Alpha Color Space
Instead of using the opacity property in CSS, we can set an Alpha Color Space. We can do this by
specifying the color or background-color of an element using the rgb color values.
Now, to specify the Alpha Color Space, we simply add an extra value to our rgb color values; what I
mean by that is we change rgb to rgba and have four values for the colors, instead of the usual three.
The Alpha Color Space value will take a value of between 0 and 1. The Alpha Color Space will specify
the opacity of that element.
In the above example we have set all of our articles within a section to have a background-color of red.
When these articles are hovered over, we are setting using the same color, but with an Alpha Color
Space value of 0.5. In other words, when we hover over our article elements we will have a
background-color that will be slightly transparent.
In the above example you may have noticed the border-radius and box-shadow properties.
Box Shadow and Border Radius
We can specify a box-shadow for most of our HTML elements and this will literally give our 'box' (or
element) a box-shadow; giving the element a 3D like appearance.
The box-shadow property can take 4 arguments: the h-shadow value, the v-shadow value, the blurdistance and the color of the shadow.
The border-radius property will set a 'border radius' for each of our elements corners; resulting in
rounded corners.
This will be the resulting output when we hover over our element.
As you can see we have rounded corners, a shadow and we have an almost pink background-color. The
background-color is set to red, but when we hover over it, we are setting the background-color to be
50% transparent.
Exercise fifteen:
1. Create a new HTML file and an external Style sheet.
2. Using all of the techniques, concepts and code that you have learned; create your first Website! It
doesnt have to be glamorous! The point of this final exercise is to get you started with HTML5 and
CSS3.0- in the real world!
3. Good Luck!
Get your Bootstrap Project Started

The Project Files
The project files are available for download as part of this tutorial.
The bootstrap-project.zip includes all the resources you need for you to follow
along.
It is divided into chapters corresponding to each section of this tutorial, with
abefore and an after.
before: allows you to start from a specific section of the tutorial
after: includes the completed version of a section
Plus, a final folder is available if you want to skip ahead and take a sneak
peek at the finished product.
We will also show you how to download the bootstrap materials as if you were
starting a project from scratch.
Downloading the Bootstrap Files
First things first you will head over to the Getting Started page to download the
Bootstrap resources.
Bootstrap offers three download options. Click the first button from the left to
download the package, including the compiled CSS and Javascript files.
This is the most basic form of Bootstrap and the easiest way for you to get started.
(source: http://getbootstrap.com/getting-started/_
Once you have downloaded, unzipped and saved everything in a convenient place,
we can have a look at whats inside:
Bootstrap Files: What and what for?
The CSS files
bootstrap.css
bootstrap.min.css
bootstrap.css is the normal version. It can be used at the development

stage.bootstrap.min.css is a minified version, less the spaces, tabs and
comments. It is lighter, and therefore recommended for production when the site
is ready for launch.
Bootstrap-theme.css
bootstrap-theme.css
bootstrap-theme.min.css
The Bootstrap theme is an optional and additional file. It comes also with
predefined classes to add 3-D effects with gradients and shadows on some
elements (e.g., buttons).
You also have the minified version when your site is ready for deployment.
The JavaScript files:
bootstrap.js
bootstrap-min.js
You
need
to
add bootstrap-min.js for
plugins
functionalities,
such
as modal.js,carousel.js, and scrollspy.js, that well use in the project. It also

comes in normal and minified versions.
The Glyphicons
Bootstrap includes a collection of over 250 glyphicons in font format. These
should be free.
Glyphicon example below:
You will see other files with the .map extension like this:
bootstrap.css.map
bootstrap-theme.css.map
You are now all set and ready to start your learning experience with Bootstrap!
We will kick off with the page layout.
Together,
we
want
An
to
build
one-page
portfolio
eye-catching
portfolio
gallery
to
showcase
with:
banner
work projects, services and
customertestimonials.
This should be a great way to get introduced to the Bootstrap library.
Building faster with the Bootstrap library

You need:
A code editor
A modern browser
The Bootstrap and project files
The library includes:
A powerful fluid grid system
A large collection of built-in CSS and components, ready to use out the box.
JavaScript plugins, easy to integrate with minimal configuration
The documentation is organized into sections:
CSS
Components
And, JavaScript
Each page is divided into chapters with code snippets and examples that you can
copy and plug right into your source code.
In the project, we will use:
The navbar component
The Jumbotron
and, some typography pre-defined classes
Navbar: Quick and easy setup

The navbar provided by Bootstrap is available in different variations with lots of
add-ons:
Search field
Collapsible menu
Brand image
Buttons and forms
And, there is more behind the scenes:
The navbar is responsive and its appearance adapts intelligently as the

viewport width increases.
It requires JavaScript. The javascript.min.js file is usually added at the

bottom of the HTML document right after the JQuery assets.
It is absolutely necessary for functionalities like drop-downs and collapsible
menus, to name a few.
I know what youare thinking: it seems like a lot of work.

Well, Bootstrap has already done the hard work for you. We will not be building
everything
from
the
ground.
We
will
show
you
how.
In your code editor, open index.html. You will only need this file open for a
moment.
In your index.html file, you will see that we have already made some code
available. We will change a few things.
A standard navigation bar is created with

<nav class='navbar navbar-default></nav>
Lets explain the markup bit by bit:

First, we have the <nav> element. If you are familiar with HTML5 semantic, you
know that this is used to make your page accessible.
The <nav> element includes 2 classes: .navbar and .navbar-default
navbar: represents the main class, common to every navbar component.
.navbar-default: adds styling with a silver shade, and a combination of

gradients and shadows.
There is also .navbar-inverse to obtain an inverted navbar. Try to

replace.navbar-default with .navbar-inverse to see the result.
We will move further down to find the

links: home,services and projects.
Now, we are going to start changing things:
<ul>
element with the menu
Navbar fixed to top

It is easy to achieve with a pre-defined class:
Inside the <nav> element, add .navbar-fixed-top like so:
This will keep the navbar glued to the top. When you scroll down the page, the
navbar stays in place.
Conversely, you can also use .navbar-fixed-bottom to have the navbar fixed to
the bottom.
Component
alignment
Now, the navbar would look better with the brand name on one side and the menu
on the other side. The component alignment will do the job perfectly.
By default, an HTML element is aligned to the left. Adding the class .navbar-right
allows you to float the element to the right.
Inside the parent element <ul>, add .navbar-right
Now, the menu is automatically flushed to the right.

Brand
Next, we include a brand image to replace the brand name Joedoe.com.
image
Inside the anchor tag with the class .brand-image, replace the text link
JohnDoe.com with an image tag <img src=.. alt=>
The image source is images/bootstrap-logo.png
And there you have it: a nice navbar fixed to the top with the Bootstrap logo and
the menu on the right.
Now, we move on to the banner.

A banner to impress
The banner is a key element to make your content compelling and powerful. The
jumbotron seems like the perfect choice for it.
Jumbotron
The jumbotron is a grey box with rounded corners. It will serve to call extra
attention to the banner we are about to build.
As shown below:
copy the code snippet
add to your source code inside <div
id=banner>
Then, we make the following changes:
A name wrapped in a <h1>
A title wrapped in a <h2>
To get this:
Feel free to replace it with your own content, of course!

Buttons
A great call-to-action will make all the difference in your portfolio site. Why not
use a fancy button?
Bootstrap buttons have a common class .btn and another specific class to add
styling and a color.
Example:
<a class="btn btn-default">Learn More</a>
Color options include:

.btn-default
.btn-primary
.btn-success
.btn-primary
-btn-info
.btn-warning
.btn-danger
Inside the jumbotron, replace .btn-primary with .btn-warning, like so:
<a class="btn btn-warning">Learn More</a>
Next to .btn-warning, you have the class .btn-lg

Size options include:
.btn-lg for a large button
.btn-sm for a small button
.btn-xs for very small
and, no class defaults to a medium size.
We keep .btn-lg, which will work best for a call-to-action.

Alignment
classes
Finally, we center the text inside the jumbotron with the alignment classes.
In the parent element of the jumbotron, add .text-center.
<div class="jumbotron text-center"></div>
Final result:
The services and projects portfolios are coming next.

Now is a great time to talk about the grid system.
Webpage layout powered by the grid system

A portfolio is the place to showcase your most valuable work. So, you want to
make
it
visible
to
wide
audience
and
on
all
devices.
For that, we need a responsive and flexible layout that can work across all devices,
from large screens to smartphones. You can achieve that with the grid system and
the pre-defined grid classes .
The grid system is mobile first, fluid and responsive.
Responsive and fluid: it scales up to 12 columns as the device size

increases
Mobile first: the design will always be full-width unless you specify
otherwise with the pre-defined grid classes.
Grid System: How it works

The markup below is a basic example of the grid system:
The .container represents the highest level of the grid system structure.
Within the .container, we add the .row, which, as you may expect, creates a
row.
You can then complete the grid layout by adding columns.
The above grid example above, with 3 div elements and the class .col-md-4, will
render like this:
Lets break this down a bit:
col is the common prefix to every pre-defined grid class.
md is short for medium devices. It targets medium and large screens.

(>992px). See other grid options
4 is the number of columns you want to add to your design.
It can be a number between 1 and 12.

We
will
repeat
this
together,
because
now
we
have
to
sections: servicesand projects.

Services Section
In our template, inside the section <div
id=services>
Add a div .container
Within the container, add the .row to include the columns.
The expected result is 3 paragraphs on 1 row.

We are only targeting the desktop and large screens for the moment.
So, we add 3 divs and .col-md-4 like so:
build
the
Inside, add an <h3>
And, use lorem ipsum for the <p> content.
Let s do the same for the projects portfolio section, where we will add images.
3-3 Projects Portfolio
Inside the section <div
id=projects>
Add a .container
Within the container, add a .row to include the columns.
The expected result is 4 images on 1 row.
We are only targeting the desktop and large screen for the moment. So, we add 4
divs and .col-md-3
We will add images soon

Image thumbnails
We are getting closer to finalizing the projects gallery. We are just missing images.
Each column .col-md-3 will hold an image thumbnail.
The thumbnail is a component designed to showcase images. The markup is
minimal and the setup quick just what we are looking for!
Copy the markup from the documentation below:
Add the code snippet inside each column like so:
<div class="col-md-3">
<a href="#" class="thumbnail">

<img src="images/projects/web-template.png" alt="image">
</a>
</div>
This is a 4-column layout, so make sure to use .col-md-3.
You can then add a source image for each thumbnail.

We have made images available in the images folder (images/projects/webtemplate.png).
Or, feel free to use your own assets. This is your portfolio, after all.
This is how the final markup should look:
And, here you go!
Now, add another row to display 4 more thumbnails

In total, we have 2 rows and 8 image thumbnails.
We have another section dedicated to testimonials. This is empty for now. We
will leave this part for later, when we will create a slideshow with carousel.js.
Inside the footer
We will complete the design layout with the footer.
We have 2 paragraphs and we want the 2 on the opposite sides of the screen. This
can be done with a 2-column layout.
We start with a .container inside the footer tags
Next, we include a .row to wrap 2 columns
Then, we add .col-md-6 <div
class= col-md-6>
6 and 6 add up to 12 columns, which will be the full width of the 12-column grid.
Finally, we re-align each paragraph with .text-left and .text-right like so:
We are almost done with the footer. Next, we are adding a label and
a glyphicon.
Labels
The page was designed with Bootstrap v.3.3.5 and we want to highlight it with
alabel. It works like the button with a common class .label and modifier
class to add the styling and a color.
Wrap Bootstrap v.3.3.5 within <span> tags
Add the common class .label to the opening <span> tag
Choose a modifier class to add color.
We will add .label-primary

<span class="label label-primary">Bootstrap (v3.3.5)</span>
Glyphicons
Glyphicons are free to use with the Bootstrap resources.
Every glyph has a common class .glyphicon, then another class specific to the
glyphicon selected.
We are going to use glyphicon-heart to display Designed with
Inside the second <p>, add a <span>
Inside the <span>, use the class .glyphicon and .glyphicon-heart like so:
<span class=" glyphicon glyphicon-heart" aria-hidden="true">
The role of glyphicons is purely decorative, so to hide them from assistive devices
(screen readers) we add the attribute aria-hidden=true
Here you go:
Good job!
Next, were going to take another step further into the Bootstrap learning
experience with the JavaScript plugins.
Javascript plugins made easy!
Knowing some JavaScript will be enough to get you up and running with making
your site interactive, and with the help of Bootstrap. Heres how:
We will start with carousel.js to create a slideshow and display customers

testimonials
Next, we will add a modal. This is like a small window popping up on a

click event
Lastly, scrollspy.js: another plugin that comes with the power of updating
the active state of a menu link based on the scroll position of a webpage.
(See theexample with scrollspy.)
Even if it seems like a challenge, you can be assured that its not.
Carousel.js
Below the projects gallery, we have included a testimonials section so visitors can
read through reviews left by satisfied customers.
Given the great amount of content possible, displaying 4 or 5 testimonials could
use up a lot of real estate. Therefore, we will include a carousel to allow visitors to
slide through testimonials one after another instead of scrolling down the page.
Real smooth!
So, lets build a slideshow of testimonials.
To build the slideshow, we will use:
Carousel.js
Media objects
Testimonials Slideshow
Copy the first markup example available on the documentation
Inside <div
id=testimonials>,
add the carousel markup.
You can get rid of the indicators.
We only keep the wrapper for slides and the controls.
Try
it
now!
You will see the structure of the carousel with 2 controls (left and right arrows) on
each side. There is no content for now.
Next, we will add the content: the testimonials.
Media Object
Inside each .item slide, we add a media object.
Copy the code example available in the documentation and paste directly
inside the .item.
Get rid of the
And, replace them with the media object code snippet.
<div>
and <img> tags of the .item slide
To complete the markup of the media object, simply add:
the image source: images/testimonials/
lorem ipsum within the .media-body
To adjust the layout, wrap each media object in a column with .col-md8 and .col-md-offset-2
This is the final markup below:
What about .col-md-offset? Well, we have not covered it yet.

Offsetting columns works in combination with the grid system classes. It allows
you to move columns to the right by increasing the left margin.

It works much like the grid classes.
The prefix is to target the viewport size. col-md-offset
The suffix number, between 1 and 11, indicates by how much you want to
move the columns further to the right.
See the difference for yourself with or without .col-md-offset-2.
Without,
the
columns
are
not
centered.
With, the 8 columns are centered and moved further right by 2 columns.
Image shapes
We will finish with some images. Images can be styled easily with image shape.
Which one do you want?
Img-rounded
Img-circle
Img-thumbnails
Add .img-circle to the <img> tag like so:

<img class="media-object img-circle" src="images/testimonials/maleclient2.png" alt="image">
We now repeat the process from the top to have 3 (or more) slides in total.
Add an .item slide
Add a .container
Include a .row and 8 columns with .col-md-8
And, offset by 2 columns with .col-md-offset-2
Add the media object markup.
Finally, change the image shape with .img-circle
Thats it! Now visitors can enjoy cycling and reading through your clients
testimonials. What a treat!
Pop-up Modal
The Modal plugin is like a dialog box or a pop up window used to display
information to visitors.
We will add a modal to the jumbotron section. You remember with the call-toaction button, right?
Clicking the button will make a window pop up to display well, we wont tell you
right now.
For now, we will show you how to create a modal via data-attributes.
2-step
process
On the bootstrap documentation, lets head over to the javascript section and
select modal.js to see how the markup looks:
We first need a trigger button.
data-target and data- toggle are data-attributes that you embed inside your
markup to bind the HTML elements with javascript.
Example:
<a class="btn btn-warning btn-lg" href="#" data-toggle="modal" datatarget="#contactMe" href="#"Contact Me </a>
In the jumbotron:
Inside
the
button
element
is
where
we
add datatarget=#contactMe anddata-toggle=modal. This is the trigger
button.
Change the text to Contact Me!.
<p>
<a class="btn btn-warning btn-lg" href="#" data-toggle="modal"
data-
target="#contactMe" href="#" role="button"> Contact Me </a>

</p>
Next, there is the modal element.

It has 3 primary sections:
A modal-header
A modal-body
A modal-footer
We have already made the modal element available in the project with our own
markup.
In the source code, this modal structure is invisible until triggered with a click
event.
The modal element has a unique identifier id=contactMe.
Very important: the data-target and the identifier must match. So, remember to
update the data-target=#contactMe inside the trigger button, to match
theid=contactMe in the modal.
Try it now!
When you click on Contact Me, the button will fire off the modal dialog and
display surprise! A contact form:
Inside the .modal-body, we have added a contact form. You can also include:
A video
An image
Or, remote content
We will make a detour to the CSS section to explain how to set up a contact form.
Contact
Form
Modal
This is a great example of a pre-styled and enhanced HTML element. Form

elements are ready to use with no extra styling required.
Here is how we did it:
The form documentation includes code examples and snippets that make the
process straightforward.
We have pasted the HTML form code snippet inside the .modal-body
And, we have kept just what we need:

fields for the name and an email address
and, a textarea for the message.
Each
label
and
input
is
wrapped
in
a .form-group
The for and id attributes must always match to allow autofocus.
Forms add-ons and variations include:
Static Control
Focus, disabled and readonly State
Help text
And, control sizing
We will look at the 2 last ones: help text and control sizing.
A help text is extra information to the user.
Below the textarea, we add the following code:
<span id="helpBlock" class="help-block">250 characters maximum</span>
(optional)
Add
the
attribute aria-describedby=helpBlock inside
the
associated input or textarea for assistive technologies such as screen readers.

Control
sizing is
made possible with super helpful classes like .input-
lg and.input-sm
Try .input-lg inside each input to see how it renders.
<div class="form-group">
<label for="sender-name" class="control-label input-lg">Name:</label>
<input type="text" class="form-control input-lg" id="sender-name">
</div>
List-inline
Below the submit button, we have added an additional modal-footer to include a
list of social media links.
<li>
are, by default, block-level elements, meaning each will use one line.
In order to display the social media links on one single line, we use .listinline like this:
<ul class="list-inline">
This will result in an inline list like below, when the modal dialog opens up:
Changing the modal size

The modal comes in 2 sizes: large and small.
In your markup, add the modifier .modal-lg next to .modal-dialog. This

will make the modal bigger.
<div class="modal-dialog modal-lg" role="document">
Conversely, .modal-sm gives you a small modal.

<div class="modal-dialog modal-sm" role="document">
Try it!
Scrollspy navigation
The scrollspy plugin watches for position change on a webpage to automatically
update the active state of the navigation links.
It means literally what its called.
Spy = it spies on the element to which it is attached
Scroll = it updates based on the scroll position
We will add the scrollspy behavior to the navigation bar. Just like the modal.js, it
requires 2 steps:
We add the data-attribute data-spy=scroll to the element we want to

spy. We will add this one to the <body> element:
<body data-spy="scroll">
Inside the body, add data-target:
<body data-spy="scroll" data-target="#menu">
The data-target refers to the element we want to update with the active state. In
this case, this is the menu navigation (home, services and projects). This one
will have a unique identifier.
Inside the div that wraps the unordered list <ul>, add a unique identifier.
<div class="collapse navbar-collapse" id="menu">

<ul class="nav navbar-nav navbar-right text-center">
<li class="active"><a href="#banner">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#projects">Projects</a></li>
</ul>
</div>
Important: both the data-target and the id must match.
Try
it
now!
When you click a menu link, the page skips to the targeted section and the link
automatically updates to active. This is a much better user experience.

Bootstrap can help achieve great results with little to no effort. Look at the
portfolio that you just built. Impressive!
Next, we will take your Bootstrap experience to the next level by teaching you how
to combine default and custom styling.
Leveraging Bootstrap
Looking at the source code of some websites, it is very common to find properties
from Bootstrap. However, you could not guess by just looking at the interface.
These sites look nothing like Bootstrap.
Many developers and designers use Bootstrap to get a quick start in their project.
Their expertise allows them to fully take advantage of the framework while staying
in control of their design.
You can do it too!
We will show you how to do that in a manner that is quick, effective and nonobstructive.
Applying custom styles
In your code editor, open css/style.css. Inside, we have added some global
styling.
Below is where you will write your custom style to override the default Bootstrap
CSS.
Very important: you never ever want to change the bootstrap files:
bootstrap.css
or
bootstrap.js.
This is recommended practice to keep your custom style and the Bootstrap files
separate.
Your custom style must be in style.css or else.
And, the bootstrap files remain untouched.
Naturally, you must add your style.css stylesheet in the head section of
theindex.html, like we did for you.
The goal here is to override the default Bootstrap CSS. To do so, your custom style
always comes last. This follows the rule of Cascading Stylesheets, so CSS rules
positioned last take precedent.
And, this is how we can start customizing Bootstrap.
Customizing the navbar
The default navbar is easily recognizable. Anyone could guess that your site is a
product of Bootstrap. However, you want it to be your portfolio, not just a copy of
a Bootstrap template. Time to be original!
We will start by targeting the text links. They look a bit tiny.
And, we will also change the font size.
In style.css, we have already added the corresponding selectors.
First, we target the .navbar with font-size:20px;
Second, we make the width of the <li> larger.
(style.css)
We also target .navbar-brand in case you should decide to keep a text link in
lieu of the bootstrap logo.
Finally, we align the text links with .text-center in the HTML markup
Looks different already.

Styling the banner
For the banner we want to get rid of the jumbotrons default grey color and display
the content on a plain background color. Finally, we increase the font size of the
headings.
In order to figure out which CSS rule needs overriding, we must look into the
default Bootstrap CSS. We dont mean for you to open and inspect the
bootstrap.css. No! Instead, we will use the inspector tool.
The inspector tool
If you are using Chrome, the inspector tool comes with the web developer tool.
Click right on the element you want to inspect
Select inspect element to open the console
In the console, the left side allows to inspect the DOM (Document Object
Model)
The right side provides you with styling details about the HTML element
inspected (highlighted)
Try it yourself! Highlight the jumbotron, click right and select inspect
element to open the console.
As seen on the console, the .jumbotron class has the following CSS rules.
We want to override: .jumbotron {background-color: #eee}
(console right panel)

In style.css, complete the code like so:
.jumbotron { background-color: transparent; }
Once your custom change is applied, you notice that the information on the
console has changed.
Your custom style.css is available first, meaning that it takes precedence

over other styles.
If you scroll down the console a little, you will see that the same selector
originating from the bootstrap.min.css is stricken through, meaning that it
has been overridden by your custom style.
If you use Firefox, firebug will help you through the same process.
Web developer tools for other browsers are listed here.
Font size
As
part
of
the
customization,
we
make
the
headings
with .font70 and.font80.

These rules are available at the top of style.css.
Complete the code like below:
<h1 class='font80' >John Doe</h1>

<h2 class='font70'>Developer & Designer</h2>
Same for the headings of the sections services, projects and testimonials:
<h1 class="font60">Services</h1>
<h1 class="font60">Projects</h1>
bigger
<h1 class="font60">Testimonials</h1>
Finally, lets change the color to something lighter.

.jumbotron {
Background: transparent;
color: #ecf0f1;
}
For the color swatches, we are using flatuicolors.

And, the page customization is now complete.
We told you that it would be effective, non-obstructive and quick!
Effective: the inspector tool helps find exactly which selector to target.
Non-obstructive: we allow the bootstrap and custom files to co-exist in a

project without interfering with each other. The last file will override the
first without altering the original files.Because your site is powered by the
framework, you must always have the Bootstrap files in your

project. However, removing the custom style will not break your site. You
would only lose the custom style.
And quick: because of the first two!
Mobile First
There are over 3.1 billion mobile web users worldwide. In the U.S. alone, 25% of
mobile web users use mobile only. And, the numbers keep growing.
Mobile first is an important concept to consider. As the web landscape becomes
increasingly complex, it is becoming even more challenging for developers and
designers to create the best universal web experience.
Thankfully, the Bootstrap framework is responsive, flexible and mobile first. It
provides great tools and solutions to help build layouts that can gracefully adapt
to any device.
Lets see it in action with a quick demo.
Try to reduce the size of your browser and watch what happens.
First, the navigation bar is replaced with a square-shaped icon with 3 lines across
it.
Clicking the icon will toggle the menu up and down to alternately reveal and hide
the
menu
content.
On a large screen, we see a horizontal menu that turns into a collapsed menu
when switching to a small screen. Genius!
This is a great example of adaptive design that Bootstrap can help us achieve with
little effort.
However, not everything looks as nice on a small device as on a desktop view.
When you scroll down the page, you may notice a few areas that need
improvement.
The pre-defined grid options classes and the responsive utilities will come to the
rescue.
In this part, we are about to take it up a notch with more control over how your
design renders on multiple devices.
Topics include:
Mobile first: How it works
The advanced grid system with multiple-column layouts
The responsive utilities
The viewport meta tag
And, the media queries
Mobile first: How it works

The services section is made of 3 columns. For that, we are using .col-md-4.
You remember the third sections introduction to the grid system, where we
explained that md is short for medium.
col-md is used to target medium-sized and large screens only.
Any smaller size will not be targeted, bringing the column size to its default:
full-width.
Confused? Lets clarify with a demo:
Reduce the size of the screen to see what happens with the services layout.
With the grid system, the default styling is always full-width until overridden with
a pre-defined class like .col-md-4.
Full-width looks best on a smaller screen hence the concept of mobile first. So,
we wont change anything here.
However, if you decide to override mobile first on a tablet, you would use the
class.col-sm-4 to target 768px-wide devices and larger.
Lets try that next.
Advanced grid system: Multi-column layout
The projects gallery displays on 4 columns. That looks nice on desktops and
large screens.
What about on a tablet? It looks a bit squished. It would be nice to see 2 images on
a row.
With an advanced grid system, it is possible to combine multiple pre-defined grid
classes to create a multi-column layout like the example below:

<div class="col-sm-6 col-md-3">
</div>
The markup should look like this:
On tablet view, the class .col-sm-6 will limit the number of images to 2 per row,
while the number will remain at 4 on a desktop view with .col-md-3.
See below if it makes more sense:
Desktop view
Tablet view 2 images per row!
Now, going even smaller, like on a smartphone, things start to get a bit cluttered.
There is a lot going on. And, we have a lot to scroll down through before reaching
the bottom.
To improve the mobile user experience, it is best to keep the content to a
minimum
and
limit
the
number
of
images
to
in
total.
How so? By making one row invisible. This is when the responsive utilities come
into play.
Responsive utilities
Just like the grid options, responsive utilities allow more flexibility in the
responsive layout. Their purpose is to make elements visible or invisible based on
breakpoints.
In Responsive Web Design, breakpoints are used to target different devices with
specific styling.
Hidden
row
To make the second row disappear when we reach the small (<768px) breakpoint,
we use .hidden-xs.
And thats all there is to it!

Testimonials: Adaptive content
Moving on with the responsive utilities, we will adapt the testimonials section to
the mobile screen.
On a tablet view, the testimonials carousel looks fine.
On a small device, its harder to read.
Inside the section testimonials:
We
add
another .container right
before
the
closing
</section><!testimonial -->
Inside the .container, we add:
A <h1>
And, a media object (the same that we have inside the carousel) like so:
tag.
Now, the goal is to make the content interchangeable and adaptive based on the
viewport size.
.visible-xs makes the content visible on small devices only
Conversely, .hidden-xs hides the content on small devices
To do so:
We add .hidden-xs to the container with the carousel
<div class="container visible-xs">
And, we add .visible-xs to the second container without the carousel

<div class="container hidden-xs">
Then, the web content adapts as the viewport changes size.

Now try it in your browser
On medium to large screens, we can slide through testimonials. Then, the
slideshow gets replaced by static content when we reach the smaller breakpoint.
Interchangeable Headings
We are purposely making the heading bigger. However, this may not suit the
mobile display. Too big!
The idea is to duplicate headings in the markup and to alternately display them as
the screen size decreases.
In the banner, update the code like this:
<h1 class='font80 hidden-xs'>John Doe</h1>

<h2 class='font70 hidden-xs'>Developer & Designer</h2>
(Duplicate: will show on small screens only):

<h1 class='visible-xs'>John Doe</h1>
<h2 class='visible-xs'>Developer & Designer</h2>
The first headings will display on screens of 768px and larger
The second set of headings (duplicate) will show on smaller screens with a
regular font size: 36px.
Repeat the process for each section:
Services
Projects
Testimonials
Example:
<h1 class='font60 hidden-xs'>Services</h1>
<h1 class='visible-xs'>Services</h1>
Now, you are probably wondering how the browser can figure out which class to
apply. This is when the meta viewport tag comes into play.
The Viewport Meta Tag
The meta viewport is set in the head section of the index.html
<meta name="viewport" content="width=device-width, initial-scale=1">
The viewport represents the visible area of a page, which varies as the device size
gets smaller or larger.
With the viewport meta tag, the width of the screen is detected and the
information is sent to the browser, which knows the CSS to apply for a specific
breakpoint. It lets you control how you want your site to display on different
screen sizes.
For better control over cross-platform responsive design, you can write styling
that will take effect for specific breakpoints. CSS lets you define it with the media
queries.
Media Queries
The @media rule is used to define different styling for key breakpoints.
Some
global
styling
was
not
really
to
our
liking.
So, in style.css, we use the @media rule to write custom styling for the navigation
links and the footer to better fit the small screen view.
@media screen and (max-width: 468px) {
}
Navigation links <li>

Because full-width always works best on small screens, we set the width of
the<li> at 100%
In the media queries, update with the code below:
@media screen and (max-width: 468px) {
.navbar li {
width: 100%;
}
Footer
For the footer, the columns become full-width automatically with mobile first.
However, we use text alignment classes in the markup and it looks funny on a
small screen.
So, we adjust like so:
text-align:left
Plus, we are adding a little bit of margin on the top and bottom.
In the media queries, update with the code below:

footer p {
text-align: left;
margin: 3px 0;
}
Before After Better!
Bootstrap provides a table of media queries that you can use in FEWER files.
Replace the @variables with numerical values to define your breakpoints and you
are good to go.
Congrats for making it this far! Still cant get enough of Bootstrap?
There is more to come, and we have saved the best for last. Here come the
bonuses!
BONUSES
Topics include:
Tootip.js
Carousel.js
Font Awesome
Adding a background image to the banner
Tooltip.js
Tooltip.js is a quick way to display extended information on mouseover, like the
example below when hovering over an image.
It works via data-attributes, and the configuration is minimal.

Inside <div
id=project>,
each image thumbnail will include a tooltip:
First, the attributes: data-toggle and data-placement are

the <img>element.
added
Another attribute is title with the text you want to display as a value.
<img data-toggle="tooltip" data-placement="bottom" title="Add text"

src="images/projects/web-template6.png" alt='image'>
You will not be able to see the tooltip yet.
to
Tooltip.js needs to be initialized with a little script at the bottom of the index.html
like so:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
We call tooltip() on [data-toggle=tooltip]

Try it! You must refresh your browser first.
Update data-placement to position the tooltip: left, right or top
Update title to add your text
More
Carousel.js
options
We want to show you how to have more control over the carousel behavior, such
as:
Interval
And, pause on hover
The interval is the amount of time between each slide. The default is 5000ms,
which is in milliseconds.
To give your visitors all the time they need to read through testimonials, we
should increase this value a bit.
Options can be easily implemented via data-attributes, inside the carousel parent
element, along with other data-attributes like this:

<div id="carousel-example-generic" class="carousel slide" dataride="carousel" >
To
change
the
default
value
of
interval,
we
write
data-interval
The value is in milliseconds. So, we write 10000 for a 10-second interval.
<div id="carousel-example-generic" class="carousel slide" dataride="carousel" data-interval="10000" >
Thats more time to read all the great feedback left by customers!
You also can allow a pause between each slide.
On mouseover, the cycling pauses automatically, and then it resumes on
mouseout.
This is another option available with data-pause=hover
Add it to the carousel parent element like so:
<div id="carousel-example-generic" class="carousel slide" dataride="carousel" data-interval="10000" data-pause="hover">
Now,
try
it!
The slideshow cycles through the slides every 10 seconds, stops on hover and
resumes on mouseleave.
It is definite advantage to be able to control the behavior of a site this way. You
can read more about options here.
Font Awesome
Font Awesome is a collection of 519 scalable vector icons, also designed by the
Bootstrap team. They are delivered in font format, so they can be customized with
CSS.
We will update the following sections with the Font Awesome icons.
Services
Modal Contact Form
We will start with a quick setup with CDN.

Quick setup with CDN
Font Awesome offers a quick and handy way to get started with the CDN.
In
the
head
section,
we
have
added
the
Font
Awesome
CDN.
A CDN is a Content Delivery Network, or a system of distributed servers that

delivers content based on the users geographical location.
This is like using a regular stylesheet, except that the file is hosted on an external
server. Therefore, the page is lighter and loads much faster.
Now, we are going to see examples of icons and see how to add them to our
designs.
To add a Font Awesome icon, use <i> tags
The common class is .fa
Then, add a modifier for the icon selected. Example: .fa-camera-retro
Here is the result:
<i class="fa fa-camera"></i>
In the services sections, we add a few icons to make it more appealing.
In the markup, add a <p> above the <h3>
The <p> will host the icons wrapped in <i>
Complete the markup like so:

<p><i class="fa fa-mobile"></i></p>
You can also customize the size with .fa-4x

<p><i class="fa fa-mobile fa-4x"></i></p>
Update all 3 columns with Font Awesome icons like this:

<p><i class="fa fa-desktop fa-4x"></i></p>
<p><i class="fa fa-mobile fa-4x"></i></p
<p><i class="fa fa-pencil fa-4x"></i></p>
Font Awesome is in font format, so we can customize with the CSS color property
in style.css:
#services i {
color: #3498db;
}
We do the same for the contact form in the modal dialog. In the modal footer, we
have
included
From this:
text
links
that
we
will
replace
with
font
icons.
To this:
In the modal element, we replace the text links with social media font icons.
The markup looks like this:
<ul class="list-inline">
<li><a href="#"><i class="fa fa-facebook-square fa-3x"></i></a></li>
<li><a href="#"><i class="fa fa-twitter fa-3x"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin fa-3x"></i></a></li>
<li><a href="#"><i class="fa fa-github fa-3x"></i></a></li>

</ul>
Background Image
This is the final touch to wrap it all up.
In the project files, we have added background images images/background.

In style.css, we can update like so:
#banner {
background: url("../images/background/bg-1.jpg");
background-size: cover;
}
6. Examen FINAL (aplicatie practica examinare + test grila)

Curs - Web Design

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Curs - Web Design

Enviado por

Direitos autorais:

Formatos disponíveis

I.

HTML5 & CSS3

Already you have seen we use <>s a lot.

4. Notice how the document passed validation with three warnings.

We have just added our first HTML Meta tag!

HTML5 Structure revisited

Exercise three (Part 1):

A.3. HTML Elements

Other Block Level Elements

Ordered HTML Lists - The Type Attribute

1. Type out the above code into a new html document.

Note: The height and width values are in px (pixels).

I am going to guess... It looks a little more appropriate now!

We use an anchor tags like so:

The above code will render as:

Let's try a simple link to Google:

The above example will render:

The above example will render:

Type out the above code and Try it out!

Linking inside a HTML document

Table data <td> are the data containers of the table.

A.4. The Basics of CSS

The browser view:

and the css code accordingly:

Lets look at the browser view and then comment it:

With no styling at all, this element has already a view (attributes):

<li>This will be just a text line</li>

So above I have declared three classes and given them attributes.

Predefine Classes & Attributes in CSS

Application of Multiple Classes in HTML

Add multiple classes

quotes like this:

Now look at this nice button view we get:

And the expected view in the browser would be like this:

Now notice the rectangular view:

We would use this element to hold our main navigational content.

The Meter Element

5. The Basics of CSS

Color - specifying text color.

Using Internal CSS

I have added an additional em tag, to demonstrate using classes as selectors in CSS.

We can use ids like so:

So, what are Padding, Margins and Borders?

Get your Bootstrap Project Started

before: allows you to start from a specific section of the tutorial

after: includes the completed version of a section

bootstrap.css is the normal version. It can be used at the development

add bootstrap-min.js for

as modal.js,carousel.js, and scrollspy.js, that well use in the project. It also

work projects, services and

Building faster with the Bootstrap library

The Bootstrap and project files

The library includes:

A powerful fluid grid system

JavaScript plugins, easy to integrate with minimal configuration

The documentation is organized into sections:

The navbar component

and, some typography pre-defined classes

Navbar: Quick and easy setup

The navbar is responsive and its appearance adapts intelligently as the

It requires JavaScript. The javascript.min.js file is usually added at the

I know what youare thinking: it seems like a lot of work.