How to Code: Valentine's Day Challenge


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. You can just click on this link or go to www.flathub.org, search for “Sublime Text”. This is a repository for apps compatible with your Hack OS.
  1. When you click to install it will download a zip file (com.sublimetext.three.flatpakref)  to your DOWNLOADS folder on the File Manager. Just go there and double click the file to open and install it on your Hack OS.

When you double click, it will open your App Store. Click to install and authorize it.

It’ll take a few minutes to download so hang in there and make sure you have a nice connection.

  1. Now that it’s installed, you’ll be able to launch the app from your desktop.
  1. This is what the app looks like once it’s opened -- don’t worry you’ll understand everything that’s going on soon.

  1. Now we’ll need to create a folder in the File Manager where we’ll be saving our code. To create a folder click on the three lines icon on the top right.

  1. 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.
  1. 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.

  1. Now you will see the same folder on the left side of Sublime Text.
  1. 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 you just need to right click on the name of the folder (VALENTINES DAY CODE), and then click on NEW FILE. This will open a TAB in this black area where we write the text and code. After creating the first new file and after seeing this tab, click on FILE in the top left, and then click on SAVE. You will now need to add a name to this file that when you click SAVE will appear below your folder name, and also on the top of the TAB in the black area.
  1. 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.

  1. 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).
  1. 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.

  1. 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.


  2. Let’s do a quick test to see if it’s working. Click on the HMTL file and in the black are write the following command: <h1>This is the valentine's 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>



  1. Add the following CSS structure to your .css file/tab.

 

.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%;

}


  1. 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 https://www.codecademy.com/learn.