Question about correct use of positioning and initial foundation of a new website


#1

Hey, my name is Chris and I’m a fairly new web developer. I don’t think I’ve been progressing in a straight line exactly and have become confused about positioning.

My main question is, when you start up a new project do you do anything to help control the positioning of elements before you begin? Like say a grid maybe?

I’ve made a couple basic sites so far and I feel like I’m just sticking elements on there and then moving them about until it looks good. The end result is the same for the user, but under the hood it seems a tad fragile / messy to me. Does that make any sense?

For example recently I couldn’t get the final element on a site to sit where I wanted it to, it was interacting weirdly with another div I had in the same spot, so I just used absolute positioning and put it where I wanted it that way. Surely this is bad practice?

When I take a look at nice fancy websites they seem to have containers and divs all over the place. Here’s a website I was looking at: https://murrz-studio.com/ So when I inspect this there’s a bunch of dotted lines, it looks like they have a “canvas” div which most of the content is placed within. Is there some sort of method I should be following to properly structure my websites like this one?

Perhaps I’m getting ahead of myself too early…

Hope you can help, sorry for rambling there. I suspect I might have fallen down a rabbit hole, if so let me know haha

Cheers,

  • Chris

#2

When I start a new project I almost always have a general idea of how it’s going to be set up. I might not do a full out design mock-up (sometimes I do though) but I’ll at least give some thought to all the stuff that’s gonna be on the page and how it’s going to be layed out. I’ll often do a pencil sketch to get a decent idea before I start.

Then, as I begin actually coding I’ll put things generally where I intended them to go, adjusting as necessary.

answer: not really. What I WILL do, is usually start with the big important blocks before doing the things that go in them… like I’ll make an empty header/footer/body IF my design idea has those things. If I think I’m gonna lay things out in columns, then I’ll set those up first and then fill them up with whatever I’m building. I do NOT begin by creating some sort of framework or grid for my stuff to sit in.

Now, having said that, many css frameworks have a grid system built in (example: https://getbootstrap.com/docs/4.0/layout/grid/) so if you use something like that, then you kind of ARE starting with a grid to help you lay out and move stuff around.

Also, CSS GRID is a somewhat new css feature that lets you very easily set up a grid that you can put your stuff into. CSS grid is awesome, and you COULD use it by beginning a project with a simple grid setup… but personally I would start (even if I AM using grid) by defining my large content areas (header/footer etc etc.) and going from there.

More generally… positioning stuff with CSS is probably the trickiest part of the whole thing so don’t worry TOO much about the trouble you’re having. In general if you want some divs to sit next to each other, or interact with each other it’s best to wrap them in some sort of container element which is why that’s so common on most big websites. It can help to think of your website as groups of ‘components’ – and your components as html elements that are positioned inside some sort of container.

For example: imagine an image with a caption under it kinda like this:

In general I’d probably wrap all of the elements in this component in a container div like so:

<div class="image-component">
  <img src="pizza.jpg" alt="">
  <h2>PICTURE OF PIZZA</h2>
  <p>description blah blah</p>
</div>

depending on how the styling went I might end up adding more containers to get it to lay out the way I want… for example it may end up like this:

<div class="image-component">
  <img src="pizza.jpg" alt="">
  <div class="caption-container">
    <h2>PICTURE OF PIZZA</h2>
    <p>description blah blah</p>
  </div>
</div>

and if there were more elements then I’d probably end up adding more container divs to help with positioning.


aaaaaand finally:
check out flexbox and css grid… they’ll change your life.

Feel free to ask whatever else you like… if I’ve missed something or if I was unclear or if you want to know what to buy me for my birthday… just hit me up.


#3

Hi Chris, I think @codyloyd has done a great job of answering your query however I thought it might help to point out that the website you’ve provided as an example is built on squarespace this is likely to mean the all the code has probably been minified(which basically means all unnecessary characters and white-space) so the structure and names you see in the code won’t necessarily be in the best practice. This poor structure may also be exacerbated by the fact squarespace is built on templates so they may be using work arounds to get elements positioned as requested.

If you ever need to check what frameworks were used to build a website I love builtwith

builtwith.com

Hopefully that’s all helpful and not just teaching you to suck eggs!


#4

this is a fantastic point… you should not try to learn too much about structure from inspecting other pages, ESPECIALLY ones that were created with fancy frameworks and things like that… quite often what gets deployed to the server has gone through several transformation steps before it gets there.


#5

Hey guys, thanks so much for this advice. I wasn’t expecting such a thorough response! It helped a lot. I think I need to practice setting up at least a loose plan before starting a new project. Having those larger blocks set out already and knowing where, albeit vaguely, i’d like things to go should help keep me focused and hopefully make the whole process feel a little less messy.

I was wondering why some of what I see when i inspect my favourite websites looked weird to me. Not sure how I feel about squarespace honestly. Great website, but ugh. Anyway I’ll be careful not to lean on that method of learning too much.

Thanks a million for the advice & support :slight_smile:

  • Chris