Question

In: Computer Science

INFS 2400 – Challenge Assignment 6 Read ALL of the instructions carefully before starting the exercise!...

INFS 2400 – Challenge Assignment 6

Read ALL of the instructions carefully before starting the exercise!

Dear Colleague,

Earlier today I built my fifth website using HTML5, CSS3, and Bootstrap4. Bootstrap seems amazing, but it never did what it should do – make my website look better. Also, my page should have a blue theme that was provided in the CSS folder. This also didn’t work.

My website is supposed to look like what is shown in Figures 1 (see below). Someone told me that there are exactly 12 errors in the HTML and 4 errors in the CSS. Yes, 16 errors total! Can you help me find all of the errors?

Oh yeah, and I want the cards used in the ‘My friends’ section to stack in the mobile version (e.g. anything smaller than a small (sm) screen size (see figure two). I think Bootstrap can do a media query using columns – but I’m lost.

Hint: You should not add ANY LINES to the code. There will never be more than one error per line number.

Update both the ca6.html and ca6.css files. Also create a MS Word file describing the errors. More specifically, create a bulleted list describing your improvements and be sure to include the line numbers. Save the MS Word file as ca6_notes_LastName.docx into the ca6-broken folder, rename the folder ca6-fixed, then compress (ZIP) and submit to the Challenge Assignment #6 drop box in D2L.

Code HTML...

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Class Assignment 5: Get ready to be amazed!</title>

   <script rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bluethemm.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

</head>

<body>

<div class="contain pb-1">
<div class="jumbotron">
<h1 class="display-2">Get ready to be amazed!</h1>
<p class="lead">Here is where I will show the world how great my HTML, CSS and Bootstrap skills are. Unfortunately, I am still learning so there are a few errors. =(</p>
</div>
<div>
<h3>About me</h3>
<img align="right" height="200px" width="200px" class="img-rounded" src="img/picture_of_me.jpg" alt="Me in a white room" />
<p>Nulla congue mollis lorem nec convallis. Ut sodales a dolor quis eleifend. Vestibulum non tempus tellus. Morbi non neque sit amet turpis vestibulum euismod et porta erat. Morbi maximus est sit amet rutrum luctus. In varius neque non elementum scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque luctus sagittis maximus. Pellentesque blandit porttitor purus, eget tincidunt augue elementum vel.
Nulla congue mollis lorem nec convallis. Ut sodales a dolor quis eleifend. Vestibulum non tempus tellus. Morbi non neque sit amet turpis vestibulum euismod et porta erat. Morbi maximus est sit amet rutrum luctus. In varius neque non elementum scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque luctus sagittis maximus. Pellentesque blandit porttitor purus, eget tincidunt augue elementum vel.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis congue semper urna et blandit. Morbi et arcu dui. Phasellus vel mauris mi. Phasellus eu placerat velit, sit amet ultrices tellus. Integer at quam viverra dui aliquet pharetra.</p>
</div>

<h3>My friends</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis congue semper urna et blandit. Morbi et arcu dui. Phasellus vel mauris mi. Phasellus eu placerat velit, sit amet ultrices tellus. Integer at quam viverra dui aliquet pharetra.</p>

<div class="rows">
<div class="col-sm-12">
   <div class="card">
<div class="card-header">Jamie W.</div>
<div class="card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis congue semper urna et blandit. Morbi et arcu dui. Phasellus vel mauris mi. Phasellus eu placerat velit, sit amet ultrices tellus. Integer at quam viverra dui aliquet pharetra. </div>
</div>
</div>
<div class="col-sm-12">
<div class="card">
<div class="card-header">Dietmar N.</div>
<div class="card-body">Phasellus vel mauris mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis congue semper urna et blandit. Morbi et arcu dui. Phasellus eu placerat velit, sit amet ultrices tellus. Integer at quam viverra dui aliquet pharetra. </div>
</div>
</div>
<div class="col-sm-12">
<div class="card">
   <div class="card-header">Hossein K.</div>
<div class="card-body">Integer at quam viverra dui aliquet pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis congue semper urna et blandit. Morbi et arcu dui. Phasellus vel mauris mi. Phasellus eu placerat velit, sit amet ultrices tellus. Integer at quam viverra dui aliquet pharetra. </div></div>
   </div>
</div>

<h3>My five favorite things:</h3>

       <ul>
        <li>Camping in the midst of the Sossusvlei dunes</li>
        <li>Snorkeling between tectonic plates at Thingvellir</li>
       <li>Kayaking on the Bay of Fundy</li>
       <li>Wandering the streets of Thamel</li>
       <li>Learning HTML, CSS and the Bootstrap framework</li>
        </ul>

<h3>My three favorite MTSU classes (so far):</h3>

<div class="tab-content card mb-5" id="pills-tab-content">

   <div class="tab-pane bg-warning card-body fade show active" role="tabpanel" id="2400">
       <h4>INFS 2400: Web Development</h4>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, nisl ut pharetra vehicula, magna mi venenatis nisl, vel pulvinar magna augue in justo. Nunc tempus sodales tortor. Sed auctor lorem nec convallis molestie. Cras tincidunt, urna ac tincidunt ultricies, lacus diam luctus purus, nec fermentum elit leo semper felis.</p>
   </div>

       <div class="tab-pane card-body fade" role="tabpanel" id="2600">
       <h4>INFS 2600: Programming Logic</h4>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, nisl ut pharetra vehicula, magna mi venenatis nisl, vel pulvinar magna augue in justo. Nunc tempus sodales tortor. Sed auctor lorem nec convallis molestie. Cras tincidunt, urna ac tincidunt ultricies, lacus diam luctus purus, nec fermentum elit leo semper felis.</p>
   </div>

       <div class="tab-pane card-body fade" role="tabpanel" id="3200">
       <h4>INFS 3200: Business Application Development</h4>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, nisl ut pharetra vehicula, magna mi venenatis nisl, vel pulvinar magna augue in justo. Nunc tempus sodales tortor. Sed auctor lorem nec convallis molestie. Cras tincidunt, urna ac tincidunt ultricies, lacus diam luctus purus, nec fermentum elit leo semper felis.</p>
   </div>

</div>

</div>

<div class="footer fixed-top" align="center">The best site of the InterWeb, created by me!</div>



</body>
</html>

Code CSS...

@charset "UTF-8";
/* CSS Document for IC5 */

.body {
background-color: #D1EDFF;
}

.container {
bg-color:aliceblue;
}

jumbotron {
background-color: skyblue;
}

.footer {
background-color:skyblue
}

PLEASE MARK ALL #16 ERRORS AND THE LINES THEY ARE FOUND IN THE CODE, and CORRECT THEM, a

Solutions

Expert Solution

CSS file Errors : (renaming bluethemm.css to ca6.css)
While applying CSS properties using element selector we have to write only element name and enclose css properties inside {}. (Line No. 4 in bluethemm.css or ca6.css file)
   eg: element_name {
               property_name : value;
               ........................ : ........;
           }
   In bluethemm.css or ca6.css
   You have written .body {......}
   So, I removed . from there for applying element selector.

There is no bg-color property in css for setting background for html page (Line No. 9 in bluethemm.css or ca6.css file)
   You have to use background or background-color css property for setting background    for html page by using CSS property.
   selector_name {background-color: value;}
           OR
   selector_name {background: value;}

For applying css properties using class selector we should use dot(.)symbol or operator before class name then classname and enclose css properties inside {} (Line No. 12 in bluethemm.css or ca6.css file)
   .class_selector_name {
               property_name : value;
               ........................ : ........;
           }
   In bluethemm.css or ca6.css file you have written
   jumbotron {
   background-color: skyblue;
   }
   but jumbotron is class in html file so we need to add (.) dot before class name to apply    css properties.
   A jumbotron indicates a big box for calling extra attention to some special content or    information.
   A jumbotron is displayed as a grey box with rounded corners. It also enlarges the font    sizes of the text inside it.
   Tip: Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap    elements/classes.

I have added media query for making web page more responsive. (Line No. 3 and 7 in bluethemm.css or ca6.css file )
   @media only screen and (max-width: 768px)
   We use a handful of media queries for delivering different styles sheet to different    devices, to create sensible breakpoints for our layouts and interfaces. These    breakpoints are mostly based on minimum viewport widths and allow us to scale up    elements as the viewport changes.
   // Extra small devices (portrait phones, less than 576px)
   // No media query since this is the default in Bootstrap
   // Small devices (landscape phones, 576px and up)
   @media (min-width: 576px) { ... }
   // Medium devices (tablets, 768px and up)
   @media (min-width: 768px) { ... }
   // Large devices (desktops, 992px and up)
   @media (min-width: 992px) { ... }
   // Extra large devices (large desktops, 1200px and up)
   @media (min-width: 1200px) { ... }

HTML file Errors -
<div class="contain pb-1"> (Line No. 13 in .html file)
file contains "contain" class for div I have changed it to container to apply css properties defined in bluethemm.css file.
<div class="container pb-1">

At head section to apply bootstrap you have added (Line No. 7 in .html file)
   <script rel="stylesheet"    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   this line for importing and applying bootstrap properties.
   But for importing or for external stylesheet we need to use <link> tag or element .
   <link rel="stylesheet"    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

(Line No. 89 in .html file)
   Ideally footer is present at the bottom of the page but In this page footer is fixed at top
   So I set footer at bottom of page by applying fixed-bottom class of bootstrap.
   If you don't want fixed footer then you can use bottom class of bootstrap.

I have changed sequence of card classes of bootstrap.
I applied "card-body" class 1st for card (Line No. 30,38,46 in .html file)

I applied "card-title" class for card heading (Line No. 31,39,47 in .html file)

I applied "card-text" class for more information of card content. (Line No. 32,40,48 in .html file)

I closed <div class="col-sm-12"> tag after each card element. (Line No. 35,43,52 in .html file)

(16 errors in .html file and 4 in .css file)

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Class Assignment 5: Get ready to be amazed!</title>
<link rel="stylesheet" href="ca6.css"><!--<link rel="stylesheet" href="bluethem.css">-->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container pb-1">
<div class="jumbotron">
<h1 class="display-2">Get ready to be amazed!</h1>
<p class="lead">Here is where I will show the world how great my HTML, CSS and Bootstrap skills are. Unfortunately, I am still learning so there are a few errors. =(</p>
</div>
<div>
<h3>About me</h3>
<img align="right" height="200px" width="200px" class="img-rounded" src="img/picture_of_me.jpg"  />
<p>Nulla congue mollis lorem nec convallis. Ut sodales a dolor quis eleifend. Vestibulum non tempus tellus. Morbi non neque sit amet turpis vestibulum euismod et porta erat. Morbi maximus est sit amet rutrum luctus. In varius neque non elementum scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque luctus sagittis maximus. Pellentesque blandit porttitor purus, eget tincidunt augue elementum vel.
Nulla congue mollis lorem nec convallis. Ut sodales a dolor quis eleifend. Vestibulum non tempus tellus. Morbi non neque sit amet turpis vestibulum euismod et porta erat. Morbi maximus est sit amet rutrum luctus. In varius neque non elementum scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque luctus sagittis maximus. Pellentesque blandit porttitor purus, eget tincidunt augue elementum vel.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis congue semper urna et blandit. Morbi et arcu dui. Phasellus vel mauris mi. Phasellus eu placerat velit, sit amet ultrices tellus. Integer at quam viverra dui aliquet pharetra.</p>
</div>
<h3>My friends</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis congue semper urna et blandit. Morbi et arcu dui. Phasellus vel mauris mi. Phasellus eu placerat velit, sit amet ultrices tellus. Integer at quam viverra dui aliquet pharetra.</p>
<div class="rows">
<div class="col-sm-12">
   <div class="card">
    <div class="card-body">
<div class="card-title">Jamie W.</div>
<div class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis congue semper urna et blandit. Morbi et arcu dui. Phasellus vel mauris mi. Phasellus eu placerat velit, sit amet ultrices tellus. Integer at quam viverra dui aliquet pharetra. </div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="card">
    <div class="card-body">
<div class="card-title">Dietmar N.</div>
<div class="card-text">Phasellus vel mauris mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis congue semper urna et blandit. Morbi et arcu dui. Phasellus eu placerat velit, sit amet ultrices tellus. Integer at quam viverra dui aliquet pharetra. </div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="card">
    <div class="card-body">
   <div class="card-title">Hossein K.</div>
<div class="card-text">Integer at quam viverra dui aliquet pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis congue semper urna et blandit. Morbi et arcu dui. Phasellus vel mauris mi. Phasellus eu placerat velit, sit amet ultrices tellus. Integer at quam viverra dui aliquet pharetra. </div></div>
   </div>
</div>
</div>
</div>
<h3>My five favorite things:</h3>
       <ul>
        <li>Camping in the midst of the Sossusvlei dunes</li>
        <li>Snorkeling between tectonic plates at Thingvellir</li>
       <li>Kayaking on the Bay of Fundy</li>
       <li>Wandering the streets of Thamel</li>
       <li>Learning HTML, CSS and the Bootstrap framework</li>
        </ul>
    <h3>My three favorite MTSU classes (so far):</h3>
<ul class="nav nav-pills mb-3" id="tabbycat" role="tablist">
   <li class="nav-item">
       <a class="nav-link active" id="pills-2400-tab" href="#2400" role="tab" data-toggle="pill">INFS2400</a>
   </li>
   <li class="nav-item">
       <a class="nav-link" id="pills-2600-tab" href="#2600" role="tab" data-toggle="pill">INFS2600</a>
   </li>
   <li class="nav-item">
       <a class="nav-link" id="pills-3200-tab" href="#3200" role="tab" data-toggle="pill">INFS3200</a>
   </li>
   </ul>
<div class="tab-content card mb-5" id="pills-tab-content">
   <div class="tab-pane bg-warning card-body fade show active" role="tabpanel" id="2400">
       <h4>INFS 2400: Web Development</h4>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, nisl ut pharetra vehicula, magna mi venenatis nisl, vel pulvinar magna augue in justo. Nunc tempus sodales tortor. Sed auctor lorem nec convallis molestie. Cras tincidunt, urna ac tincidunt ultricies, lacus diam luctus purus, nec fermentum elit leo semper felis.</p>
   </div>
    <div class="tab-pane card-body fade" role="tabpanel" id="2600">
       <h4>INFS 2600: Programming Logic</h4>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, nisl ut pharetra vehicula, magna mi venenatis nisl, vel pulvinar magna augue in justo. Nunc tempus sodales tortor. Sed auctor lorem nec convallis molestie. Cras tincidunt, urna ac tincidunt ultricies, lacus diam luctus purus, nec fermentum elit leo semper felis.</p>
   </div>
       <div class="tab-pane card-body fade" role="tabpanel" id="3200">
       <h4>INFS 3200: Business Application Development</h4>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis, nisl ut pharetra vehicula, magna mi venenatis nisl, vel pulvinar magna augue in justo. Nunc tempus sodales tortor. Sed auctor lorem nec convallis molestie. Cras tincidunt, urna ac tincidunt ultricies, lacus diam luctus purus, nec fermentum elit leo semper felis.</p>
   </div> 
</div>
   </div>

<div class="footer fixed-bottom" align="center">The best site of the InterWeb, created by me!</div>
  
  
  
</body>
</html>


//ca6.css
/* CSS Document for IC5 */
@charset "UTF-8";
@media only screen and (max-width: 768px){
body {
   background-color: #D1EDFF;
}
}
.container {
   background-color:aliceblue;
}

.jumbotron {
   background-color: skyblue;
}

.footer {
   background-color:skyblue
       }

venereology answered 6 months ago

Next > < Previous

Related Solutions

PLEASE READ ALL OF THESE INSTRUCTIONS BEFORE BEGINNING THIS ASSIGNMENT. For this assignment, you need to...

PLEASE READ ALL OF THESE INSTRUCTIONS BEFORE BEGINNING THIS ASSIGNMENT. For this assignment, you need to analyze the information below from BOTH the management AND the employee perspective. This information pertains to a labor union in a simulated/made up/not real firm in Glen Ellyn. The first part of your information relates to Management – the second part relates to the Labor Union employees. I have provided you with information from the last union negotiations at the plant in 2016. It...

PLEASE READ CAREFULLY BEFORE STARTING THE ASSIGNMENT!!! I ALREADY HAVE ANSWERS FOR THE FIRST JOURNAL TABLE...

PLEASE READ CAREFULLY BEFORE STARTING THE ASSIGNMENT!!! I ALREADY HAVE ANSWERS FOR THE FIRST JOURNAL TABLE AS YOU CAN SEE BELOW, BUT I DON'T HAVE THE ANSWER FOR THE SECOND JOURNAL TABLE. I FOUND MANY ANSWERS FOR THE SECOND TABLE HERE ON CHEGG. BUT NOT ONE HAS A CORRECT ANSWER. FOR SOME OF THEM IT'S COMPLETELY DIFFERENT ANSWERS ALTHOUGH THE QUESTION IS THE SAME. PLEASE ANSWER THAT TABLE CAREFULLY AND CORRECTLY. USE THE SAME EXACT TABLE THAT I PROVIDED BELOW...

PLEASE READ CAREFULLY BEFORE STARTING THE ASSIGNMENT!!! AS YOU CAN SEE I AM DONE WITH ALMOST...

PLEASE READ CAREFULLY BEFORE STARTING THE ASSIGNMENT!!! AS YOU CAN SEE I AM DONE WITH ALMOST HALF THE TABLE. I DIDN'T FIND A SINGLE AMOUNT FOR THE COLUMNS: RENT EXPENSE, SALARIES EXPENSE, SUPPLIES EXPENSE, AUTO EXPENSE, MISC EXPENSE. THE SAME QUESTIONS HAS BEEN ASKED MANY TIMES ON CHEGG, BUT ALL THE AMOUNTS POSTED FOR THOSE MISSING COLUMNS ARE WRONG IN EACH AND EVERY SINGLE POST, SO PLEASE DON'T COPY AND PASTE FROM ANY OF THEM. I LITERALLY CHEKCED EACH AND...

Please Read Carefully Before start answering this question. Please follow the instructions. This Question is from...

Please Read Carefully Before start answering this question. Please follow the instructions. This Question is from 'BSBFIM501 Manage budgets and financial plans' course. There are no parts missing for this Question; guaranteed!. This is the original Screenshot direct from the question. Therefore, there are nothing any further information can be provided. Thanks for your understanding and Cooperation. Please answer the following questions from the topics discussed for Prepare, implement, monitor and modify contingency plans: 1.a. Explain the process of preparing...

Please read the instructions and find attached for the first wiki . Instructions for students: Read carefully...

Please read the instructions and find attached for the first wiki . Instructions for students: Read carefully the attached document and then post your comments bearing in mind the following questions: 1- What are the pros and cons of rent controls? 2- Why economists disagree on the usefulness of rent control? 3- Do you believe rent control can help the poor? Edit Wiki Content rent control Rent regulation can take various forms, including rent control (the placing of a cap on...

Instructions – PLEASE READ THEM CAREFULLY The Assignment must be submitted on Blackboard (WORD format only)...

Instructions – PLEASE READ THEM CAREFULLY The Assignment must be submitted on Blackboard (WORD format only) via allocated folder. Assignments submitted through email will not be accepted. Students are advised to make their work clear and well presented, marks may be reduced for poor presentation. This includes filling your information on the cover page. Students must mention question number clearly in their answer. Late submission will NOT be accepted. Avoid plagiarism, the work should be in your own words, copying...

Instructions – PLEASE READ THEM CAREFULLY The Assignment must be submitted on Blackboard (WORD format only)...

The Buyer’s Experience Before starting, please read these instructions thoroughly. Purpose: To recognize common sales strategies...

The Buyer’s Experience Before starting, please read these instructions thoroughly. Purpose: To recognize common sales strategies and their effect on the buyer; and analyzes the salesperson’s tactics using material from class. You will be provided with a list of what you are looking for during the interaction. Your Task: Select a product that you have genuine interest in purchasing sometime in the near future. Find a corporation*, big-box store, or a similar retailer in which you can visit to execute...

Read section B through E before starting the assignment. Fill in the information below related to...

Read section B through E before starting the assignment. Fill in the information below related to the racial/ethnic group for the module. Race: Black/ AfricanAmericans Section A - Race and Ethnicity Race: Ethnic Groups: Section B - Immigration List the name of countries or country where this ethnic group originated from? Briefly describe the cultural environment of their native homeland. Was this ethnic group / race a native to North America. If not, why and when did this ethnic group...

Read section B through E before starting the assignment. Fill in the information below related to...

Read section B through E before starting the assignment. Fill in the information below related to the racial/ethnic group for the module. Race: Jewish Americans Section A - Race and Ethnicity Race: Ethnic Groups: Section B - Immigration List the name of countries or country where this ethnic group originated from? Briefly describe the cultural environment of their native homeland. Was this ethnic group / race a native to North America. If not, why and when did this ethnic group...

Subjects