Self-Taught Developer Journal, Day 2: HTML, CSS Selectors, and Big O

Today I learned...

HTML

• An HTML (Hyper Text Markup Language) element is a type of HTML document component.
• HTML attributes provide additional information about HTML elements.
• Inline elements do not take any more room that their content needs. These elements will sit next to each other until they run out of room.
• Block elements take up the whole width of the page regardless of content. These elements will always start on a new line and take up the full width of the page.

CSS

• A CSS style sheet is a list of CSS rules and rule set composed of selectors, which are used to select the HTML elements to style, and declarations, the key-value pair of a CSS property. User Agent Style Sheet - Browser default

• You can override element display to be inline or block

  span {
     display: block;
  }
  

CSS Selectors

Universal Selector is selector that matches elements of any type and essentially selects every element in a document. It's represented with the asterisk "*" and not commonly used.

* {
    color: purple;
}

Element Selector selects everything of a given type or element name. Example, setting the h1 element text to the color blue.

h1 {
    color: blue;
}

Selector List to combine multiple selectors in a list to style. Example, setting the text for the h1 and h2 elements to pink.

h1, h2 {
    color: pink;
}

ID Selector is used to style a single element. Example, the div element has the "id" attribute is given the value of "brand".

#brand {
    color: orange;
}

Class Selector is used to style a grouping of elements. Example, the heading elements have their "class" attribute set to the value "contact-container".

.contact-container {
    color: red; 
}

Descendant Selector are used to style nested elements of an element. For example, style all anchor tags inside the body element.

body a {
    color: lavender;
}

Combinators are used to style elements based on their relationship to other elements

• Adjacent Selectors select only the element that are preceded by another element. Example, the paragraph element is selected if their is a h2 element before it.

  h2 + p {
      color: yellow;
  }
  

• Direct Child Selectors select only the elements that are direct children of an element. Example, the li elements are selected if they are direct children of a div element.

  div > li {
      color: black;
  }
  

Big O Notation and Algorithms

I ended up going down a rabbit hole today on Big O Notation. My lack of confidence in data structures and algorithms might have pushed me to do it. It's always been something I never really grasped and decided to give it another try. I started watching freecodecamp Time Complexity – Big O Notation Course then I remembered watching a video on Time Complexity I stumbled on a while back. The videos are by Abdul Bari on YouTube and he breaks down how to calculate time complexity. I was jumping back and forth between both to compare both teachings. I have an easier time understanding Abdul then I did last time. I also find the concept more interesting to learn this time around. I'm hoping to break it down in an easy to understand way.

Tomorrow, I am hoping to dive more into CSS. I noticed I don't know enough about it still to really build anything. Then also continue more C and these fundamental concepts.

Sources:

• The Web Developer Bootcamp 2021 by Colt Steele on Udemy
• Abdul Bari Algorithms Playlist
• freecodecamp Big O Notation

Day 1: https://dev.to/jennifer_tieu/self-taught-developer-journey-day-1-2en1
Please refer to Starting My Self-Taught Developer Journey for context.