Hello all Hivers! Welcome to my first tutorial post on Hive for the Programming/Dev community!
2 years ago, I created more than 100 tutorial contributions for open source projects on Utopian.io. This tutorial will be my first tutorial on Hive, so i'm quite excited, this will be my first post for the Programming/Dev community. I hope you will like it. :)
In this tutorial, I created a birthday cake for the Hive's first anniversary with using CSS. If you are new to web development and don't know what I'm talking about, let me briefly explain what is CSS and HTML. But before that, let's clarify that; CSS and HTML are not programming languages.
By the way, in colloquial language, we always use CSS with the abbreviation, but CSS stands for Cascading Style Sheets.
So what is CSS, what does it do?
CSS is a style sheet language that allows websites to be visually shaped and has its own rules. For those who ask, I briefly describe CSS as "the make-up of the website", because the components entered into the website without CSS look pretty bad and messy, and this mess disappears when you make-up the site with CSS. CSS is among the most basic web technologies, along with HTML and JavaScript, and offers quite a lot of visual control over web pages.
Requirements to make the Hiversary cake:
- A text editor (I'm using Visual Studio code)
- A browser for testing
- XAMPP Localhost Server (If you use Visual Studio code Live Server, you don't need this.)
- Intermediate CSS knowledge
- Basic HTML knowledge
- An .html file
- An .css file
Resources (for Windows 10)
Knowledge Resources
Tutorial Difficulty
- Basic
As it is the first part of our tutorial series, this tutorial will be a very easy and basic tutorial. Our tutorial series will continue from easy to difficult, if there are any web development or software development tutorials you want, be sure to mention them in the comments!
Let's take a look at HTML codes
In this tutorial, we will not write much code in the HTML document. The main purpose of using HTML in this tutorial is to rule the code we will write in CSS.
After that, we wrote the "stylesheet" parameter as the equivalent of link rel (rel means relation) code (link rel = stylesheet; means it contains style templates).
Then we wrote the "href" code (hypertext reference) to specify the source. With the "href" code, we specified to style.css file and W3schools CSS library for CSS codes we will write. If we do not do this, the CSS codes don't work.
Later on, using div class codes, we defined the hiversary cake as "hive-cake", the candle of the cake as "hive-cake-candle" and the flame of the candle as "hive-cake-candle-flame". We will create the Hiversary cake on style.css with the div classes we have defined here.
Then we wrote a new div class for "Happy Birthday Hive! ❤" text as "hive-anniversary". We defined the tag of the text as h1 because we want this text to appear large. We will edit this text on style.css with the hive-anniversary component we have defined.
We wrote all the necessary HTML code for the Hiversary Cake. Now we will create the Hiversary Cake in the style.css file.
CSS Codes
Hiversary Cake Body
Firstly, we set the background color of the website where we will create the Hiversary Cake with the background-color code between the body code as black.
We define the position code as absolute so that the location of the hive cake is automatically positioned relative to the web page. With position: absolute; our cake will go to the upper left corner of the page. This is because when position absolute is used, the object's top and left parameters automatically take the value zero.
Since we have set the position code as absolute, we will need to set the top and left codes manually. With this adjustment, our cake will be in the middle of the web page. The 40% value for the top code and 45% for the left code puts our cake in the middle of the website. We defined the margin value as "auto" because the "auto" code allows browsers to automatically detect outside spaces and leave equal spaces in both directions. After that, we adjusted the size of our Hiversary Cake with width and height codes. Since our cake is a Hiversary cake, we added the Hive logo on the top of the cake using the background:url code and we defined the top color of the cake as grey. Since the Hive logo is too small, 4-5 logos appear on the cake, to prevent this, we used background-repeat: no-repeat, repeat; code. Then we defined the background-position: parameter as center to make the logo appear in the middle of the cake. We used border-radius code to make the cake circular. We defined the value of the code as 60%.
With these codes, our cake body is ready!
Box-shadows
We came to the most fun part. Normally the box-shadow code consists of 4 values in total. The first given value is applied to the x-axis, the second given value to the y-axis, the third given value to the blur, and the fourth given value to the object's color. The x-axis, y-axis and blur are enough to create our Hiversary Cake. So we will not use the 4th value. The px values entered in this step are related to the appearance of the cake. If the px values are increased or decreased, the parts of the cake will change accordingly. You can give each piece a color, but I used the colors red (#E31337) and dark gray (#212529) in the Hive's logo.
Hiversary Cake Candle
At this step, since the hive is only one year old, we added only one candle to the Hiversary cake. :) We defined the color of the cake as #5b82a1 (blue) with the background-color code. We adjusted the size of the candle with the width and height codes. We ovalize the candle by giving a value of 10px to the border-radius code so that the candle does not look rough. With the values we entered in margin-left and margin-top codes, we placed the candle right at the top of the cake.
Hiversary Cake Candle Flame
We have defined the position as absolute for the flame of the candle. Then we define the color of the candle flame as orange with the background-color code. Then we adjusted the size of the candle flame with the width and height codes. We ovalize the candle flame with the border-radius code. Since we defined the position as absolute, we used the top and left codes. With the values we gave to the top and left codes, the candle flame will appear on the candle. Finally, with the value (-5px) we gave to the margin-left code, we ensured that the candle was centered millimetrically on the candle without corruption.
Hive Anniversary Text
In this step, we will edit the "Happy Birthday Hive! ❤" text that we wrote. Now the text is default in black font and its position is uncertain. First, we defined the color of the text as dark gray (#212529). Then we defined the outline color of the text with the -webkit-text-stroke code. We defined the outline color as the red color of the Hive logo. Then we set the outline size to 0.8px with the -webkit-text-stroke-width code. Then we defined the size of the text with the width (100%) code. With margin-left (790px) and margin-top (29%) codes, the text will appear in the middle of the web page and right under the Hiversary Cake!
And our Hiversary Cake is ready!!!
Last words
That was the first part of the css tutorial. Thank you very much for reading my first tutorial post for Programming/Dev community. I am looking forward to your comments and suggestions!
HTML Codes Used in this Tutorial
<html lang="en">
<head>
<title>Hiversary Cake</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hive-cake">
<div class="hive-cake-candle"></div>
<div class="hive-cake-candle-flame"></div>
</div>
<div class="hive-anniversary">
<h1>Happy Birthday Hive! ❤</h1>
</div>
</body>
</html>
CSS Codes used in this Tutorial
body {
background-color:rgb(0, 0, 0)
}
.hive-cake {
position: absolute;
top: 40%;
left: 45%;
margin: auto;
width: 200px;
height: 60px;
background:url(https://coinarbitragebot.com/inc/coin_logos_small/hive.png), rgb(212, 193, 193);
background-repeat: no-repeat, repeat;
background-position: center;
border-radius: 60%;
box-shadow:
0px 0px 0px #212529,
0px 16px 0px #212529,
0px 24px 0px #E31337,
0px 28px 0px #E31337,
0px 32px 0px #E31337,
0px 36px 0px #E31337,
0px 40px 0px #E31337,
0px 44px 0px #E31337,
0px 47px 0px #E31337,
0px 55px 0px #212529,
0px 56px 0px #212529,
0px 60px 0px #212529,
0px 84px 0px #E31337,
0px 78px 0px #E31337,
0px 72px 0px #E31337,
0px 76px 0px #E31337,
0px 80px 0px #E31337;
}
.hive-cake-candle {
background-color: #5b82a1;
width: 12px;
height: 45px;
border-radius:10px;
margin-left: 95px;
margin-top: -33px;
}
.hive-cake-candle-flame {
position: absolute;
background-color: rgb(255, 72, 0);
width: 12px;
height: 25px;
border-radius: 20px;
top: -37px;
left: 50%;
margin-left: -5px;
}
.hive-anniversary {
color: #212529;
-webkit-text-stroke: #E31337;
-webkit-text-stroke-width:0.8px;
width: 100%;
margin-left: 790px;
margin-top: 29%;
}