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.
Hey there! Fabulous first pass at this. A few things to think about:
- you might consider visiting that link provided and looking at the formatting in the book. That might help you understand what's being communicated here.
- It's a book! Your cite for the book title is awesome. However... nothing seems quoted? 😁
- Think about the placement of the dt's and dd's -- what should be the term, and what matches it? (I tend to think of it as "the thing that was bought" and "the price." He also has a few little comments after some things.... might that go with the thing too?
- I'm assuming the <em>s are for styling? Remember HTML is for communicating meaning only, not for display. If you want something in italics, use CSS. We aren't too concerned with the look of the work, just the markup.
You are doing great work here, and this is not an easy problem -- you'll get this!
🎉🎉🎉🔥🔥🔥 Nicely done! Consider removing the <cite> around Thoreau to bring this in line with the WHATWG spec. Thanks for sharing -- you are rocking these challenges!
I put everything into a block quote, since it's a pretty large chunk of text. I wasn't sure if I was suppose to include his little asides, but I put them in the <dd>? I also used <em> to italicize them so that they are somewhat separated!
🔥🎉🔥🎉🔥🎉 Looks great again! Don't use <em> for italics -- this is emphasized text, as in something important. If you want italics, use <span class="italic"> or similar. <dd> for the asides was a great addition -- other people also did that. Great work!
I <figure> the text is a <blockquote> with a <figcaption> for the source, and that the list of materials is a <dl>, using a <div> to group the <dt> and <dd> elements.
I did not know that a <div> was allowed here in a <dl>, but it's perfect for the example, and that markup is ideal to style the list as a responsive grid layout.
Nice job! The blockquote, cite, and figure/figcaption are all excellent. In regards to the list, you used all <dt> but no <dd> -- in this case, the list is no different than an unordered list <ul> with <li> elements. How might you rework the list to better demonstrate the relationship between the item and its cost? Thank you so much for sharing your answer!
Your description list looks great - nice job! Consider reviewing <blockquote> and <q> - you have the right idea of quoting Walden, but not quite the right element for doing it. Great job and thanks for sharing all of these!
Fantastic job! This looks great. Love the dot leaders -- this is what was done in the text of Walden. There's a CSS method for doing this -- https://www.w3.org/Style/Examples/007/leaders.en.html -- somewhat like you did, but maybe this would help line everything up? Great work, as always!
I'm not sure if we learned that yet in I360 with Erika because I don't remember it, but that's a good tip! I think I'll go back and make that change. Thank you!
🎉🔥🎉🔥🎉🔥 Fantastic job, Brayden! Definition list looks great. You've set up this citation more like WHATWG than MDN, which is also good. Consider dropping the <cite> around Thoreau and leaving it around Walden, as you should cite works, not people. Nicely done and thanks for sharing!
For this one I revised the type quite a bit to create the lists. I placed all of the type into a <blockquote> tags since it was cited as a passage from a book. Then a breakdown of the cost for the house, inside of a <dl> tag with the item in a <dt> tag and the cost in a <dd> tag. Then the body texts in <p> tags with the tight shingled and plastered house description listed as another <dl> with each characteristic as a <dd> tag. Lastly, the citation is a <p> tag with <cite> and an 'href' to the URL provided. Also, the URL is listed as a citation attribute in the original <blockquote> tag to begin the post.
Vanessa!!! LOVE your blockquote and cite - following the WHATWG rules. The first DL looks awesome! You have an interesting idea for the 2nd DL. I agree that is a list of amenities, but if you were going to mark this up as a list, you might consider making it an unordered list (UL) instead. It's a list of stuff in no particular order, which fits that definition. Great job!!! 🎉🔥🎉🔥🎉🔥
WOW 🎉🎉🎉🔥🔥🔥 LOVE this answer -- also, I had not considered that the first paragraph may indeed be the definition of a "tight shingled and plastered house!" Great job with this -- hope other readers will take a peek at your work.
Side note -- love your styling here too. You laid this out with inline-block, and there is nothing wrong with that. You could also have chosen Flexbox, setting the <div> elements as the rows/flex container/parents, and the dd/dt as the children/flex items. Well done!
Nicely done, Jinshuo! Love the blockquote placement, and you've got a good handle on the description list. I think some of the items aren't paired quite correctly, though. This is mostly a list of items and their price, so the <dt> would be "one thousand old brick" and the <dd> would be "4.00." But you have a good sense of how to mark up a list here -- thank you for sharing your pen!
Since this is a longer passage from a book, I put the whole thing inside of a blockquote.
The narrator described his definition of a 'tight shingled and plastered house', so I put that phrase in a <dfn> tag.
I separated it into parts for readability with <p> and used <dl> for the long list of items the narrator describes. I put each item name inside the <dt> tag, and the description(s) inside <dd> tags. I <cite> the title of the book at the end, and turn it into a hyperlink of the provided url.
WOO WOO 🎉🎉🎉 You did GREAT! The only tiny picky thing might be a footer around your entire citation (Walden, Thoreau), but you got everything else. Congrats and thanks for sharing!
WOO WOO 🎉🎉🎉 Another awesome pen, William! Love that you've used Flexbox to get the list on one line. See the big spaces in between? Notice that you couldn't quite tighten those? Those are default margins placed on the <dd> by the browser. Set the <dd> margin to 0 and your spacing will tighten up nicely, if that's what you want. Great job and thanks for sharing!
https://codepen.io/kelsey-van-ert/pen/abpyzJJ?editors=1000 this is a tricky one🧐 at least for me.
Hey there! Fabulous first pass at this. A few things to think about:
- you might consider visiting that link provided and looking at the formatting in the book. That might help you understand what's being communicated here.
- It's a book! Your cite for the book title is awesome. However... nothing seems quoted? 😁
- Think about the placement of the dt's and dd's -- what should be the term, and what matches it? (I tend to think of it as "the thing that was bought" and "the price." He also has a few little comments after some things.... might that go with the thing too?
- I'm assuming the <em>s are for styling? Remember HTML is for communicating meaning only, not for display. If you want something in italics, use CSS. We aren't too concerned with the look of the work, just the markup.
You are doing great work here, and this is not an easy problem -- you'll get this!
https://codepen.io/scloteau/pen/KKaqOaK?editors=1000
🎉🎉🎉🔥🔥🔥 Nicely done! Consider removing the <cite> around Thoreau to bring this in line with the WHATWG spec. Thanks for sharing -- you are rocking these challenges!
My Day 5 response:
https://codepen.io/weberbj/pen/jOyjaoj?editors=1000
Great description list! 🎉🎉🎉🔥🔥🔥 How about formatting the citation at the end? Thanks for sharing!
Day 5 Challange
https://codepen.io/kajal-28/pen/MWJMqgw
🎉🎉🎉🔥🔥🔥 Lovely job! You've done great work with blockquote and with the description list!
Thank you 😊🥰
https://codepen.io/trenadee/pen/bGgPgdv
I put everything into a block quote, since it's a pretty large chunk of text. I wasn't sure if I was suppose to include his little asides, but I put them in the <dd>? I also used <em> to italicize them so that they are somewhat separated!
🔥🎉🔥🎉🔥🎉 Looks great again! Don't use <em> for italics -- this is emphasized text, as in something important. If you want italics, use <span class="italic"> or similar. <dd> for the asides was a great addition -- other people also did that. Great work!
https://codepen.io/pmmueller/pen/zYNMGbW
I <figure> the text is a <blockquote> with a <figcaption> for the source, and that the list of materials is a <dl>, using a <div> to group the <dt> and <dd> elements.
I did not know that a <div> was allowed here in a <dl>, but it's perfect for the example, and that markup is ideal to style the list as a responsive grid layout.
🎉🎉🎉🔥🔥🔥 Beautifully done! Love the styling. It looks great. Yes, the <div> in the <dl> was new to me too, but that's what the spec says!
https://codepen.io/steph_pujols/pen/xxgymor
Nice job! The blockquote, cite, and figure/figcaption are all excellent. In regards to the list, you used all <dt> but no <dd> -- in this case, the list is no different than an unordered list <ul> with <li> elements. How might you rework the list to better demonstrate the relationship between the item and its cost? Thank you so much for sharing your answer!
https://codepen.io/rileyclaycomb/pen/KKaQWxx
Your description list looks great - nice job! Consider reviewing <blockquote> and <q> - you have the right idea of quoting Walden, but not quite the right element for doing it. Great job and thanks for sharing all of these!
My answer is here: https://codepen.io/romola/pen/zYNjYbE?editors=1100. I should have done something with the remarks about some of the items but it is late.
Fantastic job! This looks great. Love the dot leaders -- this is what was done in the text of Walden. There's a CSS method for doing this -- https://www.w3.org/Style/Examples/007/leaders.en.html -- somewhat like you did, but maybe this would help line everything up? Great work, as always!
Tell me what you think! :) https://codepen.io/hleffler/pen/ExZwpoJ
🎉🔥🎉🔥🎉🔥 WOO WOO! Nicely done, Haley! You get a... PERFECT! 🎉🔥🎉🔥🎉🔥
By the way, instead of using a comment on those second dd instances, you could use a selector like this instead:
.items dd + dd {
font-style: italic;
}
It will do the same thing, and no extra class 😁
HURRAAAAY!!
I'm not sure if we learned that yet in I360 with Erika because I don't remember it, but that's a good tip! I think I'll go back and make that change. Thank you!
The + is called the adjacent sibling combinator. See https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator -- there are all kinds of handy selectors out there that are super helpful. I have a LinkedIn Learning course on this topic. You might get free access through IU or your local library. https://www.linkedin.com/learning/css-selectors-2
Here is what I did.
https://codepen.io/brreaves/pen/QWdqxQE?editors=1000
🎉🔥🎉🔥🎉🔥 Fantastic job, Brayden! Definition list looks great. You've set up this citation more like WHATWG than MDN, which is also good. Consider dropping the <cite> around Thoreau and leaving it around Walden, as you should cite works, not people. Nicely done and thanks for sharing!
https://codepen.io/vrenee26/pen/QWdMYqG
For this one I revised the type quite a bit to create the lists. I placed all of the type into a <blockquote> tags since it was cited as a passage from a book. Then a breakdown of the cost for the house, inside of a <dl> tag with the item in a <dt> tag and the cost in a <dd> tag. Then the body texts in <p> tags with the tight shingled and plastered house description listed as another <dl> with each characteristic as a <dd> tag. Lastly, the citation is a <p> tag with <cite> and an 'href' to the URL provided. Also, the URL is listed as a citation attribute in the original <blockquote> tag to begin the post.
Vanessa!!! LOVE your blockquote and cite - following the WHATWG rules. The first DL looks awesome! You have an interesting idea for the 2nd DL. I agree that is a list of amenities, but if you were going to mark this up as a list, you might consider making it an unordered list (UL) instead. It's a list of stuff in no particular order, which fits that definition. Great job!!! 🎉🔥🎉🔥🎉🔥
https://codepen.io/kldickenson/pen/zYNdRvP
WOW 🎉🎉🎉🔥🔥🔥 LOVE this answer -- also, I had not considered that the first paragraph may indeed be the definition of a "tight shingled and plastered house!" Great job with this -- hope other readers will take a peek at your work.
Side note -- love your styling here too. You laid this out with inline-block, and there is nothing wrong with that. You could also have chosen Flexbox, setting the <div> elements as the rows/flex container/parents, and the dd/dt as the children/flex items. Well done!
I was going to try to create dot leaders using this method: https://www.w3.org/Style/Examples/007/leaders.en.html
But didn't get to it.
Dot leaders are super cool! That would have most closely mirrored what was shown in the book as well.
https://codepen.io/jinsbai/pen/poRwmRw
I also get 4/4 in today's quiz.
🎉🎉🎉🔥🔥🔥 You are ROCKING those quizzes! Great job!
Nicely done, Jinshuo! Love the blockquote placement, and you've got a good handle on the description list. I think some of the items aren't paired quite correctly, though. This is mostly a list of items and their price, so the <dt> would be "one thousand old brick" and the <dd> would be "4.00." But you have a good sense of how to mark up a list here -- thank you for sharing your pen!
https://codepen.io/jarchaff/pen/oNBwJaM?editors=1000
Since this is a longer passage from a book, I put the whole thing inside of a blockquote.
The narrator described his definition of a 'tight shingled and plastered house', so I put that phrase in a <dfn> tag.
I separated it into parts for readability with <p> and used <dl> for the long list of items the narrator describes. I put each item name inside the <dt> tag, and the description(s) inside <dd> tags. I <cite> the title of the book at the end, and turn it into a hyperlink of the provided url.
https://codepen.io/jarchaff/pen/GRrEzWg?editors=1000
My first link did not work but I think this one does!
WOO WOO 🎉🎉🎉 You did GREAT! The only tiny picky thing might be a footer around your entire citation (Walden, Thoreau), but you got everything else. Congrats and thanks for sharing!
WOO WOO 🎉🎉🎉 Another awesome pen, William! Love that you've used Flexbox to get the list on one line. See the big spaces in between? Notice that you couldn't quite tighten those? Those are default margins placed on the <dd> by the browser. Set the <dd> margin to 0 and your spacing will tighten up nicely, if that's what you want. Great job and thanks for sharing!