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.
Top comments (0)