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...)
A few things here... main is different than article, in that main designates the main content area for the site. Main could contain multiple articles. I don't think main gets a header and footer, though.
So I think I'd have main holding an entire <article>.
Inside the <article>, I'd include an article header and article footer. You have the header in place, but you've made it a main header, and I don't think that works. The footer is configured to be a site footer -- in other words, everyone would access this recipe from every page of the site. I don't think that's what you want here either, but it could be correct as a footer of the article.
The layout looks great. You've done some stuff with the navbar to make it work with the CSS-only menu layout from the other course -- great idea! I can't see your hamburger button, though. Not sure if you're missing a link to fontawesome or it's a styling issue.
In any case, lots of great thinking here -- nice job!
Yep, not only was I missing the font awesome link in the header, I didn't have the line that includes the actual hamburger icon or the closing "times" icon, although I somehow managed to get the rest of the original html for those links (*shrug*).
I added article to surround the recipe just inside the main element and moved the footer to inside the article.
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!
https://codepen.io/idlehands1969/pen/jEbaoZP?editors=0100
This was a lot, but by taking it one section at a time I got through it and figured out how to do the things I wanted to do.
A few things here... main is different than article, in that main designates the main content area for the site. Main could contain multiple articles. I don't think main gets a header and footer, though.
So I think I'd have main holding an entire <article>.
Inside the <article>, I'd include an article header and article footer. You have the header in place, but you've made it a main header, and I don't think that works. The footer is configured to be a site footer -- in other words, everyone would access this recipe from every page of the site. I don't think that's what you want here either, but it could be correct as a footer of the article.
The layout looks great. You've done some stuff with the navbar to make it work with the CSS-only menu layout from the other course -- great idea! I can't see your hamburger button, though. Not sure if you're missing a link to fontawesome or it's a styling issue.
In any case, lots of great thinking here -- nice job!
Yep, not only was I missing the font awesome link in the header, I didn't have the line that includes the actual hamburger icon or the closing "times" icon, although I somehow managed to get the rest of the original html for those links (*shrug*).
I added article to surround the recipe just inside the main element and moved the footer to inside the article.
🔥🔥🔥🔥🔥🔥 woo woo!!!! Very nicely done -- love all of your comments. Great job thinking through the problem and defending your choices!