How to build up a html structure

HTML-CSS
1

Hi all,

I almost finished the Responsive Web Design part. The HTML and CSS elements, I understand (and if not, i can find info on the web quick).

But what I missed is how to build up a website from the ground up. How do I structure a page. When to use divs in other divs or containers.

My code for the projects in this part is more basic then the examples they refer to on codepen.

Is there a good resource I could use/read to structure a webpage from the beginning?

2

I’m not quite sure that I understand your question.

There are a lot of resources about designing a website. Using divs also depends on your style and experience, I don’t believe that there is a specific rule that could apply to any website since many have quite different designs. It probably boils down to what functionality you need to use and how you structured your logic. If you want to use grid or flex then of course you’ll need a container, but depending on what other elements you have you might have even more containers in that one container.

As for building a website from the ground up, if you are talking about the front end then it is essential for you to know how to use javascript in order to add some logic to your website.

If you are talking about building the whole website, then you need to know a lot more. You should know how to construct the backend and connect it to your frontend, you might need a database to store all your information and you need to be able to deploy your website somewhere.

I believe that you will learn most things by simply building websites. In time you’ll improve. FreeCodeCamps Certifications and videos on youtube will help you improve with their challenges and examples.

3

Sorry, English is not my first language.

I understand there are a lot of ways and each dev has its own preferrences.

What I mean is there are lots of resources. But I find it hard to find something about the basics of starting to build up your html code.

Most things i find is like this when you compare it to lego.

Here are your code-elements/lego-bricks and now go build a website/lego-building.
But without instruction.

And with lego i know what to use as foundation, walls, roof, windows. But with html that is less clear to me.

4

Ok. So You want to get an idea?
Just go to any website, right-click and click on inspect(at least in chrome).-
There you’ll see how a specific website has set up its Html.

Edit: start with something like Wikipedia or Internet Archive: Wayback Machine or government websites if you want something that’s not that complex.

Edit2: Do keep in mind that they used javascript to generate the specific content and structure with data received from the backend, but for your specific question, seeing how stable, frequently accessed websites do it should be enough.

5

Hello @jasperleenarts,

The basic structure of an HTML file is this for example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <title>A title</title>
  </head>

  <body>
    <header>
    </header>

    <section>
      <article>
      </article>
    </section>

    <footer>
    </footer>		
  </body>
</html>

This is really a basic structure. In general, you use div when you cannot use other block tags. For example, you want to create an header into your page, then you don’t need to use div because you already have an header tag. If you want to create a section into your page, the same, you already have a section tag.

div is at the image of span, tag without meaning. The difference between them is that div is a block tag and span an inline tag. If you want to change a part of a paragraph without use the important inline tag such as strong, then use a span.

All depends the case you will face. Each project is different even they can be really similar/familiar.

1 Like
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.