Go back home.

2026-05-30

You know what, what I have been doing is pretty stupid. Do I really need to know all the elements of tables? All the nitty-gritty stuff? NO. I learned to make a table and that's enough. I'm not going to be a web developer.
Yes, that's what I have been doing wrong. I mean, there is nothing wrong with learning as you go. Especially when it comes to a hobby thing like this. I cannot just sit down, study every little detail about HTML and CSS and only then make a website.
I've been just going through the HTML Tutorial on W3Schools in order. Which is helpful, yeah, because I cannot know what I can or cannot do without knowing what even is possible in HTML. I have been constantly blown away at the small details I can add to my page. Like a silly tooltip. Or changing the background color of a text. I wouldn't know if I was even able to do such things without following those tutorials in their entirety.
But at the same time, I should pick and choose what I need. I should know how to make a table from the get-go, but I really don't need to know all the specific border styles and whatever. Now I know customizing everything about a table is possible, but I don't really need to learn it immediately.
Also, I didn't know how to change the style of text within a paragraph. I looked it up for the paragraph above. So apparently I can use <span> for that (---Yes I am using random background colors don't judge me I know nothing about colors. Yet. ^^).
Well, enough of this. Let's begin.
But actually, before we do, here's today's song:

Lists

Unordered lists

Do I need to
Put lists
In paragraphs?
--Okay, I guess so.
--OR, I guess I can add special stylings for lists,
--In style.css.
--For now I'll put them in paragraphs though, only for them to look a little bit better and organized.

Ordered Lists

I'm not even gonna switch back to the tutorial tab. If <ul> stands for unordered lists, then;

<ol> should stand for ordered list,
right?
--oh HELL YEAH it does! I'm a geniusssssssssss.

But hold on there pardner. These should be in a paragraph. They are clearly written in <p></p>, but why don't the style apply to them? Even this text doesn't appear to be in the paragraph. Do lists break paragraphs? Can they not be in paragraphs, just like how tables were?
I guess that's the case. I think I will at least need to add a background color to <ul>, <ol>, and <li> elements in style.css so that they at least look a little bit more organized.

But the colors overlap for some reason. Oh wait!
<ul> and <ol> already encompass <li>. Since I am using a semi-transparent background color, they overlap. It is enough to use a background color for <ul> and <ol>. Unless of course I want to go for something like this:

Here, <li> has the same color and opacity as <ul>
Or I can just use a color with no transparency like this so that they don't overlap.
I'm using inline CSS here btw.

I can change listed items' markers by using type="1" or "A", "a", "I", or "i"

test
test
test

test
test
test

test
test

Oh I can also start by a certain number by using start="[number]. Here, these all start at 120:

Test
Test
Test

Test
Test

Test
Test

Test
Test

Description lists

Imma be honest chief I have no idea what a description list is. Let's see.

This is a 'term'.: And this is its description.

So it just adds an indentation? W3Schools has an example akin to this:

Americano: —An espresso shot with hot water at a 1:3 to 1:4 ratio
Latte: —An espresso shot with steamed milk, and the favorite drink of weaklings who won't survive the winter.
Em dash: —The character I used to use every once in a while but now hate with all my being because of it's overuse by people who cannot think themselves and resort to use AI for writing for them. Dumbasses.

Nested lists

So I can also nest lists within lists.

milk

inside a bag of milk

inside a bag of milk

inside a bag of milk.

But since I use a <ul> element within a <ul> element, the background colors overlap again. Maybe I shouldn't use a semi-transparent background color for lists in the first place? I will think about this when I eventually decide on a color scheme and build the style.css file from the ground up.

Horizontal lists

Now it is getting complicated again. But this looks very important. Apparently this is how people create navigation menus. Let's see. I'm gonna use inline CSS here, which is going to be a pain in the rear, but I want to be able to see how it looks without having to leave this page.

Test 1
Test 2
Test 3
Test 4
floating to right

This took like 30 minutes to do. As far as I understand it, the thing that makes the list items go horizontally is the float: left attribute.
And I can't use link hover styles in inline CSS I guess.
Andd I need some coffee I guess.
--Some coffee, some breakfast, ready to go.

<div>

This is a title in a div

This is a paragraph in a div

So by default they still follow the CSS styles for h3 and p here.

Title

So even if I give div some style using inline CSS, the elements contained within div will still have their own styles defined in CSS.

can I put divs side by side? --Apparently not. Because it is a block element I guess so it covers the entire width of the page. But what if I do this wait big brain moment

Test paragraph with a 300px width.

Another paragraph with a 300px width.

Okay so what I did was I made the div 600px wide, and used text-align: left for the paragraphs. I did not use a line break between the two, but they are displayed on two seperate lines still instead of side by side.
Oh wait, <p> is also a block element. That must be why. But then how can I put 2 elements side by side? Like, as in forming a grid. Ugh I don't know. Gotta keep on studying I guess.

Turns out I have to put <div>s within <div>s

Like this?

And this?

Okay but this is --damn this is too confusing. And for some reason I read online that it is a bad practice to nest divs within divs within divs. Also, paragraph style overlaps with div's style. Looks awful. ^{I HATE CSS}_{I HATE CSS}^{I HATE CSS}_{I HATE CSS}^{I HATE CSS}_{I HATE CSS}^{I HATE CSS}_{I HATE CSS}^{I HATE CSS}_{I HATE CSS}^{I HATE CSS}_{I HATE CSS}^{I HATE CSS}_{I HATE CSS}^{I HATE CSS}_{I HATE CSS}^{I HATE CSS}_{I HATE CSS}^{I HATE CSS}_{I HATE CSS}^{I HATE CSS}_{I HATE CSS}^{I HATE CSS}_{I HATE CSS}^{I HATE CSS}_{I HATE CSS}^{I HATE CSS}_{I HATE CSS}^{I HATE CSS}_{I HATE CSS}

You know what, this is too much for one day. I'm taking a break. AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA why is making a website so complicated I hate it I hate it I hate itttttttttt