Simple HTML advice

HTML & CSS
,
1

I am a beginner in HTML and CSS learning world, and thus need your help.

I am trying to build a simple blog HTML. I am trying to build this for higher resolution i.e. 1600 X 900; Height is immaterial.

Out of 1600 PX width 100+100 will be utilized in the margin/padding in left and right hand-side.

There is a header and footer, and the middle section of this blog kind of HTML is divided like this →

small sidebar(15%of the remaining 1400px) - content area(52% of the 1400px) - bigger aside/sidebar(33%).
Can you guide me how the classes should be assigned so that I should get this arrangement also if needed →

1566×1474 2.16 KB

2

bigger aside/sidebar(33%). - content area(52% of the 1400px) - small sidebar(15%of the remaining 1400px)

1566×1474 2.17 KB

3

Further explanation →

1566×1474 80.9 KB

4

Welcome to SitePoint, @Novicedeveloper. Have you learned anything at all about HTML and CSS, or are you starting right from the very beginning?

If you have already written your basic HTML for this page, could you please post it here? Just copy the code and paste it in the edit box. Then highlight all your code and click on the </> icon you see above.

5

I Know basics for sure. If you will explain me something what I asked I will be able to grasp that. Thanks!

6

Sorry, I edited my post at the same time you were responding. :slight_smile:

Do you have any HTML written for this yet?

7

Why exclude smaller screens?

8

Juts learning boss. will make it responsive once I learn that. this is my 1st trial project.

code here →


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>My First project</title>
</head>

<body>
    <header>
        <nav class="nav-wrapper">
            <ui>
              <li>Home</li>
              <li>About</li>
              <li>Politics</li>
              <li>Hollywood</li>
              <li>Finance</li>
              <li>Elon Musk</li>
            </ui>
        </nav>
    </header>

    <section class="wrapper">
        <article><h1>This is the Blog title</h1></article>
        <main>
            <article></article>
            <aside></aside>
        </main>
        <aside></aside>
    </section>
    <footer>

    </footer>

</body>

</html>

Main is further divided in to
<article></article> = 52%
<aside></aside> =15%

From here I need your help.

9

I dug out an example, if it helps.

There are some more of these I think.

10

Your HTML structure is a little odd, and your use of the <article> tag around the <h1> heading is incorrect.

The HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry.

Likewise, I would say that the outer container should be <main>, with a <section> nested within it, if required.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section

2 Likes
11

This is a flex box version of that one:-

and another one:-

1 Like
12

Thanks sir. Let me check all of them.

13

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