Seems correct. What browser do you use? While i’m using firefox, sometimes happens for some reason doesn’t let go further. So what i do to pass this is switch to chrome at some stages.
Thanks for this. I used another browser (phoenix) and it worked.
1 Like
where are recorded videos for those of us who missed the session.
i am stuck at step 55. what does that even mean?
@ibrahimwere2771421 Here’s the video of session 1! And the others are linked in the bootcamp announcements page.
@lexi2963997 I’m not sure what part of the instruction you’re stuck on, but I’ll try explaining a couple of the different terms that I used to get confused about, in case one of these things is what’s making it hard to understand!
When they say to “nest” the text inside a label, that means to put the text in between the opening tag <label> and the closing tag </label>. So if you type <label>your name</label> you would say that the phrase “your name” is “nested inside” the label element.
An element is one HTML tag, or one “object” on your page, like a paragraph or a label. I think it refers to the entire tag from start to end, like <p>some words</p>.
An attribute is what you call the options inside the HTML tag that come after the first word and give more details about it. It’s what goes on the left side of an equals sign.
A value is what goes on the right side of the equals sign after an attribute.
So when you have <input id="loving" type="checkbox"> :
idandtypeare the attributeslovingis the value ofidandcheckboxis the value oftype- The whole thing,
<input id="loving" type="checkbox">, is the element
So when they say “only nest the text Loving in a label element”, that means create the <label></label> tags and put the text in between them. (And they’re saying to put only the text inside of the label element, in contrast to the last step, when you also nested the input element inside the label.)
When they say “add a for attribute with the same value as the input element’s id attribute”, they’re saying to take your label element and add the keyword for="" inside the brackets, so you get <label for="">. And then to decide what goes inside those quote marks (the value), you have to look at the existing input element, and copy whatever word you see inside the quote marks of the keyword id there.
What it means to “associate the text with the checkbox” is that, by making the for attribute of the one element match the id attribute of the other, you’re creating this connection between them.
I hope this can help clear up the instructions for you! It took me a long time before I could wrap my head around what all these different terms meant.
3 Likes
Thank you for your thorough explanation! I finally can distinguish those terms!
I also have two questions, for example, for Loving, why do we always need two texts(loving)? what do those two"loving" represent separately?
Also, as I cannot see any changes when we “associate the text with the checkbox”, what did it do exactly? Why do we need to associate?
Hi Lexi,
Labels are for accessibility. Sighted users make the connection visually, but others cannot. Screen assistance technology will indicate that there is a component (radio button, checkbox) and read the label associated with that to the user. This of course only works if the label element is applied correctly.
So there are several ways of doing this, where we have seen sofar the following 2:
-
Wrapping the element in a label (like how it was done with the radiobutton)
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label> -
Using a separate element, and stating for which element it is the label (like how you needed to solve exercise 55)
<input id="mycheckbox" type="checkbox"><label for="mycheckbox">Visible and Accessible Text</label>
So in (1) the association is made because the input is wrapped in the label. Where in (2) the text can be anywhere (before, after etc) but the association is made with the ‘for’ attribute.
Keep in mind that a visitor would not ‘see’ things like id/value etc. Assistive technology may use these attributes to make a page understandable for their users. It is a hot topic and something we should all take into account when doing web development. You can read more about it here https://www.w3.org/WAI/tutorials/forms/labels/
I hope this helps?
2 Likes
Try searching for class central in YouTube and from there look for the vids you missed.
Guys pls am stuck in css step 59 urgently need help guys thank u how to Impact font of h1 and h2…!!
Simply select one by one and change font value to impact
Did you try erase browser cache or update the browser? It could be just that. Try with a different browser as well. Firefox and Chrome work pretty good.
Happy coding!
Hi, I am just started today. I got stuck on step 56. My code is: <label for="loving"><input id="loving" type="checkbox">Loving </label>
1 Like
Hi Mohamemed,
You are really close but you made a tiny mistake in location.
The instruction reads:
… by only nesting the text
Lovingin alabelelement and place it to the right side …
so it should result in this:
<input id="loving" type="checkbox"> <label for="loving">Loving</label>
I hope that helps?
1 Like
Have you had any luck?
Maybe try a different browser?
This topic was automatically closed 45 days after the last reply. New replies are no longer allowed.