INSTRUCTIONS: Fork this CodePen and mark up the passage below the best way you know how with any HTML elements you know. Share your marked up CodePen below with any comments about why you made the choices you did, or comment in your code with your ideas.
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 find MDN most helpful for reference so have gone with their guidelines for the blockquote, citation and address. I was tempted to use strong and em together as I did in another challenge, but decided this is perhaps better tackled in CSS.
Nicely done!!! 🔥🔥🔥🎉🎉🎉 don't forget to close the cite for Obi-Wan, and it should be <footer> for that citation in the blockquote, not another <p>. Remember part of this challenge is <abbr> and <dfn>... any place you might use these? 😁 Q and address look excellent. Great work and thanks for sharing!
Thank you for feedback! I had another try, with < abbr> and < dfn>. This time I put it through Nu HTML checker first so hopefully no stray or missing tags. I'm loving the space in the tag trick to avoid escape codes :-)
<dfn> does the definition. Often that goes beyond the abbreviation (hopefully!):
<p><dfn id="html"><abbr title="Hypertext Markup Language">HTML</abbr>, the Hypertext Markup Language,</dfn> describes the structure of web documents, identifying parts of the document like headings, lists, and links.</p>
<p>However, <a href="#html">HTML</a> is limited in its appearance and functionality.</p>
So here we've defined HTML early in the document. Later, if we want to refer to the definition, we link to it.
Should we put a <abbr> around that second instance of HTML?... it depends. If we were pages into a book and we'd not used HTML in that time, perhaps so. If we're a paragraph later, probably not.
So -- should people be defined? Maybe, but probably not in the sense of a dictionary entry. I love your link to Michelle Obama's Wikipedia entry, for example. If you don't know who she is, you can read about her. But that's just a plain old link. You can't look her up in Webster's dictionary. 😁
Your document syntax is REALLY improved! That was a big improvement for you. You're doing great work -- thanks for continuing to share!
Ah thanks, yes, when I started looking I could see possibilities all over the place :-D. I wasn't sure though... if the definition isn't in the text whether to put a link to an outside the document one, so I went for it. Great clarification of the skip link distancing, plus fun and thought provoking materials to work with.
Great start on this! In the first quote (lines 14-16), you have cite marked up correctly, yay! How about the rest of the quote -- review <blockquote> and see what you think? Ditto with the Michelle Obama quote. Address looks great -- nice job!!!
Obi-Wan gets a <blockquote> with <figure> as parent and <figcaption> as sibling. The creative work is markup with <cite> and a link (as we have a URL).
Michelle O. gets a q and in order to avoid double quotation marks these are either removed in the HTML oder disabled in the CSS with ::before and ::after.
Great first pass! Consider some <br> tags between the lines in the address instead of <p>. You might identify M Obama's quote with a <q>, and Obi-Wan's with a <blockquote>. Thanks for sharing - this takes bravery! 🎉🎉🎉🔥🔥🔥
Nicely done! 🔥🎉🔥🎉🔥🎉 I think I'd tend towards the blockquote for the very first quote, rather than a q. You've done a fantastic job marking up the other q's and cites and such -- great work!
🔥🎉🔥🎉🔥🎉 Well done Brayden! Love the <q> on Michelle O's quote and Obi-Wan's 2nd quote. Great job with your <cite> placement! Thanks so much for sharing!
Nicely done! Your blockquote looks great. Consider putting the <cite> around the movie title rather than Obi-Wan. Michelle O's quote might deserve a <q> on line 24. Great effort -- thank so much for sharing!
Ana, it's a great chance to practice and get feedback on your work. I'm so proud that you're practicing in public! Besides, your work looks FANTASTIC. The only small addition I might make is wrapping a <footer> around line 17, to bring your markup to more closely align with the MDN recommendations. Other than that, things looks great. Thank you so much for sharing and I hope to see more of your work soon!
Whew~ For the first entry, I kept the <blockquote> and added the citation of the Return to Jedi wiki as an attribute of the <blockquote>. Next up, I kept the <p> tags for the two paragraphs and added a <q> tag to the quote from Obi-Wan, with a <cite> tag & 'href:' link of the Return to Jedi attribution. For the Michelle Obama quote, I changed that into <p> tag & indicated her quotation with <q>. Next I removed the <q> tags and replaced them with standard "". For the address I added <br> to each line and replaced the email with an <a> tag @ 'mailto:' link.
Spectacular job, Vanessa! Looks great. Love your use of blockquote and q, and you've done a great job with the address. The mailto link is a nice touch. Well done and thanks so much for sharing!
Stephanie - I so appreciate your comments here! It helps understand your approach to the markup. The first quote you've marked up like WHATWG likes - great choice! You could always place the URL in a cite attribute in the blockquote tag if you want. Consider dropping a <cite> around "Return of the Jedi" in line 21. You're right that's a Michelle O quote on line 25, but consider <q> instead of <blockquote> as this is an inline quote. Finally in line 27, consider <cite> instead of <q> as "Details and Definitions" is a creative work rather than a quotation from that work. Great job and thank you so much for sharing!
You were not kidding; <cite> is not the most intuitive element. I felt that the first example from WHATWG was the most natural for me, and I tried to implement that in today's challenge, but I might have gone a little <cite> crazy. I feel like this element's proper use will be easier to understand through lots of practice!
Fantastic job, Jade! Yeah, <cite> is a real bear. You've done an excellent job with this pen -- great work! Three things I'd consider.
- First, on line 15 - "Return of the Jedi blah blah" should get the cite, not Obi-Wan, since <cite> is for creative works.
- Second - lines 18 and 20, where we have the sarcastic/so-called "the rules" and "bad coding" - we aren't quoting anyone or anything here, so these should probably not be q.
- Finally, on the Michelle O quote - so close! Swap the blockquote tag for a paragraph, and I think you have this one OK. Generally speaking, we're either blockquote-ing or we're q-ing, but not both in the same location.
Thank you so much for sharing -- this is excellent work!
Thank you for this thorough feedback! I looked back through my pen with your suggestions in mind, and I understood better why/where I went wrong. I wish I'd seen this before completing today's challenge (I just discovered that a lot of these email notifications are being sent to my spam folder)!
🎉🎉🎉 Nicely done! I had not thought about a <cite> around "Details and Definitions," but it works - it's a creative work, the name of a unit. I like it! You did not use the <address> element around Erika's information. I think I'd be inclined to include that, since I think of her address as going with the information above? But given there's no article tag, and given that we don't know if this is the whole web page, you might be OK without it. Great job!
Haley! Sorry I missed your post yesterday. Your code looks fantastic! You got the blockquote and the q correct, and you've got a great address as well. A couple little things --
Line 16 might end with a </blockquote> instead of a </p>?
Lines 18 and 19 - can you find at least one spot where a <cite> might work?
Otherwise this is really, really good! Great job :-D
Nicely done! The address markup is perfect. Choice of blockquote for the beginning quote is also excellent. You might want to shift that cite tag, though, a little bit. Also in the paragraph with the Michelle Obama quote, is the whole paragraph a citation? How would you mark up her words? A few more tweaks and everything will be perfect 😀
Yep I think I did im getting very muddled at the moment think I'm trying to cram it all quickly whilst learning javascript...let me try again tomorrow funny enough I thought the link looked funny sorry all
Wow William - you took this to the next level! Love your explanation for the <i> for Padawans. Love the <q> tag for Michelle O's quote. LOVE treating the whole thing as an article -- your placement of tags here is excellent. I'm not sure I agree with the first quote as a <header>, but I totally understand why you did it. I think that's art, not science, in this case. Great stuff! A good model for others to learn from.
I find MDN most helpful for reference so have gone with their guidelines for the blockquote, citation and address. I was tempted to use strong and em together as I did in another challenge, but decided this is perhaps better tackled in CSS.
https://codepen.io/gipsi/pen/abJKjOL
Nicely done!!! 🔥🔥🔥🎉🎉🎉 don't forget to close the cite for Obi-Wan, and it should be <footer> for that citation in the blockquote, not another <p>. Remember part of this challenge is <abbr> and <dfn>... any place you might use these? 😁 Q and address look excellent. Great work and thanks for sharing!
Thank you for feedback! I had another try, with < abbr> and < dfn>. This time I put it through Nu HTML checker first so hopefully no stray or missing tags. I'm loving the space in the tag trick to avoid escape codes :-)
https://codepen.io/gipsi/pen/xxqNxxY
Awesome -- great job taking another pass at this. I think you're going a little crazy with some of the elements, though. 😁
<abbr> is for abbreviations, acronyms, and initialisms. Let's say we're talking about HTML. All the <abbr> element tells us is what HTML stands for:
<abbr title="Hypertext Markup Language">HTML</abbr>
<dfn> does the definition. Often that goes beyond the abbreviation (hopefully!):
<p><dfn id="html"><abbr title="Hypertext Markup Language">HTML</abbr>, the Hypertext Markup Language,</dfn> describes the structure of web documents, identifying parts of the document like headings, lists, and links.</p>
<p>However, <a href="#html">HTML</a> is limited in its appearance and functionality.</p>
So here we've defined HTML early in the document. Later, if we want to refer to the definition, we link to it.
Should we put a <abbr> around that second instance of HTML?... it depends. If we were pages into a book and we'd not used HTML in that time, perhaps so. If we're a paragraph later, probably not.
So -- should people be defined? Maybe, but probably not in the sense of a dictionary entry. I love your link to Michelle Obama's Wikipedia entry, for example. If you don't know who she is, you can read about her. But that's just a plain old link. You can't look her up in Webster's dictionary. 😁
Your document syntax is REALLY improved! That was a big improvement for you. You're doing great work -- thanks for continuing to share!
Ah thanks, yes, when I started looking I could see possibilities all over the place :-D. I wasn't sure though... if the definition isn't in the text whether to put a link to an outside the document one, so I went for it. Great clarification of the skip link distancing, plus fun and thought provoking materials to work with.
Yeah, there's never an absolute answer to any of this :-D
Day 3 Challenge
https://codepen.io/kajal-28/pen/wvgORzW
Great start on this! In the first quote (lines 14-16), you have cite marked up correctly, yay! How about the rest of the quote -- review <blockquote> and see what you think? Ditto with the Michelle Obama quote. Address looks great -- nice job!!!
Thanks for the feedback 😊
https://codepen.io/pmmueller/pen/zYNmzoy
Obi-Wan gets a <blockquote> with <figure> as parent and <figcaption> as sibling. The creative work is markup with <cite> and a link (as we have a URL).
Michelle O. gets a q and in order to avoid double quotation marks these are either removed in the HTML oder disabled in the CSS with ::before and ::after.
Erika contact information is an <address>.
Wonderful job -- that's how I would do it!
https://codepen.io/rileyclaycomb/pen/oNBEwvq
Great first pass! Consider some <br> tags between the lines in the address instead of <p>. You might identify M Obama's quote with a <q>, and Obi-Wan's with a <blockquote>. Thanks for sharing - this takes bravery! 🎉🎉🎉🔥🔥🔥
This is what I have. It could be taken further, but here is something: https://codepen.io/romola/pen/GRrMwgJ?editors=1100
Nicely done! 🔥🎉🔥🎉🔥🎉 I think I'd tend towards the blockquote for the very first quote, rather than a q. You've done a fantastic job marking up the other q's and cites and such -- great work!
Here is what I did.
https://codepen.io/brreaves/pen/mdRBxVe?editors=1100
🔥🎉🔥🎉🔥🎉 Well done Brayden! Love the <q> on Michelle O's quote and Obi-Wan's 2nd quote. Great job with your <cite> placement! Thanks so much for sharing!
https://codepen.io/kadie7/pen/wvgrpxN?editors=1100
I went with the second example because I liked how it looked better (even though it might be wrong lol).
Nicely done! Your blockquote looks great. Consider putting the <cite> around the movie title rather than Obi-Wan. Michelle O's quote might deserve a <q> on line 24. Great effort -- thank so much for sharing!
https://codepen.io/athelas85/pen/poRwBvz?editors=1100
I'm starting now with the challenge. I'm very green with HTML and having this is helping me to realise several things about what a good code is.
Hopefully I didn't do it too bad!
Try to keep everything a little bit more organise with the <p> and I'm not sure if I miss any more <cite> options.
Ana, it's a great chance to practice and get feedback on your work. I'm so proud that you're practicing in public! Besides, your work looks FANTASTIC. The only small addition I might make is wrapping a <footer> around line 17, to bring your markup to more closely align with the MDN recommendations. Other than that, things looks great. Thank you so much for sharing and I hope to see more of your work soon!
https://codepen.io/vrenee26/pen/vYgmbyE
Whew~ For the first entry, I kept the <blockquote> and added the citation of the Return to Jedi wiki as an attribute of the <blockquote>. Next up, I kept the <p> tags for the two paragraphs and added a <q> tag to the quote from Obi-Wan, with a <cite> tag & 'href:' link of the Return to Jedi attribution. For the Michelle Obama quote, I changed that into <p> tag & indicated her quotation with <q>. Next I removed the <q> tags and replaced them with standard "". For the address I added <br> to each line and replaced the email with an <a> tag @ 'mailto:' link.
...fingers crossed
Spectacular job, Vanessa! Looks great. Love your use of blockquote and q, and you've done a great job with the address. The mailto link is a nice touch. Well done and thanks so much for sharing!
https://codepen.io/erika4web/pen/QWdvjXw?editors=1100
Hi Viv! There's no markup - guessing you didn't save your pen? I bet you had a good answer anyway.
again!! grrr not sure why as i was on my laptop, seems to save fine on my phone
I'm sorry 🙁 There's a "save" button in the upper right - sometimes it saves automatically and sometimes not.
https://codepen.io/steph_pujols/pen/bGgWOZp
Stephanie - I so appreciate your comments here! It helps understand your approach to the markup. The first quote you've marked up like WHATWG likes - great choice! You could always place the URL in a cite attribute in the blockquote tag if you want. Consider dropping a <cite> around "Return of the Jedi" in line 21. You're right that's a Michelle O quote on line 25, but consider <q> instead of <blockquote> as this is an inline quote. Finally in line 27, consider <cite> instead of <q> as "Details and Definitions" is a creative work rather than a quotation from that work. Great job and thank you so much for sharing!
https://codepen.io/jarchaff/pen/mdRmapg?editors=1100
You were not kidding; <cite> is not the most intuitive element. I felt that the first example from WHATWG was the most natural for me, and I tried to implement that in today's challenge, but I might have gone a little <cite> crazy. I feel like this element's proper use will be easier to understand through lots of practice!
Fantastic job, Jade! Yeah, <cite> is a real bear. You've done an excellent job with this pen -- great work! Three things I'd consider.
- First, on line 15 - "Return of the Jedi blah blah" should get the cite, not Obi-Wan, since <cite> is for creative works.
- Second - lines 18 and 20, where we have the sarcastic/so-called "the rules" and "bad coding" - we aren't quoting anyone or anything here, so these should probably not be q.
- Finally, on the Michelle O quote - so close! Swap the blockquote tag for a paragraph, and I think you have this one OK. Generally speaking, we're either blockquote-ing or we're q-ing, but not both in the same location.
Thank you so much for sharing -- this is excellent work!
Thank you for this thorough feedback! I looked back through my pen with your suggestions in mind, and I understood better why/where I went wrong. I wish I'd seen this before completing today's challenge (I just discovered that a lot of these email notifications are being sent to my spam folder)!
Well THAT is annoying! We'll always have #30DaysofHTML in the subject, if that helps get things to your inbox.
https://codepen.io/kelsey-van-ert/pen/BapRPOG?editors=1100 I didn't use figure or figcaption because I'm not quite sure what those are. Hopefully this works.
PS - figure/figcaption on Day 28 😀
🎉🎉🎉 Nicely done! I had not thought about a <cite> around "Details and Definitions," but it works - it's a creative work, the name of a unit. I like it! You did not use the <address> element around Erika's information. I think I'd be inclined to include that, since I think of her address as going with the information above? But given there's no article tag, and given that we don't know if this is the whole web page, you might be OK without it. Great job!
https://codepen.io/kldickenson/pen/xxgdJEZ?editors=1100
I like using figure and figcaption to form the relationship between the quote and the citation.
Nothing wrong with that - and you've done it well!
🎉🎉🎉 Woo woo!!! You did a spectacular job here. The only issue I see is the closing </q> on line 25 doesn't have a slash. Other than that, awesome job!
https://codepen.io/hleffler/pen/gOgWKZW
Haley! Sorry I missed your post yesterday. Your code looks fantastic! You got the blockquote and the q correct, and you've got a great address as well. A couple little things --
Line 16 might end with a </blockquote> instead of a </p>?
Lines 18 and 19 - can you find at least one spot where a <cite> might work?
Otherwise this is really, really good! Great job :-D
https://codepen.io/jinsbai/pen/eYgWKZK
I also get 8/8 in the quiz.
🎉🎉🎉
Nicely done! The address markup is perfect. Choice of blockquote for the beginning quote is also excellent. You might want to shift that cite tag, though, a little bit. Also in the paragraph with the Michelle Obama quote, is the whole paragraph a citation? How would you mark up her words? A few more tweaks and everything will be perfect 😀
I went through the code and tried to add tags as I saw fit. I struggled a bit on deciding between where I should put the <q> and <blockquote> tags.
https://codepen.io/scloteau/pen/dyNWmvW?editors=1000
Wow!!! Fantastic job, and congrats on being first. 😀 Your pen looks REALLY good. A few tiny things:
<cite> — Obi-Wan Kenobi, Star Wars Episode VI: Return of the Jedi</cite>
probably should be
— Obi-Wan Kenobi, <cite> Star Wars Episode VI: Return of the Jedi</cite>
Remember that Obi-Wan isn't the citation -- the movie title is.
You might consider line breaks in Erika's address to preserve formatting for the post office.
Other than that, super well done! Congrats 🎉🎉🎉
Viv - this looks like Erika's CodePen? Maybe you copied the wrong link?
Yep I think I did im getting very muddled at the moment think I'm trying to cram it all quickly whilst learning javascript...let me try again tomorrow funny enough I thought the link looked funny sorry all
No worries! Again, there's no deadline. The last 2 days haven't had any projects. Take your time and have fun! ❤️
Wow William - you took this to the next level! Love your explanation for the <i> for Padawans. Love the <q> tag for Michelle O's quote. LOVE treating the whole thing as an article -- your placement of tags here is excellent. I'm not sure I agree with the first quote as a <header>, but I totally understand why you did it. I think that's art, not science, in this case. Great stuff! A good model for others to learn from.