#15DaysOfCSS: Next steps, take the challenge again!

πŸŽ‰πŸŽŠπŸ₯³ Congrats on completing the challenge! πŸŽ‰πŸŽŠπŸ₯³

Thank you so much to all of you who participated in the #15DaysOfCSS navbar challenge. Erika and I have so much fun watching you learn and grow.

We will continue to monitor the challenge exercises and give feedback on your work for the next month or so. If you’re not done, keep going!

Signed up late? Keep scrolling - you can participate on demand!

Take #15DaysOfCSS starting today!

βœ… Three ways to help us πŸ‘

If you found benefit in this challenge, we’d appreciate it if you would help us!

πŸ₯‡ Give us feedback and get the ebook for half price! πŸ“š

Please give us some feedback on our form and get the ebook for $4.50 (normally $9)! We use this feedback to improve our courses for the next one. Coupon code is delivered when you submit the form.

The coupon code is only good through October 10, so hurry - fill out the review today!

Give Jen and Erika some feedback!

πŸ₯ˆ Purchase the #15DaysOfCSS ebook! πŸ“š

We’ll be assembling these 15 days of CSS posts into an ebook for your reference. The #15DaysOfCSS ebook will be released at 11 AM on November 5 and will be automatically delivered to you at that time. It will be in EPUB format, so it may be read in the browser or in most ebook readers.

The ebook is $9… unless you get the coupon code above, and then it’s $4.50.

Get the #15DaysOfCSS ebook!

Or purchase the #30DaysOfHTML ebook!

Available for $6, this ebook is a compilation of April 2021’s challenge to increase your HTML vocabulary.

Get the #30DaysOfHTML ebook!

πŸ₯‰ Buy us a coffee! β˜•οΈ

We need lots of coffee after this challenge - so if you’d like to buy us a coffee to support our efforts, it’s appreciated!

Buy Erika and Jen a coffee

🌈 Take #15DaysOfCSS or #30DaysOfHTML starting today for FREE πŸ¦„

Our email courses are FREE and available on-demand! Sign up now and get #15DaysOfCSS, #30DaysOfHTML, or both, delivered to your inbox!

Take #15DaysOfCSS now!

Take #30DaysOfHTML now!

πŸ‘©πŸ»β€πŸ« Watch Jen teaching at Frontend Masters LIVE on October 14 πŸ‘€

If you’re a Frontend Masters member, join Jen on October 14 for β€œGetting Started with CSS,” which walks you through creating a two-page website with HTML and CSS. Headers, footers, text, basic layouts, and of course, NAVBARS will be part of the journey!

Watch Jen at Frontend Masters

Thank you all again for a fun 15 days, and we’ll see you again soon. πŸ’–

Jen & Erika

#15DaysOfCSS Day 15: Fat Footers

Footer navigation is important too!

πŸŽ‰πŸ“šGet the #15DaysOfCSS e-bookπŸ“šπŸŽ‰

These #15DaysOfCSS posts will be compiled into an e-book β€” pre-order now!

Email is great, and blogs are awesome, but it can be challenging to use them as a reference in the future. We'll be assembling this month's work into an e-book.

Pre-order the book

On our last day of #15DaysOfCSS, we present the Fat Footer, also known as the Sitemap Footer. (If you missed Days 1-14, we'll tell you how to catch up with all of our posts at the end of this email!)

You've seen this pattern on many websites. Since we've talked so much about Font Awesome this week, here's the fat footer at the bottom of their site:

In today's websites, fat footers are used to meet accessibility and search engine requirements, exposing all links for easy browsing. The location at the end of the page is consistent, and users expect to find helpful navigation there as much as the navigation bar at the top of the page.

After the crazy responsive navbars we've been building this week, the fat footer is delightfully simple. It also gives us a chance to introduce you to a few new concepts in layout you might enjoy, as well as some thinking about selectors.

Step 1: Start with structured HTML

In today's CodePen example, we have five main navigation items, and four of them have a second level of navigation. Make sure you mark up your nested lists correctly!

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a>
        <ul>
          <li><a href="#">Mission</a></li>
          <li><a href="#">Vision</a></li>
          <li><a href="#">Board of Directors</a></li>
          <li><a href="#">Careers</a></li>
        </ul>
      </li>
... etc etc etc ...
  </ul>
</nav>

We have used a <nav> element around our fat footer. The reason why is because it includes all of the links on the site. This could be major navigation as a result! You might also use the <nav> element around any navigation at the top of the page, as that may also be major navigation.

The <footer> element would wrap around the entire footer. Footers might include logos, descriptions, addresses, or other information in addition to the navigation.

Step 2: Boilerplate CSS

πŸ–₯ Follow along with today's CodePen example

We'll set up some basic styling outside of the media query. These styles are all concepts we've discussed many times in previous emails.

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
body {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.5rem;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
a {
  color: white;
  text-decoration: none;
  display: block;
}
a:focus {
  outline: 2px solid black;
}
a:hover {
  color: #fed330;
}

This styling produces some white links on a white background by default, so if you suddenly see nothing, that's great! 🀣

To fix that problem, let's make our footer look like a footer. Let's give it a background color and some spacing to make it look a little prettier.

nav {
  margin-top: 5rem;
  padding: 3rem 2rem;
  background-color: #2d98da;
  border-top: 2px solid black;
}

Nice β€” however, you may be bothered by the fact that the color doesn't go all the way across the browser window. There's a tiny white border that runs around all of the blue area. Why is that?

The <body> element has a little bit of margin or padding assigned to it by default, depending on what browser you're using. To the body style then, let's turn that off:

body {
  padding: 0;
  margin: 0;
}

Step 3: Mobile styles

πŸ–₯ Follow along with today's CodePen example

Our fat footer has lovely colors, but it is one long list of links... not very helpful. Let's distinguish between the main navigation links (Home, About, Education, Products, Contact) and the sub-links.

To our main navigation links, let's make them bold and uppercase.

ul {
  font-weight: 700;
  text-transform: uppercase;
}

Well... that's great, but now they are ALL bold and uppercase! How can we make this style affect only the top links?

One possibility is to simply line up a second declaration that neutralizes these styles for levels of navigation beyond the first level.

ul ul {
  font-weight: 400;
  text-transform: capitalize;
}

Better and better! We're almost done with mobile, but we have a few tiny things to resolve first. First, could we put more space between the links? And second, could we break up this long list of navigation into chunks?

Of course we can!

ul {
  line-height: 1.5;
}
nav > ul > li {
  margin-bottom: 3rem;
}

To generate more space between links, we used the line-height property. Notice it has no units. It can take units, but it's often best to leave it without units, so that line-height may adjust easily to different font sizes.

The second selector looks a bit odd. The > symbol is the child combinator. The child combinator specifies a relationship between parent and child. In this case, we're saying a li element whose parent is a ul element whose parent is a nav element. This selects our first level of navigation only, whereas the second level of navigation is unaffected by this style. Had we chosen nav ul li as our selector instead, then both levels of navigation would be affected by these styles.

As a result of both of these styles, we have nicely grouped navigation with space between links.

Step 4: Tablet styles

πŸ–₯ Follow along with today's CodePen example

The list of links like this is OK for tablet, but it is a little long -- and it might be VERY long with a longer menu.

This might be a good time to make use of CSS columns. With just a little code, we can wrap our long list into two columns instead of one.

@media (min-width: 450px) {
  ul {
    columns: 2;
  }
  ul ul {
    columns: 1;
  }
}

Columns are flexible and will break where needed. Think about a dead-tree newspaper and how its columns typically work. That’s the same as we have here.

Step 5: Desktop styles

πŸ–₯ Follow along with today's CodePen example

On desktop, the footer typically stretches across the page. We haven't used Flexbox to this point; here would be a great place to include it.

@media (min-width: 850px) {
  ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 2rem;
  }
  ul ul {
    display: block;
  }
}

The top-level <ul> will be displayed as Flexbox. Any following <ul> elements will be simple vertical lists. You could also keep the Flexbox display and switch to a column.

And that's it! See today's CodePen example for the final HTML and CSS.

πŸŽ‰πŸŽŠπŸ₯³ Thank you! Next steps! πŸŽ‰πŸŽŠπŸ₯³

Thank you so much for joining us on #15DaysOfCSS! We had a fantastic time bringing you this material, and we hoped you learned a ton.

We’ll be around for the next month or so, giving feedback on the challenges from the course. So if you haven’t finished them yet, we’ll be here!

βœ… Please give us some feedback πŸš€

Please take 2 minutes to fill out our quick feedback form. We used your #30DaysOfHTML feedback to improve this course and hope you liked the changes.

πŸ‘ If you liked the course… πŸ’–

🀷🏻 Did you miss some posts? πŸ€·πŸΏβ€β™‚οΈ

They are always available on the Substack website. You may also subscribe on-demand to the #15DaysOfCSS series to start at anytime - it’s still free!

πŸ–₯ Today’s CodePen examples

Follow along with today's CodePen example

πŸ‘©πŸ½β€πŸ’» Challenge: Favorite Internet Animals

πŸ‘©πŸ½β€πŸ’»  We close with a fat footer of your favorite internet animals: parkour squirrels, skateboarding dogs, internet cats, and predictive rodents.

Take today's CodePen challenge

πŸ“š More information and examples

πŸ“š Fat Footer Design Pattern (examples and design inspirations)

πŸ“š MDN: Child combinator

πŸ“š MDN: CSS columns

πŸ“½ LinkedIn Learning: HTML and CSS Creating Navigation Bars (subscription required)

πŸ“½ Flexbox and Grid version 2 at Frontend Masters (subscription required)

#15DaysOfCSS Day 15: Fat Footer Challenge

You try it: Continue working with your martial arts navbar from Days 12 and 13, adding a CSS-only dropdown to the responsive navbar created yesterday.

Alternative: Choose one of the non-responsive navbars from earlier in the course, and add a dropdown to this instead.

Fork the CodePen problem, make your changes, and share your answer in the thread below! Comment your work to tell us why you made your choices.

Take Today's CodePen Challenge

How to Fork a CodePen

  1. 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.

  2. 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.

View 4 comments β†’

#15DaysOfCSS Day 14: CSS Dropdowns no Bootstrap 🀯

Also known as multi-level horizontal navbars

πŸŽ‰πŸ“šGet the #15DaysOfCSS e-bookπŸ“šπŸŽ‰

These #15DaysOfCSS posts will be compiled into an e-book β€” pre-order now!

Email is great, and blogs are awesome, but it can be challenging to use them as a reference in the future. We'll be assembling this month's work into an e-book.

Pre-order the book

This week has been complicated, as we have started with accessible icons, added responsiveness to our navbars, and added a hamburger button. But we're not through! Now it's time to add a CSS-only dropdown to our work. As always, there's a ton to cover!

We'll continue working with the CodePen example from Day 13, which contains accessible icons in a responsive navbar with a hamburger button. Now it will also have a dropdown!

βœ… Step 1: Add a second layer of HTML to our navbar

Follow along with today's CodePen example

As we covered back on Day 1 of the challenge, a second layer of navigation is an unordered list nested inside of a <li> element. Here's the newest addition to our navbar; see the example for the rest of the HTML.

<li class="dropdown"><a href="https://jen4web.substack.com/about">About <span class="fas fa-caret-down" aria-hidden="true"></span></a>
  <ul class="dropdown-menu">
    <li><a href="#">Mission</a></li>
    <li><a href="#">Vision</a></li>
    <li><a href="#">Board of Directors</a></li>
    <li><a href="#">Careers</a></li>
  </ul>
</li>

Let's run through each addition:

  • We've added a class="dropdown" to the <li> element which will contain a dropdown, in addition to our second level navigation which includes a <ul> with a class of .dropdown-menu.

  • Just after the "About" text, we've added an icon to indicate this is a dropdown menu. It's a small triangle pointing down.

  • Following the icon, we've added our second level of links as an unordered list and given it a class of dropdown-menu.

  • And as discussed several times in the challenge, the second layer of navigation is contained INSIDE the <li></li> for About.

Having added this HTML, you should see a total mess! Yay!

(Note: if your screen/window isn't as wide as mine, some of the main navigation items may wrap onto the next row and look even more messy than this.)

πŸ–₯ Step 2: Making this a dropdown for desktop and tablet dimensions

Follow along with today's CodePen example

Consider your layouts across devices. It's unlikely you'll want a dropdown on mobile. You may or may not want one on tablet.

For this example, let's say we want the dropdowns on tablet and on desktop, but not on mobile. Therefore, we'll add styles to our tablet media query. And there's only a few needed to make this work!

Currently we have the dropdown visible in our design, so let's hide it.

.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1000;
}

This is somewhat familiar, as we had similar settings yesterday on our hamburger menu. We set our menu display to none, so it's hidden away. We also set our position to absolute, because we'll want to move this around on the screen independently of its current location. The z-index ensures our menu is on top and not tucked inside some other element.

Next, we need to show our menu on hover. We'll also show it on focus. Focus is the state that happens as someone tabs through links on the web page.

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  display: block;
  padding: 0.5rem;
  background-color: #fae2d2;
}

The easy parts here are the styles. display: block makes the menu visible. padding gives it a bit of space around the edge, and we've assigned a light orange background color, so we can clearly see the menu.

The selectors are a little more challenging. Remember to read them from right to left. For a class of .dropdown-menu, in which the :hover state of the class of .dropdown is true, AND for a class of .dropdown-menu, in which the :focus-within state of the class of .dropdown is true, execute these styles.

You're familiar with hover, but maybe not with :focus-within, which is a new pseudo-class. MDN defines it this way:

The :focus-within CSS pseudo-class matches an element if the element or any of its descendants are focused. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)

Here, the descendants would be our second layer of navigation. That means that by including :focus-within in this style, the menu will be exposed to tab through it in addition to seeing the menu when we hover over it.

Unfortunately, our menu isn't quite working yet! What's going on?

First, there's something weird happening with the alignment of the menu items with the first element and the second. Second, the menu is being cut off somehow. Where is that coming from?

Because we have so much code already in place from our hamburger button and responsive designs, we've introduced a few issues unknowingly in the last few days. In this case, the offender is the overflow property we placed on nav. We placed it there just in case any navigation got overly long.

In our mobile styles within the nav declaration, overflow is set to hidden, and then we change that to auto within the nav style in the tablet media query. Let's change that value to visible instead, so you'll see this inside of the tablet media query:

@media (min-width: 550px) {
  nav {
    overflow: visible;
  }
}

(Include all of the other style declarations that are in nav as well! I removed them to keep the email shorter.)

With that property changed, you should now see the dropdown on desktop and on tablet.

Closer! Now we just have that mystery of why the "mission" link looks centered. It's the first link in the list... hmm... kind of like a first child...

@media (min-width: 550px) {
  li:first-child a {
    text-align: center;
  }
}

At tablet dimensions, our logo is centered on its own line. It was never reset at desktop dimensions. If we set text-align: left at desktop dimensions, the dropdown will be fixed on desktop.

However, when we go to tablet dimensions, that fix doesn't apply to the dropdown here:

Why is that? Because li:first-child a is a pattern in our main navigation and in the second level of navigation.

The better fix is to override the style for the first child in the second level of navigation:

.dropdown li:first-child a {
  text-align: left;
}

We'll place that in the tablet media query, which will carry into the desktop media query. Now the dropdown menu items are correctly aligned at desktop and tablet dimensions. Yay! Are we done yet?

πŸ“± Step 3: What about mobile?

Follow along with today's CodePen example

Our navbar looks great on tablet and desktop, but what about mobile?

We've got all of the nav items displaying at the same level, so the organization of first level - second level is lost on the mobile display.

Fortunately, we've talked about styling multi-level vertical navbars before, so we can tweak our mobile styling to get a little order with these links.

Part of the reason for this chaotic look is that all of our nav items are currently centered on mobile. That was great with one level of navigation, but left alignment will work better with two levels of navigation. Therefore, outside all of the media queries and in the mobile styles, in ul change align-items: center to align-items: flex-start. This will align our items to the left.

ul {
   align-items: flex-start;
}

All of our links look like they're equally important now. Let's style that second level of navigation to have a smaller font and an indent:

ul ul {
  margin-left: 2rem;
  font-size: 80%; 
}

πŸ₯³ Whew! NOW we’re done! Right?

🧹 Step 4: Cleanup! 🧼

Anytime you add new styles outside of the media queries, there's a good chance you broke something affected by later media queries. Let's see what we broke this time. 😁

It's not too bad, but we do have a few tiny fixes to make.

First, the menu is indented and has a smaller font size on tablet and desktop. Considering we added a style that does exactly that for mobile, this is not surprising! To the tablet media query, then, let's add some styles to fix that:

@media (min-width: 550px) {
  ul ul {
    margin-left: 0rem;
    font-size: 100%; 
  }
}

This removes the margin and resets our font size back to the original value of 1.2rem. You could also say font-size: 1.2rem if that's clearer.

The other problem was obvious on our desktop display only. Here the navigation was pushed to the top of the page, rather than inline with the middle of the logo. Once again, what did we change? We set the ul style to align-items: flex-start. Let's reset that in the tablet media query.

@media (min-width: 550px) {
  ul {
    align-items: center;
  }
}

But wait - doesn't this affect both levels of navigation? It would, except for one line of HTML:

<ul class="dropdown-menu">

Using CSS, we have .dropdown-menu set to display: none or display: block, depending on whether the menu is showing or not. This overrides the earlier declaration of display: flex on the ul style.

Now you have a working responsive navbar, with accessible icons, with a hamburger button, and with a dropdown. Woo hoo!!!

πŸ–₯ Today’s CodePen example

View today's CodePen example

πŸ‘©πŸ½β€πŸ’» Challenge: Martial arts and navbars part 3

πŸ‘©πŸ½β€πŸ’»  Can you make a responsive navbar with accessible icons, CSS-only hamburger, and CSS-only dropdowns? We also offer ways to make this challenge easier.

Take today's CodePen Challenge

πŸ“š More information and examples

None today - we will exceed the email limit if we include them!

#15DaysOfCSS Day 14: CSS-only Dropdown Challenge

You try it: Continue working with your martial arts navbar from Days 12 and 13, adding a CSS-only dropdown to the responsive navbar created yesterday.

Alternative: Choose one of the non-responsive navbars from earlier in the course, and add a dropdown to this instead.

Fork the CodePen problem, make your changes, and share your answer in the thread below! Comment your work to tell us why you made your choices.

Take the CodePen Challenge

How to Fork a CodePen

  1. 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.

  2. 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.

View 6 comments β†’

Loading more posts…