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.
This has one issue I haven't resolved. I want the Search link to be spaced to the end of the list it is in, but its special case causes it to fail to change to column style when the width is narrowed. I am not sure how to deal with that. I am also not sure I should not have used sections anywhere. In addition, I know my use of links to <dfn> for some of the *'d notes is far from perfect. I would like to correct the Search link placement but not sure what to do. I got the responsive flex list working by copying the csstricks trick. I should cite that.
Your markup looks great! 🔥🔥🔥🔥🔥🔥 Do consider your heading levels here. Ingredients, Instructions, and Notes might all be the same level (probably <h3>). That means within notes, for Freezing Instructions, Tools, Chocolate, and Eggs, these might be <h4> headings. For tools, you might consider an unordered list, or you could leave it as a paragraph. Nav bars look great. Thanks for sharing!
🔥🔥🔥🔥🔥🔥 Wow!!! Fantastic work with the styling and the markup -- looks great and it's very semantic! Love the details/summary elements for the notes and your styling for the description list. Great work!
https://codepen.io/laucrisw/pen/GRrYyaw?editors=1000 I think some of the other elements of this challenge were difficult but I was able to use the header and footer in the way that I saw best fit so this was helpful for putting this into practice :)
Great! I'm so glad you found this helpful. Now that you've seen today's post about headings, why don't you revisit this with that in mind. As you look at what's here, think about:
- what is the title of the page?
- what might be navigation? (there aren't any links so you may need to imagine them...)
https://codepen.io/romola/pen/qBrVZeO?editors=1100
This has one issue I haven't resolved. I want the Search link to be spaced to the end of the list it is in, but its special case causes it to fail to change to column style when the width is narrowed. I am not sure how to deal with that. I am also not sure I should not have used sections anywhere. In addition, I know my use of links to <dfn> for some of the *'d notes is far from perfect. I would like to correct the Search link placement but not sure what to do. I got the responsive flex list working by copying the csstricks trick. I should cite that.
If you want the search button to align left with everything else at mobile dimensions, inside of your media query, add this:
.push-right {
align-self: flex-start;
}
That will push the search button to the left, in alignment with everything else.
Looks great!!!
https://codepen.io/kajal-28/pen/KKWaLEg
Your markup looks great! 🔥🔥🔥🔥🔥🔥 Do consider your heading levels here. Ingredients, Instructions, and Notes might all be the same level (probably <h3>). That means within notes, for Freezing Instructions, Tools, Chocolate, and Eggs, these might be <h4> headings. For tools, you might consider an unordered list, or you could leave it as a paragraph. Nav bars look great. Thanks for sharing!
I am so thankful for your time😊😊
https://codepen.io/kldickenson/pen/LYxoYGx
🔥🔥🔥🔥🔥🔥 Wow!!! Fantastic work with the styling and the markup -- looks great and it's very semantic! Love the details/summary elements for the notes and your styling for the description list. Great work!
https://codepen.io/jarchaff/pen/wvgNGOb?editors=1000
I moved a few things around but the content is the same, and I included comments in my HTML this time :)
🔥🔥🔥🔥🔥🔥 Awesome -- everything looks really good! A couple of quick things:
- don't forget to close your first header
- your social media links might be in an <address> (remember that, so long ago!)
- Love your headers, great job with this!!!
https://codepen.io/laucrisw/pen/GRrYyaw?editors=1000 I think some of the other elements of this challenge were difficult but I was able to use the header and footer in the way that I saw best fit so this was helpful for putting this into practice :)
Great! I'm so glad you found this helpful. Now that you've seen today's post about headings, why don't you revisit this with that in mind. As you look at what's here, think about:
- what is the title of the page?
- what might be navigation? (there aren't any links so you may need to imagine them...)
- and you may want to look at the CodePen example that has something similar to this marked up: https://codepen.io/erika4web/pen/rNjqBjG?editors=1100
Thanks for sharing in public -- it's always great to get feedback, and you are off to a great start with this!
🔥🔥🔥🔥🔥🔥 woo woo!!!! Very nicely done -- love all of your comments. Great job thinking through the problem and defending your choices!