HTML/CSS: murach’s HTML5/CSS3

htmlcss

The year was 1994-95 and we had just got our first easy access to the internet. I remember long nights, squinting at the text, and mysterious code back then. “How does this, make this?” My 10 and 11-year-old self mused. Ever since I’ve always played on the outskirts of HTML and it’s many advancements since. Perhaps you’d think I’d be good at it by now, but much like the guitar and a multitude of other instruments, an inconsistent passion doesn’t glean much if it’s not nurtured. Here we are again, this time, though, we focus!

amTestSite

Structure, structure, structure! For the most part, HTML is going to be one of the easiest syntaxes you can pick up. This is where we started, bare bones. This is a good metaphor though, bare bones because you want to think of HTML as your websites skeleton structure, later you add the muscle, CSS, and then the lifeblood, Javascript.

Of course, you need to start off by calling out to the world, Hello World! The syntax is the first picture with the output following. Barebones! If you don’t have a good foundation though, you don’t have anything.

This slideshow requires JavaScript.

zoimp.PNG

/*     Learn     */

Get your scuba suit on, deep dive! Well, maybe just a snorkeler, CSS enter stage left. A common meme about CSS is that it is the outgoing sexy to HTML’s homebody pajama. Okay, maybe that’s not a common meme, and I just made that up, but regardless. We started with a pre-configured CSS structure after making our CSS folders. They call it, “normalize.css,” apparently. Is good! I think? Just getting into all this after all. Below is just a snippet of the website an the CSS file.

This slideshow requires JavaScript.

Apparently, a cute little started get going, so some basics need not be worried out. It seems the more time goes by, the more programming’s goal is to automate, script, or AI everything around us. Increases productivity, that’s for sure. We kept going with our basicSiteStyled project. Below is the HTML we created for the site and the output with the normalize CSS stylesheet ref linked to it.

This slideshow requires JavaScript.

All that is great and all, but I still didn’t understand what exactly we were doing here, only a general idea. I’m the type that wants to know what the heartbeat sounds like, how the hydraulic fluid flows, or how to unveil the magic of Oz. It’s not that I don’t want it to be magic, it is just that I would most definitely love to prove it is, that doesn’t frequently happen, though. By regularly I mean, well ever, unless you’re talking about quantum conversations, then well, “spooky action at a distance,” close enough! But I digress, let’s write our own!

bistroCSS

Alright, hey, magic… poof’d! The goal for CSS? The goal is to take ALL the styling(muscle) out of the HTML(skeletons) and create Zombies… ha, yeah no. More like the h1, nav, a:links, a:visited, a:hover‘d, and a:focus‘d are like your calls(ligaments) to make your site breath, to live! Yeah, you’re Dr. Frankenstien, just don’t get a Tesla coil and lightning bolt your computer. Or do, only stream it so I can watch.

This slideshow requires JavaScript.

Speaking of Zombies, check out that Zombie Ipsum, pretty fantastic. I found out that there are indeed dozens of types of ipsum out there. Oh, and ipsum is just random blocks of texts you can get at any length to test content in a page. I did learn to also make sure we are testing out code in a validator. This will help you learn how to nest, organize, and if there are any general errors, you’re having issues with. I use, per instructions of the instructor, W3C Markup Validation Service, seems to work!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s