HTML Notes: Divs, Hashtags, Classes and Comments – Oh my!

Posted by mscrossland on

To learn more about HTML, I’m:

  • Taking the Udemy course “Programming for Entrepreneurs – HTML & CSS” by Pablo Farias Navarro.
  • Practicing my skills using the Brackets code editor.
  • Playing around on the Lrn app whenever I have a free moment. This app is pretty cool. It’s free and covers everything from HTML to Ruby and Python. It’s not extensive (and over scaffolds a bit), but I love the UXD – crystal clear and straight to the point.

My New Learning

  • div – It holds elements in a container in HTML. Much like a cupcake tin.

cupcake_tin

  • id – It’s a selector in HTML that you can use to apply CSS styling to a single element. It allows you to make elements look uniquely different.

cupcakes

  • class – It’s a selector in HTML that helps you apply CSS styling to a set of HTML elements. It allows you to apply the same styling to multiple elements.

cupcakes_same

  • Comments in HTML. They let you leave secret comments for yourself so you can understand your code later. Comments are like breadcrumbs – when you get lost in all your code, your comments help you orient yourself.
comment_html
“Make the date pop here.”

Quick Reference

in HTML (use ) in CSS
div  div N/A
id div id=(Unique Name for Element) #(Unique Name for Element){}
class div class=(Unique Name for Multiple Elements) .(The same Unique Name for Multiple Elements){}

Examples

div & id in HTML
I used the ID selector “questions” to apply CSS styling to this single element.

div_id
div & class in HTML
I used the class selector “tile” to apply CSS styling to five elements on my page. To prevent having to style each one individually, I used a class selector.
div_class
class & id in CSS
div_class_css

New Skill Learned: HTML: divs, class and id. | CSS: .class and #id

Leave a comment