Whaleshares Logo

Introducing 100DaysOfCode initiative: A way to promote Whaleshares (28)

zoneboyPosted for Everyone to comment on, 5 years ago3 min read

Hello.

I am pleased to introduce the 100DaysOfCode initiative right on whaleshares. It is an initiative that tends to expose participants to the developer world and also promote Whaleshares on twitter.

Rules

  • Carefully read and understand the EXAMPLE given.
  • Use the EXAMPLE to solve the given task.
  • Publish your completed task on Whaleshares.
  • Tweet your post on twitter with the following tags #100DaysOfCode #Whaleshares #HTML5
  • Drop your post link and tweet link as a comment under the post for possible reward.
  • Post tags should include eternalblue tag

100.PNG
Example of a 100DaysOfCode tweet. You specify the Day and what you accomplished.

Your post will be rewarded by the initiative sponsors. This initiative is sponsored by @kennybll-witness, @dbread-witness, and @ceruleanblue.

Kindly vote for the sponsors as your preferred witness on wallet.whaleshares.io/~witnesses.
Click the vote button beside @kennybll-witness, @dbread-witness, and @ceruleanblue username to vote them as witness.

EXAMPLE

We wrote our twenty-seventh code yesterday and was able to view it in a web browser. Today, we are moving on to CSS Box Model.

code.PNG

All html elements can be likened to a box. The box consists of the content which has a padding before we reach the box border and then a margin that separates it from external element.

Content - The content of the box. The texts or images that you put in your code to be displayed in the browser.
Padding - It clears an area around the content. The area cleared is based on your specified value. The padding is transparent and cannot be seen. However, with the border you will be able to see the effect.
Border -The border covers the content and the padding and can be seen.
Margin - It clears an area outside the border and it is transparent.

Let's put it into practice.

codinng.PNG

Box Model.

        ` <div class="box">This is a box model sample</div>`

.box {
background-color: cyan;
width: 400px;
border: 10px solid red;
padding: 20px;
margin: 20px;
}

You can see that we have new CSS properties of border, padding, and margin. They have been explained above. The border property has a value of 10px solid red as seen in the image. It means the width style color.


You can see the effect of both the margin and padding. I removed them from the CSS file and you can see the browser output.

Task

Using the examples given so far in the 100daysofcode tutorial, solve the task below. Use External CSS.

code.PNG

Show your codes and also the output in the browser

Hint

  • Both the margin and padding is 50px each.
  • The border width is 10px.
  • Use any text or colour of your choice.

Goodluck.

Feel free to leave a comment if you do not understand any process
All completed tasks will be rewarded by the sponsors. Please follow the rules to be eligible for reward.

Series

https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-wwhaleshares
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-2
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-3
https://whaleshares.io/@zoneboy/25nreu-introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-3
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-5
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-6
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-7
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-8
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-9
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-10
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-11
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-12
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-13
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-14
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-15
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-16
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-17
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-18
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-19
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-20
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-21
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-22
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-23
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-24
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-25
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-26
https://whaleshares.io/@zoneboy/introducing-100daysofcode-initiative-a-way-to-promote-whaleshares-27
Sign Up to join this conversation, or to start a topic of your own.
Your opinion is celebrated and welcomed, not banned or censored!