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.
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!
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.
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!
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.
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.
My Day-7 Challenge
https://codepen.io/kajal-28/pen/WNRVOWL
https://codepen.io/simbroo/pen/bGgoYNg?editors=1000
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!
Here is my answer: https://codepen.io/romola/pen/wvgxQyX?editors=1000
https://codepen.io/rileyclaycomb/pen/gOgvWMv
https://codepen.io/brreaves/pen/dyNqYeO?editors=1100
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.
https://codepen.io/jinsbai/pen/NWdwyqV
https://codepen.io/dbakhshi/pen/GRrOrar This activity was fun, today I learned some new codes!! <3
https://codepen.io/kldickenson/pen/GRrOZyL
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!
https://codepen.io/kelsey-van-ert/pen/WNRZgWq?editors=1000🧙🏽♀️ 🧙🏽♀️ 🧙🏽♀️ 🧙🏽♀️
https://codepen.io/scloteau/pen/xxgXpwZ?editors=1000