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.
The markup looks great. Consider the top nav might be enclosed in a <nav>. In the <aside> around line 40, this might be an unordered list. For the <dl> at the end - remember this is a list of property/value pairs. The <ul> and <ol> are just lists of things. It's possible you could change the markup at the end such that the <dl> is declared once, followed by a series of dt/dd's. For example: <dt>total area</dt><dd>2,166,086 km<sup>2</sup> (836,330 sq mi)</dd>
But it's really looking good -- you've made so much progress with these!
In regards to the look -- #30DaysofCSS will start this summer 😁 For now, consider the footer at the bottom of the article might have the same blue background and white text as your navbar?
Broadly speaking - vertical spacing is due to margin. Many HTML elements have margin set by default, frequently 1 em (16 px) above and below each element.
However, the tricky thing is that vertical margins collapse. In other words, if I have two elements stacked, one with a bottom margin of 1 em and one with a top margin of 1 em, the total is.... 1em. If you think about a series of paragraphs, with 1em of margin set on their top and bottom, you know how this works. It looks like there's even spacing throughout the series of paragraphs -- this is due to the collapsing margin.
Padding is additive, so in the same example, 1+1 = 2.
https://codepen.io/kldickenson/pen/MWJMpRv There are a couple of dl dd dfn decisions I made that I'm not 100% sure about. Open to suggestions of another way to handle them.
🔥🔥🔥🎉🎉🎉 Karen, I think it's fantastic, just like your other work. You make very reasonable decisions with description lists, and I think the dfn is in the right spot. Good stuff! Thanks for sharing!
The nav in your details dropdown doesn't have the li and a styles applied because your CSS prefaces those with .viewmenu -- and there's no class of "viewmenu" with details. The rest of your work looks AWESOME - great job with headings, time, all of the sections and articles!
🔥🔥🔥🎉🎉🎉 You are really doing some great work in these challenges, William! I appreciate your comments and understanding how you're thinking about the content. You might consider starting <main> with the article, rather than the header nav. I think the details/summary idea for the additional links is a nice touch. Not sure the <nav> there is needed, but that is not a huge deal. I think your description lists look great, and I'm really excited about your formatting in the subheads. Great work, and thank you so much for sharing!
Maybe it is premature to share this WIP. I realize there are many possible approaches to this, and this is perhaps too simplistic: https://codepen.io/romola/pen/mdWqjMB?editors=1100
I am not satisfied with the article footer. Some of the lists could be asides and the appearance is not visually what it should be.
The markup looks great. Consider the top nav might be enclosed in a <nav>. In the <aside> around line 40, this might be an unordered list. For the <dl> at the end - remember this is a list of property/value pairs. The <ul> and <ol> are just lists of things. It's possible you could change the markup at the end such that the <dl> is declared once, followed by a series of dt/dd's. For example: <dt>total area</dt><dd>2,166,086 km<sup>2</sup> (836,330 sq mi)</dd>
But it's really looking good -- you've made so much progress with these!
In regards to the look -- #30DaysofCSS will start this summer 😁 For now, consider the footer at the bottom of the article might have the same blue background and white text as your navbar?
I made some improvements you suggested. I didn't figure out how to control the vertical spacing and will deal with that when I need to elsewhere:
https://codepen.io/romola/pen/mdWqjMB?editors=1100
Broadly speaking - vertical spacing is due to margin. Many HTML elements have margin set by default, frequently 1 em (16 px) above and below each element.
However, the tricky thing is that vertical margins collapse. In other words, if I have two elements stacked, one with a bottom margin of 1 em and one with a top margin of 1 em, the total is.... 1em. If you think about a series of paragraphs, with 1em of margin set on their top and bottom, you know how this works. It looks like there's even spacing throughout the series of paragraphs -- this is due to the collapsing margin.
Padding is additive, so in the same example, 1+1 = 2.
Here's a pen to demonstrate: https://codepen.io/jen4web/pen/bGqvqPJ?editors=1100
Thanks. I will make some improvements. I hope I finish this 30 days before the next ones start.
My Answer:-
https://codepen.io/kajal-28/pen/poeeqKq
🔥🔥🔥🎉🎉🎉 Woo woo, well done! I think you're missing the day in your final <time>, but other than that, things look great! Thanks for sharing 😁
Thanks 🤠
https://codepen.io/kldickenson/pen/MWJMpRv There are a couple of dl dd dfn decisions I made that I'm not 100% sure about. Open to suggestions of another way to handle them.
🔥🔥🔥🎉🎉🎉 Karen, I think it's fantastic, just like your other work. You make very reasonable decisions with description lists, and I think the dfn is in the right spot. Good stuff! Thanks for sharing!
https://codepen.io/kelsey-van-ert/pen/oNBQoQN. This was tricky for me. I ran into some bumps with CSS and the <nav> bar.
The nav in your details dropdown doesn't have the li and a styles applied because your CSS prefaces those with .viewmenu -- and there's no class of "viewmenu" with details. The rest of your work looks AWESOME - great job with headings, time, all of the sections and articles!
🔥🔥🔥🎉🎉🎉 You are really doing some great work in these challenges, William! I appreciate your comments and understanding how you're thinking about the content. You might consider starting <main> with the article, rather than the header nav. I think the details/summary idea for the additional links is a nice touch. Not sure the <nav> there is needed, but that is not a huge deal. I think your description lists look great, and I'm really excited about your formatting in the subheads. Great work, and thank you so much for sharing!
And you're doing great work 😁