I have several question about what has been learned

[rutau]

I recheck what has been learned so far because i got stuck and trying understand thing that i don’t understand below is my question please help me

1. there are so many semantic elements like figure, main, header, etc. but if I decide to use div does it okay, and will it work? or it’s a bad thing to do? like i use <div class="header"> <div class="main">
2. i can’t understand this CSS selector input[type="submit"] how it work? or can you give me the name of the selector that I can learn on the internet?
3. flex CSS explanation? flex-wrap and flex-direction?
4. we learn about the @media rule, does that mean if we design websites we have to add different rules for every device?
   5 float and clear CSS property explanation I can’t understand what w3 said
   6. what name of this selector li > a?

thank you all

[Griff]

@rutau

there are so many semantic elements like figure, main, header, etc. but if I decide to use div does it okay, and will it work? or it’s a bad thing to do? like i use <div class="header"> <div class="main">

Giving a div the class with the same name as an element doesn’t make it into that element. <div class=“p”></div> is not a paragraph element. So it won’t work in that it won’t be a main element, just a div with a class.

Accessibility software relies on the presence of elements like <main>, <header> and <figure>. So they are important elements to help some disabled people access webpages easily.

@rutau

i can’t understand this CSS selector input[type="submit"] how it work? or can you give me the name of the selector that I can learn on the internet

This selector styles all input elements with a type of submit. Which means this element.

<input type="submit">.

@rutau

flex CSS explanation? flex-wrap and flex-direction?

Have you done the Learn CSS Flexbox by Building a Photo Gallery part of the new responsive web design course? That does go over the subject. Otherwise, I find the w3schools pages on it give a pretty good guide to these concepts if you go though it.

@rutau

we learn about the @media rule, does that mean if we design websites we have to add different rules for every device?

It depends what you’re using to design the website. Most website building tools like Wordpress have media responsiveness built in. However, it is always good to know how to code yourself if you have to tweek the template code.

Otherwise making a query for every single device isn’t possible but it is possible to have a set of breakpoints. These are common screen sizes that can be used for media queries, W3schools gives examples here.

@rutau

5 float and clear CSS property explanation I can’t understand what w3 said

If you can’t understand the w3 explanation, try this and this one. There’s also some YouTube videos if you search that may work for you. Personally, I find playing with code the best way to learn. It might be good to set up a codepen.io account if you don’t have one already and play around with the properties.

@rutau

6. what name of this selector li > a?

I’m not quite sure what you mean by a name, selectors are simply known by what they select. In this instance the selector is li > a. It selects all a elements that are a direct child of li elements. So in this code example,

<ul>
<li>Hello <a href=“example.com”>hi</a></li>
<li>Goodbye</li>
</ul>

li > a {
  color:red;
}

The text hi would be red.

Hope this helps!

[rutau]

thank you Ella for the help and the reference it really helps me.