Self-Taught Developer Journal, Day 2: HTML, CSS Selectors, and Big O
Tags: beginners, devjournal, todayilearned, codenewbie
Published: 2021-11-22 03:13:38

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](https://www.youtube.com/playlist?list=PLDN4rrl48XKpZkf03iYFl-O29szjTrs_O)
* [freecodecamp Big O Notation](https://www.freecodecamp.org/news/learn-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]( https://dev.to/jennifer_tieu/starting-my-self-taught-developer-journey-2dga) for context.