As many of you know, I’ve created courses on CSS layouts at Frontend Masters for many years now.

CSS Grid & Flexbox for Responsive Layouts, v2 is all about the mechanics of Flexbox and Grid. How should we structure our HTML? What’s possible with each type of layout method? Great for developers who need to catch up on this part of CSS.

🆓 Getting Started with CSS (FREE COURSE with registration!) is all about thinking through a site design. How do we break a design comp into smaller, codable sections? How do we work through a problem, solving for each section, and then assembling those sections into a final product? Good for both newbies and experienced devs.

What happens when you hit a more challenging design, though? How might you apply concepts learned in these two courses to something you might encounter at work?

🎉 Introducing… Practical CSS Layouts 🤘🏽

For the last 2 months I have been working many hours each week on my upcoming Frontend Masters workshop and course, Practical CSS Layouts. It’s coming up May 16-17, in person in Minneapolis at Frontend Masters, or online from anywhere in the world.

We’ll be building three websites in two days for the fictional band, Magenta Lime. Here’s some screenshots of the desktop version of each responsive site.

🎁 What’s included??? 🌹

• All of the files - HTML, CSS, images, additional reading and references, everything.

• Follow along with all of the code as you watch. (And if you watch the recording, rewind me as many times as you like!)

• If you watch the live stream, ask questions! I’ll answer as many as I can.

💰 Pricing

This workshop isn’t free, but there are several ways you may access it.

• Frontend Masters pricing - note you could pay for one month and then cancel. However, I hope you’ll find this a valuable learning resource and keep your subscription longer! Team packages are also available.

• Frontend Masters free 30 day trial - check it out for a month for free.

• Github Student Developer Pack - if you qualify, you can get a free 6 month free subscription to Frontend Masters through this offer.

• You may inquire about international, low purchasing power rates by emailing support@frontendmasters.com.

• Other questions addressed on their FAQ.

😭 I can’t make it but I still want to watch!!! 👀

As with all Frontend Masters workshops, this one will be live-streamed May 16-17. It will be recorded, edited, and released as a full course sometime after. You may watch the workshop live or on demand with your Frontend Masters subscription. When the course is released, you can watch it with your subscription as well.

Hope to see you all in 2 weeks! 💖
Jen

My LinkedIn Learning course “Intro to Web Design and Development” is unlocked and FREE to view through January 25. Almost 35,000 people have viewed the course, and over 1300 people have rated it 4.7/5 stars.

While this is too basic for many of this newsletter’s readers, you work with people who need this course — project managers, graphic designers, copy writers and editors, managers, and more. Give the link to those you mentor, to the classes you teach, and share the link on social media.

The course gives a 30,000 foot view of the web, from defining terms like client and server, to planning websites, to writing a little HTML, CSS, and JavaScript, and ending with a quick overview of some no-code tools that may be used for building sites and apps.

View Intro to Web Design and Development

🎁 NEW course - CSS Logical Properties Coding Challenges

My NEW LinkedIn Learning course “CSS Logical Properties Code Challenges” introduces the world of logical properties via 12 coding challenges, ranging from super simple to head scratchers. Get introduced to the logical box model, writing modes, and widths and heights, and move on to refactoring existing code, absolute and relative positioning, Flexbox, and Grid.

Get challenged with Logical Properties

📰 In other news… 🗞️

I’m starting a new part-time contract job on Monday, building Webflow websites for an agency specializing in science communications. It’s so cool to bring back my biology background and help scientists tell stories.

Why Webflow? Because it offers flexibility in design, while offering scientists the ability to edit their sites without code. Looking forward to learning a ton!

💖🎁💐 Thanks for subscribing 💖🎁💐

Thanks so much for being part of this mailing list. I feature free HTML and CSS explainer videos as well as other resources around the web you may find useful.

I’ll email you again in a month with more updates:

• I have courses coming from LinkedIn Learning on Squarespace and a no-code overview course featuring 30+ different technologies.

• I’ll be recording Practical CSS Layouts at Frontend Masters on May 17-18, 2023. We’re just starting to plan this one, but expect this project-based course to focus on practicing page layouts, from Figma to final product.

Flexbox Froggy is not a good way to learn Flexbox. Yes, it asks students to recall values for properties associated with Flexbox. Yes, it gives you an adorable visual for how those properties and values impact the layout of frogs on lily pads.

Level 8, shown above, involves the flex-direction CSS property, which has a series of possible values. All of this is explained above the window for typing in the appropriate code to align the frogs to the lilypads.

Is the game fun? Absolutely! Students engage with the game quickly and easily. (Yes, also Flexbox Zombies and Flexbox Defender, which are similar games to teach Flexbox properties, with similar flaws to Flexbox Froggy.)

Do students know Flexbox once they reach level 24, the last possible level? No.

BUT IT TEACHES CSS PROPERTIES! THAT'S AWESOME!

Teaches is a strong word.

Flexbox Froggy asks students to remember specific CSS properties and the appropriate value to solve layout problems.

Students may understand or recognize where to place these properties to achieve prescribed layouts. Levels 1-23 all tell the students which properties will solve the presented layout problem. It does not always present the possible properties, asking students to remember those properties.

Level 24, the last level of the game, is unique in that it asks students to apply any of the properties to solve the final layout problem. This is the only level where there are possible incorrect properties provided.

WHY DID YOU EMPHASIZE REMEMBER, UNDERSTAND, AND APPLY?

Because these words are the basis of Bloom’s Taxonomy, a way of describing levels of learning and their depth.

Applied to the coding world, these first three levels of Bloom’s refer to concepts like:

• recalling syntax

• remembering HTML elements and attributes, CSS properties and values

• understanding what those elements, attributes, properties, and values mean, and describing their impact on some code

• filling in partially solved coding problems with appropriate lines of code to make it “work”

Sounds basic, no? That’s because it is. What if we had some other formats to truly bring learning to the students once they were introduced to the Flexbox properties and values?

• What if we asked students to solve problems without giving them the appropriate properties to use?

• What if we didn’t provide a list of values?

• What if we didn’t imply how many lines of CSS it would take to solve the problem?

• What if we gave students the wrong code and asked them to fix it to achieve the layout?

Finally, consider Flexbox’s critical parent/child (or flex-container/flex-item) relationship in HTML elements. Depending on where display: flex; is declared, that HTML element becomes the flex container. Its immediate descendents are flex items. Grandchildren and deeper descendents are unaffected. This directly impacts the styling of the page and is one of the biggest overlooked and misunderstood concepts when learning Flexbox. However, Flexbox Froggy never touches this discussion, focusing mostly on flex container properties. (Indeed, order, a property that specifically applies to children, is mixed with the parent properties. This amplifies learner confusion as this property “doesn’t work” when applied to the parent.)

WELL, OK, BUT I TOTALLY LEARNED FLEXBOX WITH THESE GAMES

Try my CodePen which emulates Level 24 in Flexbox Froggy. Match up the colors in the appropriate layout where the comment indicates. Can you do it? If not, why?

“Uh, I’m not a CSS expert.” Mmm hmm.

View the CodePen

WHAT ARE YOU LEADING UP TO, JEN?

If we look at almost any “teaching resource” for learning code, you will find similar problems. Coding instructors are all over the remember, understand, and apply levels of Bloom’s Taxonomy.

Then the instructors immediately jump you to create. “Now that you know everything about Flexbox, go lay out a web page. Have fun!”

What happened to analyze and evaluate?

These are the levels where deep thinking happens. Now that you have a general idea of how a concept works, it’s time to dig in further. Do you really understand what was taught to you? Can you predict what happens if certain properties or values are applied to a layout? Can you debug incorrect code? Can you provide an explanation about why this code works – or why that code doesn’t?

This is what’s missing in today’s coding education. It is assumed students are equipped to do this work on their own. It’s assumed they know this is what comes next, and it’s assumed that they will do it.

Unfortunately, students do not know that this is what they should do next, and they don’t know how to ask these questions. The instructor must lead through these levels, increasing student independence, before turning students loose on their own creative projects.

Expect to hear more from me about this over the coming months.

If you want to hear more about how to teach well online, be sure to subscribe to my Substack newsletter that covers these topics.

Subscribe now

It’s been a minute, hasn’t it? Here’s all of my latest news, courses, and projects.

🤷🏼‍♀️ What do you want to learn? 🤷🏿‍♂️

At the start of 2022, I was not working and started making a bunch of YouTube videos to teach HTML and CSS concepts. Then I got hired by 2U to lead a team creating the HTML, CSS, and Bootstrap portions of the UX/UI Blended Bootcamp. Super fun job, but it kept me so busy!

That contract is done now, so I’m working on some new projects on my own. You’ll see me posting more about how to teach code effectively. So many people think teaching is easy - that’s why there are so many horrible and frustrating tutorials online. It’s not you — it’s your teachers!

I’ll also be making more YouTube videos about HTML, CSS, no-code technologies, or anything else you want to learn. Have a suggestion? Please let me know and I’ll consider making a video for you!

Suggest a video for Jen to make

View Jen's YouTube channel

🎉 New Frontend Masters course: Intermediate HTML and CSS

Ready for the next step on your CSS journey? Intermediate HTML and CSS covers more on semantic HTML, CSS selectors, including the new ones like :is(), :where(), and :has(), and specificity, the cascade, and inheritance.

Watch Intermediate HTML and CSS

Still learning HTML and CSS? Want something free? Check out Getting Started with CSS, also at Frontend Masters, which covers making a portfolio site from nothing but text and images.

Watch FREE Getting Started with CSS

🥳 New LinkedIn Learning courses

CSS: Selectors

My popular CSS: Selectors course has been updated with :is(), :where(), and :has(), as well as :any-link, :focus-within, CSS error checking with :valid, :invalid, :in-range, :out-of-range, and more.

Practical HTML for No-Coders

Need to learn HTML but have no programming background at all? No worries! Practical HTML for No-Coders focuses on some basic HTML elements that are used in marketing and design. Course runs via CodePen, so there’s no HTML editor to download or files to organize. Check it out for yourself or recommend it to your marketing team.

🆓 Get LinkedIn Learning for free

You may have free access to LinkedIn Learning through your local public library, your university, or your employer. If not, there is a free 30 day trial available.

See Jen's LinkedIn Learning courses

🔜 COMING SOON: Courses, blog posts, videos, oh my! ✍️

I have some rather long blog posts coming soon regarding better teaching for technology. Follow me on Twitter or connect with me on LinkedIn to be sure you get a link when these are released. I’ll also list the links in upcoming newsletters.

Follow Jen on Twitter

Connect with Jen on LinkedIn

💖🎁💐 Thanks for subscribing 💖🎁💐

Thanks so much for being part of this mailing list. I always feature free HTML and CSS explainer videos as well as other resources around the web you may find useful.

I’ll email you again in a month with more updates:

• I have courses coming from LinkedIn Learning on Bubble, CSS logical properties, and Wix.

• Brian Holt, Frontend Masters, and I are talking about a newly revised Boot Camp. What would you like us to cover? (View the current FREE boot camp at Frontend Masters.)

• I’m starting work on a course to teach developers how to teach coding more effectively. Watch for a bunch of posts on this coming soon. I will probably not email these to you, but they will be included in my newsletter updates.

• As well as any new YouTube videos, course links, tips, and more!

• Day 26: <figure> and <figcaption>

• Day 27: <map> and <area>

• Day 28: <picture>, <source>, srcset, sizes

• Day 29: <audio> and <video>

• Day 30: Thank you and play our Jeopardy HTML Elements game!

Past digests:

• Days 19-25

• Days 12-18

• Days 5-11

• Days 1-4

Thanks so much for reading! You can still follow me on Twitter. 😁

Follow Jen on Twitter

📫 Get #30DaysOfHTML by email for free anytime! 📬

Subscribe to get #30DaysOfHTML in your inbox anytime by signing up for the email series or order the e-book!

💖🎁💐 Thanks for subscribing 💖🎁💐

Thanks so much for being part of this mailing list. I always feature free HTML and CSS explainer videos as well as other resources around the web you may find useful.

I’ll leave you alone for a month or so before my next update. 😁

• Day 19: <nav>

• Day 20: <header> and <footer>

• Day 21: Headings <h1>-<h6> and their proper use

• Day 22: <table><tr><td>

• Day 23: <caption> and <th>

• Day 24: <thead><tbody><tfoot>

• Day 25: <col> and <colgroup>

Past digests:

• Days 12-18

• Days 5-11

• Days 1-4

I post links to the day’s material on Twitter at 11 AM and 6 PM Eastern US time. Follow me to get a daily link.

I’ll send you all another summary next week for those of you wanting a reference.

Follow Jen on Twitter

📫 Get #30DaysOfHTML by email for free anytime! 📬

Subscribe to get #30DaysOfHTML in your inbox anytime by signing up for the email series or order the e-book!

💖🎁💐 Thanks for subscribing 💖🎁💐

Thanks so much for being part of this mailing list. I always feature free HTML and CSS explainer videos as well as other resources around the web you may find useful.

I’ll email you again in a week with a summary of this week’s #30DaysOfHTML posts in case you missed any.

• Day 12: <code> and <pre>

• Day 13: <kbd> and <samp>

• Day 14: <var>

• Day 15: <time>

• Day 16: <noscript>

• Day 17: <article> <section> <div>

• Day 18: <main> and <aside>

I post links to the day’s material on Twitter at 11 AM and 6 PM Eastern US time. Follow me to get a daily link.

I’ll send you all another summary next week for those of you wanting a reference.

Follow Jen on Twitter

📫 Get #30DaysOfHTML by email for free anytime! 📬

Subscribe to get #30DaysOfHTML in your inbox anytime by signing up for the email series or order the e-book!

💖🎁💐 Thanks for subscribing 💖🎁💐

Thanks so much for being part of this mailing list. I always feature free HTML and CSS explainer videos as well as other resources around the web you may find useful.

I’ll email you again in a week with a summary of this week’s #30DaysOfHTML posts in case you missed any.

• Day 5: Description Lists <dl><dd><dt>

• Day 6: <details> and <summary>

• Day 7: <abbr>

• Day 8: <small>

• Day 9: <wbr> and &shy;

• Day 10: <sup> and <sub>

• Day 11: <s><mark><ins><del>

I post links to the day’s material on Twitter at 11 AM and 6 PM Eastern US time. Follow me to get a daily link.

I’ll send you all another summary next week for those of you wanting a reference.

Follow Jen on Twitter

📫 Get #30DaysOfHTML by email for free anytime! 📬

Subscribe to get #30DaysOfHTML in your inbox anytime by signing up for the email series or order the e-book!

💖🎁💐 Thanks for subscribing 💖🎁💐

Thanks so much for being part of this mailing list. I always feature free HTML and CSS explainer videos as well as other resources around the web you may find useful.

I’ll email you again in a week with a summary of this week’s #30DaysOfHTML posts in case you missed any.

• Day 1: <address>

• Day 2: <blockquote> and <q>

• Day 3: <cite> and cite

• Day 4: <dfn>

The best way to follow along is to follow me on Twitter. I’m posting daily links at 11 AM and 6 PM Eastern US time.

I’ll send you all another summary next week for those of you wanting a reference.

Follow Jen on Twitter

📫 Get #30DaysOfHTML by email for free anytime! 📬

Subscribe to get #30DaysOfHTML in your inbox anytime by signing up for the email series or order the e-book!

💖🎁💐 Thanks for subscribing 💖🎁💐

Thanks so much for being part of this mailing list. I always feature free HTML and CSS explainer videos as well as other resources around the web you may find useful.

I’ll email you again in a week with a summary of this week’s #30DaysOfHTML posts in case you missed any.

Time for a refresher of 57 semantic HTML elements (and a few attributes) that will show you just how much you’re overusing <div>? On April 1, 2021, Erika Lee and I sent one email a day for 30 days discussing all kinds of HTML elements you didn’t know about, you forgot it existed, or oh wow - it totally changed from the last time you heard about it.

In honor of this anniversary, please follow me on Twitter to get a tweet to each day’s material in the month of April. Practice your skills on CodePen and get feedback, too!

Follow Jen for #30DaysOfHTML

📚 What do YOU want to learn? 📖

I’m gearing up to teach inheritance, specificity, and the cascade at LinkedIn Learning and Selectors & Semantics at Frontend Masters in the next few months. What are you confused about?

I’ve also released three new courses this year at LinkedIn Learning. Learning Bubble and Joomla 4 Essential Training are available now. Watch for an upcoming course on Zapier and more to follow in code and no-code land!

What do you want to learn? Email Jen!

👩🏻‍🏫 NEW: Intro to Web Design and Development 📷

Wondering if web design and development is for you, or know someone who’s considering this career path? Check out my new LinkedIn Learning video “Intro to Web Design and Development.”

It was filmed in my dining room during the pandemic, with the recording team located 3000 miles/4800 km and three time zones away on the other side of the United States. I set up the camera, lights, and scenery, in addition to writing scripts with my fantastic longtime producer, Stephanie Gerald. The California team controlled the camera settings and filming via Zoom. It’s amazing what we can do with remote technology!

Curious about the process of setting up the staging for this? I blogged about it here:

• Day 1: What does it take to put together a live action course?

• Day 2: Unboxing and general setup

• Day 3: Expert placement of equipment

Watch the course on LinkedIn Learning

🎥 New YouTube videos: Absolute and relative positioning 🎥

Absolute and relative positioning are weird and hard. Here’s some explanations that hopefully make them easier, with CodePens for you to explore.

Have a topic you’d like me to cover in a future YouTube video? Let me know!

🆓 FREE course at Frontend Masters! 🆓

My new course, “Getting Started with CSS,” is available for FREE at Frontend Masters for a limited time. Style text, images, navigation, headers, footers, and more, learning techniques that will carry into future CSS work.

The feedback has been overwhelmingly positive from newbies and experienced developers. Need to get that portfolio done? Here’s a course that will get your portfolio finished while teaching CSS! What could possibly be better?

Get Started with CSS

💖🎁💐 Thanks for subscribing 💖🎁💐

Thanks so much for being part of this mailing list. Jen always features free HTML and CSS explainer videos as well as other resources around the web you may find useful. This email comes out roughly once a month or less on an irregular basis.

We hope you’re doing well in this brand new year. We have some exciting announcements for you about new courses and a resource on sale, as well as a new free video for you.

🎉 FREE course at Frontend Masters for a limited time! 🎉

Jen’s new course, “Getting Started with CSS,” is available for FREE at Frontend Masters for a limited time. Style text, images, navigation, headers, footers, and more, learning techniques that will carry into future CSS work.

More advanced developers may enjoy the problem solving aspects of this course. First, we write semantic markup. Then we worry about styling that markup, adding classes and extra HTML elements only as needed to execute the design. The result is clean, accessible markup that isn't over-engineered.

View the course website

Get started with CSS!

🥳 30+15 = #45DaysOfHTMLandCSS 🥳

#30DaysOfHTML and #15DaysOfCSS were two awesome email courses that Erika and Jen wrote last year. (They’re still available on demand - click the above links to subscribe!)

The e-books generated from those courses are now bundled together in the #45DaysOfHTMLandCSS bundle for the new year for only $5!

Once you buy the bundle, congratulate yourself! You did something towards your resolution to get better at HTML and CSS. Whew. You can start reading tomorrow.

Get the #45DaysOfHTMLandCSS bundle!

🎊 New YouTube video: Centering in CSS🎊

There are at least three ways to center something in CSS:

text-align: center;
margin: 0 auto;
and Flexbox techniques.

Which is best? What’s old-school? Why don’t these “work” all of the time? You’ll be SHOCKED to know that It Depends - what are you trying to center? Center relative to what on the page? Jen explains it all in the new YouTube video and CodePen example where you may follow along.

🎙🎥 Podcast: No-Code Technologies and Development with Screaming Box 🎙🎥

No-code development is a type of web development that allows non-programmers and programmers to create software using a graphical user interface, instead of writing code.

In this month's ScreamingBox Technology and Business Rundown Podcast, we ask Jen what she means by teaching about building “Quality Websites”? What does she mean by that and how does No-Code fit into that teaching? In the past No-Code elements were not very flexible or customizable, has that changed recently? How do developers add customization to No-Code projects? How has No-Code developed in the last few years? Should you use a design tool like Figma first, or should you design right in the No-code platform like Webflow? What does she see for the future of No-Code platforms and as a business direction for developers and agencies?

Or listen to the audio only

💖🎁💐 Thanks for subscribing 💖🎁💐

Thanks so much for being part of this mailing list. Jen always features free HTML and CSS explainer videos as well as other resources around the web you may find useful. This email comes out roughly once a month on an irregular basis.

At 11 AM Eastern US time, the #15DaysOfCSS ebook was released. Thanks to everyone who purchased it! Your support enables Erika and Jen to run more challenges in the future.

Didn’t get a copy and you want to buy it now?

Purchase the #15DaysOfCSS ebook!

✅ #30DaysOfHTML and #15DaysOfCSS email series still available on demand

If you’re a later subscriber to this list, and you missed some or all of the challenge emails, you can still get your own email series on demand. The #30DaysOfHTML email course and #15DaysOfCSS email course are free and available to you anytime. Enter $0 where it asks you to “name your price.”

Get freebies at LearnWithJen.com

📣 Jen’s Frontend Masters CSS Flexbox/Grid course is updated and released! 📣

Flexbox is for UI and Grid is for page layouts. But what does that really mean? And what ARE the differences between these two methods? Are there things that Grid can do but Flexbox can’t?

Oh yeah… for example, did you know you could create this effect with CSS Grid and CSS animation?

Check out the CodePen to see how Jen did this.

Jen’s CSS layouts course has been wildly popular since its release in 2017. Now there’s an all-new version of the course, reworked from the ground up. Mosaic layouts, sizes and srcset for responsive images, awesome card layouts, and so much more are covered in the most recent version of the course. As always, there’s a ton of hands-on learning, exercises, and practice to put your new skills to immediate use.

Watch Jen's revised CSS layouts course

👍 NEW Frontend Masters course: Getting Started with CSS 👀

Jen builds a portfolio site from start to finish using HTML and CSS. No Github, no command line, no JavaScript, no frameworks! Go old school to get a grip on how powerful HTML and CSS are right out of the box and learn a ton about CSS layouts along the way. Currently available in workshop format, this will be edited into a course shortly.

Go old school with HTML and CSS

😳 Trevor Noah and Jen kick it at No-Code Conf 😱

Yes, THAT Trevor Noah of the Daily Show! They probably won’t be talking, but they’re both on the No-Code Conf program, a free online conference happening November 17-18, sponsored by Webflow.

Jen will talk about “5 steps to effective planning for your no-code website or app”. The worksheets for the talk are available for you to copy in Notion.

Get those worksheets!

💖 Thanks for your support 💞

Erika and Jen appreciate your support! We’ll check in one more time before the end of the year. Happy Thanksgiving, and may your Diwali be free from darkness and abundant with light!

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

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… 💖

• ☕️ Buy us a coffee - we are exhausted! 🤣

• 📚 Buy the #15DaysOfCSS ebook, releasing in November and containing all of these blog posts in one place. EPUB format.

🤷🏻 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)

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.

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!

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.

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

Today is the day we bring it all together! On Day 11, we learned about accessible icons. On Day 12, we learned about changing layouts with media queries. Today, we'll learn about the hamburger button. To create this, we'll need a hamburger icon and a bit of skill in moving our mobile menu.

We'll continue with our example from Day 12, adding elements and CSS to make our hamburger menu.

Step 1: Install hamburger and close icons

Follow along with today's CodePen example

We'll use Font Awesome again for our icons, but as stated on Day 11, you may absolutely use individual SVGs or another icon font set for this work. (It may even be preferred!)

Install Font Awesome in the CodePen, and look up the code for the hamburger and close icons on Font Awesome's website. We'll need two snips of HTML to add the hamburger and close icons:

<!-- hamburger icon -->
<a class="hamburger" href="#navbar" aria-label="Open main menu">
  <span class="sr-only">Open main menu</span>
  <span class="fas fa-bars" aria-hidden="true"></span>
</a>

<!-- close icon -->
<a class="close" href="#" aria-label="Close main menu">
  <span class="sr-only">Close main menu</span>
  <span class="fas fa-times" aria-hidden="true"></span>
</a>

The code should be mostly familiar to you, except for two additions. First, in each <a> element, we've added an aria-label to state what happens when these icons are clicked. We've also placed the screen reader text before the icon. (These two <span> elements may go in any order.)

Second, notice that we have a hypertext reference for the href attribute for the hamburger icon, but not the close icon. #navbar will reference an ID that we'll need to place in our HTML to make the navbar appear. For the close icon, any href will do, as this will simply make our navigation disappear when clicked.

Where should we place this HTML?

Think about what needs to appear or disappear on the page at different moments in time.

When the hamburger button is clicked, it makes the full navbar appear. If we place the hamburger button inside of <nav>, then the button will not be visible because the navbar is hidden by default. Likewise, the close button should not be visible unless the navbar is also visible.

Therefore, our revised HTML may look something like this (abbreviated for space - see the example for the full HTML):

<header>
  <a class="hamburger" href="#navbar" aria-label="Open main menu">
     <span class="sr-only">Open main menu</span>
     <span class="fas fa-bars" aria-hidden="true"></span>
  </a>
  <nav id="navbar">
    <ul>
      <li><!-- all nav items here, one at a time -->
    </ul>
    <a class="close" href="#" aria-label="Close main menu">
      <span class="sr-only">Close main menu</span>
      <span class="fas fa-times" aria-hidden="true"></span>
    </a>
  </nav>
</header>

We introduced <header> to associate the hamburger button with the navbar. It's semantic and makes sense here. The close button is placed after the unordered list, but inside the <nav> element. It will show when our navbar is visible and the CSS permits it to display. Finally, we've added an ID of navbar to the <nav> element. That means when the hamburger button is clicked, the navbar is triggered. It doesn't do anything just yet, but it will!

We'll also add a little CSS to style the buttons:

.hamburger, .close {
  font-size: 2rem;
  color: #fa8231;
  padding: 1rem;
}

Step 2: Make the menu appear and disappear

Follow along with today's CodePen example

The goal is to click the hamburger button and that makes the menu appear. Click the close button, and the menu disappears. One way to make this happen is to push the navbar completely off screen by default. When the hamburger button is clicked, the navbar is pulled on screen. The close bar resets the default state of the navbar off screen.

The navbar is enclosed by the <nav> element, so that's where we need to apply our styles. First, let's get the menu looking the way we want when it's on screen. The menu should cover the full window in the mobile view. To make that happen, we’ll need absolute positioning, plus a viewport-based width and height to fully cover the window.

nav {
  background-color: #fae2d2; 
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

Absolute positioning pulls the element in question out of the normal flow and places it wherever you want it to be. In this case, we're setting it at the top left corner of the screen, which will place it just inside the browser window. (For a more full explanation of absolute positioning, see CSS Tricks.)

We place the navbar on top of everything with z-index, then make it occupy the full area of the screen by setting width and height to 100 viewport units. Finally, I've given it a pale orange background, just so you can see how the layout changes over time more easily.

(The width and height dimensions are up to you. In this case, using viewport units, we’ve caused the navigation to cover the entire viewport. If you want to cover part of the viewport, adjust your units accordingly.)

At a mobile dimension, now the screen should look like this:

Let's get the close button and navbar cleaned up. Currently they're smashed to the edges of the screen. These are siblings in the HTML, with the parent <nav>, so we may use Flexbox to align these two elements. This will bring both the navigation and the close button to the center of the screen. Adding the margin on the <ul> will push the close button back to the right edge.

nav {
  display: flex;
  justify-content: center;
}
ul {
  margin: 1rem auto 0 auto;
}

Finally, the menu looks great, but it's permanently on the screen! How can we move this lovely navbar off the screen? Using CSS transform:

nav {
  transform: translateY(-100%);
  transition: transform 0.2s ease;
}

Here we've told the menu to move up, completely off the screen. We've also stated that when there's a transition, we'll change the transform property in 0.2 seconds using the ease style of animation. We've not executed that transition yet, so currently that does nothing. Now our screen looks like this:

The final nav style looks like this:

nav {
  background-color: #fae2d2;
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  transform: translateY(-100%);
  transition: transform 0.2s ease;
}

Step 3: Trigger the event to bring the menu on screen

Follow along with today's CodePen example

As you may know, CSS has no "onClick" event the way JavaScript does. The only "event" that CSS has is the hover state. Fortunately, we now have the :target pseudoclass, which helps in some ways, although it’s not a true event like hover. According to MDN:

The :target CSS pseudo-class represents a unique element (the target element) with an id matching the URL's fragment.

We'll add this style to our CSS:

nav:target {
  transform: translateY(0);
}

When the hamburger button is clicked, it targets the navbar. That's when this style will override the default nav style and ask for the navbar to be pulled down from the top of the page, where it is now (at translateY(-100%)). That transition will happen over 0.2 seconds.

You should now have a working hamburger button and mobile menu!

Step 4: Cleanup!

Follow along with today's CodePen example

We added a bunch of new mobile styles, which will affect our navbar at other dimensions thanks to our min-width media queries. Time to go through our code and change the CSS in the media queries to counteract anything we've added that we don't want at larger breakpoints.

We didn't even have a nav style until adding the hamburger button functionality, so let's start by neutralizing these styles. Place this style inside of the tablet media query:

nav {
    background-color: white;
    position: static;
    width: auto;
    height: auto;
    overflow: auto;
    display: block;
    transform: translateY(0);
}
ul {
    margin: auto;
}

Change the background to white from orange. Set the position to static, which is the default setting for the position property. Set width, height, and overflow to auto, to neutralize the previous settings. Set display to block to turn off Flexbox. And finally, set the transform property back to zero. Let's also set the margin to auto for our ul element, to turn off the adjustments we made earlier. Your screen should now look like this at a tablet dimension:

As for the icons, we'll hide them away from everyone, as they're not needed at larger screen sizes:

.hamburger, .close {
    display: none;
}

All of the other styles we set for tablet and desktop dimensions should be fine as they are.

And there you have it -- a hamburger button with CSS, no JavaScript required!

🖥 Today’s CodePen examples

Follow along with today's CodePen example

👩🏽‍💻 Challenge: Martial arts and navbars part 2

👩🏽‍💻  Continue with the martial arts navbar you created in yesterday’s challenge, adding a hamburger button to it.

Make it easier: Use one of the earlier non-responsive navbars you’ve created and add a hamburger button to it instead.

Take today's CodePen challenge

📚 More information and examples

📚 MDN :target

📚 CSS Tricks: On :target

📚 CSS Tricks: Absolute, Relative, Fixed Positioning: How Do They Differ?

📽 LinkedIn Learning: HTML and CSS Creating Navigation Bars (subscription required)

📽 Flexbox and Grid version 2 at Frontend Masters (subscription required)

Alternative: Choose one of the non-responsive navbars from earlier in the course, and add a hamburger button 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.

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

So far, all of our navbars have been oriented towards desktop configurations. The links will wrap if the screen gets too small, but the subsequent navbar doesn't necessarily look pretty if that happens.

Responsive design is a big topic, and it's hard to explain it from the beginning in a few emails. Responsive design means website layouts change according to certain conditions in screen displays. To this point in history, these tests have primarily been screen width, as tested by media queries.

🖥 Desktop first vs. 📱 mobile first

About 10 years ago, Luke Wroblewski coined and defined "mobile first" as a term and wrote an influential book on the topic. His book was very much in the UX context, not about CSS. At the time, designers typically loaded up a desktop design with a ton of content, then tried to figure out how to whittle that down to less content for a small device. Wroblewski's argument is that if the heart of your website's content was on the mobile device, why dilute with more irrelevant information on desktop? Start with the mobile message, then redesign for desktop.

Over time, as the development community improved on their responsive design techniques, a second definition of "mobile first" was born. In CSS, that manifests with a series of min-width media queries.

However, a series of max-width media queries may be appropriate in some situations as well. For example, if you're retrofitting a previously non-responsive site, desktop-first will save you a ton of development time. Likewise, if you're making responsive HTML tables, desktop-first is the way to go.

When we configure our styles in CSS, we have some styles outside of media queries, while others are inside media queries. The styles outside of the media queries are used under all conditions unless overridden by a condition inside of a media query.

📱Mobile first

Mobile first means the styles outside the media query are mobile styles first. Subsequent media queries override the defaults to different values. The media queries are often min-width in nature. The code might look something like this:

body {
  font-size: 1rem;
}
@media (min-width: 550px) {
  body {
    font-size: 1.1rem;
    text-align: center;
  }
}
@media (min-width: 850px) {
  body {
    font-size: 1.2rem;
  }
}

🧨 POP QUIZ: What will the text on this web page look like at 900px, based on what you see above?

Hopefully you said "Font size 1.2 rem, centered." Remember that with min-width media queries, they flow through your CSS document unless you explicitly override them later. We said that we'd center-align text at 550px, but we didn't say to stop doing that at 850px. Therefore, the center alignment carries into the larger media query.

🖥 Desktop first

You'll be shocked to know that desktop first goes the opposite direction. Styles outside of media queries apply to the desktop, followed by a set of max-width media queries.

body {
  font-size: 1.2rem;
}
@media (max-width: 850px) {
  body {
    font-size: 1.1rem;
    text-align: center;
  }
}
@media (max-width: 550px) {
  body {
    font-size: 1rem;
  }
}

🧨 POP QUIZ: What will the text on this web page look like at 500px, based on what you see above?

Font size of 1rem, centered. Again, even though these are max-width media queries, there is nothing to stop the center aligned text from cascading to the mobile media query. 500px is less than 850px, so the styles from the first media query are in effect, unless overridden within the second media query.

🤷🏿‍♂️ Which is better? 🤷🏼‍♀️

My longtime students know the answer. Anytime this question is asked in any context, the right answer is "It Depends." The hard part is knowing what it depends upon!

Personally, we think mobile first min-width media queries are easier to read and understand. This might be part of the reason they're so popular.

When you design for desktop first, you're building for a large screen and large processing power, and the hope is that you will "gracefully degrade" the experience for mobile. When you design for mobile first, you're "progressively enhancing" the experience as your screen size and processing power go up. It's in general much easier to pack a lunch and then pick up an extra cooler, and much harder to bring your refrigerator, and hope to lighten the load as you eat.

🖥 Mix and match? 📱

There's nothing that says you must choose only one methodology. It's possible to have mobile first and desktop first media queries targeting different parts of your site. However, just because you can doesn't mean you should. It's probably a few steps down to the world of unmaintainable spaghetti code if you try this at home.

📱 Making our mobile-first navbar

Let's take the navbar we built on Day 10 and make it mobile first. By the end of this tutorial, we want it to look like this on mobile:

Our mobile display should ultimately be hidden behind a 🍔 hamburger button, but we'll save that for another day.

Step 1: Get the usual styles in place

By now, you should be pretty familiar with all of this code:

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
body {
  font-family: "Open Sans", sans-serif;
  font-size: 1.2rem;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
a {
  color: #fa8231;
  text-decoration: none;
  display: block;
}
a:hover {
  color: #3867d6;
}

Step 2: Add mobile-specific styles

To the ul style add the following:

ul {
  display: flex;
  flex-flow: column wrap;
  gap: 1.5rem;
  align-items: center;
}

This tells our list to display with Flexbox in a column. We don't need justify-content as this would align our items VERTICALLY (the main axis) in a column context, and they're already fine the way they are. However, we do need align-items, which will center the links on the page HORIZONTALLY (cross axis) in a column context. (Yes, that is a bit confusing and easy to forget. It's not just you.)

That's pretty much it for our mobile menu. Again, we'll add a hamburger menu... tomorrow!

Step 3: Add the media query and style for tablet

The correct breakpoint for your media query happens wherever you think it needs to happen to look good. There aren't any best practices or set of standard breakpoints in a world of a million devices with unique screen sizes, unfortunately.

First, let's make our column into a row:

@media (min-width: 550px) {
  ul {
    flex-flow: row wrap;
    justify-content: center;
  }
}

With flex-flow, we override the settings that came before. In the case of justify-content, it's an additional style for the ul.

These two styles place the logo and all nav items on the same line. To get the logo to occupy its own line, I need to set its flex-basis property to 100%, such that the remaining navigation items will wrap to the next line. Finally, I'll center the logo inside of its box. These styles are inside of the above media query.

li:first-child {
  flex-basis: 100%;
}
li:first-child a {
  text-align: center;
}

Step 4: Add the media query and styles for desktop

The final change is to move the logo back to the same row as the navigation, then push it to the left side of the page.

@media (min-width: 850px) {
  li:first-child {
    flex-basis: auto;
    margin-right: auto;
  }
}

🖥 Today’s CodePen examples

View these navbars as mobile first or desktop first in today's example CodePens.

👩🏽‍💻 Challenge: Martial arts and navbars

👩🏽‍💻  Responsive web design means learning to make your code and designs adaptable - As Bruce Lee once said, "Be water, my friend." Be water with today’s CodePen challenge!

Take today's CodePen challenge

📚 More information and examples

📽 LinkedIn Learning: HTML and CSS Creating Navigation Bars (subscription required)

📽 Flexbox and Grid version 2 at Frontend Masters (subscription required)