36 Comments

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.

Expand full comment

🔥🎉🔥🎉🔥🎉 Spectacular job as always! Thank you so much for sharing your excellent work.

Expand full comment

You're welcome! Thank you for providing the challenges 😉

Expand full comment

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.

Expand full comment

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! 🎉🎉🎉🔥🔥🔥

Expand full comment

My Day-7 Challenge

https://codepen.io/kajal-28/pen/WNRVOWL

Expand full comment

🔥🎉🔥🎉🔥🎉 Fantastic job!

Expand full comment

Good first pass! You really like details and summary 😁 See if you can fill in some of the other elements, like paragraphs.

Expand full comment

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!

Expand full comment

🔥🎉🔥🎉🔥🎉 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!

Expand full comment

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!

Expand full comment

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.

Expand full comment

🎉🎉🎉🔥🔥🔥 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!

Expand full comment

🔥🎉🔥🎉🔥🎉 LOVE the articles, footers, etc! Very nicely done -- this looks fantastic! Should be a </dd> on line 34 instead of </p>

Expand full comment

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.

Expand full comment

🔥🎉🔥🎉🔥🎉 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!

Expand full comment

I also get 5/5 on #8's quiz.

Expand full comment

🎊🎊🎊🔥🔥🔥

Expand full comment

🎊🎊🎊🔥🔥🔥 Nicely done! Remember <cite> goes around the work, not all of the blah blah in the Wikipedia reference on line 59. Great work!

Expand full comment

https://codepen.io/dbakhshi/pen/GRrOrar This activity was fun, today I learned some new codes!! <3

Expand full comment

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!!!

Expand full comment

I almost went overboard! I tried to focus on the semantics of the content and HTML tags.

Expand full comment

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! 🔥🎉🔥🎉🔥🎉

Expand full comment

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!

Expand full comment

🔥🎉🔥🎉🔥🎉 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!

Expand full comment

https://codepen.io/kelsey-van-ert/pen/WNRZgWq?editors=1000🧙🏽‍♀️ 🧙🏽‍♀️ 🧙🏽‍♀️ 🧙🏽‍♀️

Expand full comment

🔥🎉🔥🎉🔥🎉 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!

Expand full comment

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! 🔥🎉🔥🎉🔥🎉

Expand full comment
Comment deleted
April 7, 2021
Comment deleted
Expand full comment

🎉🔥🎉🔥🎉🔥 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! 🎉🔥🎉🔥🎉🔥

Expand full comment