And today's song is this:
Today I'm not going to deal with styling at all. No CSS. I'll only study <div>. I am already so god damn tired after work and I can't wait to go to bed.
And today's song is this:
Edit: Writing this page took me two hours. Is this normal? I... don't know. I should go to sleep. Another 12-hour work day awaits me tomorrow. :)
Ant this paragraph are in a container. If I give the div a border; --everything gets a border around it. I can also fill it with a color. --NO. NO CSS TODAY. I WILL ONLY STUDY TO UNDERSTAND WHAT <div> IS.
margin set to auto, and width is 600px. This is not adaptable to the window size as far as I understand it, but let's not get ahead of ourselves.
I have no idea what margin: auto does here.
This paragraph,
And this paragraph
This is a left-aligned paragraph.
These two title-paragraph group above are in their own containers, and both of them are also in the same container. Milk inside a bag of milk inside a bag of milk.
I am not making any sense right now and I know it and that's because I am tired after work. Why is making websites so hard....... Anyway let's do these:
Okay I think I kinda get it now.
Now let's try to put 3 title-paragraph containers side by side.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus, at dignissimos non iste minima molestiae, necessitatibus maxime nisi beatae tempore alias eaque ullam dolores error! Cupiditate saepe sapiente recusandae consequatur.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat iure explicabo sit asperiores ducimus non eveniet culpa voluptates? Aliquam, assumenda deserunt officiis harum ipsam facere fugiat tenetur reprehenderit qui cumque.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia quod temporibus modi, vitae minus reiciendis amet saepe. Dicta magni, aliquam vero a voluptates inventore dolorum odit. Dolores vel cum atque!
This is stupid. But actually no, I am stupid. The big container's width is set to 100%, while the smaller containers' width is set to 33% (there was a small gap to the right so I made the middle one 34% instead). Also, I had to use float: left in each smaller container. So it... makes sense? Why do we use float here? They are clearly not floating But wait, the thing is, I didn't use the bigger container except for putting a border around the whole thing. So... it was useless here I guess? Ugh.
Wait I can just... make a div inline? Like, wait.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi ea necessitatibus doloribus quibusdam, consequatur est dolores hic molestias, consectetur praesentium perspiciatis sit sint eaque corporis, nobis aliquid. A, voluptate deleniti?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto voluptates facilis officiis rem soluta nemo deserunt repudiandae asperiores quidem similique quaerat perferendis ex in ratione non quia, dolore facere natus?
Wait so... I can just make them inline blocks and they will appear side by side, if their total width is less than 100%. For example above both those divs have a width of 49%.
Okay, it says there is something called a flex display. Makes things adapt to window size automatically. Good for mobile I guess? And also it makes sense. Everyone has different screens with different pixel densities. I think it isn't a good idea to set everything in px.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, pariatur ipsam tempora fuga et quis quisquam eos, ipsa deleniti dolores laudantium veniam ratione molestias incidunt ducimus id nesciunt. Quaerat, deserunt.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, ex ea aut error ab quos ullam suscipit repudiandae in eligendi reiciendis necessitatibus, quod beatae consectetur temporibus non sequi voluptate! Sequi!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos provident, facere iusto ipsam, qui iste. Quas incidunt quia ad maxime voluptas.
Okay, this was so much easier. The outer div has its display style set to flex. The inner divs has their width set to 33% (middle one set to 34%). And they automatically adapt to the window size! And also also also they all have the same height! I didn't even do anything for that. I guess flex handles that too!
Okay, there is also another way of doing this apparently, and that is grid.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt voluptatibus maxime nisi earum, odit possimus magnam doloribus adipisci fuga et iusto excepturi perspiciatis perferendis accusamus soluta consequuntur dolore dolores eligendi!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi impedit quos ducimus ex recusandae eveniet blanditiis quibusdam dicta animi beatae itaque, expedita nisi alias perspiciatis aliquam minima magnam atque necessitatibus!
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis esse omnis sapiente minus non illo accusantium fuga quidem veniam ex porro mollitia, quos deleniti explicabo placeat soluta earum quibusdam atque!
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Soluta id nulla saepe eveniet commodi? Sequi, repellendus labore! Facilis facere reiciendis excepturi recusandae? Maxime illo voluptatem totam quis iure blanditiis consequatur!
I mean... basically the same thing, isn't it? What's the difference between flex and grid? Grid also flexes? I don't know... I'm too tired to understand what's going on at this point. I should go to bed.