Nevulo

Posted on Feb 26, 2022 • Edited on Mar 1, 2022 • Originally published at nevulo.xyz

Making your own website from scratch

#programming #html #css #webdev

The day comes where you’re looking to make your own website, maybe to increase your digital presence or allow others to find your work more easily.

You’ve got the standard “no-code” website builders like Wix, Squarespace, and hundreds of others. But what if you want complete creative freedom?

What if there’s a template that isn’t out there, or you simply want to add a fancy parallax background that the builder you’re using doesn’t support?

Using a website builder to create your first website makes sense.
But, if you truly want the ability to stun people with a customised website that matches your brand to a tee, you can make a custom, static website from scratch using HTML and CSS.

Why would I want to learn this?

There are many reasons why you might want to take the extra effort to write a website from scratch rather than using a no-code website builder, even as they’re on the rise:

HTML appears everywhere, knowing how to read/write it can be useful
It helps advance your knowledge as a developer
It gives you full creative freedom; if you can think of a layout, with enough time and patience you can get it working how you want on your website!

What is HTML?

HTML stands for “Hyper-text Markup Language”, but it boils down to being the building blocks for how your website will appear to others.

HTML documents are made up of lots of “elements” on the page for things like text, images, dividers, etc. Elements can have other elements inside them, building up bigger bits of the page, and ultimately the content as a whole.

HTML is a “tag-based” language, meaning elements will be wrapped around angled brackets, and you’ll need to have a starting tag and an ending tag for most elements you have. Anything inside the tags will appear inside that element:

<body>
  <p>This is some text</p>
</body>

So in this case, we have a HTML document with a body, and inside the body is a p (paragraph) tag where we can add some text.

There’s a bunch of different “tags” for different scenarios like wrapping text in a <b> tag to bold text, and <div> to make divisions in the page, just as a few examples. We’ll go into more detail about how to use specific tags a bit later.

What is CSS?

If you think about building a website like building a house: you can think of HTML like the bricks, plaster, foundation for your house, and CSS as the coat of paint that goes over the house and on the walls.

“Cascading Style Sheets” (CSS) is a simple mechanism for adding style (e.g., fonts, colours, spacing) to web documents.

CSS works alongside HTML to style elements on the page, and there are hundreds of style transformations you can apply, like adjusting the width/height of an element, changing its colour, etc.

This is achieved through “selecting” an element on the document to style. CSS selectors allow us to apply a certain set of “rules” to an element to describe how that type of element should appear on the page.

If we wanted the background of the page to be black instead of white, we can change that through targeting the body of the document:

body {
  background: black;
}

Any properties we want to apply will be inside the curly braces, and each of the “rules” will start with the element we would like to select.

How can we get started making a basic website?

Open your preferred text editor or IDE

It’s never required to use an integrated development environment (IDE) when writing HTML or CSS, but it can make things easier to read, especially as your code grows.

First thing is to write <!DOCTYPE HTML> at the top of the file:

<!DOCTYPE html>

Your website will work without this line, so don’t stress if you forget to add it, but it’s good practice to include at the top of your file, so all browsers know exactly how to parse your file.

You’ll want to save your file as a .html file, which gives us the ability to open our code in the browser later to see how it looks.

Your first elements on the DOM

After the DOCTYPE line, let’s start writing actual elements that will show up on the user's screen.

It’s good practice to have the first element (being the root of the document) as the html tag:

<!DOCTYPE html>
<html></html>

The `head` element

The header (<head>) element is where you can store metadata about the document, like the title that shows up in the browser tab, any external scripts your site uses (not relevant for us now), and many other things.

Importantly, it’s a place to store style sheets using the style element. This is where we’ll put our CSS that we’ll write later.

Here’s an example of what your head element might contain:

<head>
  <title>My awesome website</title>
  <style>
    // CSS goes here
  </style>
</head>

The `body` element

This is the body of your document, and where all of your main content will be. Basically, everything on your page will be inside this element.

Here’s an example of a complete HTML document with the body element:

<html>
  <head>
    <!-- metadata here (title, styles) -->
  </head>
  <body>
    <p>Hey there!</p>
  </body>
</html>

Headings (`h1`, `h2`, `h3`…)

There’s 6 different “level heading” elements which you can wrap around text to make it more or less prominent on the page. This is useful if you want to add a title or heading to your page to make it more readable and appealing.

h1, h2, h3, h4, h5, and h6 are all elements used to apply styling to text (and other elements inside) which typically makes the font size bigger or smaller depending on the level of heading.

Heading level 1 is often semantically represented as the main title/heading of the page content, then as the number gets bigger, the type of heading changes to be semantically "smaller".

So h2 would represent the sub-title of the content, h3 could represent the sub-title of a sub-title, etc.

<h1>Super big title</h1>
<h2>Subtitle</h2>
<h3>Smaller subtitle</h3>
<h4>Smaller heading</h4>
<h5>Even smaller heading</h5>
<h6>The smallest heading there was</h6>

Adding a `p`aragraph to our page

What’s a title without some content under it? This is where you can use the p (paragraph) element, which has a small font size suitable for normal writing.

<h1>Making your own website from scratch</h1>
<p>The day comes where you're ...</p>

Getting fancy with `div`iders (containers)

There are many other elements which are useful to know, you can find a whole list here.

The div (division) element may be the most useful if you’re looking to divide or section content on your website, like a box to put text in.

Putting elements inside other elements is a fundamental part of building a website with HTML, and you can start to create some more advanced components on your page by wrapping elements in containers like a div.

To give an example, let’s say we wanted to create a layout like this:

We can envision how the layout might look in our HTML code by thinking about the different elements it would take to show each little “bit” on the page. Things like text, headings, and larger containers to divide sections of the page.

By default, a div will only take up as much space as the child elements inside it (as seen above, not with that much spacing though).

Using divs (and some styling), you can build layouts that work like LEGO blocks if you want to make more complicated layouts like a landing page.

To give you an idea of how powerful grouping elements with divs can be, in the image above, each box represents an element, like h1 for “Hi, I’m Blake”, button elements for the buttons, etc.

Most importantly, the content is grouped into 3 containers (divs), one container wrapping the whole content, one container for everything except the social icons, and a separate container for the social icons.

<div>
  <img />
  <div>
    <h1>Hi, I'm Blake</h1>
  </div>
  <p>I'm a software engineer based in Melbourne, Australia.</p>
  <div><!-- buttons --></div>
</div>

You can see how the boxes (with some extra styling) come together and stack to create the interface we want. However, divs on their own with no styling won’t stack content horizontally, like you see with the social icons being next to the text in the image above. To get that effect, we’ll need to start styling our divs.

Styling our content

Currently, our website probably looks a bit bland because the elements on our page are just showing as-is without anything telling the browser to give space or padding around certain elements. Let’s add some styling to our elements to make our website fancy 💅

Adding a `style` tag to our `head`

The simplest way to add styling to our site is including CSS inside a style element in the head element.

<head>
  <style>
    body {
      background: black;
    }
  </style>
</head>

You can include CSS rules inside the style element to target any existing elements in your HTML code, like changing the way the body of the document appears, or what colour a p element should be.

Breathing room

If you want to add spacing between elements, you can use padding and margin.

margin is represented in orange - you can think of margin like as how much space there is between other elements; like a forcefield around the outside of the element that pushes others away.

This is great for giving just the right amount of breathing room between different elements.

You can specify how many pixels the margin and padding will be, where higher values will make the spacing larger.

div {
  padding: 12px;
}

padding on the other hand is how much space there is inside the element. In the case of this button, the blue represents the actual size of the element, and the green is the padding around the element, like a cushion that literally makes the element bigger.

This is helpful if you want “internal” space in an element like making the size of a button bigger, or giving space between the edge of child elements

Adding classes to elements

To aid in selecting specific elements on the page instead of all elements of the div type for example, we can add classes to our elements in HTML using the class attribute:

<div class="box">
    <div class="left">
        <h1>Hi there</h1>
    </div>
    <div class="right">
        <img src="">
    </div>
</div>

Using Flexbox to structure our layout

To give our site some proper structure, we can use “flexbox”, which is a flexible box display layout we can use to specify the direction the content should be oriented, how child content should shrink/grow in size, etc.

Start by selecting a divider as a container for your content, preferably with a class name to access it through your CSS easier using a dot in front of the class name:

.box {
  display: flex;
}

We can make the direction of the flexbox be column, which makes content stack vertically, or row which makes the content stack horizontally:

.box {
  flex-direction: row;
}

Finally, we can centre the entire container with our content in the middle of the page using align-items: center, which will horizontally centre the content, and justify-content: center which will vertically centre the content on the page:

.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

Top comments (15)

Ashwin Hariharan • Feb 27 '22 • Edited

There’s 6 different “level heading” elements which you can wrap around text to make it bigger or smaller on the page. This is useful if you want to add a title or headers to your page to make it more readable and appealing.
...
Heading level 1 is the biggest, then as the number gets bigger, the text gets smaller.

This is incorrect. While its true that browsers assign default font sizes to numbered headings as how you observe, that isn't what they're for. <h1> doesn't mean "biggest heading" and <h6> doesn't mean smallest.

The purpose of the numbered headings are to semantically structure and organize different sections of the content in a webpage.

<h1> represents the section the current webpage is a part of. Which is usually the title of the website, or the article title in case of a blog post. Next, <h2> represents the start of a major subsection on that page. And then, if you have a subsection within the subsection started by <h2>, that would be under <h3>. The same logic applies all the way up to <h6>.

The benefits of structuring content semantically this way are huge. User agents and search engines are then able to better understand the organization of the content of the page.

It's also useful when you want to create a table of contents highlighting the different sections & subsections underneath. Here's an example from my own blog post:

Build a community-driven delivery app using Django, PostgreSQL & JavaScript

Ashwin Hariharan for Egen ・ Jan 31 ・ 19 min read

#webdev #django #postgres #tutorial

I hope my comment doesn't offend you and that you take this as a learning experience. For the longest time in my career, I too always thought that numbered headings were for styling purposes. I highly suggest going through the MDN docs for further reading. Cheers, and happy up-skilling! 😄

Nevulo • Feb 27 '22 • Edited

Thanks for reading Ashwin, and thanks for the feedback! I'm always looking to improve the quality of the content so no hard feelings, and you're completely right here.

That was my mistake attributing the diferent h* elements to the size of the text, this is just a side effect of default styling on most websites or browsers.
You can absolutely have a "higher" level heading element like h1 appear smaller than its counterparts like h2 or h3, and you're right when you say that the elements are mainly used for semantically grouping different sections of the page (as shown in your table of contents). For a simple website though I'd say most people would only be worrying about the size of the header and how it appears on the page, which is why I mentioned that.

I'll see if I can update the post to clarify this in a way that makes sense! Thanks again, cheers 😎

Liviu Lupei • Feb 27 '22 • Edited

This is highly unusual.

You're making web development seem easy and ... logical.

Explaining things like basic HTML and CSS.

You should start with buzzwords like React, Gatsby and Tailwind CSS.

Want to build your first web page?
Download 1000 npm packages, focus on scalability and microservices, and it might be ready in 10 months.

Oh, and everyhing that has the "open source" label on it is awesome, doesn't matter if it's insecure, unstable or owned by a private for-profit company.

And make sure to be hysterical on Twitter and make fun of anyone who's still writing PHP code.

One last thing, never ever test your website on any other browser except Chrome.

20% of people are using Safari as their main browser? F**k 'em, you don't care, they should just install Chrome.

Be sure to tell them that Chrome is the best, but also tell them that you hate Google.

Everyone knows a web developer will feel truly accomplished only when they overcomplicate everything and make it seem like they're working on rocket science.

Nevulo • Feb 27 '22

Thanks so much for reading Liviu, love and appreciate your comment! 😁

You've hit the nail on the head, the mission with my content is making programming content more accessible and easier to understand, and I try to make my content approachable for a broader audience. I think a lot of people starting out have this idea going in that programming is super complicated and it is like rocket science, but maybe that's just the perception others give off.

I think some people get lost in what's actually important, for example, there's not much point in worrying about optimising your performance if you haven't got that problem. What's important is giving users of your website a great experience - if users on your website have a fundamentally poor experience, no amount of optimisation, switching frameworks, or scalability is going to save you.

There's always time to build on top of what you've got and learn those things later down the road!

BadCat Design • Feb 28 '22 • Edited

Thanks - Good beginner article. I guess if we're going to each people things we may as well get it right. So in that vein, here are some corrections for consideration...

Headers (h1, h2, h3...) - these are not headers, they are headings. A <header>is very different.

Divs are divisions not dividers. A horizontal rule <hr> is a good divider, but a <div> is more along the concept of "sectioning" or "grouping" content vs. dividing it.

Nevulo • Mar 1 '22 • Edited

Thanks for reading @badcat, appreciate the feedback! Also appreciate the corrections, I think others looking to take things further will too.

With regards to headers vs headings, that's totally my bad, used the wrong name during writing. I have mentioned they are "level heading" elements, but I'll update this as I don't want to cause confusion. I understand your concern with "division" over "divider" (I'm aware it is formally called the "content division" element), and I'll add some clarification. But I think in the scope of this post, for all intents and purposes, it divides content (at least at a high level). I also mention how it is like a container, as well as words like "sections" and "grouping". I explain it like this to give some context around the images that come after.

Hope that makes sense and addresses your concerns, always appreciate the feedback to improve the quality of the content. 🙂

Nikhil • Feb 27 '22

It's always cool to see KISS principle applied. My website is only CSS and HTML by choice. I still haven't had a reason to add JS. I like pushing the limits of what HTML and CSS can do.

One relevant post I can think of is Writing HTML in HTML by John Ankarström if anyone is interested. Where he mentions how writing just static HTML & CSS will let you see how your designs have changed over time. Like a diary. You can go to an old post an go back in time with respect to your website's situation.

While I still use a static site generator. I would like to try and get there. Cos archiving your history in that form sounds great and fun!

Nevulo • Feb 27 '22

Thanks for reading Nikhil and great post you shared 😄 I completely agree, keeping things as simple as possible and building on top of it when you need the functionality is great for beginners, especially when a lot of people are under the impression that more is better, but you can create some amazing things just using HTML and CSS!

Nikhil • Feb 27 '22 • Edited

Thanks for reading Nikhil and great post you shared 😄 I completely agree, keeping things as simple as possible and building on top of it when you need the functionality is great for beginners

I am glad you found it interesting. :)
I don't think it is just for beginners though. Some brilliant devs I follow all have functional and minimal websites. They tend to keep the JS to the minimum. The idea is to not shy away from JavaScript. But use it only when necessary.

especially when a lot of people are under the impression that more is better, but you can create some amazing things just using HTML and CSS!

I completely agree! More is not better. More is bloat and a liability in the long term. :)
Not to mention, CSS has almost become a programming language with a lot of modern functions.
stateofcss.com/ was an eye opener for me. It is still largely an unexplored territory IMO which includes me as well. So I started giving more time to it since last year. :)