To learn most of the HTML for this website, and eventually future projects, I've been going through the free course at CodeAcademy and I have to say it's helping a lot! I logged into it for the first time yesterday and learned I started an account in 2014. Crazy to think that HTML had been on my mind so long...
I went through one third of the course yesterday, and then halfway today. Structuring and learning the fundamental tags of HTML was fairly easy and fun. Not to mention it got me up and running to get the current iteration of this site finished. Currently working on Forms and Inputs. CodeAcademy does a nice job of having the user write code and practice. I like that way of learning more than watching videos. I find that I'm more of a reading person when it comes to learning. I enjoy videos, but I find myself zoning out on some of the longer ones. Not to mention, stopping a video multiple times to follow along and start it up once you're finished is a real chore. Luckily, CodeAcademy has instructions on the side and an editor in the middle that you work on while the results of your coding is on the right. That way of learning is enjoyable.
As it stands right now, I know enough to continually update this
site. I think I'll add some entries on this page to update the
progress I'm making, and practice what I've learned that day.
While writing these, I'm also learning how to quote code so I can
display it correctly here! Another good resource I'm using
is from
w3schools. I've heard it has a bad reputation for not being good,
but I find it useful as a reference rather than a step-by-step
tutorial like CodeAcademy. I learned about the
<code> tag that allows you to print code on screen
and have it change the font and stuff. I can use that in conjunction
with the <pre> tag to preserve white space. I'll
try an example of that here:
<input type="text" name="textbox" value="write stuff here">
inputResults in this being displayed on the screen:
That <code> tag writes out the code in a monospace
font and slightly separates it from the text above. I still have to
use ASCII codes to correctly print the < and > signs but it's
not too bad once you get used to it. I'll put a few other examples of
what I've learned. This isn't really a tutorial, rather an exhibition.
There are many great tutorials online so definitely check those out!
Today we pick up by learning a few more forms to add to our site
including checkboxes. There needs to be a <label>
tag associated to display on-screen what that specific checkbox is
for.
<input type="checkbox" name="foo" id="foo" value="foo">
<label> for="foo">foo<label>
That code would then display the following:
The name="foo" for the input tag is important when
multiple options are present such as choosing toppings for a
burger order. Not sure how exactly data works over HTML but I am trying
to keep in mind the conventions. That would look like this:
Notice the name="toppings" attribute for each
input tag is the same. That is what links them together.
<input type="checkbox" name="toppings" id="lettuce"
value="lettuce">
<label for="toppings">Lettuce<label>
<input type="checkbox" name="toppings" id="cheese"
value="cheese">
<label for="toppings">Cheese<label>
<input type="checkbox" name="toppings" id="onion"
value="onion">
<label for="toppings">Onion<label>
*****
Some time had passed(many, many hours actually)
since writing about the input and label
tags. I got into a deep rabbit hole on how to structure and
format my HTML in a way that aligns to the standards and practices of
HTML5. I realize that I may be jumping the gun here. This is something
that should be left when I understand more of the core functions of the
language, but I just can't stand the idea of coming back to
re-write all of this. Especially since I'm writing while learning.
Thusly, I am being a bore: reading documentation and forums on how to correctly use Semantic tags to outline the webpage. Using Semantic tags leads to search engine optimization and accessibility for readers. I care about that kind of stuff. Better to learn it the right way, I say!
So which tags am I speaking of? These of course:
ArticleSectionHeaderFigureFigcaptionFooterI learned a lot from this link: Semantic Elements from w3schools and suggest reading from it to get a better understanding. I'm hoping that using these tags will let me use CSS to better style this page once I learn more. For now, this concludes my HTML studies for the day. I will pick up tomorrow. :D