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.
Awesome! You've done well with figure, figcaption, and blockquote. Cite should go around the title of the book only (more on this tomorrow). And q should not be used for conversations, so you should take that out of the discussions with Alice and the Queen. Great work!
I figured since the quote was one sizable portion from the same book it would all be together in one <blockquote>. Then separating the phrases into <p> tags. I also used <p> & <em> tags for the citation, but I imagine <cite> could work here also.
Nice Vanessa! The blockquote is excellent. Em is for emphasized text. Imagine you and I are having a conversation and I say "DON'T put your hand on that hot stove!" DON'T might be marked up with the em tag. (Strong would be "THE HOUSE IS ON FIRE!") Cite can definitely be used - we'll talk about that extensively tomorrow! Great job and thanks for sharing.
Since the quote is a conversation from a published work, I opted not to cite the speakers within the quotation. I added <cite> to the credit line and moved it into a <footer> to follow the MDN formatting.
Fantastic attempt! Remember that <q> is not for conversations -- even a quoted conversation from a book. Check some of the other answers below for a few ideas of how to fix this.
I encompassed all of the text here inside of a blockquote, since it's a long passage from a book. I then used two separate paragraph elements, one for Alice's dialogue and one for the Queen's. Finally, I used a dash and a citation at the end of the text, where the book name and author are mentioned.
Fantastic! You've got the cite in exactly the right spot. You've placed the cite inside of the blockquote, which is what MDN describes. Consider swapping <footer> for the paragraph around the citation. Great job!
Great first pass at this! Blockquote is an excellent choice for surrounding this passage. However, those are likely paragraphs in the passage, so maybe you want to re-think your markup there? The cite thing we'll talk about tomorrow, but you are on the right track. Thanks so much for sharing!
To me, it seemed natural to contain the entire quote in a single blockquote with two paragraphs, one for Alice, one for the Queen. Figure and cite tags not something I usually use, but they seemed appropriate after peeking at the MDN doc on blockquote. Applied simple styling to easier distinguish between html elements. Did not apply the q element. Unsure if that was a mistake. https://codepen.io/oldrup/pen/QWdpRdQ
Good stuff! You'll learn more about <cite> on day 3 and revisit this pen then. Meanwhile, look at the examples for <blockquote> again. You have the right element, but your citation isn't quite in the right place. (And congrats on not falling into the <q> trap!)
Close! The <blockquote> tag is placed correctly if you're following WHATWG guidelines. The <cite> probably needs to be tightened up a bit to the book title only - but we do more with that in Day 3, where we talk about this in detail. You didn't fall into the trap of
using <q> around the conversation - great job for that! Feel free to include other HTML elements too, like <p>. Thanks so much for sharing!
To start with I considered whether this needed either <blockquote> or <q> as it is a conversation. Then decided, as it is a fair size passage from a book, to use <blockquote>.
🎉🎉🎉🔥🔥🔥 YAY! This was going to be my feedback to you from the first. (I started on something, but got a phone call and got all distracted 😁). You nailed it all! Great work 😁
Good start with this! There are two paragraphs in the quote. You may also want to think about the placement of <cite>. You're on the right path, but the tag isn't quite placed correctly. Great job with marking up the blockquote, though! 🔥🔥🔥🎉🎉🎉
I used the block quote around the entire section, but added paragraphs for each separate quote. I also decided to try and throw in a cite, but it could be incorrect. I will have to keep going with the next day of challenges to get that down the right way!
🌈🌈🌈🦄🦄🦄 Nicely done! Your <cite> tag should start with Alice, rather than "Passage" (since the word Passage isn't part of the work). But that is SUPER picky. Looks great -- thanks for sharing!
Both answers look excellent and do a great job of explaining the different (conflicting) approaches. My only suggested would be to format the paragraphs inside of the <blockquote>. In English, generally speaking, a conversation like this is assigned one paragraph per speaker. Also, I disagree with Gothe in the tech space. Retraining every 5 years would be a luxury! 🤣
Excellent first pass at this! You seem to be following the MDN citation model with the <cite> inside of the <blockquote>, which is perfectly acceptable.
A few things --
- just because it's in a <blockquote> doesn't mean you can't use <p>. Feel free to mark up the paragraphs from the book here.
- <cite> is an inline element, while <p> is a block element. There's a few rules about nesting these.
TOTALLY OK:
Block inside of block (like <p> inside <blockquote>)
Inline inside of block (like <a> inside of <p>)
Inline inside of inline (like <em> inside of <strong>)
NOT OK:
Block inside of inline (like <p> inside of <a>)
So -- move the <p> to the outside of your <cite> to follow that rule.
Then move <cite> around "Alice in Wonderland"
And finally, stick a <footer> around the <p>.
Thank you so much for sharing! Those rules about block and inline don't seem to be taught very often, so I'm sure others will benefit from that. 🎉🎉🎉🔥🔥🔥
Fantastic first pass at this! The <q> is not for conversation. Furthermore, you already have that passage marked with a blockquote, so it's not needed here. Remove the <cite> from Lewis Carroll (it's perfect around Alice) -- citations are for works, not people. And then you'll have it perfect! Great job 🎉🔥🎉🔥🎉🔥
I have not went any wilder than all of those before me :-)
I did at first put whole of the last line in cite, although after visiting MDN from the link you have provided on blockquotes, I have fixed it a bit :-)
I admit I am lost. This looks like a passage from the book, so (as I've seen below someone else commented), it would be 1 long blockquote. Then maybe everything in quotes in the passage become a <q>? I need to register for CodePen .. so will try to catch up a little later in the week. What confuses me is whether to treat the exercise as a real quote from the book or as an example of a conversation. Maybe someone slipped something into my brain causing this confusion. I treated it as a blockquote within a blockquote and realize this should be much simpler. And, I have no idea how to mark up the "citation". I will look at other solutions after trying a little more.
Thanks, Jen. I had other real life stuff to deal with so am behind. As you may recall I like to do things wrong as many ways as possible before tackling getting it right. I do understand that there is more than 1 way to get this right or wrong. It is fun to be learning again for myself and it is very different from learning for work.
I also realized that the CodePen details section accepts markdown, so I used some <q>/<cite> within there as well. I went with the <figure>/<figcaption> solution and added a cite attribute URL that has that passage.
Awesome! Nicely done - this follows the WHATWG suggestion of putting it in a figure. WHATWG also says that people are not citations, so get rid of the <cite> around Lewis Carroll while keeping the one around Alice. Great job and thanks for sharing!
I used the blockquote element since there was a good bit of text in there and I wanted to give citing a try. I wrapped it in a figure element was debating between using footer and figcaption to wrap the citation, but settled on figcaption because it seems to make more sense semantically.
Well done! Your blockquote looks awesome, and you've done the figure/figcaption thing correctly too. Double-check the cite -- it's for works, not for people. Also, the hr indicates a new section, but here, you're trying to connect the quote with the caption. The line looks pretty, so maybe you could remove the hr and try a top border on the figcaption instead? Otherwise, fantastic!
Fantastic Haley! Everything looks right except one tiny thing in the footer -- the placement of <cite>. What is the creative work? Only that gets the <cite> element.
Awesome! You got the blockquote in the right place. There are paragraphs in the book -- think you might want to include those here? And we'll cover the citation today in an hour. Great work!
I decided to separate this content with two blockquotes combined with paragraph tags, and use <cite> for the citation. Here is my codepen :) https://codepen.io/laucrisw/pen/poReXBg
Nice! The blockquote around the quote from the book is perfect. The cite part is a bit harder. There's a MONSTER email coming on that today. This is a fantastic first pass!
Nicely done! You are on the right track here. Looks like you're missing a closing blockquote? As for cite, we've got a doozy of an email on that today. It's hard!
The tags used in my work includes; <figure>, <figcaption>, <blockquote>, <q> , <p> and <cite>.
Reasons for using the aforementioned tags.
Firstly, the given code pen consist of more than three lines of quotes which gives room for the use of blockquote element.
Secondly, the reason for using figure and figcaption elements is just to mark up the code in a way that pleases the semantic code deities.
Lastly, I used separate paragraph for alice and queen
Below is my pen.
https://codepen.io/Solobachi/pen/GRrmomb
Awesome! You've done well with figure, figcaption, and blockquote. Cite should go around the title of the book only (more on this tomorrow). And q should not be used for conversations, so you should take that out of the discussions with Alice and the Queen. Great work!
https://codepen.io/vrenee26/pen/RwKVrYX
I figured since the quote was one sizable portion from the same book it would all be together in one <blockquote>. Then separating the phrases into <p> tags. I also used <p> & <em> tags for the citation, but I imagine <cite> could work here also.
Nice Vanessa! The blockquote is excellent. Em is for emphasized text. Imagine you and I are having a conversation and I say "DON'T put your hand on that hot stove!" DON'T might be marked up with the em tag. (Strong would be "THE HOUSE IS ON FIRE!") Cite can definitely be used - we'll talk about that extensively tomorrow! Great job and thanks for sharing.
Here's an updated link with cite applied.
https://codepen.io/vrenee26/pen/RwKVrYX
Since the quote is a conversation from a published work, I opted not to cite the speakers within the quotation. I added <cite> to the credit line and moved it into a <footer> to follow the MDN formatting.
Woo woo! This is perfect -- great markup! You have one stray > on 16. Thanks for sharing!
https://codepen.io/Jacutus0fB0rg/pen/gOgWpWg
Fantastic and well done - you got the blockquote right, and you cited Alice really well. More on cite tomorrow!
https://codepen.io/kldickenson/pen/mdRmywY?editors=1100
The passage from Alice in Wonderland is in a single blockquote (if we had a URL for the original text, we could have added a cite attribute).
Alice and the Queen each got their own paragraph tags.
I left the quotation marks in the conversation as is.
I then put the citation text inside a cite tag.
Then I closed the blockquote
Great job! We'll talk more about the cite thing tomorrow.
https://codepen.io/steph_pujols/pen/oNBWNap
Fantastic attempt! Remember that <q> is not for conversations -- even a quoted conversation from a book. Check some of the other answers below for a few ideas of how to fix this.
https://codepen.io/jarchaff/pen/BapRBPm
I encompassed all of the text here inside of a blockquote, since it's a long passage from a book. I then used two separate paragraph elements, one for Alice's dialogue and one for the Queen's. Finally, I used a dash and a citation at the end of the text, where the book name and author are mentioned.
Fantastic! The quote part looks great. The citation we'll cover tomorrow. It's trickier than you'd believe!
https://codepen.io/jen4web/pen/jOyyxby
Oops! Looks like your changes didn't save?
Oh no! Il do it again tomorrow on my pc not my tablet x
https://codepen.io/scloteau/pen/poReXmg
Updated with cite: https://codepen.io/scloteau/pen/poRPLNB
Fantastic! You've got the cite in exactly the right spot. You've placed the cite inside of the blockquote, which is what MDN describes. Consider swapping <footer> for the paragraph around the citation. Great job!
Great first pass at this! Blockquote is an excellent choice for surrounding this passage. However, those are likely paragraphs in the passage, so maybe you want to re-think your markup there? The cite thing we'll talk about tomorrow, but you are on the right track. Thanks so much for sharing!
To me, it seemed natural to contain the entire quote in a single blockquote with two paragraphs, one for Alice, one for the Queen. Figure and cite tags not something I usually use, but they seemed appropriate after peeking at the MDN doc on blockquote. Applied simple styling to easier distinguish between html elements. Did not apply the q element. Unsure if that was a mistake. https://codepen.io/oldrup/pen/QWdpRdQ
Fantastic!!! That is absolutely one possible way to mark this up. Well done!
https://codepen.io/Soltekh/pen/QWaOZLO
Good stuff! You'll learn more about <cite> on day 3 and revisit this pen then. Meanwhile, look at the examples for <blockquote> again. You have the right element, but your citation isn't quite in the right place. (And congrats on not falling into the <q> trap!)
I wrapped the first two paragraphs in p tags and then in a blockquote. It read like it was gotten from a book or article
https://codepen.io/kells60/pen/ZEJQpgw
I don't see your changes here -- there's no markup. It sounds like a reasonable start, though!
Yes, this is a quote from "Alice in Wonderland," which is a novel from the 1850's. Disney turned it into a cartoon movie in the 1950s. https://en.wikipedia.org/wiki/Alice%27s_Adventures_in_Wonderland
https://codepen.io/perreamamiperr/pen/YzZmxZo
Is this Ok?
Close! The <blockquote> tag is placed correctly if you're following WHATWG guidelines. The <cite> probably needs to be tightened up a bit to the book title only - but we do more with that in Day 3, where we talk about this in detail. You didn't fall into the trap of
using <q> around the conversation - great job for that! Feel free to include other HTML elements too, like <p>. Thanks so much for sharing!
To start with I considered whether this needed either <blockquote> or <q> as it is a conversation. Then decided, as it is a fair size passage from a book, to use <blockquote>.
https://codepen.io/gipsi/pen/RwpyMRz
After learning more about cite... https://codepen.io/gipsi/pen/LYWrrpb
🎉🎉🎉🔥🔥🔥 YAY! This was going to be my feedback to you from the first. (I started on something, but got a phone call and got all distracted 😁). You nailed it all! Great work 😁
https://codepen.io/simbroo/pen/xxgdxzd
Good start with this! There are two paragraphs in the quote. You may also want to think about the placement of <cite>. You're on the right path, but the tag isn't quite placed correctly. Great job with marking up the blockquote, though! 🔥🔥🔥🎉🎉🎉
Better late than never, right? :)
https://codepen.io/trenadee/pen/BapeJBe?editors=1100
I used the block quote around the entire section, but added paragraphs for each separate quote. I also decided to try and throw in a cite, but it could be incorrect. I will have to keep going with the next day of challenges to get that down the right way!
Oops! I think I included the wrong link...
https://codepen.io/trenadee/pen/BapeJBe
Sorry, still newer to this! :)
🌈🌈🌈🦄🦄🦄 Nicely done! Your <cite> tag should start with Alice, rather than "Passage" (since the word Passage isn't part of the work). But that is SUPER picky. Looks great -- thanks for sharing!
https://codepen.io/pmmueller/pen/qBRJrVm
The whole passage is one blockquote, and having come across the different blockquote/cite markup from WHATWG and W3C before, I included them both.
Both answers look excellent and do a great job of explaining the different (conflicting) approaches. My only suggested would be to format the paragraphs inside of the <blockquote>. In English, generally speaking, a conversation like this is assigned one paragraph per speaker. Also, I disagree with Gothe in the tech space. Retraining every 5 years would be a luxury! 🤣
Aah, you mean two paragraphs would be better? Makes sense to give a speaker a paragraph.
Yes, 2 paragraphs inside the <blockquote>. Otherwise excellent!
Haha, I followed your advice, and now it's perfect 😉
Indeed it is! 🎉🎉🎉🔥🔥🔥
I think I improved the citation: https://codepen.io/romola/pen/bGgrZML
Romola, this looks fantastic -- much better! I'd suggest a <p> around that first paragraph on line 12. Other than that, this is perfect!
Here is mine, I think I did okay on it.
https://codepen.io/brreaves/pen/PoWJRqN
Hey Brayden! Thanks so much for sharing your pen. Your answer was EXACTLY the same as Kadiatou, so see my comments to her for feedback. 🎉🎉🎉🔥🔥🔥
Here is mine. I think I did okay but I think could be better.
https://codepen.io/kadie7/pen/JjErEzd?editors=1010
Excellent first pass at this! You seem to be following the MDN citation model with the <cite> inside of the <blockquote>, which is perfectly acceptable.
A few things --
- just because it's in a <blockquote> doesn't mean you can't use <p>. Feel free to mark up the paragraphs from the book here.
- <cite> is an inline element, while <p> is a block element. There's a few rules about nesting these.
TOTALLY OK:
Block inside of block (like <p> inside <blockquote>)
Inline inside of block (like <a> inside of <p>)
Inline inside of inline (like <em> inside of <strong>)
NOT OK:
Block inside of inline (like <p> inside of <a>)
So -- move the <p> to the outside of your <cite> to follow that rule.
Then move <cite> around "Alice in Wonderland"
And finally, stick a <footer> around the <p>.
Thank you so much for sharing! Those rules about block and inline don't seem to be taught very often, so I'm sure others will benefit from that. 🎉🎉🎉🔥🔥🔥
This is more an exercise in using codepen: https://codepen.io/romola/pen/bGgrZML
Everything takes some time.
Fantastic first pass at this! The <q> is not for conversation. Furthermore, you already have that passage marked with a blockquote, so it's not needed here. Remove the <cite> from Lewis Carroll (it's perfect around Alice) -- citations are for works, not people. And then you'll have it perfect! Great job 🎉🔥🎉🔥🎉🔥
Here is my fork
https://codepen.io/playintlf/pen/RwKZqpG
I have not went any wilder than all of those before me :-)
I did at first put whole of the last line in cite, although after visiting MDN from the link you have provided on blockquotes, I have fixed it a bit :-)
Oh no! Looks like your code didn't save? There's no markup in what I can see.
I admit I am lost. This looks like a passage from the book, so (as I've seen below someone else commented), it would be 1 long blockquote. Then maybe everything in quotes in the passage become a <q>? I need to register for CodePen .. so will try to catch up a little later in the week. What confuses me is whether to treat the exercise as a real quote from the book or as an example of a conversation. Maybe someone slipped something into my brain causing this confusion. I treated it as a blockquote within a blockquote and realize this should be much simpler. And, I have no idea how to mark up the "citation". I will look at other solutions after trying a little more.
Lines 12-14 are indeed a quote from "Alice in Wonderland." The questions to consider are:
- what is the purpose of <blockquote>, and where would you start/end it?
- what is <q> used for, and what is it NOT used for?
HINT: if <blockquote> is for longer passages, and <q> is for short, inline passages, should one be nested in the other?
- How should you deal with the citation?
Day 2 covers blockquote and q: https://jen4web.substack.com/p/blockquote-q
Day 3 covers cite: https://jen4web.substack.com/p/cite
I know you in real life, Romola. You're smart and you'll get this. 😁
Thanks, Jen. I had other real life stuff to deal with so am behind. As you may recall I like to do things wrong as many ways as possible before tackling getting it right. I do understand that there is more than 1 way to get this right or wrong. It is fun to be learning again for myself and it is very different from learning for work.
There's no time limit on these! Don't let it stress you. Have fun 😁
Here is mine: https://codepen.io/adamabundis/details/wvgeqbK
I also realized that the CodePen details section accepts markdown, so I used some <q>/<cite> within there as well. I went with the <figure>/<figcaption> solution and added a cite attribute URL that has that passage.
Awesome! Nicely done - this follows the WHATWG suggestion of putting it in a figure. WHATWG also says that people are not citations, so get rid of the <cite> around Lewis Carroll while keeping the one around Alice. Great job and thanks for sharing!
Thank you for your feedback. And thank you for making us smarter about HTML!
🎉🎉🎉🔥🔥🔥 So glad it's helpful for you!
Newly edited: https://codepen.io/steph_pujols/pen/QWdvzJK
Fantastic job placing the blockquote and cite! Remember that q is not for conversations. Thanks for sharing!
Here's mine! https://codepen.io/meg_gutshall/pen/gOgWdJb
I used the blockquote element since there was a good bit of text in there and I wanted to give citing a try. I wrapped it in a figure element was debating between using footer and figcaption to wrap the citation, but settled on figcaption because it seems to make more sense semantically.
Well done! Your blockquote looks awesome, and you've done the figure/figcaption thing correctly too. Double-check the cite -- it's for works, not for people. Also, the hr indicates a new section, but here, you're trying to connect the quote with the caption. The line looks pretty, so maybe you could remove the hr and try a top border on the figcaption instead? Otherwise, fantastic!
I believe I fixed it. https://codepen.io/kelsey-van-ert/pen/rNjmMyz
So close! You're missing a L in the closing blockquote. And cite should go around the book, not the author. You're doing great!
https://codepen.io/hleffler/pen/ExZmReB
Fantastic Haley! Everything looks right except one tiny thing in the footer -- the placement of <cite>. What is the creative work? Only that gets the <cite> element.
Oh thanks for pointing that out! I moved the cite tag to only include the book and author
Just the book -- and you're perfect 👍
https://codepen.io/la6ibrd/pen/qBRmpOx
Awesome! You got the blockquote in the right place. There are paragraphs in the book -- think you might want to include those here? And we'll cover the citation today in an hour. Great work!
I am using figure and figure caption because these are semantically correct and validated
my solution : https://codepen.io/ashishmangla1991/pen/abpWpYB
The figcaption part is perfect! Remember that q is not for conversations. I think you have a few tags tangled up, even though it validates. Look at the 3rd example here: https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element
I decided to separate this content with two blockquotes combined with paragraph tags, and use <cite> for the citation. Here is my codepen :) https://codepen.io/laucrisw/pen/poReXBg
Nice! The blockquote around the quote from the book is perfect. The cite part is a bit harder. There's a MONSTER email coming on that today. This is a fantastic first pass!
https://codepen.io/kelsey-van-ert/pen/rNjmMyz
So glad my friend shared this challenge with me! I used <blockquote>, <p>, and <cite>🥳
Nicely done! You are on the right track here. Looks like you're missing a closing blockquote? As for cite, we've got a doozy of an email on that today. It's hard!
https://codepen.io/jinsbai/pen/ExZmjMx
Fantastic! Blockquote looks great. We'll discuss cite tomorrow. Great work!
LOVE IT, William! Love the long comment and all of the thought that went into this. You did great - that is exactly how I'd mark it up 😁
Well done, William! We'll address the cite thing tomorrow. It's a trainwreck. But <aside> might be one possible solution.