HELP: Trying to create a sidebar in HTML

[wrinkledlion]

Hey everybody! I'm a total beginner at HTML and web design. Does anyone have any advice on building a narrow sidebar on the left side of the screen, with the main content to its right?

My first site attempt is gonna be a fake facebook account, where I have lots of cool friends (and everyone loves me). I'm trying to replicate a basic version of this sort of layout:



I attempted some stuff using table formatting but it left a lot to be desired.

Thanks!

[Melooon]

Hmmm, this is a complex project, Im not sure I would recommend it as a first attempt at learning HTML; you can totally do it, but only as long as you accept there is no way its gonna be perfect as a beginner. You'd prob have more fun making a simpler site without such a fixed design goal.

Originally FB would have been created using CSS floats and display attributes. Those are super useful to learn but they are also the MOST frustrating thing you will ever have to do with website making!

These days you can fake it a bit more easily by learning CSS flex, although that has plenty of its own challenges too!

I think what might be a more useful thing for you as a total beginner is to find a FB-like template site - I found this one with a quick search. Alternative, if you go to a FB page and do, save-as webpage, it will actually download the webpage and you can edit it. (Although you'd have to find an archive of an old style FB page to get the look your going for in that picture)

So totally do-able, but Id reiterate that a site is personal to you, its about the space that you want to create. Is FB really the space you want to re-create to describe yourself? If so great! But it is a complicated space and you might find a more personal web design voice for yourself in a simpler design.

[wrinkledlion]

I definitely don't want it to look perfect, the shoddier it looks the better actually. what I've got so far is littered with misspellings and broken submit bars.

Actually now that I'm thinking about it, I'm going for the same kind of feel as this site from the Homestar Runner guys. I've got a bunch of fake facebook post ideas that are making me laugh so I'm pretty excited about the concept.

I think you're right about starting with templates-- or if not a proper template, then at least scavenge around neocities for someone who's figured out some basic sidebar coding and then rework all the colors and design elements. The limited HTML I've done in the past has all been reverse engineering, so I might have some luck with that approach.

[Guest]

If you want to go totally retro, just use tables. It's technically wrong and bad for SEO, but after deciding tables were bad for layout web developers spent a stupid amount of time trying to replicate the look of table-sites with divs. I always thought that was ridiculous, but of course I followed suit.

On top of what Melon already suggested, there's also CSS grid. It's a bit more complicated than Flex, but is tailor-made for layouts.

https://css-tricks.com/snippets/css/complete-guide-grid/

Reverse engineering what other people have already done is how I started out with web development. I was a total script kiddie, but now I make a living making online applications so don't think you're on the wrong path that way. "View Source" was the most helpful tool available to Young Me. These days, with so much asynchronous content, it's a lot harder to learn that way (you could use "Inspect Element" instead), but with the resurgence of static pages you should have an easier time now.