Today's soundtrack is Timothy Brindle: The Restoration, a rap album filled with hope, forgiveness, and solid reformed theology. It's quite a change of pace from his debut, "Killing Sin."
I started learning Python solely because it was easy to pick up and I wanted to make games; however, I found that I preferred making actual functional programs to creating games, then realized that sharing Python programs with non-programmers can be quite cumbersome. The other day, I came across a game called Screeps, an MMO based not upon fetch-me tasks (cough-WoW-cough), but upon automating your units with Javascript. That sounded fascinating; it sent me down a rabbit hole which led me to this article by Quincy Jones about the merits of learning JavaScript. After talking about it with a friend who works as a program developer, I decided to change my focus to learning JavaScript instead of Python. The pros I see are these: 1) I can write a program and share it online, JavaScript programmers are in-demand, and 3) I can play Screeps. #kiddingnotkidding
So today, I begin my journey on FreeCodeCamp.org. The curriculum is laid out so that users learn these skills in this order: Basic HTML and HTML5, then CSS, and finally JavaScript. My first lesson: making an HTML5 photo web app.
Lesson Notes
We use the left and right angle brackets <x> to indicate opening tags, and </x> to indicate a closing tag. Every open tag needs to be closed.
We use the tags "h1" through "h5" to indicate different levels of headings; they get smaller the higher the number gets.
<h1>This is a large heading</h1>
We use the "p" tag to indicate a paragraph; text inside of this tag is the standard readable font.
<p>This is a paragraph.</p>
I learned in Python to use #comment if I wanted to comment on a piece of code. In JavaScript, we use beginning and end tags to start and end a comment; we can also surround an unwanted piece of code with the comment brackets if we want to try disabling it without deleting it.
<!-- 42 is the answer to everything. -->
We can use HTML tags to improve SEO by tagging the main part of the page. <main><p>This is the main part of the page.</p></main>
To add an image to our webpage, we first use the img tag, then tag the src (the url goes inside quotation marks), and give the picture an alt description for mouseover and in case the image doesn't load. Even if we wish to leave the alt blank, we still need to include the tag - we would just leave it empty in that case. The whole thing is just enclosed inside of the img tag; there is no end img needed.
<img src="https://picturesofstuff" alt="A picture of a thing">
We can make links by using "anchors," indicated by the opening tag a href, and closed with the end tag a. We put the link in quotation marks inside the opening tag; we put the anchor text between the tags.
<a href="https://google.com">Here is the answer to your question</a>
Anchor elements will let us scroll to different sections of the same page - for example, a "go to top" button at the end of a long article, or an option to scroll to a specific definition in a glossary. To do so, we need to complete two steps: first, ad an id tag to the section we want to scroll to, then specify its name; second, create the a href link followed by a hashtag and the name of the portion of the page we wish to navigate to upon click.
<h1 id="top_of_page">Page Title</h1>
<a href="#top_of_page">Scroll to top</a>
That wraps it up for today! I've had a lot of fun getting back to HTML, which I learned the basics of in my teens. I'm actually really excited to keep going with this.
