In the bottom right corner of the CodePen example, there should be a button that says Fork. Click it. This will make a copy of the code that you can save to your CodePen account.
While anyone can edit or fork a CodePen, you can’t save and share your work without creating a CodePen account. It’s easy and free. The button to do this is in the upper right corner of the CodePen window.
Better! However, that definition is still not quite right. Remember that a description list is also (and was originally) called a definition list. I think I'd look at that code this way:
<aside>
<dl>
<!-- if separation desired between word and pronunciation, use <span> elements -->
Nicely done! Agreed, the term with the 3 definitions could be summary/detail if desired. Overall the markup looks great. You've focused <article> on the contact information, the hours, and the term/3 definitions. These are all pieces of information that could stand alone and/or be syndicated, but they'd be better off in the context of a purpose (i.e. these are the hours for the Kaiju restaurant, this is the contact info for the restaurant). I'd probably be more inclined to mark up the hours and address with <section> and the term/dfn with <aside>. I think I'd set the paragraph talking about Kaiju with the <article>. In any case, you have the right direction with this overall. Apologies for the delay - the term ended yesterday, and it's been super busy!
🔥🎉🔥🎉🔥🎉 Nice job! Hours and address look GREAT. Article looks good. Don't use <section> as a substitute for <p>. For the definition/description list, a few tweaks:
<dl>
<dt>kaiju /ˈkīˌjo͞o/</dt>
<dd>noun: kaiju;</dd>
<dd>plural noun: kaiju;</dd>
<dd>plural noun: kaijus</dd>
</dl>
Now you're associating the term with the definitions. Before it was just a list. Remember that <dl> is all about pairing at least 2 pieces of information. Thanks for sharing!
Great first pass at this. 🔥🔥🔥🎉🎉🎉 You might want to review the lessons on <address>, description lists, and <dfn> too. But your article and section look great - nice work!
🔥🎉🔥🎉🔥🎉 Lovely job! Careful not to skip heading levels -- there are no H3's in here. The <section> might be an <aside> instead -- but you did a great job with the definition list, the address, and the footer! Thanks so much for sharing!
Thanks! I changed those couple of things, I was thinking more of sizing than a proper order of h2, h3 but i think there’s need to be a continuity with them.
I changed also the Kaiju section as aside. I do the rest it’s good in a section element.
Thank you so much for your feedback, this is amazing ❤️
WOO! Love your time tags down in the restaurant hours!!! I think you're on track with the description list there too -- but watch your opening/closing tags. Remember there's a <dt> and a <dd>, with a <dl> going all the way around it -- see https://jen4web.substack.com/p/description for details. Consider the same suggestions to Jade in your code as well. Great first pass -- thanks for sharing!
Proper use of these tags is still a little confusing to me...I made 2 <section> tags, one for the description of the website, and one for all of the business information (hours, contact info, etc). My thinking was that this information was related/could not stand on its own. I put the 'kaiju' definition, and each of the items in the footer (hours, contact, etc) into <article> tags, because I thought they could stand on their own regardless of location in the page (still a little iffy about these items being inside a <section> tag, though). I also used <dfn>, <mark>, <table>, <address> where appropriate.
Great first pass on this! The time is correct (woo woo!). Like your address at the bottom too! Let's think about a few other things:
a. What is the relationship between headline, paragraph, definition, and business hours? Are these a unit of content or are they 4 separate things? Could some or all of these be shared with a site and still understood on their own, without the other things around them?
b. Love the dfn tag around the kaiju -- how about the rest of that information? It's probably just a paragraph, although the mark may add some meaning to the definition.
c. For the days/hours -- is a table the best way to do this? These two pieces of information are related, and this is a list of dates and times that the restaurant is open. Perhaps some kind of list?... that takes 2 pieces of information?...
d. For the footer -- does this need an article tag? Or is an address tag sufficient, since that's what this information is?
Great start on this -- thanks so much for sharing!
🎉🎉🔥🔥🔥 Love it! You've done a great job of identifying the parts of the page and how they relate to each other. Love your comments, too! The phone number could be in <address> as this is all contact information. Potentially the social media elements too. LIke the description list for the hours - great work!
https://codepen.io/romola/pen/mdWrMKQ?editors=1100
This could be better looking and the <dfn> could perhaps be a summary/detail instead.
An improved version, I hope: https://codepen.io/romola/pen/mdWrMKQ?editors=1100
Better! However, that definition is still not quite right. Remember that a description list is also (and was originally) called a definition list. I think I'd look at that code this way:
<aside>
<dl>
<!-- if separation desired between word and pronunciation, use <span> elements -->
<dt id="kaiju">kaiju /ˈkīˌjo͞o/</dt>
<dd>noun: kaiju; plural noun: kaiju; plural noun: kaijus</dd>
<dd>a type of giant monster featured in Japanese fantasy and science fiction movies and television programs</dd>
</dl>
</aside>
Nicely done! Agreed, the term with the 3 definitions could be summary/detail if desired. Overall the markup looks great. You've focused <article> on the contact information, the hours, and the term/3 definitions. These are all pieces of information that could stand alone and/or be syndicated, but they'd be better off in the context of a purpose (i.e. these are the hours for the Kaiju restaurant, this is the contact info for the restaurant). I'd probably be more inclined to mark up the hours and address with <section> and the term/dfn with <aside>. I think I'd set the paragraph talking about Kaiju with the <article>. In any case, you have the right direction with this overall. Apologies for the delay - the term ended yesterday, and it's been super busy!
Hi. Thanks for continuing to comment on my work as I slowly continue. I think I may make some changes along the lines of what you suggest.
Challenge 17
https://codepen.io/kajal-28/pen/wvJWMyB
🔥🎉🔥🎉🔥🎉 Nice job! Hours and address look GREAT. Article looks good. Don't use <section> as a substitute for <p>. For the definition/description list, a few tweaks:
<dl>
<dt>kaiju /ˈkīˌjo͞o/</dt>
<dd>noun: kaiju;</dd>
<dd>plural noun: kaiju;</dd>
<dd>plural noun: kaijus</dd>
</dl>
Now you're associating the term with the definitions. Before it was just a list. Remember that <dl> is all about pairing at least 2 pieces of information. Thanks for sharing!
Okay, Thank you 😊
https://codepen.io/kadie7/pen/NWdZaBa?editors=1000
Great first pass at this. 🔥🔥🔥🎉🎉🎉 You might want to review the lessons on <address>, description lists, and <dfn> too. But your article and section look great - nice work!
https://codepen.io/athelas85/pen/QWdJYxj
🔥🎉🔥🎉🔥🎉 Lovely job! Careful not to skip heading levels -- there are no H3's in here. The <section> might be an <aside> instead -- but you did a great job with the definition list, the address, and the footer! Thanks so much for sharing!
Thanks! I changed those couple of things, I was thinking more of sizing than a proper order of h2, h3 but i think there’s need to be a continuity with them.
I changed also the Kaiju section as aside. I do the rest it’s good in a section element.
Thank you so much for your feedback, this is amazing ❤️
https://codepen.io/jinsbai/pen/eYgjLQR
Great first pass on this! Have a look at my comments to Jade -- many of them apply to you too. Love the <time> around Y2K!
https://codepen.io/kelsey-van-ert/pen/jOypKPy.
WOO! Love your time tags down in the restaurant hours!!! I think you're on track with the description list there too -- but watch your opening/closing tags. Remember there's a <dt> and a <dd>, with a <dl> going all the way around it -- see https://jen4web.substack.com/p/description for details. Consider the same suggestions to Jade in your code as well. Great first pass -- thanks for sharing!
https://codepen.io/jarchaff/pen/YzNjLmg?editors=1100
Proper use of these tags is still a little confusing to me...I made 2 <section> tags, one for the description of the website, and one for all of the business information (hours, contact info, etc). My thinking was that this information was related/could not stand on its own. I put the 'kaiju' definition, and each of the items in the footer (hours, contact, etc) into <article> tags, because I thought they could stand on their own regardless of location in the page (still a little iffy about these items being inside a <section> tag, though). I also used <dfn>, <mark>, <table>, <address> where appropriate.
Great first pass on this! The time is correct (woo woo!). Like your address at the bottom too! Let's think about a few other things:
a. What is the relationship between headline, paragraph, definition, and business hours? Are these a unit of content or are they 4 separate things? Could some or all of these be shared with a site and still understood on their own, without the other things around them?
b. Love the dfn tag around the kaiju -- how about the rest of that information? It's probably just a paragraph, although the mark may add some meaning to the definition.
c. For the days/hours -- is a table the best way to do this? These two pieces of information are related, and this is a list of dates and times that the restaurant is open. Perhaps some kind of list?... that takes 2 pieces of information?...
d. For the footer -- does this need an article tag? Or is an address tag sufficient, since that's what this information is?
Great start on this -- thanks so much for sharing!
Thank you so much for this thorough and helpful feedback!
I think I am starting to get the hang of these types of elements, so I've tried changing my markup here based on your suggestions.
a. I wrapped those 4 things in a <section> tag, with a couple of items in an <article> tag.
b. I changed this by removing the <mark> and keeping the <p> tag around the definition.
c. I used a detail list here instead.
d. And I removed the article tag, I no longer think it's necessary after some practice!
Much much better! The article tag is still there but once you pull it out, I think you're good to go. You made great progress here! 🔥🎉🔥🎉🔥🎉
🎉🎉🔥🔥🔥 Love it! You've done a great job of identifying the parts of the page and how they relate to each other. Love your comments, too! The phone number could be in <address> as this is all contact information. Potentially the social media elements too. LIke the description list for the hours - great work!