HDTutorial
EN
Navbar CSS Tutorial: 3 Ways to Create a Navigation Bar with Flexbox

Playback starts YouTube’s embedded player (privacy-enhanced mode).

Navbar CSS Tutorial: 3 Ways to Create a Navigation Bar with Flexbox

2,941,182 views October 26, 2019 15:08

Watch on YouTube
ChannelSkillthrive

In brief

Build three distinct navigation bars using Flexbox and basic HTML—ideal for web developers looking to apply Flexbox properties like align-items, justify-content, and order to create clean, functional designs. The tutorial focuses on practical implementation rather than deep theory.

Description from the creator

This free design and web development course will use Flexbox and basic HTML to create 3 different navbar designs. You'll see some examples of how Flexbox properties like 'align-items', 'justify-content', and 'order' can be used to quickly spin up new web designs.

This series is intended as a project-based course and will not go in-depth into HTML, CSS, or Javascript. If you want to learn more about those check out the links at the bottom of the description.

📂 COURSE FILES 📂

🔗 gum.co/QsaXx

⏰ TIMESTAMPS ⏰

Navbar 1: 0:22

Navbar 2: 10:18

Navbar 3: 11:58

✅ USEFUL LINKS ✅

🔗 A Complete Guide to Flexbox: css-tricks.com/snippets/css/a-guide-to-flexbox/

🔗 Google Fonts: fonts.google.com/

🌟 TOP RECOMMENDED COURSES 🌟

CSS

(Paid) Build Responsive Real World Websites with HTML5 and CSS3
udemy.com/design-and-develop-a-killer-website-w…

(Free) CSS Crash Course For Absolute Beginners
youtube.com/watch?v=yfoY53QXEnI

CSS GRID

(Free) Flexbox CSS In 20 Minutes
youtube.com/watch?v=JJSoEo8JSnc

(Free) A Complete Guide to CSS Flexbox
css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS FLEXBOX

(Free) CSS Grid Tutorial
youtube.com/watch?v=x7tLPhnA06w&list=PL4cUx…

(Free) A Complete Guide to CSS Grid
css-tricks.com/snippets/css/complete-guide-grid/

JAVASCRIPT

(Paid) The Complete JavaScript Course 2019: Build Real Projects!
udemy.com/the-complete-javascript-course/

(Free) Learn JavaScript - Full Course for Beginners
youtube.com/watch?v=PkZNo7MFNFg

🔔 SUBSCRIBE 🔔

youtube.com/channel/UCvHKiUI75ytqUcN851fRR2w?su…

👋 FOLLOW US 👋

INSTAGRAM: instagram.com/skillthrive/

FACEBOOK: facebook.com/skillthrive/

About this tutorial

Skillthrive published this 15:08 video tutorial on October 26, 2019. It has been watched 2,941,182 times on YouTube.

Category
Education
Duration
15:08
Published
October 26, 2019
Views
2,941,182
Likes
62,291

Tags

Share

Further reading

  • Flexbox Navbar: Creating a Navigation Bar with Flexbox - DEV dev.to

    The horizontal navbar. Conclusion In this tutorial you explored the Flexbox feature of CSS. Flexbox lets you build a navigation element with much less code than you could in the past, but you can also use it for things…

  • How to build a Navigation Bar with CSS Flexbox freshman.tech

    3 How to build a responsive feature list with CSS Flexbox 4 How to build a Mobile App Layout with CSS Flexbox In the previous article , I introduced the Flexbox layout model and demonstrated how it can be used to build…

  • Do It Yourself – Tutorials – Navbar CSS Tutorial: 3 Ways to ... dienodigital.com

    Do It Yourself – Website Tutorials This free design and web development course will use Flexbox and basic HTML to create 3 different navbar designs. You’ll see some examples of how Flexbox properties like ‘align-items’,…

This tutorial in other languages