64 Comments
Sep 13, 2021Liked by Jen Kramer, Erika Lee

I honored your colors although I work for that OTHER UNIVERSITY in Ann Arbor!

https://codepen.io/kldickenson/pen/ExXXGLQ

Expand full comment
author

LOL there are other universities?

Expand full comment
author

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!

Expand full comment
Sep 13, 2021Liked by Erika Lee, Jen Kramer

Not sure weather that's the right go to for that navigation effect (appreciate your input y'all)

https://codepen.io/yousifhmada/pen/ExXvjLM

Expand full comment
author

🌈🌈🌈 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!

Expand full comment
Sep 13, 2021Liked by Jen Kramer

Oh! screen sizes totally screwed me over :grin-smile: (didn't see that comin')

Expand full comment
Sep 13, 2021Liked by Erika Lee, Jen Kramer

Have always wanted to do that though :"D

Expand full comment
Sep 13, 2021Liked by Jen Kramer, Erika Lee
author

🌈🌈🌈 Woo woo! Looks great, thanks for sharing!

Expand full comment
Sep 13, 2021Liked by Erika Lee, Jen Kramer
author

🌈🌈🌈 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!

Expand full comment
Sep 13, 2021Liked by Erika Lee, Jen Kramer
author

🌈🌈🌈 Awesome job, Flip! Looks great and works well 😃

Expand full comment
Feb 27Liked by Jen Kramer
author

Woo hoo! Looks great, well done!

Expand full comment
Nov 6, 2022Liked by Jen Kramer

Hi, and thanks for sharing these beautiful challenges and tips. Here is my solution https://codepen.io/theomeli/pen/QWxKxEX?editors=1100

Expand full comment
author

Woo hoo, nicely done! HTML looks great!

Expand full comment

This is what I came up with

https://codepen.io/vinayak_tyagi/pen/rNGVMqw

Expand full comment
author

🎉🎉🎉 Awesome job -- markup looks excellent!

Expand full comment
Nov 29, 2021Liked by Jen Kramer
author

🎉🎉🎉 Awesome job -- markup looks excellent!

Expand full comment
Oct 6, 2021Liked by Jen Kramer

Here's my solution. https://codepen.io/Lucille/pen/oNwrJXq?editors=1100

Expand full comment
author

Nice! Unfortunately, you've got one consistent HTML error (probably copy/paste) which means that none of your links are clickable:

Expand full comment
author

<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!

Expand full comment
Oct 7, 2021Liked by Jen Kramer

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?

Expand full comment
author

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!

Expand full comment
Oct 4, 2021Liked by Jen Kramer
author

🌈🌈🌈 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!

Expand full comment
Sep 28, 2021Liked by Jen Kramer

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.

Expand full comment
author

🌈🌈🌈 Woo hoo! Markup looks great - nicely done! Erika may take issue with the green letters though 😁

Expand full comment
Sep 17, 2021Liked by Jen Kramer

Hello, here is my solution for day one: https://codepen.io/ednaq/pen/dyRdKJJ?editors=1100

Expand full comment
author

🌈🌈🌈 Perfect!!! HTML markup looks great. Thanks for sharing!

Expand full comment
Sep 17, 2021Liked by Jen Kramer

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

Expand full comment
author

🌈🌈🌈 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!

Expand full comment
Sep 17, 2021Liked by Jen Kramer

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!

Expand full comment
author

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!

Expand full comment
Sep 17, 2021Liked by Jen Kramer

Here is my day one solution:

https://codepen.io/chadelofson/pen/ExXQwJw

Expand full comment
author

🌈🌈🌈 Well done! Markup looks great. Thanks for sharing!

Expand full comment
Sep 17, 2021Liked by Jen Kramer

Hello. I am a very late newcomer and this is my simple work.

https://codepen.io/serdar-cihan-g-le-/pen/NWgydej

Expand full comment
author

🌈🌈🌈 Fantastic job, well done! We'll get into more complicated examples in the coming days and in weeks 2-3. Thanks for sharing!

Expand full comment
Sep 17, 2021Liked by Jen Kramer
author

Oops! I do not see your changes - did you forget to hit "save"?

Expand full comment

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

Expand full comment
author

Oops - I see your fork, but your changes weren't saved. Did you forget to save, or did you give me the wrong link?

Expand full comment

https://codepen.io/brent-rankin/pen/jOwYyBL

I see the changes saved... not sure why don't...

Expand full comment
author

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?

Expand full comment
Sep 15, 2021Liked by Jen Kramer

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

Expand full comment
author

🌈🌈🌈 Looks great!!! So glad the tips helped 😁

Expand full comment
Sep 15, 2021Liked by Jen Kramer

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

Expand full comment
author

🌈🌈🌈 Great to have you back, Ana! Your navbar looks great and works well, and the markup is excellent. Thanks so much for sharing!

Expand full comment

https://codepen.io/cathwaldron/pen/MWoEgqV

I edited html and also css. Looking forward to learning more and getting better.

Expand full comment
author

🌈🌈🌈 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!

Expand full comment
Sep 14, 2021Liked by Jen Kramer

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?

Expand full comment
author

🌈🌈🌈 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!

Expand full comment
Sep 14, 2021Liked by Jen Kramer

Didn't mess with CSS but here's the completed HTML. https://codepen.io/annasoorim/pen/vYZJRem

Expand full comment
author

🌈🌈🌈 Awesome! This was an HTML challenge - some people were eager to get to the CSS, which is fine. You did great - thanks for sharing!

Expand full comment

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

Expand full comment
author

We'll do more with multi-level navbars next week.

Expand full comment

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.

Expand full comment
author

The basic markup is fast - some are just excited to make fancier navbars right away!

Expand full comment
Comment deleted
Expand full comment
author

🌈🌈🌈 Awesome job, Chris! Although Erika might disagree with your color choices 🤣

Expand full comment
author

You all just have to mess hunh?

Expand full comment
author

NO RESPECT

Expand full comment
Comment deleted
Expand full comment
author

Yes, we have lots of ground to cover!

Expand full comment