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.
Nice - rather than putting in that class="code" everywhere, you could eliminate a few references by changing your selector in the CSS from .code to kbd kbd, .code, samp { ... } This would set most of your HTML instances to the style you want, and you could add a code class where you had any exceptions.
🤘🏽🤘🏽🤘🏽🎵🎵🎵 Nicely done! You can group some of the big series of keys together if you want: <kbd><kbd>Command</kbd>+ <kbd> C</kbd></kbd> Or you can leave it as is if you prefer. Thanks for sharing -- great work!
I don't think this is finished. I don't want either group of control characters to break but couldn't decide whether to set the whole paragraph to overflow-x:auto; like the code paragraph. I also felt that the code could be styled more, but as it is all code, shouldn't it all have the same style?
This looks great. My only comment would be that you don't need a paragraph around the description list. So great markup!
In regards to the control characters - I agree, an overflow on the paragraph might be a bit much. You could reduce the font size a bit for the <kbd> contents, which might help.
Hey! Sorry for being a bit off topic, but I'd love to use <kbd> and <samp> when writing user guides in WordPress, but it seems that the native block editor lacks so many of the great HTML tags mentioned in this course. Do you have any hints? (beside using the HTML block)
It's a GREAT question. Unfortunately, the editor creators either don't know about these HTML elements or don't particularly care. I would recommend asking them to add these elements. Perhaps someone could write a plugin for the plugin that would add extra HTML semantic elements for you? 😁
I just performed a quick test with the regular paragraph block in Gutenberg, and it's possible to switch to HTML editing mode, add the <kbd> and <samp> tags by hand, and switch back to visual mode.
My concern was whether Gutenberg would filter out the tags, like it filters attributes it doesn't recognize (eg lang), but the both <kbd> and <samp> remains, and they are even recognizable while editing content probably due to the browsers default styling of those tags.
So in conclusion, it's possible to use at least some tags mentioned in this course, in Gutenberg, if added manually.
🔥🔥🔥🎉🎉🎉 KBDs look great! In regards to the code -- you're missing a </pre>. Also - do you think a <code> tag would help identify the code as well?... Looking great, thanks for sharing!
🔥🔥🔥🎉🎉🎉 FIRST! Nicely done here. Your kbd's look great, as does everything else EXCEPT line 17. I'm not sure <samp> should be inside <code> because <samp> is the output of the computer, not the code itself. Make sense? Maybe move that starting <code> tag to line 20 and you're good? Great job!
https://codepen.io/idlehands1969/pen/bNVrYWa?editors=0100
This is cool. I hadn't considered how this was done before.
Nice - rather than putting in that class="code" everywhere, you could eliminate a few references by changing your selector in the CSS from .code to kbd kbd, .code, samp { ... } This would set most of your HTML instances to the style you want, and you could add a code class where you had any exceptions.
My Answer
https://codepen.io/kajal-28/pen/rNyagwe
🤘🏽🤘🏽🤘🏽🎵🎵🎵 Nicely done! You can group some of the big series of keys together if you want: <kbd><kbd>Command</kbd>+ <kbd> C</kbd></kbd> Or you can leave it as is if you prefer. Thanks for sharing -- great work!
Thank you so much, for the feedback.😊🙏
I don't think this is finished. I don't want either group of control characters to break but couldn't decide whether to set the whole paragraph to overflow-x:auto; like the code paragraph. I also felt that the code could be styled more, but as it is all code, shouldn't it all have the same style?
https://codepen.io/romola/pen/dyvPoqj
This looks great. My only comment would be that you don't need a paragraph around the description list. So great markup!
In regards to the control characters - I agree, an overflow on the paragraph might be a bit much. You could reduce the font size a bit for the <kbd> contents, which might help.
For styling code, the HTML elements don't do much by default (no surprise). There are lots of enhancements you could apply. https://prismjs.com/ is one -- and https://speckyboy.com/snippets-beautiful-syntax-highlighting/ describes a few other options.
In any case, you are doing great work with the basic HTML the assignment requires!
Thanks, Jen. I will look at the enhancements and remove the extra paragraph around the list.
Hey! Sorry for being a bit off topic, but I'd love to use <kbd> and <samp> when writing user guides in WordPress, but it seems that the native block editor lacks so many of the great HTML tags mentioned in this course. Do you have any hints? (beside using the HTML block)
It's a GREAT question. Unfortunately, the editor creators either don't know about these HTML elements or don't particularly care. I would recommend asking them to add these elements. Perhaps someone could write a plugin for the plugin that would add extra HTML semantic elements for you? 😁
I just performed a quick test with the regular paragraph block in Gutenberg, and it's possible to switch to HTML editing mode, add the <kbd> and <samp> tags by hand, and switch back to visual mode.
My concern was whether Gutenberg would filter out the tags, like it filters attributes it doesn't recognize (eg lang), but the both <kbd> and <samp> remains, and they are even recognizable while editing content probably due to the browsers default styling of those tags.
So in conclusion, it's possible to use at least some tags mentioned in this course, in Gutenberg, if added manually.
Great news! Thank you so much for testing that. I'm glad Gutenberg isn't stripping them out. 👍
Oh. And there seems to be documentation on how to add additional buttons to the rich text editor ... Definitely an area worth exploring. https://developer.wordpress.org/block-editor/how-to-guides/format-api/2-toolbar-button/
Very nice! Thank you so much for sharing that resource!
https://codepen.io/kldickenson/pen/JjEvmrj
🔥🔥🔥🎉🎉🎉 Fantastic job as always, Karen! Love the added article tags and correct markup of headings. We are getting to "parts is parts" soon 😁
https://codepen.io/kelsey-van-ert/pen/qBRYWNE?editors=1010
🔥🔥🔥🎉🎉🎉 Woo woo!!! This looks fantastic -- great job!
https://codepen.io/jinsbai/pen/NWdYVPX
🔥🔥🔥🎉🎉🎉 KBDs look great! In regards to the code -- you're missing a </pre>. Also - do you think a <code> tag would help identify the code as well?... Looking great, thanks for sharing!
https://codepen.io/jarchaff/pen/JjELxNY
Not sure I've been first before! Like yesterday, I find these tags really useful. Hopefully I'm using them correctly.
🔥🔥🔥🎉🎉🎉 FIRST! Nicely done here. Your kbd's look great, as does everything else EXCEPT line 17. I'm not sure <samp> should be inside <code> because <samp> is the output of the computer, not the code itself. Make sense? Maybe move that starting <code> tag to line 20 and you're good? Great job!
Yes, that makes sense, thank you very much :>
Well done, William! 🔥🔥🔥🎉🎉🎉 Looks fantastic!