- 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
- You can use any resource online, but please work individually
- Instead of copy-pasting your answers and solutions, write them in your own words.
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.
| John Duck | Jane Duck | Pencil icon |
|---|---|---|
 |
 |
 |
- Name font size: 28 pixels
- Text size: 14 pixels
- Font family: Arial, sans-serif
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]
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>The distance between the top-left corner of the document body and the yellow box is 40px form the top and 40px form the left side. This is because the blue box is positioned absolute 20px-20px from the top and the left side and the yellow box is positioned the same inside the blue box.
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?
Block elements take up as much horizontal space as they can and do not let any other element next to them by default. While inline elements do not break the flow. It is not possible to set height and width values for inline elements.
Inline block is similar to inline (so they do not break the flow) but they accept height and width values.
What is the difference between a <section> and an <article> element? Name one good example of using an <article>.
There is no difference in operation between <section> and <article>. The real difference is in semantics. Section is for grouping different parts of the content, while article contains standalone pieces of content e.g. blogposts or news article that could be published by its own.
So for example one single blogpost can be included into an <article> tag.