April 7, 2023 Training

HTML and CSS for Beginners by Envato Tuts on Youtube

(cont. from yesterday)

Block level element takes up entire horizontal space and starts a new line

In line elements can exist within a block element

<Div> is a block level element that is a generic, non visible container

Divs can be nested. You can have divs like this form > form section > form field

Separate content with <br>

<hr> tag will add a horizontal line across the page

HTML has 3 list types: ordered lists <ol>, unordered lists <ul>, and definition lists <dl>

You use <li> for each item in the list

If you need to go up a level to reference another file, you need to write the link as ../link

Remember to consider use cases of jpg vs png vs svg

For forms, specify the type of info being inputted (like email)

Forms are an essential part of websites, build them thoughtfully and test

A semantic element describe its meaning to the browser and developer (think a <nav> vs <div>)

Semantic tags improve accessibility and SEO

While an <article> and a <section> look similar, but try to use an <article> for independent content and use a <section> for grouping information

Remember that the browser reads the page from top to bottom. It will do whatever it is told to do until it is told to do otherwise later. Put CSS at top of page.

Because it is hierarchical, remember to structure your CSS to match (apply something to everything, than a lot of things, and then specific things)