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.
Thank you SO MUCH for posting, Karen! 🎉🎉🎉🔥🔥🔥 I hope everyone will look at your example -- it's excellent! Love your (correct!) use of <article> and <footer> as well. Great stuff!
🎉🎉🎉🔥🔥🔥 Nicely done! These look good. Not sure that "Buy Me a Coffee" needs a <cite> around it, as it's just a website. We are not quoting them in some way. But otherwise, awesome! Thanks for sharing!
Caffeine formula got <sub> tags for each element. I gave the two footnotes <sup> tags and attempted to link them with bidirectional linking in the <footer> tag. For the superscript of the 10th, I placed the "th" in a span and styled it in CSS with vertical-align: super & px size of 11.
Nicely done, Vanessa! 🎉🎉🎉🔥🔥🔥 You've done a great job with the sups and subs in the document. I think for 10th, you might consider <sup> because that's often how it's written. However, the CSS method is probably OK too. Don't forget to drop in <p> elements around paragraphs -- they are important too, although we've not discussed them here. Great work!
🎉🎉🎉🔥🔥🔥 Nicely done, Servane! Your sups and subs look great. Have a look at Karen Dickenson's pen below for a great example of markup for the footnotes. Excellent work!
Hopefully I caught all the <sub> and <sup> possibilities here! For the footnotes, I created anchors. If I am reading something and the footnotes in the text do not take me directly to the note, I get a little irritated, so I thought I would include that here.
🎉🎉🎉🔥🔥🔥 Nicely done once again, Jade! Consider using an ordered list for the footnotes instead of paragraphs (see my comments to William below). But that's a minor picky thing - everything else looks great. Thanks for sharing!
🎉🎉🎉🔥🔥🔥 Great job once again, William! Your code looks fantastic. I agree with Karen (below) that your footnotes might be better marked up in an ordered list rather than paragraphs. It's a list of notes that are in the order they appeared in the document... thus <ol> rather than <p>. But this is minor -- from a usability perspective, I think you have done us a great service by linking the reference to the note, which I would consider very important. Thanks for sharing again!
https://codepen.io/kldickenson/pen/abpEjXP
Thank you SO MUCH for posting, Karen! 🎉🎉🎉🔥🔥🔥 I hope everyone will look at your example -- it's excellent! Love your (correct!) use of <article> and <footer> as well. Great stuff!
And putting square brackets around the footnotes so that they stand out more and make a bigger click target, good for accessibility.
Excellent suggestion, thanks!
I have a LOT of experience with footnotes (web development at a University).
Day 10 challenge - now I'm off to get a coffee! ☕🥰
https://codepen.io/gipsi/pen/KKWQNva
🤣🤣🤣 So glad we can inspire you! Your markup looks great. The <strong> and <em> add quite a bit to the voice of the document! Nicely done 🎉🎉🎉🔥🔥🔥
Thank you! I'm enjoying your course a lot whilst learning so many new things.
Day 10 Challenge
https://codepen.io/kajal-28/pen/PopoYWv
🎉🎉🎉🔥🔥🔥 Nicely done! These look good. Not sure that "Buy Me a Coffee" needs a <cite> around it, as it's just a website. We are not quoting them in some way. But otherwise, awesome! Thanks for sharing!
Thanks for the feedback👍
This could have been taken further, but here is my answer: https://codepen.io/romola/pen/VwPJrMp
🔥🔥🔥🎉🎉🎉 Nicely done!!! Love the idea of defining who Jen and Erika are -- that had not occurred to me. Great stuff as always 😁
https://codepen.io/pmmueller/pen/QWdzjYO
The footnotes are in a <footer> and marked up as a <dl> 😉
🔥🎉🔥🎉🔥🎉 Fantastic! 😁
Erica and you got some coffee coming your way 🤗👋🏻
Thank you so much - we very much appreciate it! ☕️☕️☕️☕️☕️
https://codepen.io/athelas85/pen/gOgdEmm
I think ive got them all :D (like pokemons xD)
🎉🎉🎉🔥🔥🔥 funny!!! I think you missed the O in the caffeine chemical formula, but you got almost all of them - great job!
Oh yes! I don’t know why I thought that was a 0 🙈
https://codepen.io/rileyclaycomb/pen/bGgLRVb
🎉🎉🎉🔥🔥🔥 Looking good, Riley - on fire today!
https://codepen.io/vrenee26/pen/zYNREXN
Caffeine formula got <sub> tags for each element. I gave the two footnotes <sup> tags and attempted to link them with bidirectional linking in the <footer> tag. For the superscript of the 10th, I placed the "th" in a span and styled it in CSS with vertical-align: super & px size of 11.
Nicely done, Vanessa! 🎉🎉🎉🔥🔥🔥 You've done a great job with the sups and subs in the document. I think for 10th, you might consider <sup> because that's often how it's written. However, the CSS method is probably OK too. Don't forget to drop in <p> elements around paragraphs -- they are important too, although we've not discussed them here. Great work!
https://codepen.io/scloteau/pen/WNRMOQb?editors=1000
🎉🎉🎉🔥🔥🔥 Nicely done, Servane! Your sups and subs look great. Have a look at Karen Dickenson's pen below for a great example of markup for the footnotes. Excellent work!
https://codepen.io/kelsey-van-ert/pen/VwPyVzR?editors=1000
🎉🎉🎉🔥🔥🔥 WOO WOO! Love it - well done!
https://codepen.io/jarchaff/pen/jOyYevE?editors=1000
Hopefully I caught all the <sub> and <sup> possibilities here! For the footnotes, I created anchors. If I am reading something and the footnotes in the text do not take me directly to the note, I get a little irritated, so I thought I would include that here.
🎉🎉🎉🔥🔥🔥 Nicely done once again, Jade! Consider using an ordered list for the footnotes instead of paragraphs (see my comments to William below). But that's a minor picky thing - everything else looks great. Thanks for sharing!
Ah, that totally makes sense, thank you for the feedback!
https://codepen.io/jinsbai/pen/OJWQpRW
🎉🎉🎉🔥🔥🔥 Great job once again, William! Your code looks fantastic. I agree with Karen (below) that your footnotes might be better marked up in an ordered list rather than paragraphs. It's a list of notes that are in the order they appeared in the document... thus <ol> rather than <p>. But this is minor -- from a usability perspective, I think you have done us a great service by linking the reference to the note, which I would consider very important. Thanks for sharing again!