Help with HTML semantic tags and general layout pls

[rancid spindle]

Hi everyone, I have a beginner assignment to replicate a template website we were given using HTML and CSS. We have to use semantic HTML tags, keep the layout, but we can change the styling and wording. My CSS is not showing up in my HTML file, and im confused about the divs and if i should have removed them and added section instead. How can i replicate the layout in the template site here to get the sidebar and sections, do i use aside and section or aside and article tags? I would appreciate any input

[drowsy roost]

Hi

I read your problem carefully and I can help you perfectly

[brazen void]

i think it is true that div is not a semantic HTML tags so you probably better to change it.
for the layout i think you could use article and aside, and for the other part is section.
for the css part, do you already linked the file to your html?
i've done a similliar task like this for my test, i hope it helps.

[rancid spindle]

Hi there, I would really apreciate that, how could I contact you?

[rancid spindle]

im changing them but i dont know how whether im changing it right, for example, changing div for hero picture, do i make it <hero></hero>

[rancid spindle]

I am unaware where I should use article

[rancid spindle]

yes an external folder but changes wont translate onto the webpage till I have made the changes to css to match changes to my html file

[brazen void]

hhmm, i guess header tag can be used as the hero picture.

article is for your main content i believe, use article inside the main tag, i use it like this
<main>
<article></article>
</main>

as for the css file, maybe you use the wrong selection of css for the html tags.

[rancid spindle]

sorry i dont understand the part about using the header tag as the hero picture? do i put the hero picture into the header tag? how would i edit the size and isolate it in css for styling?

[brazen void]

you can use the <img> tag in the <header> tag, or just input the image via css with the header selector and make it as the header background.

as for the styling, you can either use the img selector(use the <img> tag in html) or header selector(input the IMG with CSS).
set the size with width, height, background-size cover, etc.

i'm still learning too, doing online courses and stuff.
so correct me if i'm wrong hhaha.
but that's what i usually use

[rancid spindle]

i will give that a try, thank you so much

[rancid spindle]

i would have no clue, only my second week of my bootcamp haha

but youre amazing, honestly helped me so much i appreciate you

[brazen void]

your welcome haha, good luck on your bootcamp.
i'm still doing mine too, keep grinding.

[rancid spindle]

thank you, you too wishing you the best!