It's been one contest after another on the Hive, and I've always been a part of it, mostly the ones organized by @theycallmedan. This is my first weekly report of another contest from another angle.
Last week, I published a post in response to the ‘’My quarantine challenge’’ by @blocktrades posted by @adnomasoul. The post really gave me a drive and I promised to start using this quarantine time to learn how to code. By the grace of God, I’ve started learning gradually and I’m glad about the little I’ve achieved so far within a few hours set aside to learn daily.
What I’ve I learned?
According to what I said in my first post in this series, I said I would start by learning HTML, and that’s where I started. I got some materials from YouTube, and it has been fun learning from Brad Traversey.
HTML (Hypertext markup language)
That’s the full meaning of HTML. It’s now clear to me that HTML can only be used to create a web page and documents. It can also be used to display and format elements of a web page like Headings, text paragraphs, bullet lists, and so on. HTML is not a programming language. Since it also involves writing codes, I thought they are of the same class. But programming languages are far different. They are intricate languages used for connecting to a database, like a user log in, dynamic functionalities, and more. C++, Javascript, Php, Django, Ruby, Python, Cobol, Fortran, C#, and so on are examples of programming languages.
I’m 100% clear on this. The next thing I learned was the tools needed for writing HTML
Yes, the first is a laptop.
A browser. ( Google Chrome is preferable because it’s the fastest, but I can use Mozilla Firefox, Safari, and Edge). I wonder why Internet explorer is not part of the options.
The third is a text editor. The one recommended by Brad was Sublime text because that’s what he used in the tutorial. I can also use Atom, Visual studio code, bracket, text mate for mac, notepads for windows and the likes.
I installed Sublime text at www.sublimetext.com and started following the tutorials step by step, but, unfortunately, I broke my laptop screen and had to continue with my chrome book till I’m able to fix it after the lockdown. So, I’m now using caret instead of sublime. The sublime text or any window programs won’t work on the chrome book because the OS is not compatible. I could find a way around it using crossover, but I’m having an issue with upgrading to the new version of the Chrome OS. Maybe I will have to be patient as the updates are rolled out in stages where a small number is updated and then more.
Before my laptop screen crashed
Following and learning every step from brad; I created an HTML file, having an extension of .HTML for my file to be displayed correctly on a web browser.
I created a folder and named it. I opened that folder and created a new file by going to a new text document, which I call index.html which shows the chrome logo by default.
I opened the index.html file with sublime text and I was set to write HTML codes with my sublime text. Those I learned before moving to the caret text editor. The experience has not been smooth with the new text editor. However, I was determined to learn so it wasn’t a barricade to my progress.
I started writing and this is what I learned in the beginning
To start writing HTML codes, the doctype must be displayed in the beginning. There are many doctypes in HTML. The one shown at the beginning of any HTML code shows the type of doctype the HTML is written with.
It is a decoration, which should be the first thing on a web page. It shows which type of HTML the web page is written in. So this is said to be the standard doctype for HTML 5.
Some markdown used on Hive/Steem also helps, but I learn more
I learnt HTML tag syntax
HTML tag syntax is said to be the building block of any web page. The tags come in pairs
- The start tag
- The end tag
- The content in between
Structure to HTML document
Everything here is surrounded by HTML tags. We have the head and body area in the diagram.
The head has things like the HTML title, links to CSS and javascript files, metadata such as the description and keywords and so on.
The body consists of the markup that’s gonna display in the browser like text images, sub-headings and more.
Tag can be inline or block-level element
Inline elements should not be used to start a new line. Examples of inline elements are
Block-level elements are basically used to start a new line. Examples are
To create a list in bullet points and numbers,
Creating tables
I also created a form. you can see it below in the image. The image below shows my screen while writing the HTML codes. It might look imperfect, but that's my first HTML code ever.
I'm still learning. It's a gradual process, and I'm glad it's building up little by little. Catching fun writing codes. Thanks for your support. Bringing more update of my coding lesson.
If you feel like learning with me, you can drop a comment. We can build together in a matter of time. Let's form a group of serious learners and help each other out at any level. You can be smarter. Let's tap a little from that your super flamming brain.
See ya, catch ya, later.!