Question

For milestone #1, we will start the CARIT site with three static HTML pages and a CSS file. Create a dedicated folder for this project. This folder should contain all related files in this project. The future milestones are cumulative and built directly on top of your prior work.

Function/content requirements:

1. A home page named “index.html”, which include these contents at least:
   • Description of the center. You may reference the example sites.
   • Latest news: use list tags; make up some news items.
   • Use <p>, <br />, and heading tags properly.
   • Other contents you may wish to design: banner, front image, etc.
   • Please put a note in the site footer to indicate this is a class project with a link to the class website http://it5443.azurewebsites.net
2. About us (faculty) page
   • Present at least three faculty members with their information like image, positions, research interests, and contact information. Put a link on each name which links to his/her personal website.
3. A third page which you can decide what content to be put on. Use the reference sites as examples. For example: projects, resources, events, etc. You have to use the table tag at least once for some content.
4. For all three pages, display the following common contents:
   • The name of the center (site title) in a big heading
   • A logo with a link to “http://ccse.kennesaw.edu/it”
   • A menu which consists of three text links, linking to three pages above respectively. Apply some hovering styles.
   • These common contents should display the same in all pages.

Style requirements

1. All pages should have the same style and layout.
2. Create your own page style. Use a simple style, neat, clean; not too colorful and flashy.
3. Apply some nice styles to HTML elements like paragraphs, images, lists.
4. All links should have some color other than the default color.
5. The menu item links style should be different from other links. Create a hover effect for menu items so their styles change when the mouse cursor is on them.
6. Please do not use any third party style frameworks or packages.

File/code organization requirements

1. Use one style sheet file (.css) for all three pages. Use class selectors wisely.
2. Organize page content sections (header, content, footer, etc.) in a number of <div> tags. This should be consistent on all pages.
3. It’s recommended to put all image files in an “img” subdirectory.
4. You should not use any wizard to generate HTML/CSS, nor should you copy and paste the HTML from other source without cleaning it.
5. All pages should work on your Azure hosted site.
6. Maintain a live working website for the project on Azure. Submit the URL (directly put in the Comments textbox).
7. A milestone report in PDF, including:
   • Proper cover page
   • Overview: brief summary of your work, including how requirements are satisfied.
   • The URL to your live project (milestone #1).
   • Web page screenshots with explanations. Take a screenshot of each webpage displayed in the browser. Clearly label and describe all screenshots. All screens must be clear, original, and show the complete browser window (only the top part of the page if the page is too long). No graphic editing or cropping is allowed.
   • References (styles, images, etc.)
8. Compress all source code files into a .zip file. Do not zip the report.

The summer is coming and CARIT has four student assistant positions open (not real!). In order to be considered for such a position, a student has to complete some required courses and meet the minimum average grade (of these required classes) requirement. See the table below.

Student status	Courses Required Completion	Grade average requirement (for the four courses required)
Undergraduate	CSE 3203 Mobile System Overview IT 4213 Mobile Web Development CSE 3153 Database Systems IT 4723 IT Policy and Law IT 4123 Electronic Commerce	>3.2
Graduate	IT 7113 Data Visualization IT 6713 Business Intelligence IT 6863 DB Security & Auditing IT 6833 Wireless Security	>3.7

Function/content requirements:

Continuing your work from assignment #1, add one page for students to evaluate their eligibility to apply for the positions. Add this page to the main menu as well.

In this new page:

1. Provide a short description of the page, purpose, and instructions.
2. Design a form for students to enter their information and get the evaluation results. Complete the following functionalities using JavaScript.
   • The student should first select his student status. Depending on the information provided, different set of course titles should be presented.
   • A student then should enter or select a letter grade (A, B, C, D, or F) for each course. Use appropriate form controls to accept user inputs.
   • After hitting the “Evaluate” button, the result (average grade) with a message should be displayed right underneath the form.
   • Use the rules of this course to convert letter grades to numeric point grades (e.g. A is 4.0, etc.).
   • If the average grade requirement is met, display a congratulation message with instructions to apply (linking to the application form page which will be in milestone #3); if not, thank his/her interest (make up your own text) but do not show the application form link.

Style requirements

1. The new page should have the same style and layout as the site.
2. Apply some custom style to form controls, other than the default style.
3. Use a simple style, neat, clean; not too colorful and flashy.

Answer 1

Dear student i understand your intention, it is not possible to upload the compressed files directly, so i have one solutions, i will past the three static html files and css files content in this white board then you can do copy it and past it. Hope this is helpful to you. I separated each file with underline

index.html

<!DOCTYPE html>

<html>

<head>

    <meta charset='utf-8'>

    <meta http-equiv='X-UA-Compatible' content='IE=edge'>

    <title>Page Title</title>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <link rel='stylesheet' type='text/css' media='screen' href='styles.css'>

    <script src='main.js'></script>

</head>

<body>

    

    <div id="wrapper">

         <div id="header">

         </div>

         <div id="nav">

             

                <ul>

                        <li><a href="index.html">Home</a></li>

                        <li><a href="about.html">About</a></li>

                        <li><a href="factulty.html">Faculty</a></li>

                           </ul>

         </div>

         <div id="body">

                <h1 align="center">CARIT NEWS</h1>

                <img src="coffee1.jpeg" style="float:left;margin-right:10px;" width="200px" height="200px">

                <p style="text-align: justify">

                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,

                </p>

                <img src="coffee2.jpeg" style="float:right;margin-right:10px;" width="200px" height="200px">

                <p style="text-align: justify">

                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,

                </p>

                <img src="coffee3.jpg" style="float:left;margin-right:10px;" width="200px" height="200px">

                <p style="text-align: justify">

                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,

                </p>

                

         </div>

         <div id="sidebar">

                <iframe width="230px" height="400px" src="https://www.youtube.com/embed/0tBqrioLag4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

         </div>

         <div id ="footer">

        <p style="text-align: center;color:white;font-size:20px;">

             All @ Copy rights reserved to Carit web applicaton

        </p>

         </div>

    </div>

</body>

</html>

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

Styles.CSS

body{

    background-color:blueviolet;

}

#wrapper{

    background-color: white;

    width: 1000px;

    border:1px solid grey;

    margin:0px auto;

    padding:10px;

}

#header{

    height:200px;

    border:1px solid grey;

    background-image:url("banner.jpg");

}

#nav

{

      height:60px;

      border:1px solid grey;

       margin:10px 0px;

       background-image: url("nav.png");

}

#nav ul{

}

#nav ul li{

    list-style-type: none;

    display:inline;

    

    margin-left:40px;

}

#nav ul li a{

    text-decoration: none;

    background-color:blue;

    color:white;

    padding:10px 20px;

    font-size: 20px;

    border-radius: 22px 0px;

    text-shadow: 2px 2px 2px yellow;

}

#nav ul li a:hover{

    background-color:orange;

    text-decoration: underline;

}

#body

{

     width:730px;

     border:1px solid grey;

     float:left;

     padding:10px;

     margin-bottom:10px;

}

#sidebar

{

     margin-bottom:10px;

        width:230px;

        float:right;

        height:400px;

        border:1px solid grey;

}

#footer{

      clear:both;

      height:60px;

      border:1px solid grey;

      background-image: url("nav.png");

}

---------------------------------------------------------------------------------------------------------------------------------------------------------

About.html

<!DOCTYPE html>

<html>

<head>

    <meta charset='utf-8'>

    <meta http-equiv='X-UA-Compatible' content='IE=edge'>

    <title>Page Title</title>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <link rel='stylesheet' type='text/css' media='screen' href='styles.css'>

    <script src='main.js'></script>

</head>

<body>

    

    <div id="wrapper">

         <div id="header">

         </div>

         <div id="nav">

             

                <ul>

                        <li><a href="index.html">Home</a></li>

                        <li><a href="about.html">About</a></li>

                        <li><a href="faculty.html">Faculty</a></li>

                           </ul>

         </div>

         <div id="body">

                <h1 align="center">About CARIT</h1>

                

                <p>

                    Please upload your own content here

                </p>

         </div>

         <div id="sidebar">

                <iframe width="230px" height="400px" src="https://www.youtube.com/embed/0tBqrioLag4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

         </div>

         <div id ="footer">

        <p style="text-align: center;color:white;font-size:20px;">

             All @ Copy rights reserved to Carit web applicaton

        </p>

         </div>

    </div>

</body>

</html>

--------------------------------------------------------------------------------------------------------------------------------------------------------------------

Faculty.html

<!DOCTYPE html>

<html>

<head>

    <meta charset='utf-8'>

    <meta http-equiv='X-UA-Compatible' content='IE=edge'>

    <title>Page Title</title>

    <meta name='viewport' content='width=device-width, initial-scale=1'>

    <link rel='stylesheet' type='text/css' media='screen' href='styles.css'>

    <script src='main.js'></script>

</head>

<body>

    

    <div id="wrapper">

         <div id="header">

         </div>

         <div id="nav">

             

                <ul>

                        <li><a href="index.html">Home</a></li>

                        <li><a href="about.html">About</a></li>

                        <li><a href="faculty.html">Faculty</a></li>

                           </ul>

         </div>

         <div id="body">

                <h1 align="center">Factulty Informations</h1>

                <img src="" />

                <p>

                    About faculty1 Information

                    phone:7660004177

                </p>

                <img src="" />

                <p>

                    About faculty2 Information

                </p>

                <img src="" />

                <p>

                    About faculty3 Information

                </p>

         </div>

         <div id="sidebar">

                <iframe width="230px" height="400px" src="https://www.youtube.com/embed/0tBqrioLag4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

         </div>

         <div id ="footer">

        <p style="text-align: center;color:white;font-size:20px;">

             All @ Copy rights reserved to Carit web applicaton

        </p>

         </div>

    </div>

</body>

</html>