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.
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.
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.
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
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>.
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!
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.
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.
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.
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
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
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.
https://codepen.io/Jacutus0fB0rg/pen/gOgWpWg
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
https://codepen.io/steph_pujols/pen/oNBWNap
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.
https://codepen.io/jen4web/pen/jOyyxby
https://codepen.io/scloteau/pen/poReXmg
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
https://codepen.io/Soltekh/pen/QWaOZLO
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
https://codepen.io/perreamamiperr/pen/YzZmxZo
Is this Ok?
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
https://codepen.io/simbroo/pen/xxgdxzd
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!
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.
I think I improved the citation: https://codepen.io/romola/pen/bGgrZML
Here is mine, I think I did okay on it.
https://codepen.io/brreaves/pen/PoWJRqN
Here is mine. I think I did okay but I think could be better.
https://codepen.io/kadie7/pen/JjErEzd?editors=1010
This is more an exercise in using codepen: https://codepen.io/romola/pen/bGgrZML
Everything takes some time.
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 :-)
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.
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.
Newly edited: https://codepen.io/steph_pujols/pen/QWdvzJK
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.
I believe I fixed it. https://codepen.io/kelsey-van-ert/pen/rNjmMyz
https://codepen.io/hleffler/pen/ExZmReB
https://codepen.io/la6ibrd/pen/qBRmpOx
I am using figure and figure caption because these are semantically correct and validated
my solution : https://codepen.io/ashishmangla1991/pen/abpWpYB
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
https://codepen.io/kelsey-van-ert/pen/rNjmMyz
So glad my friend shared this challenge with me! I used <blockquote>, <p>, and <cite>🥳
https://codepen.io/jinsbai/pen/ExZmjMx