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!
I enjoyed this one as I do always. I was not able to get a background image to work, nor was I able to find a work-around on the web. It worked in my browser through VSCode on my computer. Thoughts?
CodePen does not permit you to post images unless you have the pro (paid) version. You could host your image somewhere else, then use an absolute URL to have it display that way. FontAwesome loves their <i> element, but this isn't the correct use of it. I always recommend changing it to <span>, which is a better choice for the icons. Nice work as always!
I think Github isn't a hosting service, so that won't work for you. Maybe if you publish to GH Pages and try that image URL instead from there. There's also a few online services that will host images for free, at least in the short term. Try https://imgbb.com/ for example.
🎉🎉🎉🔥🔥🔥 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).
I enjoyed this one as I do always. I was not able to get a background image to work, nor was I able to find a work-around on the web. It worked in my browser through VSCode on my computer. Thoughts?
https://codepen.io/idlehands1969/pen/bNVWzxo?editors=1100
CodePen does not permit you to post images unless you have the pro (paid) version. You could host your image somewhere else, then use an absolute URL to have it display that way. FontAwesome loves their <i> element, but this isn't the correct use of it. I always recommend changing it to <span>, which is a better choice for the icons. Nice work as always!
I had uploaded the image I wanted to my github repository and was using the link from that... wouldn't that be an absolute URL?
Thanks for the heads up on the <i> element.
I think Github isn't a hosting service, so that won't work for you. Maybe if you publish to GH Pages and try that image URL instead from there. There's also a few online services that will host images for free, at least in the short term. Try https://imgbb.com/ for example.
Thanks!
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!