You are to develop from the beginning a web site about yourself with regards to your...

You are to develop from the beginning a web site about yourself with regards to your course studies and any certifications you have done so far. This web site provides certain required details about your education/studies which you did. You will design and develop your web site with Notepad/Notepad++, HTML, Java Script and CSS. The purpose of this assignment is for you to build a web site that will contain some details about all of your course degrees you have achieved so far including all the certifications with, e.g., the number of degrees you are holding so far, the number of institutes you enrolled yourself, etc. This assignment involves creation of three HTML files corresponding to the three pages of your web site and all are connected to an external CSS file. You will need to determine how your site will be designed and then you will develop the pages using HTML, Java Script and CSS. The pages and CSS file you will develop are explained below. Home page (.HTML file) The first page of your site the user sees will be a home page. This page will be a welcome to the site. You will explain to the user what the site is about. The content of the page will include at least two paragraphs. An appropriate heading must be placed at the top of the page indicating what the page or site is about. The word limit for this page, excluding the heading, is 130 – 150 words. You must keep the number of words within this range. In the home page, add two links for “Course details” page and “About Me” page. NOTE: All pages must have links to the other pages.

Past Course details page (.HTML file) Begin this page with an appropriate heading (as all pages of the site will have) reflecting that this page deals with details about all the unit courses. Do not use “Course details” in the heading but use another title for your heading.

Current Course details page (.HTML file) This page conveys certain aspects about all the unit course details. Like the previous page, show a heading at the top of the page. Do not use “Current course details” in the heading text but use some other title.

Cascading Style Sheet Use CSS file for formatting used for all web pages.

Task 1: Develop a web site about yourself with regards to your course studies and any certifications you have done so far. This web site provides certain required details about your education/studies which you did. You will design and develop your web site with Notepad/Notepad++, HTML, J

Task 2: After developing the website, explain the characteristics of that website and associated authoring/management issues.

Need to add 4 courses for past and for courses for current study. the writing segments will be added by myshelf. just need the required codes.

Solutions

Expert Solution

index.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="use here font awesome link">
<link rel="stylesheet" type="text/css" href="style.css">
<style>

</style>
</head>
<body>
<div class="home">
<div class="topnav" id="navBar">
  <a class="name" style="color: #08F5C0;">NAME</a>
  <a href="index.html">Home</a>
  <a href="course.html">Course</a>
  
  <a href="about.html">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>
<main>
  <h1>Welcome Here...</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
</div>



<script>
function myFunction() {
  var x = document.getElementById("navBar");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

</body>
</html>

style.css

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: monospace,Arial, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #262525;
}

.topnav a {
  float: left;
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  font-weight: 900;
}

.topnav a:hover {
  background-color: #06FDCC;
  
}

.topnav a.active {
  background-color: #06FDCC;
  
}
.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
.home{
  background-image: url("./images/backimg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
  height: 100vh;
}
main{
  text-align: center;

}
main h1{
  color:#05FAA1;
}
main p{
  font-size: 20px;
  color: #000;
  text-align: justify;
  margin: 20px;
}
.course{
  background-color: #eee;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.course .edu{
  background-color: #fff;
  padding: 15px;
  width: 80%;
  height: auto;
  margin: 10px;
  border: 1px solid #ccc;
}
.course h1 ,h3{
  color: #06F6E2;
}
.course a{
  text-decoration: none;
  color: #878686;
}
.about{
  background-color: #eee;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 80%;
  margin: auto;
  margin-top: 10px;
  padding: 15px;
  border: 1px solid #ccc;
}
.about img{
  width: 200px;
  height: 200px;
  border-radius: 50%;

}
.about h2{
  color: #0ACBB7;
}
.about p{
  text-align: justify;
}

course.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<style>

</style>
</head>
<body>

<div class="topnav" id="myTopnav">
  <a class="name" style="color: #08F5C0;">NAME</a>
  <a href="index.html">Home</a>
  <a href="course.html">Course</a>
  
  <a href="about.html">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

  <div class="course">
  <h1>Course I have Done</h1>
  <a href="current.html"><p>Click here for Current Courses</p></a>
  <div class="edu">
    <h3>College Name</h3>
    <h4>Course name</h4>
    <p>Start and End date</p>
    <p>About course</p>
  </div>
  <div class="edu">
    <h3>College Name</h3>
    <h4>Course name</h4>
    <p>Start and End date</p>
    <p>About course</p>
  </div>
  <div class="edu">
    <h3>College Name</h3>
    <h4>Course name</h4>
    <p>Start and End date</p>
    <p>About course</p>
  </div>
  <div class="edu">
    <h3>College Name</h3>
    <h4>Course name</h4>
    <p>Start and End date</p>
    <p>About course</p>
  </div>
 

</div>




<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<style>

</style>
</head>
<body>

<div class="topnav" id="myTopnav">
  <a class="name" style="color: #08F5C0;">NAME</a>
  <a href="index.html">Home</a>
  <a href="course.html">Course</a>
  
  <a href="about.html">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

  <div class="course">
  <h1>Current Course</h1>
  <a href="course.html"><p>Go to Back</p></a>
  <div class="edu">
    <h3>College Name</h3>
    <h4>Course name</h4>
    <p>Start and End date</p>
    <p>About course</p>
  </div>
  <div class="edu">
    <h3>College Name</h3>
    <h4>Course name</h4>
    <p>Start and End date</p>
    <p>About course</p>
  </div>
  <div class="edu">
    <h3>College Name</h3>
    <h4>Course name</h4>
    <p>Start and End date</p>
    <p>About course</p>
  </div>
  <div class="edu">
    <h3>College Name</h3>
    <h4>Course name</h4>
    <p>Start and End date</p>
    <p>About course</p>
  </div>
 

</div>




<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

</body>
</html>

about.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<style>

</style>
</head>
<body>

<div class="topnav" id="myTopnav">
  <a class="name" style="color: #08F5C0;">NAME</a>
  <a href="index.html">Home</a>
  <a href="course.html">Course</a>
  
  <a href="about.html">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>
<div class="about">
  <img src="images/profile.jpg" >
  <h2>Your Name</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>



<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

</body>
</html>

venereology answered 1 year ago

Next > < Previous

Related Solutions

You are to select 1 business that does not already have a Web site, and develop...

You are to select 1 business that does not already have a Web site, and develop an Internet strategy for it. Most large corporations already have Web sites, so you may have to think of something on a smaller scale such as a local bike store. Sole proprietorship businesses that provide services like car repair, house cleaning, tax preparation, and that use the Internet and similar services are also good options. You will also consider and describe how the business...

. A small local bakery wants to expand their business and develop a web site to...

. A small local bakery wants to expand their business and develop a web site to showcase their products and allow customers to order their baked goods. Using a systems development life cycle approach (SDLC) explain how the bakery can do this, and what is involved at each stage of the SDLC.

Create a web site to share your travel blog stories from multiple trips. Desktop site should...

Create a web site to share your travel blog stories from multiple trips. Desktop site should have three columns, the left being navigation, middle is your text, the right is some basic facts about the location that you visited. Tablet site should have two columns, dropping the right column. Mobile phone site should have one column, with the navigation becoming the drop-down list. Create a form and use JavaScript to validate the user data. Submitting valid data should result in...

Create a web site to share your travel blog stories from multiple trips. Desktop site should...

Create a web site to share your travel blog stories from multiple trips. Desktop site should have three columns, the left being navigation, middle is your text, the right is some basic facts about the location that you visited. Tablet site should have two columns, dropping the right column. Mobile phone site should have one column, with the navigation becoming the drop-down list. In HTML, also don't worry about putting information on the columns you can just put some kind...

Write about an example from your life where you allowed yourself to be exposed to a...

Write about an example from your life where you allowed yourself to be exposed to a challenging marketing or sales environment. Discuss why you allowed yourself to do so, what happened, and whether today you would allow yourself to be exposed to this challenging marketing or sales environment. No more than a paragraph.

If you have downloaded the source code from this book's companion web site, you will find...

If you have downloaded the source code from this book's companion web site, you will find the following files in the Chapter 07 folder: • GirlNames.txt--This file contains a list of the 200 most popular names given to girls born in the United States from the year 2000 through 2009. • BoyNames.txt--This file contains a list of the 200 most popular names given to boys born in the United States from the year 2000 through 2009. Write a program that...

You decide to take advantage of the current online dating craze and start your own Web site.

You decide to take advantage of the current online dating craze and start your own Web site. You know that you have 450 people who will sign up immediately and, through a careful marketing research and analysis, determine that membership can grow by 25 percent in the first two years, 19 percent in year 3, and 18 percent in Year 4. How many members do you expect to have at the end of four years?(Round intermediate calculations to 6 decimal...

Week 8: Predict Your Salary Suppose you went to the Bureau of Labor Statistics web site...

Week 8: Predict Your Salary Suppose you went to the Bureau of Labor Statistics web site and found several predictors of your salary. State three possible predictors and a simulated multilinear regression equation along with their p-values. What do your p-values tell you about your predictors? How does multilinear regression analysis apply to your profession as a supply chain business analyst? Specify the dependent value and the set of predictors. Where would you get your data?

Prompt: This exercise uses your programming environment to enhance the Web site you created last week...

Prompt: This exercise uses your programming environment to enhance the Web site you created last week with additional functionality to include images, tables and a Form using Python flask. Specifically, you will add two (2) additional routes allowing a user to register and login to a web site. Additional security considerations include other routes (beyond the register route) will not be accessible until a successful login has occurred. In addition to the requirements list above the following functionality should be...

Create a Web page about yourself containing the following: Notepad++ The page should have a light...

Create a Web page about yourself containing the following: Notepad++ The page should have a light green background and a one inch margin. The Web page should contain: At least three headings, h1 to h3. At least two paragraphs about you. A numbered list with at least three hyperlinks. The hyperlinks cannot be the ones we created in class today which were the links to Yahoo and Google. Two horizontal rules. All the h1, h2, and h3 tags should have...

Subjects