HTML Reinforcement Revision 2

Instructions

You are encouraged to read up and research if you are unsure of your answers.

Submission of answers

Submission via Google Forms

Please use code sandbox to submit your answers. Click on "share > copy sandbox link" and paste the link to the Google form provided.

Submission via GitHub

Open up the assignment page and click on the "Add or create" button then select "link".

When the prompt appears, paste in your GitHub repository URL that contains the solutions.

The GitHub repository URL is as shown.

Once you have loaded it successfully, click on the "Turn In" button.

Question 1
Question 1 Preview
Question 2
Question 2 Preview
Question 3
Question 3 Preview
Question 4
Question 4 Preview
Question 5
Question 5 Preview
Question 6
Question 6 Preview
Question 7
Question 7 Preview
Question 8
Question 8 Preview

Question 1 [back to contents]

Given this HTML code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="style.css" type="text/css" rel="stylesheet">
    <title>Document</title>
  </head>
  <body>
      
      <h1>This is a sentence that is awesome.</h1>
      <h1>This is also awesom.</h1>
      <h1>This is too is awesome.</h1>
      
      <script src="script.js"></script>
  </body>
</html>

Write an inline CSS to be applied to <h1></h1> that would change its background color to red and its text color to white.

Question 1 Preview [back to contents]

Question 2 [back to contents]

Given this HTML code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="style.css" type="text/css" rel="stylesheet">
    <title>Document</title>
  </head>
  <body>
      
      <h1>This is a sentence that is awesome.</h1>
      <h1>This is also awesom.</h1>
      <h1>This is too is awesome.</h1>
      
      <script src="script.js"></script>
  </body>
</html>

Write an internal CSS to be applied to <h1></h1> that would change its background color to blue and its text color to white.

Question 2 Preview [back to contents]

Question 3 [back to contents]

Given this HTML code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link href="style.css" type="text/css" rel="stylesheet">
    <title>Document</title>
  </head>
  <body>
      
      <h1>This is a sentence that is awesome.</h1>
      <h1>This is also awesom.</h1>
      <h1>This is too is awesome.</h1>
      
      <script src="script.js"></script>
  </body>
</html>

Write an external CSS to be applied to <h1></h1> that would change its background color to green and its text color to white.

Question 3 Preview [back to contents]

Question 4 [back to contents]

Using position property create three different colored boxes that would sit next to each other.

Question 4 Preview [back to contents]

Question 5 [back to contents]

Using position property create a single page webpage that has three sections with a navbar that would follow along as you scroll.

Question 5 Preview [back to contents]

Question 6 [back to contents]

Given the following code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link href="style.css" type="text/css" rel="stylesheet" />
    <title>Static Template</title>
  </head>
  <body>
    <div class="main">
      <div class="box">
         <p>i'm in a box</p>
      </div>
    </div>
  </body>
</html>

.main {
  height: 300px;
  width: 300px;
  border: 5px red solid;
}

.box {
  height: 100px;
  width: 100px;
  background-color: salmon;
}

Using what you have learned in padding, border and margin add in codes such that:

the pink box is centered.
the pink box has a blue dotted border of 5px.
the text "i'm in a box" does not touch the edges of the box.

Question 6 Preview [back to contents]

Question 7 [back to contents]

Create a simple colored box that would scale according to the size of the screen.

Question 7 Preview [back to contents]

Question 8 [back to contents]

Create a single page website that has a navigation bar, a background image and text over it.

The theme of the site is to your discretion. However, please refrain from creating socially inappropriate or mature contents.

muhdarifrawi / 2020-html-reinforcement-revision-2 Goto Github PK

2020-html-reinforcement-revision-2's Introduction

HTML Reinforcement Revision 2

Instructions

Submission of answers

Submission via Google Forms

Submission via GitHub

Contents

Question 1 [back to contents]

Question 1 Preview [back to contents]

Question 2 [back to contents]

Question 2 Preview [back to contents]

Question 3 [back to contents]

Question 3 Preview [back to contents]

Question 4 [back to contents]

Question 4 Preview [back to contents]

Question 5 [back to contents]

Question 5 Preview [back to contents]

Question 6 [back to contents]

Question 6 Preview [back to contents]

Question 7 [back to contents]

Question 7 Preview [back to contents]

Question 8 [back to contents]

Question 8 Preview [back to contents]

2020-html-reinforcement-revision-2's People

Watchers

Forkers

Recommend Projects

Recommend Topics

Recommend Org