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 📂
⏰ TIMESTAMPS ⏰
Navbar 1: 0:22
Navbar 2: 10:18
Navbar 3: 11:58
✅ USEFUL LINKS ✅
🔗 A Complete Guide to Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
🔗 Google Fonts: https://fonts.google.com/
🌟 TOP RECOMMENDED COURSES 🌟
CSS
(Paid) Build Responsive Real World Websites with HTML5 and CSS3
https://www.udemy.com/design-and-develop-a-killer-website-with-html5-and-css3/
(Free) CSS Crash Course For Absolute Beginners
https://www.youtube.com/watch?v=yfoY53QXEnI
CSS GRID
(Free) Flexbox CSS In 20 Minutes
https://www.youtube.com/watch?v=JJSoEo8JSnc
(Free) A Complete Guide to CSS Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS FLEXBOX
(Free) CSS Grid Tutorial
https://www.youtube.com/watch?v=x7tLPhnA06w&list=PL4cUxeGkcC9itC4TxYMzFCfveyutyPOCY
(Free) A Complete Guide to CSS Grid
https://css-tricks.com/snippets/css/complete-guide-grid/
JAVASCRIPT
(Paid) The Complete JavaScript Course 2019: Build Real Projects!
https://www.udemy.com/the-complete-javascript-course/
(Free) Learn JavaScript – Full Course for Beginners
https://www.youtube.com/watch?v=PkZNo7MFNFg
🔔 SUBSCRIBE 🔔
https://www.youtube.com/channel/UCvHKiUI75ytqUcN851fRR2w?sub_confirmation=1
👋 FOLLOW US 👋
INSTAGRAM: https://instagram.com/skillthrive/
FACEBOOK: https://facebook.com/skillthrive/
source
Thank you so much for this, just started learning and I was so stuck trying to make a navbar.
That order property is a godsent! I was banging my head for days trying to create a centre logo navbar
how your theme for VSCODE ?
For lists to be correctly alinged I had to also remove some sort of default margin. Why is that? Is it my browser? (google chrome)
ol,
ul {
margin: 0;
}
good video
Great tutorial. Loved the pacing. Perfect I think for someone that already understands a bit about CSS and HTML, no BS, just content, looks great too.
thank you sir
Why not the logo in the center??
thank YOU!
Hello I just stumbled upon your video looking for some HTML tutorials, if I may ask, why do you name your folders starting with an underscore? Is there a reason maybe I should be doing this? Thank you!
I had to change the speed to .75 but this video was very useful. I've been adding display flex to too many things and haven't been able to get it to do what I needed. It's more simple than I thought.
Does everyone knows why can't I set the logo to the right side? with margin-right:auto; I don't understand
EDIT: If this happened to you, in my case, I've put the logo into a <figure> tag, you have to put the margin-rigtht to that class and not for the logo.
Can't get your code on screen so please when you create a video, make sure the code clear for us. Anyway nice voice.
11:24 my logo doesn't move when changing the margin, stays in the exact same spot.
Thank you!
Amazing video, u really helped me!
thank you!
good tutorial👍
Thanks Joe Rogan.
good vid
what vscode color theme do you use? and wow 1.4mil views
great tutorial, but i felt it was more about styling that about flexbox
such an amazing video, you helped me a lot! thanks
You can see css, php, Html and … video tutorials on my page. Thank you for your attention
Why do lnt u just use ! ???