Front-End-Web - Assignment 1 - Bootstrap and Responsive Design  - Solved

In this assignment you will add a second page, aboutus.html, to your website. You will make use of the Bootstrap skills learnt in this module to prepare this web page for integration into the website.

Assignment Resources aboutus.html.zip 

Objectives and Outcomes 
In this assignment, you will continue to work with the website that you have been developing in the exercises. You will add the About Us web page to the website. To get you started, you are provided with a partially formatted aboutus.html.zip file given above that you need to download, unzip and move the aboutus.html to the conFusion folder that contains your website. At the end of this assignment, you should have completed the following tasks:

•       Updated the page to make use of Bootstrap classes and Bootstrap grid

•       Formatted the contents of the web page using the container, row and column classes

•       Use the responsive utilities (hidden-* classes) to enable hiding of the detailed descriptions in the extra small screen size devices

Assignment Requirements 
This assignment requires you to complete the following tasks. Detailed instructions for each task are given below. The picture of the completed web page included below indicates the location within the web page that will be updated by the three tasks.

Task 1 
In this task you will be updating the aboutus.html page to make use of the Bootstrap classes and components:

•       Update the page to make use of the Bootstrap CSS classes.

•       Update the page to also use your custom styles defined in your styles.css file, and

•       Update the page to make use of all the Bootstrap JS components.

Task 2 
In this task you will be adding appropriate formatting to the web page contents using container, row and column classes using the Bootstrap grid so that the web page is formatted to look like the figure given below.  •          The "About Us" title should stretch the entire width of the row.  

•       The "Our History" part should occupy only half the width of the row for small to extra large screens, leaving space on the right side for more content to be added later. The content should be stacked for extra small screens.

•       The "Corporate Leadership" section should stretch the entire width of the row. 


  

Task 3 
In this task you will use some responsive utilities provided by Bootstrap to hide some of the content only for extra small screens. You will make use of the hidden-* CSS classes provided by Bootstrap. To understand how to use these classes, please read the documentation here to learn how to apply the hidden-* classes. This will get you into the habit of consulting the Bootstrap documentation whenever you need to learn more about the various components and classes of Bootstrap. You should apply the classes so that the detailed descriptions of the corporate leadership is hidden only for extra small screens. Thus, your page should look like the figure below on extra small screens.

NOTE: Beginning with Boostrap v4.0.0. beta, the classes .hidden-* classes were completely removed (yes, they were replaced by hidden-*-* but those classes are also gone from v4 alphas). Starting with v4-beta, you can combine .d-*-none and .d-*-block classes to achieve the same result. As shown in here 

More details about the hidden-* classes can be found at http://v4alpha.getbootstrap.com/layout/responsive-utilities/.

While you are at it, please also apply the hidden-* classes to the descriptions in the index.html page. This is not part of the assignment, but should be completed to update your website.


Task 2:

•       The container class has been applied to the content at the correct location.

•       Row class, including the row-content class has been applied to the rows of the content. Do not apply row-content to the row containing the page heading

•       Column classes have been appropriately applied to the content within each row to provide responsive layout of the content.

Task 3:

•       The hidden-* classes are correctly applied to the content in the Corporate Leadership section to hide the detailed description of the corporate leaders.

You are required to include two full-page screenshots of your completed web pages, one for normal screen size, and one for extra small screens. To take a full-page screenshot of your page use the Chrome extension: Full Page Screen Capture.