Preview

3 - Bootstrap, Front end design, Jinja & more

 1. _______ is considered the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites. 
Note: Please refer also to our HTML/Bootstrap series

  HTML

  CSS

  SQL

  Bootstrap

 2. Bootstrap's grid system allows up to ___________ across the page. In this example we create a row and add the desired number of columns (tags with appropriate .col-*-* classes). 
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div> 

The first star (*) represents the responsiveness:
sm, md, lg or xl, while the second star represents
a number, which should add up to 12 for each row.

  16 columns

  4 columns

  3 columns

  12 columns

 3. The following is a bootstrap table component. The "td" tag refers to the _____ and the "tr" refers to the _____. 

  
Basic Table

  
The .table class adds basic styling (light padding and horizontal dividers) to a table:
            
  

    
      

        Firstname
        Lastname
        Email
      

    
    
      

        John
        Doe
        [email protected]
      

      

        Mary
        Moe
        [email protected]
      

      

        July
        Dooley
        [email protected]

  rows/tables

  rows/columns

  columns/rows

  rows/file name

 4. The following code shows linking to a css style sheet. The first one is a link to bootstrap and the second to: 
 <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="{{url_for('static',filename='main.css')}}">

  another bootstrap stylesheet held externally and called main.css

  a stylesheet called main.css held in the static folder (extra css)

  an internal stylesheet which is created in the same page as the link itself

  an external style sheet which cannot be accessed unless the bootstrap link is deleted

 5. Analyse the following css code which is in the style tags in the head section. Which of the following statements is true of the h2 css? 








This is heading 1


This is heading 2


This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.


Another paragraph.

  Heading 2 is red in colour and larger than Heading 1

  Heading 2 is red in colour and smaller than Heading 1

  Heading 2 is red in colour and the same size as Heading 1 as it has not been specified

  Heading 2 is blue in colour and smaller than Heading 1

 6. In the set up of a flask project, it is possible to have additional CSS. The recommended way is to:

  create another html page called static.html and include a link in it to templates/main.css

  create a static folder and have a main.css file inside it with the additional css.

  create another templates folder with a main.css file inside it.

  create a html page called additionalcss.html and include a link in it to the main.css

 7. The following html document displays a simple table on the screen. What does the CSS do? 








My HTML and CSS enabled table




  

    Firstname
    Lastname
  

  

    Peter
    Griffin
  

  

    Lois
    Griffin

  It applies a 5px solid black BORDER around the outisde of the table only

  It applies a 5px solid black border around the whole page

  It applies a 5px solid black BORDER around the table's rows and columns

  It applies a 5px solid black BORDER around the h2 heading of the page

 8. The following code for the home.html page does not appear to have any CSS but the styling is in place. Where is the CSS located? 
{% extends "layout.html" %}
{% block content %}



Big Questions


Welcome to our home page. We are going to attempt to answer the hardest questions in the universe!




The big question #1


The meaning of life? Arrg. Do tell us what you think!


Responses:


{% for review in reviews %}
	
{{review.title}}

	
Name:{{review.name}} on date:{{review.date_posted}}

	
Review comment: {{review.comment}},

{% endfor %}


{% endblock content %}

  It is most likely contained in an external HTML file which is not part of this project.

  The img tag contains a link to the CSS styling document.

  It is most likely contained in the layout.html page which it is inheriting from.

  The second line {{% block content %}} contains an invisible styling block

 9. The following code seeks to link the About link to the about page. What is missing?

  The code should be: {{url_include('about')}}

  Nothing is missing. The code is correct.

  The code should be: {{url:('about')}}

  The code should be: {{url_for('about')}}

 10. The following is the code contained in the about.html page. The page will not render correctly. Can you spot what is missing? 
{% extends "layout.html" %}
{% block content %}

	
About
This site is where we ask the most ridiculously difficult questions and attempt to answer them. Enjoy and please do contribute!
		

		

		

		
Love,

		
TheBigQuestion Team

  The last line should include: {% block content %}

  The first line should be replaced by: {% endblock content %}

  The third line after {% block content %} should be: {% end %}

  The last line should include the code: {% endblock content %}


Report an error