Layout

On this page, we're going to be trying to learn layout. I really want to be able to put things next to each other. I think I might have to use some fancy CSS coding, like possibly flexboxes or something, but right now, I'm going to experiment a little with HTML layout coding. I've read a little bit on articles, sections, headers/footers and particularly asides, so lets see if we can apply that at all.

Aesthetics

Most of the reason that I want to try creating a website is that I love old internet aesthetics. I've said often that I miss the old internet as I remember it - the old days of Pointless Sites.com (back when it looked like this) and The Sims 2.com where I used to waste countless hours as a kid. I have a variety of memories of old fan sites, forum sites, and just generally the way the internet and computers in general used to be from 2007-2013. The old aesthetics of Windows 95, Windows 2000 and Windows XP also have a place in my heart.

I also really appreciate a lot of retro aesthetics from before my time - the 90s and the 80s particularly. I also enjoy modern reworkings of these - synthwave is an aesthetic I really love the look of, and some of the elements of vaporwave as well. I figure, as well as having blgs in other places, why not try making my very own website to play around with customising?

Padding Time

Time to waffle on a little bit more about some bullshit so that I can see the layout a little more organically.

There's some practical uses to learning HTML and CSS too I guess. I bet this would look really nice on a CV, basic to intermediate levels of HTML coding will probably add a fair amount to my skillset. More likely to be practical in my everyday life is that now, I can do the minor HTML coding in my AO3 authors notes off the top of my head. HAHA.

Oh my god... I just realised... I could totally put my old Tumblr Reaction Image Folder to good use! Oh the possibilities are endless! Finally I will have somewhere to put the mass of GIFs and images I saved just for the Olden Days of Tumblr when reaction images still reigned supreme.... No-one can stop me using them on my own website.

GIF of Freddy from iCarly going 'Yessss!!'




(Spoiler: The layout test totally didn't work at all. I guess I do need that fancy CSS. Boo.)

Completely unrelated but LOOK WHAT I CAN DO! Thanks anlucas!

SUCCESS

At least somewhat!! I have figured out how to have elements go side-by-side and that is thanks to CSS display:flex!! So the answer is: yes, I do need to learn fancy CSS flexbox coding to make this work. BUT, FUN TIMES, at least I know what I'm going to be doing. I think that will be my next big bit of learning.

So, off I go... Off to study CSS Flexbox model...

*I never actually managed to fix the centering issue with the boxes up at the top, however I did figure out a bit more layout working with containers, absolute positioning, and flexbox. So, step on over here to see my Layout Playground! Or, return to the main page.*