Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Intro component, form validation

mav 90

@xmavv

Desktop design screenshot for the Intro component with sign-up form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hey, I learn a lot from this one, I was doing it with youtube videos, to improve my semantic HTML, and CSS skills. Soo my question is what does do the max-width rule in my section from CSS? I heard that this is done, for not being too big (the section tag), but when i tried to test it i could not find the practical solution. The 50%, 100% values have the same result if i stretch horizontally my page. I mean why I cannot leave it empty, just not use it, would it be any difference? Another question is where do I should use background image, color, etc, in my main tag or just body, does it make any difference at all, except that bg in main is only in main and when I move page away i can see the empty bg (when bg image is in main), or normal bg img (when bg image is in body) Hope someone can explain! Have a good day

Community feedback

Dieu Donne 150

@d-donne

Posted

Hi @xmavv. Great job on this project.

Concerning your question on max-width

Block level elements like div, section, main, footer, etc already take the full width of their parent element, so in most cases, it's not necessary to set width: 100%.

The max-width property tells the browser the maximum horizontal space the element can cover. As such you may not see it's effect if the element itself is not big enough to cover that space. It is however useful if the element, say an image has a width that can grow to be greater than that of the parent element. This will make it able to shrink, but not grow past its parent.

concerning background image

If the image's primary role is to serve as a background, then you should use the CSS background-image property. If it's an image that adds meaning to the page, then use HTML <img src="" alt=""> tag - and always remember to add alternative text for semantic reasons. That being said, it is sometimes difficult to manipulate certain images when used as background-image, hence the img tag is used in these situations and manipulated in the CSS.

I hope this helps.

Marked as helpful

0

mav 90

@xmavv

Posted

@d-donne Thanks for Your time, that explains a lot!

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord