I tried to pick up where I left off with the Applied Visual Design chapter, but I basically forgot what to do since I haven’t done this for a while. This is hilarious because this is exactly what would happen if I took a coding class in college: I would pass the class, yet be dumbstruck when I come back to the subject.

Let’s take it further, say I majored in programming in college. I would go through all of those courses and may very well pass them. Now I got my piece of paper. I apply for a job and flex that piece of paper to seduce the hiring manager. Now I’m in a real-world professional setting, but I don’t have the slightest idea in what I’m doing. Now I’d have to relearn everything on the job. Few employers will have the patience to teach a new hire everything from scratch. I don’t mean teaching me their system, I mean teaching me the programming subject as a whole. But yeah, college will supposedly better prepare me for real life.

Therefore, I’ll just redo the bootcamp from the start, from basic HTML. This way I can build momentum while regaining traction.

After my brief bouts with coding, I currently conceptualize it like a warehouse:

1. Every program (website, app, software, etc) is its own warehouse
2. Each warehouse has its own set of bins to put stuff in (these are commands)
3. Now, you can’t just set any object into a bin, you must declare that the object is in the system first. Kind of like

As of now, I won’t get too hung up on understanding every little task. The end of the first module is supposed to have me building various types of webpages, so I’ll eventually see what all of this is meant for.

Once again, I’m starting from the beginning of the FreeCodeCamp bootcamp; to my intermediate programmers, this means I’m going to make the CatPhotoApp for the umpteenth time 😉

HTML

So to start off, what is HTML?

It stands for HyperText Markup Language. This is the basic building block for any webpage. If you want to create a bare minimum, black-on-white text webpage with no fancy colors or graphics, HTML is the first language you start with.

These 2 little symbols “<” and “>” along with “/” are the #1 keys I’ll be using in coding. These (<>) are openers and closers in a command line. Any time you want to tell a computer to do something, you always start with < and close it with >.

Any basic documentation platform has headings (h1), subheadings (h2 and up) and paragraphs (p). All of these are called tags.

So if you want to do a basic heading on your webpage, you would start that with the tag, <h1>, put your text after that, then close it with </h1>. Therefore, the command would look like:

<h1>Your Text</h1>

As a convention, HTML tags are always lowercased. It is bad form to do <H1> or <P> instead of <h1> or <p>

In a perfect world, you can code something and never have to look at it again. Since the world isn’t that forgiving, we’re going to have to structure our code so that it can be constantly revised without ruining the program in itself. The basic element of doing this is a comment tag (<!– –>) which looks like:

<!--In between code-->

Whatever code is in between these tags, it is an indicator that there is an extra note to be read regarding the code.

HTML5

The first one they show you is <main>.

As of now, these tags don’t seem like they do anything to the webpage physically, they’re more so for accessibility reasons; appeals to the programmer instead of the visitor.

If I want to add an image to a page, I use the image tag (<img src). Image tags are self-closing, there is no need for a >.

The “src” is for the link to the image (or simply the source). This also has to be followed by an (alt=) tag which is basically a description of the image itself. So a basic image tag would look like:

<img src= "image link" alt= 'image description'

What I Learned Today

1. How to open and close a tag (<>). This is fundamental in commanding a computer to do something.
   
2. How to create a basic heading, subheading, and paragraph on a webpage.
   
3. How to add a comment to a block of code.
   
4. How to add an image to a page; with img src=. Along with adding description of the image with the alt= tag

I obviously have a long way to go, but I’m glad I’m starting over on this. Documenting this is already helping me solidify my knowledge.