HTML CSS Challenges/Form Project#236
HTML CSS Challenges/Form Project#236anuthapaliy wants to merge 4 commits intoCodeYourFuture:mainfrom
Conversation
SallyMcGrath
left a comment
There was a problem hiding this comment.
Thanks for your work @anuthapaliy . 🙏
I think there's a bit more to do here. When I ran your PR in Lighthouse, it scored 66. Take a look. There's lots of helpful information in Lighthouse to teach you how to fix the problems. Follow the links where it says "Read more"
|
|
||
| <section> | ||
|
|
||
| <label for="name">enter your name</label> |
There was a problem hiding this comment.
Have you installed Prettier? The style guide can help you do this: https://syllabus.codeyourfuture.io/guides/code-style-guide#using-prettier-to-format-code-automatically
There was a problem hiding this comment.
Thank you sally, i will work on it.
| </form> | ||
|
|
||
|
|
||
| <section> |
There was a problem hiding this comment.
Is there another html element we can use to group a set of fields in a form?
| <br> | ||
| <section> | ||
| <label for="colors">Choose your colors:</label> | ||
| <input type="colors" name="colors" id="colors"> |
There was a problem hiding this comment.
What is this input doing here? What is its function? Can you talk me through it?
| padding:0 | ||
| } | ||
| .body{ | ||
| background-position: center; |
There was a problem hiding this comment.
What are you positioning here? There are two background-image rules on this selector but no background image. What were you going for?
| margin:0; | ||
| padding:0 | ||
| } | ||
| .body{ |
There was a problem hiding this comment.
| .body{ | |
| body{ |
Typo? (install Prettier!)
|
|
||
| main{ | ||
| display: grid; | ||
| grid-template-columns: auto; |
There was a problem hiding this comment.
Do you need these grid rules of auto? Take a look in Devtools at these rules and try unchecking the box next to each. What happens? Why?
| background-size: cover; | ||
| font-family: Georgia, 'Times New Roman', Times, serif; | ||
| margin-top: 30px; | ||
| font-size: 15px; |
There was a problem hiding this comment.
It's rarely a good idea to set font sizes at less than 16px for body copy. Your site may actually get downranked by Google for doing this.
|
|
||
| } | ||
| button{ | ||
| margin-left: 200px; |
There was a problem hiding this comment.
What will happen when the viewport is 280px wide? Try looking at your layout in Devtools devices mode and choosing different devices.
No description provided.