Who’s ready for a Valentine’s Day coding challenge? Today we are going to teach you how to create your very own V Day website including a personalized message and a red heart. Let’s jump in!
1. First, we’ll need to make sure we have the program to write some code. Today, we’re going to use HTML and CSS, and for that, we will need Sublime Text. Launch the More Apps application on your desktop to visit the app store.
2. In the app store, click on the magnifying glass icon located at the top right corner of the window and search for Sublime Text.
3. It’ll take a few minutes to download so hang in there and make sure you have a nice connection.
4. Now that it’s installed, you’ll be able to launch the app from your desktop.
5. This is what the app looks like once it’s opened -- don’t worry you’ll understand everything that’s going on soon.
6. Now, click on the yellow folder in the taskbar located at the bottom left corner of the page to launch the finder window. Then, click on the Documents link at the left. We’ll need to create a folder in the File Manager where we’ll be saving our code. To create a folder, right-click on the window and select "New Folder". If you are using a Hack laptop, use two fingers and click on the mousepad to right-click.
7. As you can see in the picture I’ve created a folder called VALENTINES DAY CODE inside the Documents folder. As a suggestion, you can drag the Sublime Text Window to the right or left side of your window and it will split your window so you can see both apps side by side.
8. Now let’s open this new folder you have created (VALENTINES DAY CODE) inside the Sublime Text App. You can do it by clicking on FILE > OPEN FOLDER on the top left menu of Sublime Text. You can also do this by dragging and dropping your folder from the File Manager to Sublime Text. This is why it’s nice to have both opened side by side.
9. Now you will see the same folder on the left side of Sublime Text.
10. Now we’ll need to create two files inside this folder inside Sublime Text. One to display your heart (.HTML), and the other to be able to put the design into your heart (.CSS). To create these files go to Sublime and click ctrl + n. After creating the first new file and after seeing this tab, type in "heart.html" and click ctrl + s. Finally, click the Save button at the top right in the new window.
11. Go for it, and create the two files you need. We have named the first heart.html (note that is important to add .html after the name you give). And we have named the second file as heart.css (note again that is important to add .css after the name of the second file). Remember, the first is to display the heart and the second is to add the design for it.
12. Here comes the fun part. Open a browser (preferably Chrome). Drag the browser window to the right to split the screen. Now open the File Manager on the other side of the screen. Go to DOCUMENTS folder and click on your folder (our’s is named VALENTINES DAY CODE).
13. Here you’ll see the two files you created inside Sublime. Drag the .HTML file (our's is named as heart.html) into the browser bar. You will see that the URL in the browser will point to the direction of your folder. This means that when we add the codes inside Sublime Text, they will be displayed on your browser page.
14. Now open Sublime and your browser, each taking up half of the screen. Remember that you only need to drag the app window to the right or left. In our case, we dragged Sublime Text to the left side of the screen and it automatically split it.
15. Let’s do a quick test to see if it’s working. Click on the HMTL file and delete everything in the window. Next, in the black are write the following command: <h1>This is the Valentine's Day code challenge</h1>
Now press ctlr + s or click in FILE>SAVE. Every time you code something you need to save it before trying to display it on your browser. So go to the browser and refresh the page. It should show you exactly the same text you wrote in the .HTML file inside Sublime Text.
Now it’s time to code our heart. We’ll add the entire code below, then it’s up to you to simply copy and paste everything, or, better yet, code step by step.
16. Add the following HTML structure to your .html file/tab (remember, our’s is named as heart.html). DO NOT FORGET TO SAVE YOUR FILES (CTRL+S) every time you code something. If not you won’t see anything in the browser. Note that HTML is only the structure. So you should not see anything yet even refreshing your browser. You need the next step ;)
<!DOCTYPE html>
<html>
<head>
<title>Valentines Code Challenge</title>
<link rel="stylesheet" href="heart.css">
</head>
<body>
<div class="heart"></div>
</body>
</html>
17. Add the following CSS structure to your .css file/tab and click ctrl + s to save your file.
.heart {
position: relative;
margin: 20px;
height:170px;
width:200px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
width:100px;
height:160px;
background:red;
border-radius: 50px 50px 0 0 ;
}
.heart:before {
left:100px;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart:after {
left:0;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
18. Now you only need to click to refresh your browser and VOILA…
Go ahead now and change the codes and variables to see what happens to your heart. Just DO NOT FORGET TO SAVE YOUR FILES (CTRL+S) every time you code something.
If you want to try another level you can check this link (https://codepen.io/puresick/pen/tAcFa) available at the Codepen community. This is another approach to help you code a pulsing heart (cool, huh?). Just note that in the HTML field he only writes a <DIV> that you can replace in the <DIV> from our example.
An, if you want to dig deeper into HTML and CSS you can check the free HTML and CSS courses on download Endless OS and get Hack for free!