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.
For this exercise I placed the text in a <blockquote> tag with 'bromide paper' in a <dfn> tag. The citation is outside of the <blockquote> in a <p> tag with the Book title in a <cite> tag and the HTML link reference is within an <a> tag.
A bit behind and there excused the inline styling ;) used the figure/blockquote approach from earlier, this time linking to the original work from the cite attribute and tag. Most odd thing may be the question mark separated from the definition tag. And as browser style sheet italicizes the definition, I had to italicize the question mark as well, because kerning. Would probably not use inline markup for styling in real life, but that's not today's topic. https://codepen.io/oldrup/pen/ExZXdRG
Lovely job as always, Bjarne! Agreed that inline markup isn't the best, and the <i> around the ? isn't necessarily good either. But as long as you're aware of this, we'll call it good enough. Nice job and thanks for sharing!
I thought that the quote would be in a blockquote and then the citation would not be a part of the blockquote. I was not sure if I should use a footer as others have done but I did not think of that before looking here so I kept mine as is.
You got it! There are two methods. The WHATWG method, which you used, has no footer and places the credit and <cite> outside of <blockquote>. The MDN method put the credit and <cite> in a <footer>, and all of that is inside <blockquote>. You've done a great job following the WHATWG method. You might consider a <p> around the line with the citation, or you might put the URL in a cite attribute in the <blockquote> tag. Those are picky - this is a perfectly acceptable answer. Nice job!
I put all of the information inside of a blockquote, since it's a short passage from a book. Since bromide paper is the thing being defined, I put that inside the <dfn> tag. I separated the actual definition of the item for readability's sake, but am not sure if that is bad practice. Like with yesterday's challenge, I made the title of the item into a hyperlink with the URL from the end of the content. Originally, I had the author's name in the <cite> tag, but it looked off.
Nicely done! You separated the question (what is bromide paper?) from the rest of the paragraph, which makes this a little more scannable. You've got the cite right (YAY) - get rid of the extra </cite> after the author's name. You could put all of line 23 in a footer tag to bring it into alignment with what MDN recommends. Great work and thanks for sharing!
Interesting approach for this! However, this is a direct quote from the book, so we probably wouldn't want to rearrange it quite this far. Check William's result below for one possible solution. In any case, you've got the <dfn> element in the right place, and you've (ironically) set this up for great markup with a description list - which you'll learn about tomorrow. Thanks for sharing!
Looks great! I would have put a <p> around the quoted paragraph, but it's not required, I don't think. I think you could just have <blockquote> as you did.
The definition is in the parent paragraph so I took a cue from example 1 for this, all inside a blockquote element including a cite tag and link to the source material.
Hooray, you got the "bromide" defined! <q> is probably not the right element in this context -- sometimes quotes are just "". Consider <blockquote> for the whole passage, though, as we are quoting from a book. The <cite> is good -- perhaps wrap it around the book title instead of the author? Great job, thanks for sharing!
https://codepen.io/jen4web/pen/ZELxqxg?editors=1000 -- gave you a commented version back. You did great and got most of it right, but I rearranged a few things and made it more efficient for you. Too much to explain here. :-D
Thanks, Jen. I had a funny dream last night that you were wrapping up an in-person course in the Chicago area. I was the last person still trying to log off and finish up as you were leaving. But, you gave me some fudge brownies out of a large bag of them, not that I deserved them at all. I hope it's a good sign to start dreaming about a teacher :)
I am so pleased they are helpful for you, yay! 🔥🎉🔥🎉🔥🎉 Erika and I are big believers in hands-on practice, not just reading. As for your pen, yay for using blockquote, and the cite looks great! Consider dropping the definitions in line 19 -- they aren't needed there. You can also move the <dfn> to go around just "bromide paper" inside of your H1. Great work!
Hello professor Jan and professor Lee. Thank you for your positive feedback and helpful way to code. I’m really enjoying this Challenges and your amazing hands on practice. I totally agree with you prof, Jan, you are so right and well said about the <dfn>tag and I will change that later on. Once again thank you :)
I’m going to catch up today. Read the email yesterday but couldn’t get into the codepen. So here it is. Not sure again if I miss something. I wonder how useful can be the <dfn> Element?
🔥🎉🔥🎉🔥🎉 There is no "behind," Ana! Work at your own pace. The purpose of <dfn> is to connect a defined term to some other content that defines it. In this case, since <dfn> occurs within the paragraph, we can assume the term is defined by the paragraph. Other possibilities are with the nearest dd/dt or <section>. You might consider a <p> inside of your <blockquote> for that reason. Great job and thanks for sharing!
Also running a bit behind like Bjarne :) I read all the other comments while marking up the HTML so I hope I didn't miss anything! https://codepen.io/hleffler/pen/YzNxzgx (please tell me it's perfect)
It's ALMOST perfect! 😁 Remember that <dfn> looks to the closest p, dd, or section for its definition. Here you have the term in its own sentence... so where is the definition? 😁
Looks like the wrong pen here, too. Don't forget to fork first, save to your account, and then make changes. You might be making changes and forgetting to fork. 🍴🍴🍴
PS -- I really really appreciate your comments explaining your thinking. Explaining thinking is a super important learning mechanism for you, and it's helpful feedback for Erika and me to understand if we're being clear in our teaching. Thank you!
https://codepen.io/vrenee26/pen/bGgRWEw
For this exercise I placed the text in a <blockquote> tag with 'bromide paper' in a <dfn> tag. The citation is outside of the <blockquote> in a <p> tag with the Book title in a <cite> tag and the HTML link reference is within an <a> tag.
PERFECT!!!
🔥🎉🔥🎉🔥🎉
🔥🎉🔥🎉🔥🎉
A bit behind and there excused the inline styling ;) used the figure/blockquote approach from earlier, this time linking to the original work from the cite attribute and tag. Most odd thing may be the question mark separated from the definition tag. And as browser style sheet italicizes the definition, I had to italicize the question mark as well, because kerning. Would probably not use inline markup for styling in real life, but that's not today's topic. https://codepen.io/oldrup/pen/ExZXdRG
Lovely job as always, Bjarne! Agreed that inline markup isn't the best, and the <i> around the ? isn't necessarily good either. But as long as you're aware of this, we'll call it good enough. Nice job and thanks for sharing!
I thought that the quote would be in a blockquote and then the citation would not be a part of the blockquote. I was not sure if I should use a footer as others have done but I did not think of that before looking here so I kept mine as is.
https://codepen.io/scloteau/pen/QWdgdxY?editors=1000
You got it! There are two methods. The WHATWG method, which you used, has no footer and places the credit and <cite> outside of <blockquote>. The MDN method put the credit and <cite> in a <footer>, and all of that is inside <blockquote>. You've done a great job following the WHATWG method. You might consider a <p> around the line with the citation, or you might put the URL in a cite attribute in the <blockquote> tag. Those are picky - this is a perfectly acceptable answer. Nice job!
https://codepen.io/jarchaff/pen/ExZXgdQ?editors=1000
I put all of the information inside of a blockquote, since it's a short passage from a book. Since bromide paper is the thing being defined, I put that inside the <dfn> tag. I separated the actual definition of the item for readability's sake, but am not sure if that is bad practice. Like with yesterday's challenge, I made the title of the item into a hyperlink with the URL from the end of the content. Originally, I had the author's name in the <cite> tag, but it looked off.
Nicely done! You separated the question (what is bromide paper?) from the rest of the paragraph, which makes this a little more scannable. You've got the cite right (YAY) - get rid of the extra </cite> after the author's name. You could put all of line 23 in a footer tag to bring it into alignment with what MDN recommends. Great work and thanks for sharing!
Thank you for the feedback!
My pleasure. Thank you for sharing and serving as a model for everyone else!
https://codepen.io/kldickenson/pen/rNjwLda
Love it Karen! You nailed it using figure and figcaption, and of course, everything else. Great job! 🎉🎉🎉
https://codepen.io/jinsbai/pen/NWdgNGb
Interesting approach for this! However, this is a direct quote from the book, so we probably wouldn't want to rearrange it quite this far. Check William's result below for one possible solution. In any case, you've got the <dfn> element in the right place, and you've (ironically) set this up for great markup with a description list - which you'll learn about tomorrow. Thanks for sharing!
This was a new set of tags for me! Thank you for a clear lesson!
https://codepen.io/idlehands1969/pen/GgpNjwm?editors=1000
Looks great! I would have put a <p> around the quoted paragraph, but it's not required, I don't think. I think you could just have <blockquote> as you did.
https://codepen.io/Soltekh/pen/XWVVyam
Nicely done! The <cite> around the author's name isn't valid, but the other elements look good. Great job!
i love your teaching :) thanks
Thank you! 💖
https://codepen.io/ilanaiguana/pen/ZEKXByb
🔥🎉🔥🎉🔥🎉 Looks fabulous, nice work!
The definition is in the parent paragraph so I took a cue from example 1 for this, all inside a blockquote element including a cite tag and link to the source material.
https://codepen.io/gipsi/pen/WNpKNvN
Excellent! <footer> around that line with the citation rather than <p> and you're all set!
Thank you! ☺️🌼
My day 4 response:
https://codepen.io/weberbj/pen/NWdZwmJ?editors=1000
Nicely placed <dfn> element! How about the citation - how should you format this? Thanks for sharing!
Day- 4 Challenge
https://codepen.io/kajal-28/pen/GRrLYpj
Hooray, you got the "bromide" defined! <q> is probably not the right element in this context -- sometimes quotes are just "". Consider <blockquote> for the whole passage, though, as we are quoting from a book. The <cite> is good -- perhaps wrap it around the book title instead of the author? Great job, thanks for sharing!
Okay, I will correct it. Thank you 😊
https://codepen.io/steph_pujols/pen/XWpxooK
🔥🔥🔥🎉🎉🎉 Spectacular job! Looks great!
https://codepen.io/pmmueller/pen/wvgYpWx
A <dfn> around "bromide paper" plus a figurized blockquote with a cited title.
Woo woo! Nicely done, as always!
My answer: https://codepen.io/romola/pen/VwPXKxY?editors=1000
I know this could be better, especially if I look at what others have done. I am just aiming to keep going in spite of lost time.
https://codepen.io/jen4web/pen/ZELxqxg?editors=1000 -- gave you a commented version back. You did great and got most of it right, but I rearranged a few things and made it more efficient for you. Too much to explain here. :-D
Thanks, Jen. I had a funny dream last night that you were wrapping up an in-person course in the Chicago area. I was the last person still trying to log off and finish up as you were leaving. But, you gave me some fudge brownies out of a large bag of them, not that I deserved them at all. I hope it's a good sign to start dreaming about a teacher :)
I'd share fudge brownies with you any day 🤣🤣🤣 So funny, thanks for sharing!
This what I came up with:
https://codepen.io/adamabundis/pen/eYgyEQq
🔥🎉🔥🎉🔥🎉 Great job, Adam! This looks fantastic 😄
https://codepen.io/dbakhshi/pen/oNBoWyM this challenges are very helpful and the samples are extremely informative and easy to follow the direction.
I am so pleased they are helpful for you, yay! 🔥🎉🔥🎉🔥🎉 Erika and I are big believers in hands-on practice, not just reading. As for your pen, yay for using blockquote, and the cite looks great! Consider dropping the definitions in line 19 -- they aren't needed there. You can also move the <dfn> to go around just "bromide paper" inside of your H1. Great work!
Hello professor Jan and professor Lee. Thank you for your positive feedback and helpful way to code. I’m really enjoying this Challenges and your amazing hands on practice. I totally agree with you prof, Jan, you are so right and well said about the <dfn>tag and I will change that later on. Once again thank you :)
You are very welcome. This is not easy stuff, and we're glad you're practicing. That's how you improve!
Thank you prof, Kramer. Well said.
Here is what I did.
https://codepen.io/brreaves/pen/XWpeYee?editors=1000
🔥🎉🔥🎉🔥🎉 PEFECT! You've formatted the quote as MDN advises, and your use of <dfn> is awesome. Great work and thanks for sharing!
I’m going to catch up today. Read the email yesterday but couldn’t get into the codepen. So here it is. Not sure again if I miss something. I wonder how useful can be the <dfn> Element?
https://codepen.io/athelas85/pen/ZELXvxG
🔥🎉🔥🎉🔥🎉 There is no "behind," Ana! Work at your own pace. The purpose of <dfn> is to connect a defined term to some other content that defines it. In this case, since <dfn> occurs within the paragraph, we can assume the term is defined by the paragraph. Other possibilities are with the nearest dd/dt or <section>. You might consider a <p> inside of your <blockquote> for that reason. Great job and thanks for sharing!
Also running a bit behind like Bjarne :) I read all the other comments while marking up the HTML so I hope I didn't miss anything! https://codepen.io/hleffler/pen/YzNxzgx (please tell me it's perfect)
PS there is no "behind". Self-paced is self-paced. Have fun as you can!
It's ALMOST perfect! 😁 Remember that <dfn> looks to the closest p, dd, or section for its definition. Here you have the term in its own sentence... so where is the definition? 😁
Looks like the wrong pen here, too. Don't forget to fork first, save to your account, and then make changes. You might be making changes and forgetting to fork. 🍴🍴🍴
William! Hooray for being first on a Sunday morning. You did GREAT on this! I think I would have marked this up the same way. Great job!
PS -- I really really appreciate your comments explaining your thinking. Explaining thinking is a super important learning mechanism for you, and it's helpful feedback for Erika and me to understand if we're being clear in our teaching. Thank you!