Geist's Progress Thread

Geist Posts: 57 Working on: JavaScript & Japanese	Geist's Progress Thread Nov 20, 2024 2:41:12 GMT nickyslicky likes this Quote Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by Geist on Nov 20, 2024 2:41:12 GMT Progress thread for what I'm currently studying: Actively studying: Web Development (focusing on Javascript) Passively studying: Japanese & 3D Modeling I'll make this parent post prettier later
	Last Edit: Nov 20, 2024 2:42:36 GMT by Geist

Geist

Posts: 57
Working on: JavaScript & Japanese

Geist's Progress Thread Nov 20, 2024 2:46:30 GMT nickyslicky likes this

Quote

Post by Geist on Nov 20, 2024 2:46:30 GMT

The first few videos of the course explain simple things like "How does the internet work" and "What is a webpage" -- perhaps I am getting ahead of myself, but I skipped those two.

Surprisingly, they don't suggest code-along for the program. They instead say to watch a few minutes at the time, then go back and code-along. I, however, do not fuck with that so I will be coding along.

After their boiler plate "here's how to get the most out of this course!" they have a list of recommendations on where to start based on your experience. I really wanted to click "some experience," because I do have some experience but... I'm afraid of not knowing what I don't know. So. From Zero experience it is.

What is HTML?

Honestly, a little distracted because the teacher keeps calling it "A-TML"

"HTML defines the structure and content of the website."

Ah yes, this is where I get to brag and say "back in my day, CSS was a magic trick that only four or five people seemed to know. We used to code and style our scrollboxes each by hand, uphill, both ways!"

"HTML stands for Hypertext Markup Language. Look at that first part. What does hypertext mean?"

Okay lady, actually good question. I've never thought about it. Hypertext. Just. Some funny looking things in carrots that do things.

"It refers to pieces of text which can link to other documents in the website. So these pieces of texts are hypertext, or hyperlinks"

I could have probably guessed that, to be honest.

"Now that we know that, what about that other part? The Markup Language?"

Oh this will be good.

"IF you look at the English language, we often see bits that function similarly. Look at quotations marks ("") this is how we know it is a quotations. This is very similar to an editors manuscript."

Well. Okay, I did kinda learn something. Touché.

After this cute explanation, she moves on to a screen showing all the HTML tags -- honestly, its a lot less than I thought there would be, though I guess that makes sense since it was the "first" widely available coding language.

(Here I took a 20 minute break to play Slay the Spire)

She then goes on to show the ones we "need" to know -- which feels kinda odd, right? Shouldn't we need to know everything? Maybe not in a utilitarian sense but at least enough to know what they do to determine if we do need them. < meter >, < ruby >, < thead > -- for all I know these could have solved world hunger. Do better, instructor.

(Here I took another 10 minutes to play Slay the Spire, had a horrible run where I died very quicky, and then went back to studying)

"In this course we're going to be covering some of the essential tags, so don't worry about learning them," pause, "so don't worry about memorizing all of them or learning them."

She forgot to cut the audio she messed up and I'm a menace so I had to quote it.

Oh my god there's a 3 minute video explaining how to unzip a folder in the year of our Lord 2024. I could have skipped it but I spent that time writing about me complaining about it.

"We're going to learn about one of the most important elements --

Oh, Good!

-- the heading tag!"

What.

Difference between a tag and element:

Tags: inside angle brackets < > 
Elements: The entire component surrounded by the tags

She explains that headings are an homage to table of contents. I mean. I guess. Makes sense. There are 6 headings -- For some reason, she really wants to iterate that H7 does not exist. She even laughs about it. There must be history there.

I have my heating pad on max wrapped around my feet and they're still freezing. This sucks. Fuck the winter.

She's explaining that Level 1 headings < h1 > are the biggest and < h6 > are the smallest. I knew this already, but I was the one who chose not to skip the basics. Good job, me. Smart move. Good way to spend your t-- oh my god she's explaining how to unzip a folder *again*. WHY.

The first coding challenge is to create a table of contents using the header tags. Yeah, I can do that. She then tells us to download a .ziip folder containing an html file, and we throw it into VSCode (yeah yeah)

"Now if you scroll down here you'll see the solution, which I don't recommend looking at until you've completed the challenge "

Well lady, unfortunately for you, you didn't put the answer far enough down the page and its literally the first thing I saw. Thankfully, a blind monkey with no hands could probably solve this one.

<h1>Book</h1>

<h2>Chapter 1</h2>

<h3>Section 1</h3>

<h3>Section 2</h3>

<h2>Chapter 2</h2>

<h3>Section 1</h3>

<h4>Diagram 1</h4>

<h2>Chapter 3</h2>

<h3>Section 1</h3>

<h3>Section 2</h3>

(Here I took a break and read the first chapter of 'To Your Eternity', cried for about four minutes and then decided i Did Not want to continue reading that and started the next video)

Next is the paragraph element, which actually I only vaguely know and use specifically to create what I've dubbed 'beefy linebreaks.'

Pretty straight forward, we have our < p > tag, which within it contains the contents of a paragraph:

< p > This is a paragraph < /p >
Okay that was literally it, I thought she was going to go into styling or something but nope just "this is a paragraph." and then reminds us how ti *unzip fucking folders again*.

I folded a little and fast forwarded, she's now explaining Lorem Ipsum and how it was text from Cicero and, in her words, "it's really, really old." I don't know how I would have survived without that knowledge.

Thanks to her though I decided to go see if there was a translation of Lorem Ipsum and I got this:

Lorem ipsum is derived from the Latin “dolorem ipsum” roughly translated as “pain itself.”

Bro...

Void Elements

"A void element is where you are forbidden from putting content inside the tags"

Forbidden? ? What are you going to do? Fuck me?

She explains void elements are things like < hr >, but then explains that void elements generally have a forward slash in the tag, IE < hr /> which I've seen before but never knew it was like... the recommended formatting. I've never used the forward slash in my void element tags.

She hasn't explained why there's a forward slash there yet, so that's kind of boring.

She said William Blake was one of her favorite poets while using an example of a poem to demonstrate the < br /> tag. Yeah right lady you just Googled a poem you can't fool me.

I really want to go make myself a cup of coffee but the kiddo is sleeping on top of my desk and I can't step away because he could roll over onto the floor and that's no good.

(Here I took a break to torment someone with my stream bot. It was fun.)

The coding challenge this time includes an < h1 >, < p >, < hr >, and < br /> to format a biography. I'm not going to do said challenge because I know exactly how to do it already, because I'm God.

Oh she's finally discussing not having the forward slash:

"Some people do it this way, and it's perfectly valid HTML. HTML5 ignores the slash at the end and does not even look at it."

Moving on to the next video, there's a project now -- to create a new website to keep track of all my favorite movies. That's cute. She mentions that Roger Ebert has a website documenting his favorite movies and then just drops the "he's dead now." wowza.

The goal example is three favorite movies while using < h1 >, < h2 >, < h3 >, < p >, and < hr /> -- another challenge I'm not going to do because I understand this already and wow I really shoulda just skipped this part, huh?

Fast forwarding and she says next video will be intermediate HTML. Thank God.

Geist

Posts: 57
Working on: JavaScript & Japanese

Geist's Progress Thread Nov 20, 2024 2:46:38 GMT nickyslicky likes this

Quote

Post by Geist on Nov 20, 2024 2:46:38 GMT

[nospaces]

[attr="class","worklog-container"]

[attr="class","worklog-header"]
SESSION TRACKER

[attr="class","worklog-section"]

[attr="class","worklog-title"]WORKING ON:

[attr="class","worklog-content"]Web Dev coding course from Udemy

[attr="class","worklog-section"]

[attr="class","worklog-title"]SESSION SUMMARY:

[attr="class","worklog-content"]I wouldn't say I learned much but I didn't want to risk skipping something I didn't know already.

[attr="class","worklog-section"]

[attr="class","worklog-title"]SESSION LENGTH:

[attr="class","worklog-content"]I turned 40 minutes worth of videos into almost three hours.

[attr="class","worklog-section"]

[attr="class","worklog-title"]TIME SPENT TOTAL:

[attr="class","worklog-content"]We'll start here with three hours.

[attr="class","worklog-section2"]

[attr="class","worklog-title"]Goal for next session:

[attr="class","worklog-content"]Continue with intermediate HTML section.

[attr="class","worklog-foot"]

[googlefont=Roboto:400,700]
[newclass=.worklog-container]padding:0px;border:solid 1px #e0e0e0;background-color:#f8f8f8;width:350px;border-radius:10px;box-shadow:0 2px 4px rgba(0,0,0,0.1);[/newclass]
[newclass=.worklog-header]background-color:#4a90e2;background: linear-gradient(to bottom right,#B4D7C1, #B6E7DA);color:#ffffff;font:bold 18px roboto;text-align:center;border-radius:8px 8px 0 0;padding:10px;[/newclass]
[newclass=.worklog-section]margin-bottom:10px;padding:10px;border-bottom:solid 1px #ddd;[/newclass]
[newclass=.worklog-section2]margin-bottom:10px;padding:10px;[/newclass]
[newclass=.worklog-title]font:bold 13px Roboto;color:#888888;margin-bottom:5px;text-transform:uppercase;[/newclass]
[newclass=.worklog-content]font:12px Roboto;color:#333333;[/newclass]
[newclass=.worklog-foot]background-color:#4a90e2;height:10px;background: linear-gradient(to bottom left,#B4D7C1, #B6E7DA);color:#ffffff;font:bold 18px roboto;text-align:center;border-radius:0px 0px 8px 8px;padding:10px[/newclass]

Geist

Posts: 57
Working on: JavaScript & Japanese

Geist's Progress Thread Nov 20, 2024 5:26:49 GMT

Quote

Post by Geist on Nov 20, 2024 5:26:49 GMT

Starting with the intermediate HTML, it was nice to see something that I actually am almost always confused by greatly mentioned off the bat -- lists.

She is starting us off with Unordered Lists, with the tag < ul > -- which yeah, I've seen but I've always copy and pasted oops.

So the structure of lists is pretty simple, and I suppose would have been easier for me to remember if I had actually given any thought as to what the tags abbreviation stood for < UL > being Unordered List and < LI > being Line Item. An unordered list in code looks like this:

<ul>
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>

</ul>

Pretty simple with < UL > being the 'hat' and < LI > being the 'clothes.' Kinda feel silly that I struggled with so simple a concept but that's life.

The Unordered List creates a bullet point list, and an Ordered List < OL > creates a list ordered by numbers. The inside uses < li > still.

For another code challenge she explains yet again how to unzip a file. This time I will do the challenge, since lists are new to me for hand coding.

<h1>Angela's Recipie for the Best Cinnamon Rolls </h1>
<p>
<h2>Ingredients</h2>
<p>
<h3>For the dough:</h3>
<ul>
    <li>3/4 cup warm milk</li>
    <li>2 1/4 teaspoons yeast</li>
    <li>1 egg plus 1 egg yolk</li>
    <li>1/4 cup butter</li>
    <li>3 cups bread flour</li>
</ul>
<p>
<h3>For the filling:</h3><p>
<ul>
    <li>2/3 cup dark brown sugar</li>
    <li>1 1/2 tablespoons ground cinnamon</li>
    <li>1/4> cup butter</li>
</ul>
<p>
<h2>Instructions</h2>
<p>
< ol> 
    <li>Mix the milk with the yeast, sugar, eggs</li>
    <li>Melt the butter and add to the mixture</li>
    <li>I'm bored now</li>
    <li>The rest of the recipie</li>
</ol>

In the next lesson they're going to talk about indentation of HTML elements -- which I Feel like could have probably been in the basic HTML stuff since it's part of formatting code in general but maybe I'll have egg on my face shortly.

She mentions nesting a list within a list -- man my head hurts at the thought but very basic bullet points. Looks like this:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
        <ul>
            <li>Item 2a</li>
            <li>Item 2b</li>
        </ul>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

So basically, since you're indenting an item (in the case of above, line item #2) you're creating a new unordered list within that list item and then closed once you're done with the items inside the nesting list. Simple enough.

This code challenge is basically the exact same as what I did above to explain it to myself, so I won't be completing it. Just about nesting.

Next lesson is about Anchor elements (what the fuck are those?) and links.

Anchor Elements

Oh shit, you mean to tell me the "a" in < a > stood for "Anchor" this whole time?

Okay, this one I know and use a lot. In order to create a link, you need to have to include an attribute (href) to call to the URL.

Attributes

Attributes add additional information to an HTML element.

Attributes are structured like this:

<tag attribute=value> Content </tag>

You can include as many attributes as you want, you just need to seperate each one with a space and ensure its in the opening tag:

<tag attribute=value attribute=value> content </tag>

HREF turns content into a link by inserting the HTML. For example, if I wanted to link to this forum using the anchor element:

<a href="https://themoonshade.boards.net">The Moon Shade Forums</a>

There are other attributes for the anchor element -- news to me -- and additionally there are global attributes that can be applied to any element. The one she just brought up is "draggable" which I've never heard of before...

<a draggable=true> Content text </a>

would let a user drag the text across the screen instead of highlighting it. Neat! Wonder what that use case is.

There's another attribute she brings up for Ordered List called "start" in which you can start the numbered list at a different number.

< ol start="5">
    <li>Item</li>
    <li>Item</li>
</ol>

The above items would be "5 & 6" as it would be starting at 5. That's where this lesson ends, and the next one will be images.

Images I feel like are pretty simple, you have a few attributes but generally you're gonna start similarly to a link with 'src' being "source":

<img src="imageurl">
<img src="imageurl" alt="text describing the image">

The biggest difference is this tag does not close -- I'd imagine it used to, but probably another change with HTML5. It's a void element!

There are a few attributes for images. Width, alt , etc-- oh my god she says "gif" like "GIF" okay you're based lady. "Jif" believers should burn.

Next lesson is "create a website for your next party," well I would love to have a party but alas. Those days are behind me, I'm a mom.

The "project" is one I'm not going to bother with. It's very simple, with a header, a list, an image, and a link.

Next section is -- oh she's telling me to schedule time to learn things. No.

That's the end of her "intermediate HTML" section. I think, generally, it's not that difficult. I'm certainly feeling pretty good about the fact I knew 95% of it already.

Geist

Posts: 57
Working on: JavaScript & Japanese

Geist's Progress Thread Nov 20, 2024 5:30:15 GMT nickyslicky likes this

Quote

Post by Geist on Nov 20, 2024 5:30:15 GMT

[nospaces]

[attr="class","worklog-container"]

[attr="class","worklog-header"]
SESSION TRACKER

[break]

[attr="class","worklog-section"]

[attr="class","worklog-title"]WORKING ON:

[attr="class","worklog-content"]Web Dev course from Udemy (part 2)

[attr="class","worklog-section"]

[attr="class","worklog-title"]SESSION SUMMARY:

[attr="class","worklog-content"]This was their "intermediate HTML" section, covered making lists, links, and images as well as discussing nesting and indentation, and attributes.

[attr="class","worklog-section"]

[attr="class","worklog-title"]SESSION LENGTH:

[attr="class","worklog-content"]1 hour

[attr="class","worklog-section"]

[attr="class","worklog-title"]TIME SPENT TOTAL:

[attr="class","worklog-content"]4 hours

[attr="class","worklog-section2"]

[attr="class","worklog-title"]Goal for next session:

[attr="class","worklog-content"]The next section is titled "Multi-Page Websites" and I think I may already have a good handle on that part too but I'll power through it in case there's something that I don't know that I don't know.

[attr="class","worklog-foot"]

[googlefont=Roboto:400,700]
[newclass=.worklog-container]padding:0px;border:solid 1px #e0e0e0;background-color:#f8f8f8;width:350px;border-radius:10px;box-shadow:0 2px 4px rgba(0,0,0,0.1);[/newclass]
[newclass=.worklog-header]background-color:#4a90e2;background: linear-gradient(to bottom right,#B4D7C1, #B6E7DA);color:#ffffff;font:bold 18px roboto;text-align:center;border-radius:8px 8px 0 0;padding:10px;[/newclass]
[newclass=.worklog-section]margin-bottom:10px;padding:10px;border-bottom:solid 1px #ddd;[/newclass]
[newclass=.worklog-section2]margin-bottom:10px;padding:10px;[/newclass]
[newclass=.worklog-title]font:bold 13px Roboto;color:#888888;margin-bottom:5px;text-transform:uppercase;[/newclass]
[newclass=.worklog-content]font:12px Roboto;color:#333333;[/newclass]
[newclass=.worklog-foot]background-color:#4a90e2;height:10px;background: linear-gradient(to bottom left,#B4D7C1, #B6E7DA);color:#ffffff;font:bold 18px roboto;text-align:center;border-radius:0px 0px 8px 8px;padding:10px[/newclass]

Geist

Posts: 57
Working on: JavaScript & Japanese

Geist's Progress Thread Nov 20, 2024 7:08:26 GMT nickyslicky likes this

Quote

Post by Geist on Nov 20, 2024 7:08:26 GMT

I miss my husband so we're gonna keep studying, this time we're looking at their next section which is Multi-Page Websites.

Honestly, I feel like at this point I'd probably have more value skipping to CSS but I'm going to just ignore that part of me that wants to think I'm God (Read: Dunning-Kruger effect) and pay attention.

File Paths:

She spends this time talking about a nice cafe in Westminister. I will never go there. But I'm happy for her.

I know what file paths are, but to put pen to paper it's where files are hosted on your hard drive. This is also a structure that's used for building websites.

The "Root" is the base of your directory, generally.

(At this point I clipped my baby's nails, called my husband, and got ready for bed.)

Absolute file path: relative to the root of the computer ( ex, C drive) we can use the file path to direct to a certain location with the absolute file path.

Relative file path: "Relative to something," okay, thanks lady. Relative file paths are shorter and does not matter if you move your folders around as they are going to remain valid. Basically, if you move the folder but not the item in the folder, the file path for the items inside remain relative (this is common in web pages)

Oh, I'm learning something new. There are special characters for relative file paths. Two dots (..) tells the path to go up a level → go to the rest of the path. (../pictures/image.png) for example.

The single dot (.) tells us to stay within the current directory and look there, relative to the starting point. I've seen this but never knew that was the purpose for it. Glad I Didn't skip this part.

There's an exercise for this that I actually think I should do, but I'm kind of exhausted and I understand it in the base sense -- the goal is to list the file path of all the targeted images with < img = src -- this can be done easily with an absolute file path, which isn't really what she wanted you to do with this exercise but... what can I Say, I'm a woman. I'll watch her go over the solution of it to make sure I understand.

(I watched it, I understood.)

The next lesson is "What are webpages?" and will go over file paths in more detail so I don't feel extremely bad for not doing the exercise the way she wanted to.

I'll pick back up on this multi-page course tomorrow most likely, I should really focus on going to sleep.

Geist

Posts: 57
Working on: JavaScript & Japanese

Geist's Progress Thread Nov 21, 2024 0:59:45 GMT nickyslicky likes this

Quote

Post by Geist on Nov 21, 2024 0:59:45 GMT

Alright back at it again after fourish hours of sleep. Nothing like learning a new skill to push back the dread of inadequate rest.

She opens up with an explanation of a website - a project folder with the whole website, the index.html file, and subsidiary files. She's using this to explain that we need more than one page if we want a multi-page website. You know, I'm beginning to think I should sell an HTML Udemy course.

She gave us a quiz -- Asking how to navigate file paths and display an image on a home page. Simple though.

Very short section, next bit is "The HTML Boilerplate," which I've never heard of before. Am I about to learn something new?

Mmm right away I think I know what she's going to go over, which is the < !DOCTYPE html > thing -- ah yep. Well I'll pay attention because I have always just accepted it's existence without knowing what it means.

<!DOCTYPE html> // declares that the type of document is HTML
<html lang="en"> // declares that the documents language is geared towards english speakers. Everythin within the page will go inside these brackets.
    <head> // important information about the website is here that the user will not see -- information about how the website is going to need to render.
        <meta charaset="UTF-8"> // ensures the character set is listed properly and will be rendered correctly on your website. Generally always UTF-8. 
        <title> // Title of the website, usually whats listed in the tab </title>
    </head>
    <body> // the content of the website goes within the body. The text, pictures, etc. Things the visitors will see.
</body>
</html>

She goes over another meta tag, "viewport" which tells the browser how to display your website. Her coding challenge is to recreate the above, which I did while she was explaining it. Call me Nikacado Avacado because I'm two steps ahead.

Geist

Posts: 57
Working on: JavaScript & Japanese

Geist's Progress Thread Nov 21, 2024 4:43:09 GMT nickyslicky likes this

Quote

Post by Geist on Nov 21, 2024 4:43:09 GMT

Next section is "Portfolio Project" to build a portfolio! Cute. I'm probably going to skip this since we haven't learned any CSS and it sounds like the most boring portfolio to exist, but I'll watch the video.

Yeah, I watched it. I did not need to.

Next section is about hosting your website. She explains local hosting (having your files on your computer) and web hosting. She walks through uploading the portfolio project and using Github pages to host it -- something I didn't know you could do. Neat!

Alright, next section we're finally headed toward CSS, which I'm weak at!! Time to learn!! TIME TO LEARN.

I've watched four hours of this lady's course and I'm at least feeling happy that I didn't struggle with the HTML side of things -- HOWEVER, if we're moving off of HTML now I'm concerned because we didn't discuss < div > at all? Isn't that the most important element of building a website?

Oh she said next is CSS but now she's bringing up Capstone projects. Basically explaining it as a portfolio. There's a mini project here saying we should make a resume and upload it. I'm not going to do that for many reasons.

Okay, now she's bringing up CSS but my Doordash is here.

CSS

Cascading Style Sheets: She explains it like a waterfall. I get it. Kinda. Okay, no, I don't. Anyway, its there for us to define how our website should look like.

There are more styling languages:

SASS - stands for Syntactically Awesome Style Sheet (really?)
LESS - stands for Leaner CSS

She's going over the history of the internet and CSS, including HTML 3.2 and how it let you style things for the first time. She talked about some tags that I'm used to and said they're deprecated. Man. but I love < center >. I guess you do that with < div > and "align" now. (I say "now" but apparently this was all the way back in 1996... I was baby.

Okay, she's starting --

There are three ways to add HTML to a website:

Inline: < tag style="css / > (I use this one the most as of right now>

Internal: < style > CSS </ style>

External: < link href="style.css" > (this is the one I feel like I should be using.)

Inline

Inline CSS will go in the same line as the opening tag of the HTML tag. Something like this:

<html style="background:blue"></html>
// you can add the style attribute to many tagsOf course, inline is not ideal because if you wanted to style a whole document it'd get quite crowded.

Internal

This is done with the < style > tag, where you add all your CSS into. Such as:

<style>
    html {
    background:blue;
    }
</style>

This style would affect any part within the document.

The selector goes before the curly braces ('html' above). Inside the style tag, you can target any element you want. If you have just one HTML document (such as one page) having the CSS internally is easier.

External

For multi-page layouts, this is the most ideal. It's a CSS file that lives in a separate place from your HTML and then is referenced within the HTML file, as such:

<head>
    <link href="./style.css" />
</head>

You can also include rel="stylesheet" to label the relationship between the HTML and CSS but I'm a lazy fuck and will never, ever do that.

External is the most common one in webdev. Which I knew. Because I know things. Many things.

Inline - one element
Internal - one page
External - multi page

She says its time for another exercise, which is to add CSS to one of our previous projects! You know, the one's I haven't done. She wants us to practice the methods of using CSS. Since I get that already, I'll just type out some styling for practice.

body {
    background-color:#ff0099;
    color:#fff;
}

.random {
    padding:10px;
    border-radius:30px;
    background-img: url('');
    font-family: helvetica;
}

h1 {
    color:#ff0000;
}

Easy.

Next section is about CSS Selectors, but my husband is home and I'm going to take a bath first hell yeah.

Geist

Posts: 57
Working on: JavaScript & Japanese

Geist's Progress Thread Nov 21, 2024 7:39:23 GMT nickyslicky likes this

Quote

Post by Geist on Nov 21, 2024 7:39:23 GMT

CSS Selector

The CSS Selector is the part that selects the HTMLK in order to apply whichever rules go between the curly braces:

h1 // ← this part here {
    color:blue;
}

Essentially, a selector can be any HTML tag.

Class Selector

Requires a special symbol (.) with no spaces and then the class:

.item {
    color:blue;
}

A class is something we can add as an attribute to any HTML element. An attribute groups multiple elements into a class with the same styling.

<h2 class="item">heading</h2> //this text would be blue

a class is case sensitive!

ID Selector

Okay this is one that I actually wanted to know more about. Similar to above but starts with a (#). It selects all elements with a particular ID attribute:

#main {
    color:red;
}

<h2 id="main">heading</h2>

What is the difference between an ID and Class selector?

ID: Intended for one element, useful if you have something styled for a class but want a single instance to look different.

Class: You can put these on as many elements as you would like.

Attribute Selector

I have never actually heard of this before. The example she has is:

p[draggable]{
    color:red;
}

So this is for all < p > elements that have the [draggable] attribute.

<p draggable="true">Drag me</p>
<p>don't drag me</p>
<p>don't drag me</p>

This one would apply styling only to the top one.

You can also select an attribute that has a specific set value:

<p draggable="true">Drag me</p>
<p draggable="false">don't drag me</p>
<p draggable="false">don't drag me</p>

p[draggable="false"] {
    color:red;
}

This would select only the ones with the false value and apply the styling.

Universal Selector

A universal selector is just an asterisk ( * ) - it is essentially an "apply all".

* { 
color:red;
}

The above would turn all text on a page affected by the CSS red, even if its not called out with an ID or Class tag.

She's giving a CSS styling assignment and saying we need to write it. Easy enough, I'll write the tags below:

p {
    color:red;
}

.note {
    font-size: 20px;
}

#id-selector-demo :
    color:green;
}

li[value="4"]{
    color:blue;
}

* {
    text-align:center;
}

That was that, now we're moving on to a Color Vocab Project -- It's to color the text specific colors and have an image that corresponds to that text color. I don't want to do all that so I'll type out a smaller version of it below:

HTML:

<h2 class="red-text">Red</h2>
<img src="https://imageurlhere.com/red.png" alt="a red square">


CSS:

h2 {
    color:red'
}

img {
    height:200px;
    width:200px;
}

That was the last bit of Intro to CSS. I guess tomorrow I may try and tackle CSS the CSS Properties and Intermediate CSS sections. Peace.

Geist

Posts: 57
Working on: JavaScript & Japanese

Geist's Progress Thread Nov 22, 2024 3:32:31 GMT nickyslicky likes this

Quote

Post by Geist on Nov 22, 2024 3:32:31 GMT

Alright so, to be fair I coulda/shoulda been studying a bit earlier but I spent my day mostly in a fugue state (I've been using this phrase a lot lately.)

Before the beginning of the next course -- man I just realized I only have six days to finish this gallon of milk -- she offers you to join the student community Discord. I am not going to do that. But that's neat.

Okay I wrote the above four hours ago and instead got distracted drawing Mococo with huge tits and reading a comic based off of the bible. I stopped reading because they didn't make Satan hot enough.

Okay its been hours again and I guess I'll start studying now.

CSS Properties

Colors

She's used mostly 'red,' 'blue,' and etc as colors. I'm guessing she's about to explain hex codes, which I already fuck with heavily.

Properties:

background-color (background)
color (texT)

She discussed "named colors" (developer.mozilla.org/en-US/docs/Web/CSS/named-color) basically colors that have names and do not require hex codes. Neat!

That's it, that's the lesson.

Fonts

color - font color
font-weight - how thick font is (usually level of boldness)
font-size - self explanatory
font-family - either the type of font (serif, sans-serif) or a specific font family (Geist, Arial, etc)
text-align - center, left, right, start (when you have text that starts from right to left, like Arabic) , end.

Font Size

What does PX mean? 1/96th of an inch = one pixel.

What does PT mean? Point. Slightly bigger than a pixel. 1/72nd of an inch.

What does EM mean? "M." 100% of parent? So if we were to put "1em," it'd be 100% of the size of whatever is in the parent tag. "2em" would be 200% of parent tag. So it's a relative font size.

What does REM mean? Closely related to "EM" - relative size to the root of your HTML file.

So EM - relative to an element. REM - relative to the whole page. Seems like REM would be the better choice for setting up a page in general.

Font Weight

Boldness of text.

Can either be Normal, Bold, Lighter/Bolder (relative to parent), or a number in steps of 100 from 100-900.

Font Family

h1 {
    font-family: Helvetica, sans-serif;
}

We include the family and sans-serif in case the computer the webpage is being served to does not have the font installed.

If a font has spaces in the name, you need to include quotations:

h1 {
    font-family: "Times New Roman", serif;
}

If you want a font specifically that a user may not have, you can go to Google Fonts and import a font you like by including its call code in your style tag in your HTML. Google also includes the CSS rule that you can copy and paste into your CSS file.

Font Family generic types:

Serif
Sans-serif
Cursive
Monospace
Fantasy

She provides another coding challenge to style some fonts, but I yeah I get this already so I'm not too worried about that.

Inspecting CSS

She's going over the inspection tool in chrome, something that I use a lot already, but I'm going to watch because I've basically just fumbled my way to vaguely understanding the inspect element.

Elements Tab → Style

When you select any element, it will show you how that element has been styled. This is how I use it mostly already.

You can view the style source in the Sources tab and view the CSS file. I did not know this! Cool!

When you see something in the inspector that is crossed out, it is because there is a property that is conflicting with the default CSS .

The "Computer" tab will show you various stats on colors and properties that are applied to an element.

Three dots → more tools → CSS Overview: Capture Overview will lay out some information about the CSS and styling such as coloring and fonts. This is really cool and I had no idea that it existed. Glad I did not skip.

She moves to a quiz here that I don't need to take because I'm God's perfect angel.

Next is the Box Model (Margin, Padding, ETc) Which I do think I know well but hey I said that about the above so we'll see I guess.

Last Edit: Nov 22, 2024 3:32:56 GMT by Geist

Geist

Posts: 57
Working on: JavaScript & Japanese

Geist's Progress Thread Nov 22, 2024 6:34:52 GMT

Quote

Post by Geist on Nov 22, 2024 6:34:52 GMT

We're going to discuss Margin, Padding, and Border.

Now I may actually learn something!

She explains that, even if we can't see it, each element is a box. We can edit that box such as its width and height. When we do this, it pushes the box of any other elements lower on the webpage.

We can do this with pixels or percentages.

Additionally, we can create a border on each element.

The border element takes three values, each separated by a space:

<item style="border: 10px solid black;">
size, style, color

The border will go outwards as opposed to inwards, therefore will not affect the width height of your box.

You can edit further:

border {
    border-top: 0px;
    border-width: top right bottom left;⬇️
    border-width: 10px 10px 10px 10px;
    border-width: 0px 20px; ⬇️
    border-width: topbottom rightleft;
    border-radius: // rounds the border out, same styling as the width above
    }

The padding modifier adds a space between the content and the border

The margin modifier modifies the area outside of the border. This estimates the distance between elements.

The box model illustrates this pretty well, so I'll place this here.

DIVS (Boxes)

It's time!! The one element I very truly need to know more about.

DIV = Content Division elements. She says we did not learn about these earlier because without CSS they are invisible and there's no reason to have them. I mean, fair. I suppose.

A div is what contains the boxes of content for each element. For exmaple:

<div>
    <p>Hello World</p>
    <img src="/world.png">
</div>
<div>
    <p>Shut up World</p>
    <img src="/effoffworld.png">
</div>

She recommends an extension called Pesticide to get rid of bugs and clean your CSS. I'll look into that later. It highlights divs and elements.

Okay, she has a coding challenge I'll actually do and paste below.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div id="first">

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores numquam aliquid laudantium nemo, doloribus laborum adipisci rerum necessitatibus asperiores aperiam temporibus.

        </div>

    <div id="second">

    Sup?

    </div>

    <div id="third">

        Hey

    </div>

</body>

</html>

And

CSS 
#first{

    background-color:green;

    border: 10px solid black;

    color:black;

    width:170px;

    height:170px;

    padding:20px;

    overflow: hidden;

}

  

#second{

background-color: yellow;

border: 10px solid black;

border-width: 15px 10px;

height:150px;

width:150px;

margin-left:230px;

text-align: right;

}

  

#third{

    background-color: red;

    width:200px;

    height:200px;

    border:10px solid black;

    margin-left:10px;

    text-align: center;

}

The next lesson is the "final project" for this section of CSS - to make our own motivational poster. You know. Like 2007.

Okay so I'm just going to describe it:

Image in the middle, centered, with a border.
Black background, large main title with serif text.
Paragraph centered with subtitle.

her "hint":

You can center a div horizontally by giving it a width of 50% and a margin-left of 25%

I should probably make this too but I really don't want to. But. Okay.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>

    <div id="moti">

        <img src="IMGHERE.jpg" style="width:100%;">

    </div>

    <div id="title">

   <h1>SUP</h1>

    </div>

    <div id="subtitle">

        This is a subtitle

    </div>

</body>

</html>

And

CSS

body {

    background-color: black;

    color:white;

    font-family: "Times New Roman", serif;

}

  
  

#moti {

    width:50%;

    margin-left:25%;

    border: 2px solid white;

    padding: 10px;

    height: 237px;

}

  

#title {

    width:50%;

    margin-left:25%;

    text-align: center;

    color:white;

    margin-top: -15px;

}

  

#subtitle {

    width:50%;

    margin-top:-20px;

    margin-left:25%;

    text-align: center;

    color:white;

}

And here was the result (using a random image on my hard drive):

And with that, we're down to the next section which is the actual beginning of the Intermediate CSS section -- "The Cascade" which sounds a lot more dramatic than it probably is.

I would say that's a "tomorrow" me problem but I don't actually have time to study tomorrow! So I guess that's a Saturday me problem. Tee hee. Peace.

Geist

Posts: 57
Working on: JavaScript & Japanese

Geist's Progress Thread Nov 22, 2024 6:41:54 GMT nickyslicky likes this

Quote

Post by Geist on Nov 22, 2024 6:41:54 GMT

A random note to myself, but if anything going through this has made me realize the importance of relative sizing when it comes to elements -- you can't trust everyone to have the same size monitor and very certainly can't trust mobile devices to parse this kind of information properly.

Geist

Posts: 57
Working on: JavaScript & Japanese

Geist's Progress Thread Nov 24, 2024 8:30:36 GMT Lirie and nickyslicky like this

Quote

Post by Geist on Nov 24, 2024 8:30:36 GMT

Cascading

This is the first section in intermediate CSS

She explains the "cascading" part of the style sheet. If you have different rules that target the same element, then you have to determine which rule is applied. It's very simple, and I don't know exactly why it takes her 10 minutes to explain it -- in the event of elements having multiple rules, the rule closest to the bottom of the sheet is applied.

Specificity is also important. If the stylesheet is targeting a specific item ID, it will take precedence as it will treat that specificity as a unique item. An Attribute often overwrites a Class.

The order of specificity:

1.) ID
2.) Class
3.) Attribute
4.) Element

Type another part of the cascade that is taken into consideration. First, external will be read. And then Internal within the < style > tag. Finally, the tag within the element itself. Since it targets only one element, it will be considered the dominant style to be applied.

There is a tool to get around this, which I use often because I didn't really know the above too well, and that's !important. EX:

h1 {
    color:#fff!important;
}

The rest of this second is largely showing you how to debug common hierarchy issues and honestly... I understand it well enough now and I'm not going to listen to it. If I come to regret it later I'll let you make fun of me.

Combining CSS Selectors

Next section seems completely new to me -- yay! That's probably why I've put off doing it all day.

She's giving a slight review on clas-- oooh I think I know what she's planning to cover. Cool, I kinda wanted to know this. So combining CSS selectors means applying things to multiple elements at once. For example, if you want to style < p > within an existing DIV class (in this case, "inner-box", you can do it like so:

.inner-box p {
    color: white;
}

First, it will look at the element with the 'inner-box' class, and then the decedents of the class. So, anything within it that is the < p > element. This will ignore any styling for < p > outside of this class.

There are different ways that we can combine CSS Selectors -

Group, this is done using a comma:

selector, selector {
    color: value;
}

h1, h2 {
    color: blue;
}

Will apply the style to both selectors within the group. She has a code challenge for it, but I actually did it above with that example so, there's that.

Child, this uses a right angle bracket > in order to select a child of another selector - the first being a parent and the second being the child.

selector > selector {
    color: value;
}

This is basically if there's a div within a div and you want the child (specifically one level nested) to apply. I don't... think I'd use this, though I can see why someone maybe would.

So her test has changing a paragraph, I don't feel like rewriting the HTML so I'll just write the answer:

.box > p {
    color:red;
}

Descendant, using just a space between the two selectors. It will apply to the descendent as long as it matches the selector.

selector selector {
color: blue;
}


.box li {
    color:blue;
}

Chaining, applies where all selectors are true. Selectors with no space? Apparently its a way to be really, really specific.

h1#title.big.heading {
    color:green;
}

So this is basically looking for H1 elements that also have both classes + that specific ID. I do not think I'll ever use this, either, but I get it.

You can combine combiners. Such as an ancestor + chain. Once again I do not think I'll ever use that.

CSS Position

Oh thank god, I can use this.

Four types we'll be going through: Relative, Absolute, Fixed, and Static.

They have a GitHub website that demos positioning.

Static: HTML Default. This means each item flows as it would in their HTML. You can set the position property to static but there's no reason as it's default.

Relative: Position relative to a default position. It will take the original position and apply changes to move it relative to where it should be. So then it moves from the origin of the item, not relative to something on the page? Yeah so I didn't understand that before.

Absolute: Position relative to nearest positioned ancestor or left top corner of page. Ancestor would be, for example the level up div:

div1 {
    position:relative;
}

div2 {
    position:absolute;
}

Div2 above will be relative to the positioned ancestor. At this point, I've just written what she said and I certainly don't understand it.

If it doesn't have a positioned ancestor, it is relative to the top-left of the page. The ancestor must have position relative for this to work.

Z-Index

This determines which elements go on top of which on the Z-Axis -- 3rd dimension thinking. I understand this one already, thankfully. Everything on screen has a default z-index of zero. When something has absolute position, it is put on another layer.

Fixed: Relative to the top-left of the browser window. So even if you scroll up and down it will be located in the same location in the browser (think page dolls, sticky navigation, etc)

All of her examples have been from the left but you can also use right. Additionally, you can use Margin to push the div as well. The positioning is separate from the margin, padding, and border.

She has an challenge for positioning practice. I really should do it I suppose. Sigh.

How to create a circle using CSS: (assuming border radius...yep, thats what it was)

.red-circle {
background-color:red;
width:200px;
height:200px;
border-radius:50%;
}

Here's the HTML and CSS for the project (yay I did it)

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link href="style.css" rel="stylesheet">

</head>

<body>

 <div class="blue-box">

    <div class="red-circle"></div>

 </div>

</body>

</html>

and

CSS

.red-circle {

    background-color:red;

    width:200px;

    height:200px;

    border-radius:50%;

    position:relative;

    top:150px;

    left:250px;  

    }

  

    .blue-box {

        background-color: blue;

        width:500px;

        height:300px;

        position:relative;

        top:200px;

        left:200px;

    }

Next there's a "final project" called "Flag Project" and she's opening the video with characters and animations its making me sweat.

Okay she said we're not doing that. Great!

Oh, we're making the flag of Laos. I can do that.

HMTL

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link href="style.css" rel="stylesheet">

</head>

<body>

  

<div class="flag">

    <p>The Flag</p>

    <div>

        <div class="bluebit">

            <p class="oflaos">of Laos</p>

        </div>

     </div>

</div>

  

</body>

</html>

AND

CSS

.flag {

    background-color: red;

    position:relative;

    height:400px;

    width:700px;

}

  

.bluebit {

    background-color: navy;

    position:absolute;

    top:100px;

    width: 700px;

    height:200px;

  

}

  

p {

    color:white;

    font-size:3.5em;

    text-align:center;

    margin:0;

}

  

p.oflaos {

    background-color: white;

    color:black;

    width:150px;

    height:150px;

    border-radius:50%;

    text-align: center;

    font-size:3.8em;

    font-weight: 300;

    position:relative;

    left:280px;

    top:13%;

    margin:0px;

}

Now here's the thing. It works, but its not her solution. I'm personally okay with that. She used something similar to:

body > div > div > div {
    (modifiers)
}

I just used one child, and I think that's how I'd always do it because it feels like less of a headache -- though I recognize her reason for doing it, because she wants to explain how it works. ]

Next session is "Advanced CSS"

Geist

Posts: 57
Working on: JavaScript & Japanese

Geist's Progress Thread Nov 24, 2024 20:21:41 GMT Lirie and nickyslicky like this

Quote

Post by Geist on Nov 24, 2024 20:21:41 GMT

Getting into the advanced CSS portion of things. I'm actually feeling rather good that I've known most of the things that she's gone over so far.

CSS Display - Block, Inline, and Inline-block & None

Generally, a div box will take up the length of the webpage. If we want any paragraphs that are short enough to have a wrap up, then we need to use a different element.

One she mentions is a < span > element, which is generally in the middle of another element. Interesting that an HTML tag comes in here.

<p>Hello<span> Beautiful</span> world</p>

By default, span's display value is 'inline.'

Block - the full width default webpage If you have another element, it will go below it and not on the same line.
Inline - exists in the same line. If you have two elements they will go into the same line until they no longer fit the width of the webpage (In which case they will go to the next line.) You can't set the width or height of inline elements. It defaults to the size of the content.
Inline-Block - A mixture of both. Block will let you set the height and width. Inline lets you have elements that go on the same line.
None - As is on the tin. Hides the element.

She has a practice challenge for explaining these display properties, I understand these well enough already that I'm not going to bother.

CSS Float

Okay this one I don't know anything about.

"The main thing this lets us do is wrap text around an element"

Ooooh... things are becoming clearer for me. She compares it to laying out newspapers, which is cute.

How to use the float property:

<img.../>
<p>text...</p>

CSS:

img {
    float:left;
}

Clear - clears any responsibility to wrap around things that are floating. Very specific when an item is floating. Never even heard of this before.

footer {
    clear:both;
    clear:left;
    clear:right;
}

There is a challenge attached to this that I guess I'll do.

Aaand done. Solution is to float the images to their respective corners (left) and the divs themselves to either side (right and left) and then clear the float for both from the footer. I am a god.

I didn't know that floating to the right would pull that element to the full right of the screen. It's obvious in hindsight that this is how sidebars are made -- aaand she just said that method is outdated. Woot. Damn. Basically she says to only use float when you want to wrap text around an image.

Responsive Layouts

Okay, I'm really stupid so I've been waiting for this one. I usually don't actually fuck with responsiveness.

There's four ways generally to do this:

Media Queries
CSS Grid
CSS Flexbox
External Frameworks (like Bootstrap)

Now, I know one of these (don't remember which one) Bee once tried to explain to me and I understood it for about .25 seconds before it went right out of my brain again. Lets see if I can pick it up and keep it.

Media Query - Something you put in instead of your selector in your CSS.

@media (max-width: 600px) {
/* CSS for screens below or equal to 600px wide in between the brackets here */
}

CSS Grid - "this is a little harder to understand" I bet this is the one that Bee tried to explain to me.

with Grid, you create a div that contains five divs and each div is given a class called 'card.' The container gets a different class, 'grid-container,' with the property 'display: grid' attached to it.

HTML

<div class="grid-container">
    <div class="first card"></div>
    <div class"card"></div>
    <div class"card"></div>
    <div class"card"></div>
    <div class"card"></div>
</div>

CSS
.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 100px 200px 200px;
    gap: 30px;
}

.first {
    grid-column: span 2;
}

.card {
    background-color:blue;
}

So the containing div needs to have 'display: grid;', we're basically saying we're using the CSS Grid system for the layout. You can define how you want the columns and rows to be laid out. Such as the above, where we state we'll have two columns (1fr 1fr, fr being an equal fraction).

The next line, saying we'll create rows, we're creating three values. The top row being 100px high, the next two having 200px.

'Gap' just states there is a 30px gap between the rows and columns.

We can change the first div to span two columns (span 2). This is just a light overview, we'll go over it in depth later.

CSS Flexbox - If Grid applies to 2D layouts, with columns and rows, flexbox is really good at 1D layouts. Like if you want things laid out horizontally or vertically (like those parallax websites maybe?)

HTML
<div class="flex-container">
    <div class="first card"></div>
    <div class="second card"></div>
    <div class="card"></div>
    <div class="card"></div>
</div>

CSS

.flex-container {
    display: flex;
}

.card {
    background: blue;
    border: 30px solid white;
    height: 100px;
    flex: 1;
}

.first {
    flex: 2;
}

.second {
    flex: 0.5;
}

What this allows us to do is set each divs in the container. Each card would normally have an equal width distribution, with a fixed height of 100px. However, with the extra classes to the first two div, the first one will have twice the width of the normal cards, and the second will have half the width of a standard card.

This makes it a lot easier than just using divs, margins, padding, etc.

You can also do this vertically. She doesn't actually say how?? But says we'll cover it in more depth later as well. By default, though, flexbox is responsive.

Bootstrap - this one I'm vaguely familiar with. It's an external framework, so you have to call it into your code so you can use it. Bootstrap includes a bunch of defined classes into CS and has put different rules for different selectors -- IE, card, row, container. These all point to the framework of Bootstrap. this is what Bee tried to explain to me, because this is what Toyhou.se uses.

They use a 12 portion system -- assuming the width of a website is "12", if you want a particular div to take up half of the width of the site you'll use 'col-6', meaning it will take up 6 of the column widths. You can create other cards, but they must all equal 12. It will respond to the resizing of the website accordingly. We will also go over Bootstrap later too.

Geist

Posts: 57
Working on: JavaScript & Japanese

Geist's Progress Thread Nov 26, 2024 5:58:39 GMT nickyslicky likes this

Quote

Post by Geist on Nov 26, 2024 5:58:39 GMT

Media Queries

@media (max-width: 600px) {
    h1 {
        font-size:15px;
    }
}

Anything within the "max-width: 600px" brackets is CSS that is applied if the screen is less than 600px - that is the break point. Media Queries are nice because you can manually set that, but it does seem a bit more of a tedious method for responsive websites.

I paused a moment to play with media queries on my own to get a better grip of them -- it is genuinely pretty easy, so that's nice! I think grids and etc are going to be the way to go for complicated webdev, but for simple responsiveness media queries get the job done.

Alternatively, you can do the opposite -- from max to min-width, though I don't believe I'd use this? But I suppose ultrawide screens...?

you can also do:

@media (min-width: 600px) and (max-width: 900px) {

So your customization will be within those two sizes. If you swap them, it is the opposite. I know I say this a lot, but I don't think I'd use it that way...

@media screen (orientation: landscape) {
}

Screen is generally not used, but it exists.

The MDN Web Doc for media queries: developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries

Web Design Agency

This is the "project" for this section. I'm gonna do it because I've actually learned a few things that I want to stick.

(hours later) so I tried to do it my way first to see if I could just do it from scratch and get it -- nope, not really. The responsiveness failed pretty spectacularly, so I'm going to see how she does it.

I watched her work through of it, she used the flexbox display modifier which she said we'd go over in more depth later -- I was on the right track with the @media but my failing was not using display:block, justify, and width 100%.

CSS Flexbox

She mentions again that web layouts were inspired by newspapers. She showed tables, and mentioned how outdated it is. This is. How I did it. Man.

She said don't use float for layouts, but use it within layouts.

With flexbox, the display property is utilized differently. It no longer abides by block, inline block, etc. When we declare something as display:flex, we're giving it control to layout our website under its rules.

When you use flexbox and enclose items that normally have block as a default it will instead attempt to display all your element in one line, based on the content size.

display: inline-flex Allows the content to take however much space it needs, while allowing more content on the same line.

Flex Direction

When we think about HTML default flow, normally items get laid out either as block, or inline. Top to bottom.

Flex-direction is by default set to a row. When you have a flex-direction set to row, you are setting the main axis.

The cross axis goes perpendicular to the main axis (top to bottom in this case).

In the case of flex-direction: column, the main axis is now top to bottom. This matters during customization .

Flexible Layout

Cheat Sheet

Align, justify, and wrap.

The child = Flex item.
The parent = Flex container.

If you set a property that is intended for the child onto the parent, it won't do anything.

I'm real low energy today guys.

Normally flex-wrap is set to nowrap, meaning if it runs out of space on the horizontal you're just SOL. Wrap lets you break it to the next line. Easy responsive website without using @media. God bless America. Wrap-reverse does the same but backwards.

VH - viewport height. so 70VH is like 70% of the viewport. Fuck me why haven't I learned this by now.

Flex-sizing

If we had four paragraph elements, they'd be all block (full width). If we put all of them into a flex container, it would turn them all into flex items, which will put them by default in a row based on the size of their content.

To customize the sizing, we'll need to learn the algorithm that Flexbox uses. Basically its a priority list:

Content width < Width < flex-basis < min-/max-width

With the min-/max-width being the first thing it looks for. Default, this is all content by length (the longest word for example.) you can manually set this and ignore the content.

If the flexible box had to shrink, it will go down to the minimum size.

If we manually set the width of each item in a container, say 100px, they'll all have the same size and when it shrinks it will attempt to respect that width until it is impossible for the container.

Modifiers/properties:

Gap - used to define gaps between columns/rows
Flex-basis - height (column) or width (row) of the main axis. This goes to the CHILD not the CONTAINER. The initial starting value. Ignored if flex-grow and flex-shrink are on.
Order - by default, everything has an order of 0, so they are arranged in the order of the HTML. If you wanted to change that, you could set it by using this property, from lowest number to highest
Flex-wrap - will allow you to wrap your items so they will break to the next line. I love this. Container property.
justify-content - Container property - sets our distribution of the items on the main axis. Aligns to the space specified (start, end, center, space-between)
Align-items - Container property - distributes items on the cross axis. For this property to really work, we need to set the height of the container.
Align-self - will set for an individual item.
Align-content - Only works with wrap enabled. You can align with this property.
Flex-grow - The responsive property of growth. 0 and 1 value. When on, will adjust the size of the items to fill the page. When off, everything will be set to the flex-basis.
Flex-Shrink - The responsive property of shrinking. 0 and 1 value. When off, item will stop shrinking past the flex-basis.

Flex-basis, grow, and shrink can be shorthanded to just "flex". When flex is set to 1, all are enabled. Child property. It's also a ratio, eg, 1, 2, and 3.

flex: 1 1 0

grow, shrink, basis

Project: Pricing Table.

So just a simple flexbox project with a fake pricing table. Can do.

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>aaa</title>

    <link href="style.css" rel="stylesheet">

</head>

<body>

<div class="container">

<div class="price">

    <h4>Basic</h4>

    <h2>$11.99/month </h2>

    ✅ 10 GB storage<p>✅ 1 user<p>🚫 Support</p>

    <span class="signup">sign up</span>

 </div>

 <div class="price">

    <h4>Basic</h4>

    <h2>$19.99/month </h2>

    ✅ 50 GB storage<p>✅ 5 users<p>✅ Phone & Email Support</p>

    <span class="signup">sign up</span>

 </div>

 <div class="price">

    <h4>Basic</h4>

    <h2>$49.99/month </h2>

    ✅ 100 GB storage<p>✅ 10 user<p>✅ 24/7 Support</p>

    <span class="signup">sign up</span>

 </div>

  

</div>

</body>

</html>

CSS

body {

    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    margin: 5%;

}

  

.container {

    display:flex;

    flex-wrap: wrap;

    justify-content: space-around;

    align-items: center;

    height:100vh;

    gap:20px;

}

  

.price {

flex: 1;

background-color: #eee;

border-radius: 7px;

text-align: center;

height: 275px;

}

  

.signup {

    background-color:orange;

    color:white;

    border-radius: 5px;

    padding:6px;

}

Alright, we finished Flexbox. I may try and sleep. IDK. Not feeling the most energetic right now and I have the kid development guy coming tomorrow.

Rules & Info

Post by Geist on Nov 20, 2024 2:41:12 GMT

Post by Geist on Nov 20, 2024 2:46:30 GMT

Post by Geist on Nov 20, 2024 2:46:38 GMT

Post by Geist on Nov 20, 2024 5:26:49 GMT

Post by Geist on Nov 20, 2024 5:30:15 GMT

Post by Geist on Nov 20, 2024 7:08:26 GMT

File Paths:

Post by Geist on Nov 21, 2024 0:59:45 GMT

Post by Geist on Nov 21, 2024 4:43:09 GMT

Inline

Internal

External

Post by Geist on Nov 21, 2024 7:39:23 GMT

CSS Selector

Class Selector

ID Selector

Attribute Selector

Universal Selector

Post by Geist on Nov 22, 2024 3:32:31 GMT

CSS Properties

Colors

Fonts

Inspecting CSS

Elements Tab → Style

Post by Geist on Nov 22, 2024 6:34:52 GMT

DIVS (Boxes)

Post by Geist on Nov 22, 2024 6:41:54 GMT

Post by Geist on Nov 24, 2024 8:30:36 GMT

Cascading

Combining CSS Selectors

CSS Position

Z-Index

Post by Geist on Nov 24, 2024 20:21:41 GMT

Responsive Layouts

Post by Geist on Nov 26, 2024 5:58:39 GMT

Media Queries

Web Design Agency

CSS Flexbox

Flex Direction

Flexible Layout

Flex-sizing

Project: Pricing Table.

Quick Reply