Being on quarantine for more than two months didn’t leave me bored, insane, and futile. Luckily, I’m one of the few workers online who managed to keep their job while many have lost theirs following the COVID-19 outbreak. However, the company I’m part of wasn’t spared from the adverse economic impact of the crisis so we were all put under a part-time status. Instead of rendering eight work hours daily, that’s been cut to four. This gave me more time to do other things.
I told myself that I must make the most of this time – that I must utilize it efficiently. So I thought it’s about time to learn some new skills, which I could, later on, use in my career. I was happy when I came across an ad on Facebook about an online course on coding with HTML and CSS – for free (courtesy of Pirple.com). Without hesitation, I decided to sign up and immediately get access to their Frontend Fundamentals course.
After completing the first few parts of the course, I’m proud of my simple achievement – being able to make my first-ever coding output. Yay! I know it’s only the introductory part that I’ve finished but it kind of feels like I’m done with the entire course. And I’m down to my first homework.
In this post, I’m more than happy to share with you what I’ve learned so far and tell you something about this assignment, particularly, how my code works.
Learning How to Code for the First Time (In a Long Time)
To be honest, this isn’t the first time I’m going to do coding in my entire life. I had an IT subject back in college where we were taught the basics of web development. So the HTML thing isn’t totally new to me. However, IT or anything related to the computer wasn’t my line of interest back then. In fact, I was very anxious whenever I attend to my IT-related subjects before and was even afraid to manipulate the computer. (LOL)
Anyway, that has changed over the years. As I use the computer more often both in my previous and current jobs, I’ve learned several technical and related skills. This made me become more comfortable with this equipment and I can now confidently write on my resume that I am computer literate. 😀
Okay, going back to coding. It’s been more than a decade since I was enrolled in that IT subject where the basics of coding were taught. And if there’s anything I can remember from it, it’s just the four letters – HTML! So when I was having this online course on HTML coding, it’s like I’m learning it for the first time. But I’m very grateful that the tutorial was done in a clear and easily understood manner.
What I’ve Learned So Far
Just like many other tutorials, the first part was the introduction where the learners are taught the basic concepts of HTML coding. To summarize, I’ve learned in the introduction what HTML means, how to make an HTML document, its structure (i.e. head, body, paragraph), specific components/elements, and how they’re written in such a way that the computer understands them. Here, I’m using JS Bin to run my codes.
Let’s give some more details to each of those mentioned above.
One of the elements in a code I’ve learned is to make a list, which is pretty common on many websites. There are two types of a list – unordered and ordered. The unordered list is represented by the tag <ul> while the ordered list is represented by the tag <ol>. It’s also possible to make one or more lists inside the main list. It’s very important though that all elements are wrapped with the right tags (meaning it has an opening and closing tags). Otherwise, your computer won’t correctly display the expected results.
After applying what I’ve learned, here’s what I came up with. It’s a code of my favorite dish recipe (Chicken Adobo). The figure below shows the HTML document that contains the code for the recipe (left) and the corresponding output (right).
How the Code Works
Let me explain my output briefly. As you can see from the image above (sorry if the font is too small), I started my code by typing <!DOCTYPE html>. This will inform my browser of the type of document I’m creating, which is html. Then this was followed by the opening tags <html> and <head>. Below them are some elements (i.e. meta and title tags) that are not actually shown in the output. But the head and title and essential parts of an html code, so they should be there. Then I ended it by the closing tag </head>.
- Body – We move on to the body, which contains all the information visible to the audience. Since I’m trying to make a code for a recipe of my favorite dish, apparently the contents of my code are the ingredients and procedure to make the dish. But on top of these is, of course, the title of what I’m coding.
- Heading – You can observe that my recipe’s title appears bigger than the rest of the content. To do that, I used the heading1 tag <h1></h1>, which is the largest heading we can ever use if we want to emphasize something such as the title of a particular section or a paragraph.
- Lists – Also, I was able to apply in this homework what I’ve learned about the list <li> element. Here, I used both the unordered and ordered list. The unordered list <ul> was applied for the “Ingredients” section while the ordered list <ol> was for the “Procedure.” The difference between the two is pretty obvious – just the way they are presented. The unordered list uses bullets while the ordered list uses numbers. To emphasize the titles of these lists, I used the heading2 tag <h2></h2>. That makes them look bigger than their components but a little smaller than the recipe’s title.
- Line Breaks – As you can see, the code’s elements are group together and separated by a space. To make that space, I’ve used the line break element defined by the <br> tag. Doing this makes the output look more organized.
- Comments – These were added in the code but they don’t appear in the output. These are notes used to describe or explain further a certain section or part of our code. This element uses the tag <!– –>. When adding notes or comments, it’s very important not to forget the exclamation point symbol (!) at the beginning. If we missed this, the comments/notes will show up in the output.
Finally, I’ve ended my code’s body with the closing body tag </body> and my html document with the </html> tag. Then I saved my html document with the file extension .html.
Running those codes on my JS Bin will give me the output as shown by the image below.
And that’s it! For beginners, I hope you learned something from my post. And for those who are already experts in the field, I would love to hear any piece of advice, tips, comments, etc. from you. Thank you in advance! I look forward to learning and achieving more from this course!
Significant Difference 