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.
🌈🌈🌈 Very cool! My screen might be a bit smaller than yours, so some of the nav items were very tall. The :focus didn't connect to the line for every nav item. However, if you add this to your code, it will help a ton:
nav ul { align-items: flex-end; }
That will line up all of the nav items on your line at the bottom, and then the effect will be connected to the bottom line throughout. Nicely done -- thanks for sharing!
Ah! Thank you, Jen. I'm trying to only use elements and no classes. I changed the color of the link using a more specific element target 'nav ul li a' overriding your 'a' element. And then the same with the pseudo-elements a:hover. The background color only covers the space behind the text on hover. I want <nav ul li a:hover> to include the 1rem I put on the <nav ul li> similar to what I did here http://maker-events.com/ ... I used <position:relative> and <display: block>. I'm wondering if there's a way to achieve this or am I getting ahead of myself?
First assignment is just getting the markup right! 🤣 If you want the hover state to have the same padding/margin as the non-hover state, then put the padding/margin on the a style, not on a:hover. We get through all kinds of material in 15 days, but you're up around day 10 right now 🤣 Thanks for sharing!
Finallly found the time to start this course, bit rusty after being ill and cant remember how to put the navbar across the top; but im sure i will pick it up as i go along.
Coming back from a brief break from coding (graduated from an online bootcamp, only this past December | coded off and on for a few more months before taking a break).
🌈🌈🌈 Awesome, nicely done! Markup looks good. I think you might have pasted from a separate HTML/CSS doc -- you don't need to include <head> code or the <body> tags on CodePen (just for future reference - the code looks great though!).
One thing to consider for the future -- you set a height on your navbar. There's nothing wrong with this per se -- but if I enlarge the text as a user, your navbar will not enlarge and the text will spill out. A beter way to do this rather than using height is simply to set padding or margin on your navbar. That will allow the text to grow as needed and the navbar is preserved.
Yeah, CodePen supports Emmet, which is responsible for that shortcut. I guess it makes sense it would work that way! You don't need to do that going forward -- just write whatever would go in the body tag. Nice job!
🌈🌈🌈 Nicely done!!! HTML and CSS look great. When you put bold styling on the hover state, that will result in that tiny twitch you see when you roll over the links. No way to avoid it, unfortunately, other than having bold links all the time. Great work, thanks for sharing!
I used the gap property to preserve the space between items even as the screen size decreases, and justify-content: space-between to make sure the first and last items are aligned to the start and end, respectively, of the space. But is there a better way to achieve this?
🌈🌈🌈 Looks great! I think your method works just fine. space-between is the right choice to justify the start/end of the navbar, and the gap property works well also. Thanks for sharing!
I didn't have a clear idea of how submenus might be relevant, but used one example for Program-->Courses. About sometimes includes Contact but Contact is also sometimes part of the main navigation.
I honored your colors although I work for that OTHER UNIVERSITY in Ann Arbor!
https://codepen.io/kldickenson/pen/ExXXGLQ
LOL there are other universities?
Markup looks awesome, yay! 🌈🌈🌈 I think you meant flex-wrap instead of flex-warp though 🤣 Thanks for sharing and great to have you back for round 2!
Not sure weather that's the right go to for that navigation effect (appreciate your input y'all)
https://codepen.io/yousifhmada/pen/ExXvjLM
🌈🌈🌈 Very cool! My screen might be a bit smaller than yours, so some of the nav items were very tall. The :focus didn't connect to the line for every nav item. However, if you add this to your code, it will help a ton:
nav ul { align-items: flex-end; }
That will line up all of the nav items on your line at the bottom, and then the effect will be connected to the bottom line throughout. Nicely done -- thanks for sharing!
Oh! screen sizes totally screwed me over :grin-smile: (didn't see that comin')
Have always wanted to do that though :"D
https://codepen.io/ihassan-ng/pen/rNwzNag
🌈🌈🌈 Woo woo! Looks great, thanks for sharing!
https://codepen.io/w0whitaker/full/GREEbeB
🌈🌈🌈 Woo woo! Great to have you back, William - markup looks awesome! One thing I'd add to the end of your CSS --
nav > ul li:first-child::before {
content: "";
}
That will get rid of the | that starts your line of navigation 😃
Great job and thanks for sharing!
https://codepen.io/FlipDesign/pen/MWooxPY
🌈🌈🌈 Awesome job, Flip! Looks great and works well 😃
https://codepen.io/mozzie455/pen/GRLKjaM
Woo hoo! Looks great, well done!
Hi, and thanks for sharing these beautiful challenges and tips. Here is my solution https://codepen.io/theomeli/pen/QWxKxEX?editors=1100
Woo hoo, nicely done! HTML looks great!
This is what I came up with
https://codepen.io/vinayak_tyagi/pen/rNGVMqw
🎉🎉🎉 Awesome job -- markup looks excellent!
https://codepen.io/gamzebercin/pen/qBPBrXJ
🎉🎉🎉 Awesome job -- markup looks excellent!
Here's my solution. https://codepen.io/Lucille/pen/oNwrJXq?editors=1100
Nice! Unfortunately, you've got one consistent HTML error (probably copy/paste) which means that none of your links are clickable:
<li <a href="https://informatics.indiana.edu/contact/index.html"> Contact</a></li>
Close the LI <li> and your links will work, but now they're red on a red bar.
I know you can do this. 😉 Thanks for sharing!
Ah! Thank you, Jen. I'm trying to only use elements and no classes. I changed the color of the link using a more specific element target 'nav ul li a' overriding your 'a' element. And then the same with the pseudo-elements a:hover. The background color only covers the space behind the text on hover. I want <nav ul li a:hover> to include the 1rem I put on the <nav ul li> similar to what I did here http://maker-events.com/ ... I used <position:relative> and <display: block>. I'm wondering if there's a way to achieve this or am I getting ahead of myself?
First assignment is just getting the markup right! 🤣 If you want the hover state to have the same padding/margin as the non-hover state, then put the padding/margin on the a style, not on a:hover. We get through all kinds of material in 15 days, but you're up around day 10 right now 🤣 Thanks for sharing!
https://codepen.io/keoverto/pen/dyRBbgp
🌈🌈🌈 Markup looks fantastic - nice work! You have an odd border and margin thing going on in your LI style:
li {
border-style: solid;
padding: 10px;
margin-right: 950px;
text-align: center;
background-color: ;
font-weight: bold;
}
Not quite sure what you're trying to do -- left alignment maybe? If that's the case, I'd change the LI style to this:
li {
padding: 10px;
font-weight: bold;
}
That gives you a little padding and the bold font -- maybe you're all set? Thanks so much for sharing!
https://codepen.io/la6ibrd/pen/jOwXged?editors=1100
Finallly found the time to start this course, bit rusty after being ill and cant remember how to put the navbar across the top; but im sure i will pick it up as i go along.
🌈🌈🌈 Woo hoo! Markup looks great - nicely done! Erika may take issue with the green letters though 😁
Hello, here is my solution for day one: https://codepen.io/ednaq/pen/dyRdKJJ?editors=1100
🌈🌈🌈 Perfect!!! HTML markup looks great. Thanks for sharing!
Coming back from a brief break from coding (graduated from an online bootcamp, only this past December | coded off and on for a few more months before taking a break).
Anyways, here's my answer:
https://codepen.io/cgrumler/pen/XWgzqpJ
🌈🌈🌈 Awesome, nicely done! Markup looks good. I think you might have pasted from a separate HTML/CSS doc -- you don't need to include <head> code or the <body> tags on CodePen (just for future reference - the code looks great though!).
One thing to consider for the future -- you set a height on your navbar. There's nothing wrong with this per se -- but if I enlarge the text as a user, your navbar will not enlarge and the text will spill out. A beter way to do this rather than using height is simply to set padding or margin on your navbar. That will allow the text to grow as needed and the navbar is preserved.
Thanks for sharing - glad you're here!
For the mark-up, I just basically did the "!" shortcut within HTML where I enter ! and then press "Tab" to generate the boilerplate for me.
Thanks for the tip about the height on my navbar vs just add padding or margin!
Yeah, CodePen supports Emmet, which is responsible for that shortcut. I guess it makes sense it would work that way! You don't need to do that going forward -- just write whatever would go in the body tag. Nice job!
Here is my day one solution:
https://codepen.io/chadelofson/pen/ExXQwJw
🌈🌈🌈 Well done! Markup looks great. Thanks for sharing!
Hello. I am a very late newcomer and this is my simple work.
https://codepen.io/serdar-cihan-g-le-/pen/NWgydej
🌈🌈🌈 Fantastic job, well done! We'll get into more complicated examples in the coming days and in weeks 2-3. Thanks for sharing!
https://codepen.io/luciano991/pen/NWgXoOP?editors=1100
Oops! I do not see your changes - did you forget to hit "save"?
Day 1, Well here is my code.. Did I miss anything?
I made use of the <a> tags. to make all my nav menus clickable.
https://codepen.io/brent-rankin/pen/jOwYyBL
Oops - I see your fork, but your changes weren't saved. Did you forget to save, or did you give me the wrong link?
https://codepen.io/brent-rankin/pen/jOwYyBL
I see the changes saved... not sure why don't...
I'm so sorry -- I don't see them! Try copy/pasting the URL to a different web browser? Maybe you won't see the changes either?
Here is the HTML solution I came up with. Thank you for making me smarter about what is allowed in an unordered list.
https://codepen.io/adamabundis/pen/QWgOxBK
🌈🌈🌈 Looks great!!! So glad the tips helped 😁
Hello! here is my navbar. I did just a little bit of CSS to remove the bullets and change the display.
https://codepen.io/athelas85/pen/XWgzaGN
🌈🌈🌈 Great to have you back, Ana! Your navbar looks great and works well, and the markup is excellent. Thanks so much for sharing!
https://codepen.io/cathwaldron/pen/MWoEgqV
I edited html and also css. Looking forward to learning more and getting better.
🌈🌈🌈 Nicely done!!! HTML and CSS look great. When you put bold styling on the hover state, that will result in that tiny twitch you see when you roll over the links. No way to avoid it, unfortunately, other than having bold links all the time. Great work, thanks for sharing!
https://codepen.io/joyannew/pen/RwgZmGX
I used the gap property to preserve the space between items even as the screen size decreases, and justify-content: space-between to make sure the first and last items are aligned to the start and end, respectively, of the space. But is there a better way to achieve this?
🌈🌈🌈 Looks great! I think your method works just fine. space-between is the right choice to justify the start/end of the navbar, and the gap property works well also. Thanks for sharing!
Didn't mess with CSS but here's the completed HTML. https://codepen.io/annasoorim/pen/vYZJRem
🌈🌈🌈 Awesome! This was an HTML challenge - some people were eager to get to the CSS, which is fine. You did great - thanks for sharing!
I didn't have a clear idea of how submenus might be relevant, but used one example for Program-->Courses. About sometimes includes Contact but Contact is also sometimes part of the main navigation.
https://codepen.io/romola/pen/mdwMWxo?editors=1100
We'll do more with multi-level navbars next week.
I see that some people have done a lot more with this, but I don't have as much time as I thought I would today.
The basic markup is fast - some are just excited to make fancier navbars right away!
🌈🌈🌈 Awesome job, Chris! Although Erika might disagree with your color choices 🤣
You all just have to mess hunh?
NO RESPECT
Yes, we have lots of ground to cover!