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.
You might like the end of unit challenges then. A little feedback on this one --
HTML lines 20 and 26 - you have the <h3> inside the <ul> -- this is not permitted. The H3 must be outside the UL, so consider reordering these.
For the 4 houses of Hogwarts --
- same issue with the H2
- It's fine to put the H3 and P inside of the LI. However, there might be a better way to mark this up. What about a description list or a details/summary pair?
- Do these houses need to be in a specific order? If not, use UL instead of OL.
- How should you mark up the Sorting Hat poem in the middle?
This one was a lot of fun because of the topic. :) I went a little crazy and added come styling as well. I really like the abbreviation tag! Since I am newer to this, it was really interesting and nice to know that was possible. I think it's really useful to have the title display on hover.
For my code, I hid the grades and house descriptions because I thought that made it look neat. I also added the abbreviation tags to the grades, but not sure if that's correct, either. Right or wrong, I still had fun!
🔥🎉🔥🎉🔥🎉 Code looks fantastic! You put periods in your ID name (id="O.W.L."). I guess that works (?), but I've never done it before. You might want to avoid those in the future as it's not often done on other sites. Other than that, the styling looks good and the markup is great -- nice work!
Fantastic! You have one extra " at the end of line 38 that is changing the color of the code, but the display seems to be OK. Everything else looks fantastic -- effective use of details and summary, dl/dt/dd, and abbr/dfn. Great work as always!
Thanks. I corrected that ". Codepen insists on putting in a double quote that then needs to be corrected. I guess inline CSS is not the greatest thing to do but it seemed expedient for the exercise. I never got back to thinking about the absolute vs. relative comment you made on my last exercise. I am still pondering it a little.
🎉🎉🎉🔥🔥🔥 Is a muggle an abbreviation or a term that needs defining?... Lovely job with the abbr/dfn pairs! For the grades, maybe consider a description list or a details/summary pair. For the house names, if you want them bold, consider doing that in CSS instead of using <b>. Great job with this!
For this exercise, I placed the OWL & NEWT definitions in <dfn> tags and gave both of the acronyms <abbr> tags. I contemplated putting the definition of Hogwarts in a <dfn> tag, but ultimately decided against it, since it wasn't an acronym. Next up I put the grade lists into <dl> tags with the grade value in a <dt> tag and the grade abbreviation in the <dd> tag. With the houses, those also went into a <dl> tag. Each house in a <dt> tag and the description in a <dd> tag. For the Gryffindor quote, I placed that in a separate <p> tag with a <q> tag. The citation is below in the <footer> tag at the end of the page. Both mentions of the wiki page are linked through <a> tags. The <cite> tag is placed with the first mention and the for the 2nd I edited that to the words 'here' and the corresponding <a> tag & href.
🔥🎉🔥🎉🔥🎉 Nicely done, Vanessa! Feel free to fill in the other HTML tags you might want to use here as well. Hogwarts could go in a <dfn> tag - this is for definitions, and lots of things need defining. <abbr> is the one for abbreviations and acronyms, which would not be appropriate for Hogwarts. Thank you so much for sharing!
YAY! 🔥🎉🔥🎉🔥🎉 That's the point of all of this practice. So glad you enjoyed it. Oooh, a summary/details with a description list - nicely done! Not sure I'd use <dfn> in the h4's -- but it's an interesting idea. Great work!!!
Nicely done, Karen! This looks similar to Diana's answer above. So glad you focused on the semantics -- that is the point of HTML! Then you can hang the CSS on the semantic markup and minimize all of the <divs> you think you need to add. Nice work here, love the description list in the summary/details pane! 🔥🎉🔥🎉🔥🎉
I started by encasing a large portion of this in a <blockquote> since near the bottom, we see...'provided by Wikipedia'. I don't whether or not this is paraphrased, but I felt like it was a safe assumption to make. Lots of <dfn> tags throughout, some <p> tags sprinkled around for readability , <abbr> tags for all the acronyms (a lot!), 2 separate <dl> tags for both 'Pass' and 'Fail' grades, a <details> tag for each of the house descriptions (I couldn't resist styling these), and <cite> tags for all the references to book/movie titles...this is some of the styling that I did, and I surely missed some things, too. Oh, and I included a footer this time, but I'm not sure if I'm using it appropriately!
🔥🎉🔥🎉🔥🎉 Jade, I LOVE LOVE LOVE the details panels for the houses! What a great idea, combining the house colors with the appropriate panel. You've done a great job on the markup as well. The footer is an excellent idea -- we'll cover that later this month. Love what you've done -- great work!
🔥🎉🔥🎉🔥🎉 Great job again! Don't forget to close </details> at the end - it currently "doesn't work" with what you have. Consider a <dfn> around Ordinary Wizarding Level, like you've done with the NEWTS. Great work on this!
🎉🔥🎉🔥🎉🔥 Nice job again, William!!! BONUS POINTS for the article, section, and aside elements, and for your excellent comments explaining your thinking! Your abbreviations and definitions all look great. I love the idea of the grades in an aside (and the styling is nicely done too). Perhaps a paragraph around the descriptions of each house? The details/summary idea at the end is an interesting one, as this is something of a disclaimer. Still wondering about "Harry Potter series" and "Fantastic Beasts films" and whether these are deserving of a <cite> -- the docs are certainly unclear on this. Thank you so much for sharing once again! 🎉🔥🎉🔥🎉🔥
https://codepen.io/pmmueller/pen/abpQXNJ
It begins with an h2 and plain paragraphs with a few definitions and abbreviations. In my markup the grades are a description list.
The four houses are another heading, and each description is hidden in a details/summary.
The additional information was put in a footer.
🔥🎉🔥🎉🔥🎉 Spectacular job as always! Thank you so much for sharing your excellent work.
You're welcome! Thank you for providing the challenges 😉
https://codepen.io/weberbj/pen/ExZBbry?editors=1000
This one was interesting because I've never seen definitions, there are a lot of ways to do it so Ill look for some of the more challenging ones.
You might like the end of unit challenges then. A little feedback on this one --
HTML lines 20 and 26 - you have the <h3> inside the <ul> -- this is not permitted. The H3 must be outside the UL, so consider reordering these.
For the 4 houses of Hogwarts --
- same issue with the H2
- It's fine to put the H3 and P inside of the LI. However, there might be a better way to mark this up. What about a description list or a details/summary pair?
- Do these houses need to be in a specific order? If not, use UL instead of OL.
- How should you mark up the Sorting Hat poem in the middle?
- don't forget to close your OL at the end.
thanks for sharing! 🎉🎉🎉🔥🔥🔥
My Day-7 Challenge
https://codepen.io/kajal-28/pen/WNRVOWL
🔥🎉🔥🎉🔥🎉 Fantastic job!
https://codepen.io/simbroo/pen/bGgoYNg?editors=1000
Good first pass! You really like details and summary 😁 See if you can fill in some of the other elements, like paragraphs.
https://codepen.io/trenadee/pen/mdRYpLN
This one was a lot of fun because of the topic. :) I went a little crazy and added come styling as well. I really like the abbreviation tag! Since I am newer to this, it was really interesting and nice to know that was possible. I think it's really useful to have the title display on hover.
For my code, I hid the grades and house descriptions because I thought that made it look neat. I also added the abbreviation tags to the grades, but not sure if that's correct, either. Right or wrong, I still had fun!
🔥🎉🔥🎉🔥🎉 Code looks fantastic! You put periods in your ID name (id="O.W.L."). I guess that works (?), but I've never done it before. You might want to avoid those in the future as it's not often done on other sites. Other than that, the styling looks good and the markup is great -- nice work!
Here is my answer: https://codepen.io/romola/pen/wvgxQyX?editors=1000
Fantastic! You have one extra " at the end of line 38 that is changing the color of the code, but the display seems to be OK. Everything else looks fantastic -- effective use of details and summary, dl/dt/dd, and abbr/dfn. Great work as always!
Thanks. I corrected that ". Codepen insists on putting in a double quote that then needs to be corrected. I guess inline CSS is not the greatest thing to do but it seemed expedient for the exercise. I never got back to thinking about the absolute vs. relative comment you made on my last exercise. I am still pondering it a little.
https://codepen.io/rileyclaycomb/pen/gOgvWMv
🎉🎉🎉🔥🔥🔥 Is a muggle an abbreviation or a term that needs defining?... Lovely job with the abbr/dfn pairs! For the grades, maybe consider a description list or a details/summary pair. For the house names, if you want them bold, consider doing that in CSS instead of using <b>. Great job with this!
https://codepen.io/brreaves/pen/dyNqYeO?editors=1100
🔥🎉🔥🎉🔥🎉 LOVE the articles, footers, etc! Very nicely done -- this looks fantastic! Should be a </dd> on line 34 instead of </p>
https://codepen.io/vrenee26/pen/XWpVpKV
For this exercise, I placed the OWL & NEWT definitions in <dfn> tags and gave both of the acronyms <abbr> tags. I contemplated putting the definition of Hogwarts in a <dfn> tag, but ultimately decided against it, since it wasn't an acronym. Next up I put the grade lists into <dl> tags with the grade value in a <dt> tag and the grade abbreviation in the <dd> tag. With the houses, those also went into a <dl> tag. Each house in a <dt> tag and the description in a <dd> tag. For the Gryffindor quote, I placed that in a separate <p> tag with a <q> tag. The citation is below in the <footer> tag at the end of the page. Both mentions of the wiki page are linked through <a> tags. The <cite> tag is placed with the first mention and the for the 2nd I edited that to the words 'here' and the corresponding <a> tag & href.
🔥🎉🔥🎉🔥🎉 Nicely done, Vanessa! Feel free to fill in the other HTML tags you might want to use here as well. Hogwarts could go in a <dfn> tag - this is for definitions, and lots of things need defining. <abbr> is the one for abbreviations and acronyms, which would not be appropriate for Hogwarts. Thank you so much for sharing!
https://codepen.io/jinsbai/pen/NWdwyqV
I also get 5/5 on #8's quiz.
🎊🎊🎊🔥🔥🔥
🎊🎊🎊🔥🔥🔥 Nicely done! Remember <cite> goes around the work, not all of the blah blah in the Wikipedia reference on line 59. Great work!
https://codepen.io/dbakhshi/pen/GRrOrar This activity was fun, today I learned some new codes!! <3
YAY! 🔥🎉🔥🎉🔥🎉 That's the point of all of this practice. So glad you enjoyed it. Oooh, a summary/details with a description list - nicely done! Not sure I'd use <dfn> in the h4's -- but it's an interesting idea. Great work!!!
https://codepen.io/kldickenson/pen/GRrOZyL
I almost went overboard! I tried to focus on the semantics of the content and HTML tags.
Nicely done, Karen! This looks similar to Diana's answer above. So glad you focused on the semantics -- that is the point of HTML! Then you can hang the CSS on the semantic markup and minimize all of the <divs> you think you need to add. Nice work here, love the description list in the summary/details pane! 🔥🎉🔥🎉🔥🎉
https://codepen.io/jarchaff/pen/VwPMVbw?editors=1100
I love Harry Potter, so this was great.
I started by encasing a large portion of this in a <blockquote> since near the bottom, we see...'provided by Wikipedia'. I don't whether or not this is paraphrased, but I felt like it was a safe assumption to make. Lots of <dfn> tags throughout, some <p> tags sprinkled around for readability , <abbr> tags for all the acronyms (a lot!), 2 separate <dl> tags for both 'Pass' and 'Fail' grades, a <details> tag for each of the house descriptions (I couldn't resist styling these), and <cite> tags for all the references to book/movie titles...this is some of the styling that I did, and I surely missed some things, too. Oh, and I included a footer this time, but I'm not sure if I'm using it appropriately!
🔥🎉🔥🎉🔥🎉 Jade, I LOVE LOVE LOVE the details panels for the houses! What a great idea, combining the house colors with the appropriate panel. You've done a great job on the markup as well. The footer is an excellent idea -- we'll cover that later this month. Love what you've done -- great work!
https://codepen.io/kelsey-van-ert/pen/WNRZgWq?editors=1000🧙🏽♀️ 🧙🏽♀️ 🧙🏽♀️ 🧙🏽♀️
🔥🎉🔥🎉🔥🎉 Great job again! Don't forget to close </details> at the end - it currently "doesn't work" with what you have. Consider a <dfn> around Ordinary Wizarding Level, like you've done with the NEWTS. Great work on this!
https://codepen.io/scloteau/pen/xxgXpwZ?editors=1000
WOO WOO FIRST 🔥🎉🔥🎉🔥🎉
Wondering about some of those references to Harry Potter and Fantastic Beasts in the first paragraph -- <cite> elements maybe?
HOORAY for the abbr's in the 3rd paragraph! Consider combining these with <dfn>, but what you have here is perfectly acceptable.
LOVE the details/summary idea for the houses!
BONUS POINTS for <small> at the bottom! Perhaps a <cite> for the website?
Fantastic job, Servane! 🔥🎉🔥🎉🔥🎉
🎉🔥🎉🔥🎉🔥 Nice job again, William!!! BONUS POINTS for the article, section, and aside elements, and for your excellent comments explaining your thinking! Your abbreviations and definitions all look great. I love the idea of the grades in an aside (and the styling is nicely done too). Perhaps a paragraph around the descriptions of each house? The details/summary idea at the end is an interesting one, as this is something of a disclaimer. Still wondering about "Harry Potter series" and "Fantastic Beasts films" and whether these are deserving of a <cite> -- the docs are certainly unclear on this. Thank you so much for sharing once again! 🎉🔥🎉🔥🎉🔥