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.
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.
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.
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!
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
Day 3 Challenge
https://codepen.io/kajal-28/pen/wvgORzW
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>.
https://codepen.io/rileyclaycomb/pen/oNBEwvq
This is what I have. It could be taken further, but here is something: https://codepen.io/romola/pen/GRrMwgJ?editors=1100
Here is what I did.
https://codepen.io/brreaves/pen/mdRBxVe?editors=1100
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).
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.
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
https://codepen.io/erika4web/pen/QWdvjXw?editors=1100
https://codepen.io/steph_pujols/pen/bGgWOZp
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!
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.
https://codepen.io/kldickenson/pen/xxgdJEZ?editors=1100
https://codepen.io/hleffler/pen/gOgWKZW
https://codepen.io/jinsbai/pen/eYgWKZK
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