Skip to content

Latest commit

 

History

History
95 lines (78 loc) · 3.75 KB

README.md

File metadata and controls

95 lines (78 loc) · 3.75 KB
Raw

Exam: HTML & CSS

Getting Started

  • Fork this repository under your own account
  • Commit your progress frequently and with descriptive commit messages
  • All your answers and solutions should go in this repository

What can I use?

  • You can use any resource online, but please work individually
  • Instead of copy-pasting your answers and solutions, write them in your own words.

Tasks

1. Build a design (~90 minutes) [10 points]

Build the following profile cards according to the design provided.
Follow the design as closely as possible.
Commit an HTML and a CSS file to this repository. design

Assets

John Duck Jane Duck Pencil icon
duck duck pencil-icon

Other data

  • Name font size: 28 pixels
  • Text size: 14 pixels
  • Font family: Arial, sans-serif

Acceptance criteria

The task is accepted if:

  • The result follows design [2p]
  • The code follows style guide [1p]
  • The CSS & HTML are valid [1p]
  • The HTML considers semantic responsibilities [2p]
  • The code avoids code duplication [2p]
  • The CSS has meaningful and short selectors [2p]

Extra points for if:

  • the result is centered on the page [2p]

2. Understand code (~15 minutes) [2 points]

Read the following code snippet:
What is the distance between the top-left corner of the document body and the yellow box?
Give a detailed explanation below!
Add your answer to this readme file, commit your changes to this repository.

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        padding: 0px;
        margin: 0px;
      }
      .foo {
        top: 20px;
        left: 20px;
        width: 100px;
        height: 100px;
        position: absolute;
        background: blue;
      }
      .bar {
        top: 20px;
        left: 20px;
        width: 30px;
        height: 30px;
        position: absolute;
        background: yellow;
      }
    </style>
  </head>
  <body>
    <div class="foo">
      <div class="bar"></div>
    </div>
  </body>
</html>

Your answer: The distance between the document body and the yellow box is top: 40px and left: 40px. The blue box has the position absolute value and it is set to top: 20px left 20px from the document body. So the blue box is from top: 20px left: 20px from the body. The yellow box is inside the blue box, and also has the position absolute value. It has top: 20px left: 20px from the top right corner of the blue box. So the yellow box is top: 20px + 20px = 40px and left: 20px + 20px = 40px from the body.

3. Explain concepts (~15 minutes) [4 points]

Add your answer to this readme file, commit your changes to this repository.

Explain the difference between display: block and display: inline in CSS! What is display: inline-block?

Your answer: "display:block" means your element behaves like a box in box-model(eg. you can set the height and width), you can't put other html element next to it by default. "display:inline" means you can't set the width and height of the element but you can put other elements next to it by default. "display:inline-block" mergs the good qualities of "display:block" and "display:inline"[2p]

What is the difference between a <section> and an <article> element? Name one good example of using an <article>.

Your answer: The
element contains part of your HTML with related topics. You can use elements inside
elements and it contains "individual stories" related to your section. Eg.: You can make a sections about the news like "politics", "sport", "Science" and you can write articles related to those topics. Eg. Inside the sport section you can create an article about the Chess World Cup final. [2p]