Web Content and Reading Other Peoples’ Code

Good morning. I have a question: I’m currently working mainly with HTML and CSS and I was thinking last night. Am I wrong to think that everything is grouped in boxes?? Like I notice when I read others’ coding, it seems like there’s divs everywhere and those divs (also HTML semantics, but I mostly see divs) create boxes around the content it surrounds, and CSS helps you with styling that content and positioning it on your website. Is this correct? For a while I couldn’t figure out why people used divs in their HTML. Are divs used to group sections of content together??

Also where can I read others’ coding?? Like basic coding, I haven’t touched JS or other languages yet so I wouldn’t even know how to read those. I just want to read basic things like static webpages so I can see how they did the markup (hopefully I used markup right, I want to get used to using the lingo lol).

Also, GitHub is a little overwhelming at the moment, I really have no clue what I’m doing on there.:sweat_smile::sweat_smile:

@Ltc870 There are many types of tags like <h1> to <h6> which are headers and can only resized by font-size css property. And like that <p> , <span> , <i>, <em>, <strong> and etc except <div> are for text and specific things. But for <div>s it is freely designable. You can add text as child node or just make it a box and do some animation. I don’t really know about that it is a right usage!

And for other’s HTML/CSS only pages I recommend you to go to #project-feedback and find the HTML/CSS only page posts. And go to links that the post contain.

Hope this help

1 Like

No, you are not wrong, this is how it all basically works. You put text in boxes, and you arrange the boxes.

You have inline elements (like img, b, i, strong, code, input etc). They flow like text, all in a line, one after the other. Then you have block level elements (like div, p, h1, section). They are a box with a width the same the page (or whatever width you set them at) and a height equal to whatever is inside them (or whatever height you set). You put the inline elements in the block elements so you can arrange where things go on the page.

Yes. Some block elements denote a specific thing (section, footer, header, p, h1). But very often you just want “some element that groups stuff together”

2 Likes

Thank you!! It helps ALOT!!!

Thanks so much!!! It’s all making sense now!!!

Your realization about boxes is super important for doing layout.

If you always give your elements an outline, border, or background color it will help you especially in the beginning. But even with experience, you will sometimes have to make the element boxes “visible” to better understand the layout (or just use the dev tools).

Some people like to use this at the top of the CSS to see all the boxes.

* {
  outline: 2px solid red;
}
3 Likes

Informative Post you share

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