Building a layout from start to finish

Disclaimer: This guide assumes you have a basic understanding of HTML and CSS. If you seem EXTREMELY lost, you might want to get some practice in first so you're ready to take something like this on! :)

I’ve been wanting to put together a layout-building tutorial for a while now. I couldn’t settle on a medium though. I’m going to do my best to fully explain everything I do! Text as a medium is my bias, I love it because you can go back and forth and work at your own pace to understand instruction. If this guide helps you or if you have any questions, let me know in the comments!

For this guide, I will step through the process of remaking this layout:

This layout was found on createblog.com, an old layout website.

Getting Started

First – if you’re new to making layouts, I emphatically encourage you to:

  1. Find a layout you already like the look of
  2. Try to copy its general format

Looking at the layout above, we can break down its basic format into boxes, like so:

We have a header, a navigation bar, left and right sidebars, and the main content in the center.

There are smaller boxes inside of those boxes, but right now we’re gonna focus on these basic shapes.

I like to work in CodePen, so I’m going to open a blank CodePen to start. (See the CodePen Guide for more details).

The very first thing I like to do is create a container div like so:

<div class="container"></div>
Code language: HTML, XML (xml)

This div ‘contains’ my whole layout, making it easier to modify and change later, since everything naturally ‘lives’ inside of this div.

Adding basic HTML tags

Then, I’m going to roughly mock up the pieces of the layout. I like to start by putting basic placeholder text in them, because until you do so, the elements you place in HTML won’t show up in the preview.

Here’s what I have so far:

See the Pen Skyline – Layout Building – 01 by Sadness (@sadness97) on CodePen.

Note in the example above that I am using semantic HTML tags. They act the same as regular divs, except they make it easier for people who use screenreaders to read your website, so everyone wins!

It doesn’t look like much, but that’s going to change soon!

Make your layout easy to visualize

When I was still getting the hang of this all, it was easier for me to mock up my layout as accurately as possible (you’ll see what I mean in a second) because it’s really hard for our brains to translate code into visuals until we get a lot of experience working with this.

That’s why for this tutorial, I’m going to start like this! I’ll set the header, navbar, main content areas to go full-width, just to make it kinda-sorta look like I’m actually building a website.

TIP: If you're still new to working with HTML and CSS, I highly recommend building layout areas like headers, sidebars, etc. with borders - even if you don't intend on using them in your final project. Again, this helps us visualize. After a while, you'll not need to do this anymore once you get the hang of everything.

To summarize the above, here’s what I’m going to do next:

  • Apply a 1px solid black border to the header, nav, main and asides (sidebars).
  • Set some widths on these elements now so I can visualize them.

Here is where I’m at now:

See the Pen Skyline – Layout Building – 01 by Sadness (@sadness97) on CodePen.

Flex your sidebars

but this is where we use the magic of flexbox. I have a flexbox tutorial if you’ve never used it, but you shouldn’t need any prior knowledge for this guide.

It’s easiest to think of flexbox as a setting. You turn flexbox ‘on’ by setting display:flex. All this does is it tells everything inside of the “flexbox” to line up side-by-side.

I obviously want my main content right between the two sidebars. So let’s draw a mental line around the objects we want to flex:

We went, from left-to-right: left-sidebar -> main content -> right-sidebar

Once we know where we want to place the “flexbox”, we have to manually create it in HTML. We need to create a div that wraps around all three of those elements.

Here’s what the HTML looks like right now:

<div class="container"> <header>header</header> <nav>nav</nav> <aside class="left-sidebar">left-sidebar</aside> <main> main content </main> <aside class="right-sidebar">right-sidebar</aside> </div>
Code language: HTML, XML (xml)

It becomes…

<div class="container"> <header>header</header> <nav>nav</nav> <div class="flex"> <!-- added flex!! --> <aside class="left-sidebar">left-sidebar</aside> <main> main content </main> <aside class="right-sidebar">right-sidebar</aside> </div> <!-- flex div end --> </div>
Code language: HTML, XML (xml)

The flex div’s class can be anything – I just called it flex to make things easier to understand.

Adding this HTML alone won’t do anything, though, so we need to tell the flex div to, well, actually flex.

So I add in this CSS:

.flex { display:flex; }
Code language: CSS (css)

Here is how it looks:

See the Pen Skyline – Layout Building – 02 by Sadness (@sadness97) on CodePen.

NOW it’s looking more like a layout!

At this point, our ‘flex’ div is holding our three main content areas.

To make it look even more like a layout, I’m going to assign max-height and height CSS properties to the header, and nav elements.

Using max-height and max-width instead of width and height is a great way to make your layout responsive on mobile. However, max-height only works if there is enough content in the div to fill it up. I don't really have much text in my divs, so setting a height allows me to force the divs to fill the space on the screen

Then, I’ll set our main div to width:100% which means it will fill the remaining area

Finally, I’ll throw some placeholder lorem ipsum into the main content div.

To summarize the changes, I am going to:

  • Add height and max-height to the header and navbar.
  • Add width to my main div.
  • Add placeholder text to the main content div.

Here is where I’m at:

See the Pen Skyline – Layout Building – 04 by Sadness (@sadness97) on CodePen.

This is exciting! It’s finally looking like a layout!

Setting the Margins

Right now, all of our layout ‘pieces’ are stuck together with no spacing, which is totally fine if we’re going for that look! But we can utilize margins to space everything out a bit.

I’m adding the following CSS specifically:

main { margin-left:20px; margin-right:20px; } nav{ margin-bottom:10px; } header { margin-bottom:10px; }
Code language: CSS (css)

See the Pen Skyline – Layout Building – 05 by Sadness (@sadness97) on CodePen.

Now it’s looking even better!

Add more divs and placeholders

I’m going to add some more boxes to the left sidebar, main content, and right sidebar so we can match our original layout a little better.

The green lines are what we have set up, so we want to add boxes for the sidebar, content and subtitles now!

I am also going to create these with borders and placeholder text so we can visualize the elements we’re working with.

Then, I am going to make ‘subtitle’ divs inside of each section and article to mark our title areas.

For this I am simply creating the following tag: <div class="subtitle">Subtitle</div> and pasting it inside of each section and article. While we’re editing this, we should also wrap our content text in its own div, so we have more control over the padding on each piece.

We also have some link lists in the sidebar, so I’ll mock those up as well with basic unordered lists. I’m giving each list the same class of links so I can easily style them later.

Then, I will apply margins to the asides and articles to space them out nicely.

Per semantic HTML, 'aside' and 'article' are just like using plain divs!

See the Pen Skyline – Layout Building – 06 by Sadness (@sadness97) on CodePen.

Changing font and adding color

Before I attempt to mess with padding, I want to get our font-size under control. Granted, I’m basing this on an old layout with very small text but you can make the size whatever you like!

The important thing is to get an idea for how much space the text takes up at its intended font size.

I usually just stick my font in the body tag, since it applies to every page just the same.

I’m tired of looking at black and white. So now I’m going to color everything! For color, I like to use root variables which make it easy to change the same color when it’s used in multiple places.

I’m also using an eyedropper tool extension to grab the colors from the original layout, but of course feel free to use your own colors!

See the Pen Skyline – Layout Building – 06 [More Boxes] by Sadness (@sadness97) on CodePen.

Layout Adjustment

For the purpose of staying authentic to the original creation, I want to make some changes with how the layout is actually displayed. Here’s a better fullscreen shot of how the original looks:

See, the layout itself is aligned to the left, whereas ours currently takes up the full width.

Do you remember which div wraps our main content (the sidebars and the center content?)

It’s the .flex div!

So, to avoid this full-width problem, we can set a max-width on the flex div. I chose 800px as a good width.

I also noticed, to match the original, we need to add a margin on top of our aside divs.

Then – finally – a margin-left on the left-sidebar to give it some breathing room.

Styling our lists

(Hopefully) we gave our sidebar lists the class links so we can style them all the same!

Here’s how I styled it, with notes included for what each property does:

.links { /* this applies to your 'links' UL */ list-style-type:none; /* this removes the bullet */ padding-left:0; } .links li { /* this applies to your <li> tag */ background-color:var(--nav-bg); border:1px solid var(--border-color); margin-bottom:3px; } .links li a { /* this applies to your list link styling */ text-decoration:none; }
Code language: CSS (css)

Now our links look like this:

Styling the navigation bar

Before going any further, go ahead and mock up an unordered list in the <nav></nav> tags. Give your unordered list a class of nav.

It’ll look terrible, don’t worry. Probably something like this:

First thing we want to do, to get things aligned correctly, is assign display:inline-block to our .nav li property.

.nav li will style all li elements belonging to your .nav element! Now they should be displaying in a line.

Then, I will assign the .nav element to only have a margin-top of 5px, to reduce the gap at the top.

Finally, I will add some padding-left to each li item, to ensure they are spaced out.

Here is my nav styling:

.nav { margin-top:5px; } .nav li { display:inline-block; padding-left:30px; } .nav li a { text-decoration:none; /* this makes the navbar links have no underline */ text-transform:uppercase; /* this forces all navbar text to uppercase */ }
Code language: CSS (css)

At this point, we are here:

See the Pen Skyline – Layout Building – 07 [Font and Padding] by Sadness (@sadness97) on CodePen.

More colors and formatting!

We want to update our colors, so I’m going to take a moment to do that now. We have links to style now, and some text color we need to adjust.

Remember the article content is inside of the <article></article> tags!

For the sidebar, we have two tones of text (one in the heading, one in the content), so we need to make sure we can customize them separately.

We’ll start with this, which will initially color everything with this font color.

.section { color:var(--sidebar-text-color); }
Code language: CSS (css)

But afterwards, we’ll add another element style right after that one in our CSS, with a more specific selector:

.subtitle { color:var(--article-text-color); font-weight:bold; letter-spacing:1px; /* this spaces out the letters like in the original layout */ }
Code language: CSS (css)

We want the article headers to be uppercase, a little larger, and a different color so we’ll do that next:

article .subtitle { /* this selects all .subtitle divs inside of the article div */ text-transform:uppercase; font-size:16px; color:var(--article-heading-color); }
Code language: CSS (css)

We also wanna change the link color in our links lists, which is pretty easy:

.links li a { text-decoration:none; color:inherit; /* 'inherit' means that the element inherits the text color of its parent */ }
Code language: CSS (css)

Here is the updated CodePen:

See the Pen Skyline – Layout Building – 08 [Layout Adjustments + Sidebar Links + Nav] by Sadness (@sadness97) on CodePen.

Set up your borders & more padding!

So, I know we’ve had borders around everything this whole time, but we really only need a few.

At the top of our CSS stylesheet, we have a block that looks like this:

header, nav, main, aside { border:1px solid black; }
Code language: CSS (css)

Remove ‘main’, ‘header’, and ‘aside’ from the comma-separated list of selectors.

Then, remove the whole border line from the .section selector, to remove our border from that area.

Looking great! Now, let’s soften the border around the main content and the sidebars. It’s too dark when it’s black, so I’ll change that next.

Then, we’ll add some margins around the article subtitle.

See the Pen Skyline – Layout Building – 09 [Colors] by Sadness (@sadness97) on CodePen.

Finishing Touches

For finishing touches, we’re just tying up some loose ends. I’ll begin by taking out the margin-bottom for the header, so it sits flush against the nav.

Then, I’ll change the navbar border and get rid of the border on the left and right ends.

nav { border:2px solid var(--darker-border-color); border-left:none; border-right:none; }
Code language: CSS (css)
Note here how we're using the nav selector and not the .nav selector - they're different!

Then, I’ll get rid of the ugly white gap around my whole website with the following:

html, body { padding:0; margin:0; }
Code language: CSS (css)

And as our *final* touch, we will add a background to the header – however just setting it as background won’t be good enough. It will try to expand to fit the full size.

Here’s how I managed to get it to stay in place and stay at its intended size:

header { max-height:200px; height:200px; background-color:var(--header-bg); background-image:url('https://learn.sadgrl.online/wp-content/uploads/2022/02/skyline-banner.png'); background-repeat:repeat-y; /* this prevents it from repeating horizontally */ background-size:600px; /* I had to play with this value in CodePen to find the perfect size */ background-position:fixed; /* this prevents the image from shifting when the page is resized */ }
Code language: CSS (css)

I ended up having to change the color of the header’s background, so it would blend in with the image.

Padding

I like to save padding to the very end! The only box we really need to pad are the article boxes, so we can add our padding inside of that tag.

Here is the final product!

See the Pen Skyline – Layout Building – 10 [Borders] by Sadness (@sadness97) on CodePen.

If there was any part that you think was unclear or confusing, please let me know and I will be happy to clarify at any point! I really hope this can help some people learn to build their own layouts. Making everything from scratch is so gratifying and over time it teaches you about how everything fits together on a website.



Hey, thanks for reading! If you have any questions, you can leave me a comment and I always try to reply.

If you have any suggestions on how I can improve this article, please let me know!

This website is not monetized in any way. It purely exists to help others on their web-building journey. However, if you have the means to donate toward my server costs, I have a ko-fi account where I accept tips.

6 thoughts on “Building a layout from start to finish”

  1. hi! regarding the nav bar, i can’t seem to figure out how to reduce the padding on the left side. i want my text to start basically flush against the left side, but by default (with no padding/margins), it sits about 25px away from the edge. ive tried entering custom px counts but can’t seem to figure out how to reduce it.

    thanks!

    Reply
    • howdy! before I answer, I wanna recommend you this (super short) video I made on using the Inspect tool in your browser: https://www.youtube.com/watch?v=j47-Bd1gjqM&t=1s – like, if you figure out how to use this tool, you can use it to find *exactly* which element is causing the strange padding/margin issue.

      i made a little codepen to replicate your problem. I think I got it? is this the white space you’re talking about? https://codepen.io/sadness97/pen/bGaZNrX

      that is a margin which is included by default in the body tag. we can manually remove it though. so i can fix it in my codepen, by adding this CSS on top:

      body {
      margin: 0;
      }

      after posting this I’m significantly less sure this is the problem lol. if your navbar is in a div, it might be the padding on that div? it’s very hard to answer questions like this without actually seeing your code (and I would basically just use the Inspect tool to find what it actually is) because it depends on how your page is structured. i hope this helped a little though! remember you can directly click on the area of your navbar with the space, and click inspect element, and the panel on the side will automatically highlight the line of HTML you clicked on, plus the CSS associated with it. when you hover over the different lines of code, the part of your page associated with it lights up and shows you the spacing visually! good luck!!

      Reply

Leave a Comment