Web Programming BootStrap Unit Exercises

Size: px

Start display at page:

Download "Web Programming BootStrap Unit Exercises"

Kristin Lawson
6 years ago
Views:

1 Web Programming BootStrap Unit Exercises Start with the Notes packet. That packet will tell you which problems to do when. 1. Which line(s) are green? 2. Which line(s) are in italics? 3. In the space below show what the body of the webpage looks like. <!DOCTYPE HTML><html><head><meta charset="utf-8"> <title>css</title> div, p { color: green div p { font-style:italic </style> <p> Line 1</p> <div>line 2 <p> Line 3</p> <p> Line 4</p> Line 5 <p> Line 6</p> <!DOCTYPE HTML><html> <head><meta charset="utf-8"> <title>css</title> ul li { border:solid black thin; </style> <ol> <li>for the money</li><li>for the show</li> </ol> <ul> <li>north</li><li>south</li> </ul>

2 4. Circle the sections that should have a black background and white text. If none, write none. Home Chapter 1 This is one. Chapter 2 This is two. Chapter 3 This is three. <!doctype html><html><head> <meta charset="utf-8"><title>question</title>.one{ background-color:black;.one h2,.one p { color:white; </style> <h1>home</h1> <div class="one"><h2>chapter 1</h2><p>This is one.</p> <div class="two"><h2>chapter 2</h2><p>This is two.</p> <div><h2>chapter 2</h2><p>This is three.</p> 5. Create a simple web site that has three pages and all the css information is in an external style sheet that all three html pages link to. Be sure to include links on the pages so that one can navigate from one page to the others. Post this exercise on your site so that I may check it. page.html <!DOCTYPE HTML><html><head> <meta charset="utf-8"><title>css</title> <link rel="stylesheet" type="text/css" href="question.css"> p { color:green; </style> <h1>one</h1> <h2>two</h2> question.css h1, p { color:red; <p>three</p> 6. In the above page, write the color of the text. Note: the default text color, set by the browser, is black.

3 page.html file1.css file2.css <!DOCTYPE HTML><html> <head><meta charset="utf-8"> <title>css</title> <link rel="stylesheet" type="text/css" href="file1.css"> <link rel="stylesheet" type="text/css" href="file2.css"> HEY html, body { color: blue; html, body { color: yellow; 7. Copy and run the above three files. Note what color the word HEY is displayed in. Now switch the two link tags around so that file2 is first and file1 is second. Based on what you learned, select the TRUE statement. a) The first css file you link to has precedence over the second css file. b) The second css file you link to has precedence over the first css file. c) There is an error and neither css file has any effect. The answer to the above question will become important when we work with bootstrap because we link to their css file and possibly also link to our own custom css. In this situation we will want our css file to take precedence. page.html <!DOCTYPE HTML><html><head> <meta charset="utf-8"><title>css</title> <link rel="stylesheet" type="text/css" href="stylin.css"> <p class="boxed big">one</p> <p>two</p> <p class="back boxed">three</p> <p class="back boxed big">four</p> For problems 8 to 10, if the answer is none then stylin.css.boxed { border: thin black solid;.back{ background-color:gray;.big{ font-size:200%; 8. What text has a gray background? 9. What text has a border? 10. What text is 200% larger of its normal size? 11. Go to mrsawyer.com and look under Unit 8 Bootstrap of the Web Programming page. View without.html and with.html in separate windows on the desktop. Then view the two pages on a phone. On the desktop the pages should look the same. On a phone they will look different. What line of code is responsible for the difference in displays on a phone?

12. Create a page that has one h1 element across the top. There are two divs of content that should display side by side in a window that is 992 pixels or wider (as shown below).

4 12. Create a page that has one h1 element across the top. There are two divs of content that should display side by side in a window that is 992 pixels or wider (as shown below). If the window width is less than that, the two divs should be stacked on top of each other (as shown to the right.) Inside each div is an h2 element and a paragraph. The main content is 9 columns wide and the sidebar is 3 columns wide. Everything in the body is within a div that belongs to the.container class. 13. Create the page shown below. Use the container-fluid class. No matter how narrow the page is, the three sections should appear side by side. Actually they will overlap and it will look bad. This is one reason why you usually don t want to put two or more columns of text on a page viewed on a phone.

5 Extra Small (xs) Small (sm) Medium (md) Large (lg) less than 768 px 768 to 991 px 992 to 1,199 (px) 1,200 or more px 14. The screen width is 800 pixels in the figure to the right. There is a one-column space between the two sections. Which of the following could be used to fill in the blanks? Select all that apply. a) col-sm-3 col-sm-8 col-sm-offset-1 b) col-sm-3 col-sm-offset-1 col-sm-8 c) col-xs-3 col-xs-8 col-xs-offset-1 d) col-xs-3 col-xs-offset-1 col-xs-8 <h1>bootstrap</h1> <div class="row"> <div class=" "><h2>a</h2>lorem ipsum <div class=" "><h2>b</h2>lorem ipsum 15. Create a test page and paste this code into it to answer the following question. If the width of the page is less than 992 pixels, the two divs will be stacked and a) the second section will be indented by 2 columns because of the offset. b) the second section will not be indented by 2 columns because the offset only applies to medium screens or larger. <div class="row"> <div class="col-md-5"> <h2>c</h2>lorem ipsum <div class="col-md-5 col-md-offset-2"> <h2>d</h2>lorem ipsum

16. Write and upload to your site a page that looks similar to the one below. On medium or large displays there should be a two-column gap between the left and right sections.

Create a page similar to the one shown by following these guidelines. Put everything in a container. There are two rows.

6 16. Write and upload to your site a page that looks similar to the one below. On medium or large displays there should be a two-column gap between the left and right sections. On small or extra small displays the gap should disappear. Put all the content in a container-fluid class div. On medium or large displays On small or extra small displays 17. Create a page similar to the one shown by following these guidelines. Put everything in a container. There are two rows. The first row has an image in a section on the right; the second row has an image on the left. Both images should belong to the img-responsive class. The image on the left should have rounded corners. 18. Create a website with two pages.

7 19. Create a page with a dropdown menu that links to three external websites (e.g. google.com, espn.com, etc. you pick the sites. 20. This is a big, big, final exercise. Create a bootstrap website with at least 3 pages. Here are the requirements. There should be some theme or unifying topic to the site. It cannot be a lot of random text and images. No lorem ipsum. Possible topics could be about, a sport, hobby, favorite book or movie, music, something from another class (e.g. Spanish, math, science, etc.) You must add (and use) an external stylesheet in addition to the Bootstrap classes. There must be a navigation bar. A dropdown menu would be nice but is not required. It should look good whether viewed on a phone or desktop computer. There should some images. The above are the very basics. But we have only scratched the surface of what Bootstrap can do. Go to w3schools.com and click on the Bootstrap 3 Tutorial ( While this site is not without its faults (try googling w3schools bad ), it does have many good resources for beginners. So we are going to use it here. Scan over the links at w3schools and add the following to your site. A table that uses Bootstrap classes. Jumbotron on the home page! A form that uses Bootstrap classes. This should submit something to a php page that also uses Bootstrap. Throw some glyphicons in there too.

Front-End UI: Bootstrap

Responsive Web Design BootStrap Front-End UI: Bootstrap Responsive Design and Grid System Imran Ihsan Assistant Professor, Department of Computer Science Air University, Islamabad, Pakistan www.imranihsan.com