HTML, CSS, and the Struggle Bus

Coming into this class, I had a decent understanding of HTML, and a basic understanding of CSS. I’ve enjoyed learning more about both, and even though at times it’s been rather infuriating, it’s cool to see words and random symbols create a working (sometimes) website!

a20a0adec6f4b2d9822846381f9aa637b8429d3a0464d0a6b7d84d81accb32b5

 

Not new on the interwebz, but it’s especially entertaining now that I know more coding and have experienced this.

That being said, there are still some parts I can’t quite grasp, which usually means consulting the Google, or going to W3Schools (fantastic resource, by the way).

My HTML seat on the proverbial strugglebus is the <div> tag.

  • In my mind, there’s no logical reason that a container/box in HTML would be called a div. I may be in the minority, but it’s definitely one of the harder tags to remember. However, once we started coding in Dreamweaver, it made more sense, because there’s a visual representation of the code. As a visual learner, this is really helpful.
  • The <div> tag essentially creates a division in an HTML document. (Per W3School’s definition.) When working with a CSS document, divs can be used to format elements. For example, a header div in one’s HTML document can be referenced in the corresponding CSS document to change the color, font, gradient, etc etc.

Alternatively, the CSS seat is taken by selectors.

  • There are so many different terms between HTML and CSS that it’s nearly impossible to remember what each does within the first few months of coding. A selector (again using W3School’s as a reference) is a “pattern” used to select the element you want to style.
  • A “#” (I kick myself every time I call it a “hashtag” not a “pound sign” – just an example of how much a website can insert itself into culture and everyday vernacular) for example is an ID for elements in the HTML document. So when typing #header { background-color:grey; } into the CSS document, the header div will change color.
  • Another selector is “.”, which is class. This is generally used in the same way as an ID. When used, it will style all elements with the corresponding class, like .hometown. The “hometown” section of the HTML will be styled the desired way.
  • While those are the two most common selectors, there are many others. All selectors are essentially selecting parts of the HTML code to style. Fancy that, eh? Selectors select? 🙂

While coding can definitely be frustrating at times, it’s been a great thing to learn and I’m looking forward to having a finished product of my portfolio!