Section 04: HTML & CSS Basics: Summary & Practice

The goals

💪🏻Ensuring that I am following this course well

👍🏻Try to practice it

 

😎Mission: Try to make a website looking the same with an example picture!

<example>

 

<my first trial>

Almost! 🥺🥺🥺

But I failed at some details such as putting all items in the middle...I used margin auto as they said in the lecture but don't know why it doesn't work...let's find it out step by step by following this lecture!

 

 HTML skeleton and structure was all okay so pass! Let's complement some CSS codes to make it look the same with our mission page!

 

❗️❗️❗️❗️❗️🆘🆘

So, I made these items stay in the middle. But I wonder how it worked...

Before I set margin: auto; property in body then it didn't work, but when I set the only box item as middle then it worked. So I need to know about the differences here!

I make a mark here to come back again after some research hehe

 

➡️

 

Tried to set border-left for some special list item but the issue is that it makes some distance difference on each item, because other lise items don't have border so they are smaller height than the others. 

So, in this case, we need to put border for the other list iems also, but set it as transparent then every itmes has the same heights but only the difference of being visible or invisible.

 

 

Ta-da!

I finished my first mission yay😚

 

One step further

Now we made our website, but how can we improve this better?

When we emphasize some words we used just 'span' which is non-sementic to apply some visual effect we want.

But if blind people see this website, would it be possible for them to know that word has been emphasized?

In this case, we can change this content to another one to clearly define that this is important words compared to others.

 

HTML: The strong and em tags
The <strong> and <em> tags are used for emphasizing parts of a text. The <strong> tag should be used to indicate strong importance, seriousness, or urgency, like to indicate key phrases in a text for someone skimming it. The <em> tag should be used to represent stress emphasis, like when we'd read the emphasized text in a different tone of voice. Both tags can be used together, where it makes sense. 
The differences of using these two are when the voice reader reads this sentence with <strong > or <em> tag, with <strong> tag, it makes a bigger sound for an emphasized word, and with <em>tag, it changes a voice tone for an emphasized word.

 

HTML: section tag

Section tag defines the section of documents such as chapters, headers, footers or any other sections. The section tag divides the content into section and subsections. The section tag is used when requirements of two headers or footers or any other section of documents needed. Section tag grouped the generic block of related contents. The main advantage of the section tag is, it is a semantic element, which describes its meaning to both browser and developer.