CSS Layout: Flexbox & Grid Basics
Вставка
- Опубліковано 22 лип 2024
- Join my premium 2024 bootcamp here learnwebcode.teachable.com/p/...
Want to code your first layout with HTML and CSS alongside me step by step?
Timestamps:
0:00 Intro
1:02 HTML - Starting
4:04 CSS - Starting
8:48 Flexbox
12:23 Attention to Details
20:40 Full Width BG Color / Inner Width Content
36:30 CSS Grid
48:36 General Styling
53:14 Outro
Playlist for this full series: • Brad's Bootcamp - Free...
Finished Product Example CodePen: codepen.io/learnwebcode/pen/v...
CSS Flexbox
20 Part Series by Wes Bos: • What The Flexbox?!
My Video on Flexbox: • Flexbox Tutorial (CSS)...
CSS Grid
Rachel Andrew's Channel: / rachelandrew
Layout Land by Jen Simmons: / layoutland
Follow me for updates on new episodes:
Instagram: / javaschiff
Twitter: / learnwebcode
Facebook: / brad-schiff-1542576316...
Twitch: / learnwebcode
![[CAD 2D] 캐드 치수 공차넣기_국비지원_KH인재교육원](http://i.ytimg.com/vi/HwM82XUGbRU/mqdefault.jpg)
Love you brad following you for last 15 months watched almost your all UA-cam videos , hoping this bootcamp going to be all in one , Super excited
I'm not trying to drop nice comment just like every other person, I just want to say thank you for this awesome tutorial. I dedicated a whole day for this, trust me it was time well spent.
Absolutely enjoying this boot camp series. Prior to this, watched plenty of other beginner tutorials... You are so spot on with the shorter videos and focused concentration!
Thank you so much for these videos! They're so easy to learn by, I do have to pause and repeat a process to fully get it, but your instructions are so clear and easy!
Thank you so much!
This video deserves more views, you are explaining detailed your moves, this is how this kind of tutorials should be, well done and keep up the good work!
This is great, I especially love how you styled all content right away for both desktop and mobile without having to use media queries. Very neat use of grid-template-columns! One can tell you are experienced at this - nice work!
Brad - you do a great job of explaining every line of code and also showing the results visually. Your pacing is perfect - better than many I have seen.
The way you explain is awesome! You actually say why and in a way a true beginner can understand.Thank you so much.
You have no idea how this has helped me. Thanks dude!
I just want to give you a huge thanks for creating this course and sharing it with us for free! I've tried many online courses but this one so far has been the most helpful.
Thanks! Hearing directly that the videos are helpful is the ultimate motivation for me. I dig the cat avatar lol
Thank you SO much!!
I've been trying to figure out flexbox and grid for AGES and it turns out I was seriously over complicating it.
It makes a lot more sense now!
There is no word to do justice with the quality of your teaching. I did know all of these stuff but never had confident to apply them and this project just gave me that confident. You are a gem. Please keep uploading more videos like this.
I dont mind being over with the time. I enjoyed your tutorial. Thank you.
dude you are a gift sent from heaven, I've been sharing your videos with friends that are planning to go into computer science and they love it.
Hi Brad, this bootcamp series is very helpful. You are such a great teacher. Thank you 🙏
Love your work. You're easily one of the best teachers on here.
You are a hero man... Very well explained... I have never seen anyone explain CSS the way you do.... Salute
Hello brad, today i landed to your channel in search of JavaScript tutorials and trust me.. you're super cooooooool...thanks and luv u buddy...
Brad hats off to your teaching style , its really helping me a lot to clear my css basics .
I was able to get my assignment done with the flex box feature. Thanks man!
Dear Brad:
Thank you very much for your great courses.
You deserve a nobel prize for them.
Brad your teaching style is just so amazing. I really had fun learning flex and grids in CSS. Keep it coming!!!
I agree the most understandable webdesign tutorial I have seen, and I have watched many while being in tutorial wormhole. You have an uncanny ability to make what your teaching more understandable than most. Please keep it coming.
Best tutor of the decade you deserve it thanks so much
Excellent tutorial, I have been doing some other web development courses on udemy and yet this is the most well explained and detailed code along walkthrough that shows and explains CSS and flexbox features that I've seen.
your teaching style is amazing, thank you very much for creating this type of content!
You're just amazing, one of the best teachers I have seen
Dude, you just solve my problem for like 2 months! since I am just a self-taught programmer, it's quite hard to find resources to learn. I know there are tons of videos about flex & grid, but you are the one sparkling me. much more appreciate! thanks bro. Best teacher ever!
I haven't watched yet, I want to say though: I appreciate the text in your thumbnail -- code this *with me*. I think that's a better way to help someone learn something.
Thank you so much for creating this free course. It is perfect guide for beginners like me . Your style of teaching, quality of videos and content is commendable. After trying many online resources I found this one really helpful for me. Thanks again !
Is there a way to give 20 likes ? So many nuggets of learning. Man , you have great teaching skills - it’s not just way you explain but even planning your content. I am loving your react course...outstanding sir ! Let em keep coming
Wonderful guide! Thank you for your energy and enthusiasm
You are so good a teacher it's ridiculous!
Jesus Christ !!!! You deserve an award for teaching so good. I appreciate you man for real . 👊🏾
i love this bootcamp! I enjoyed ur vids! its really fun:)
Thank you. Your teaching style the best
Thanks man for this useful content about HTML and CSS; keep it on please!
Really helpful ! Thank you a lot ! And I love your videos all !
was trying to find this topic related tutorials just now 😅
and got the notification
Man in just one video in under an hour you just shared hours if months of CSS knowledge!
@LearnWebCode Thank you for all the videos. I have really learned a lot since watching your videos!! Thanks :)
Excellent tutorials. It’s all in the presentation and you’re a very talented instructor! I’d like to make a suggestion. I think you should create a series where you apply all the css you’ve taught in building a series of real projects (websites, admin panels, rich mobile apps). Theory, while essential, leaves inexperienced developers wondering how to apply it all. An entire series dedicated to just this would allow you to recycle all the audience that followed the theory videos. Again, outstanding teaching. Than you!
Value is immense. 3rd video in im most definitely hooked!
Congrats! I'm glad the videos sparked your interest. Hope you make it to the JavaScript videos in this series; should be a lot of fun.
Awesome tutorial and presentation.
this video is legit useful, thanks a lot for this..it really cleared up my confusions
Brad Schiff == easiest way to understand programming . thanks . آفرین
done. waiting for the next part. thanks for all
Thank you so much you have a great way for explaining I hope we can see many other real responsive site like this one
You make programming so easy=D Thank you very much!
Man you are the best. Keep it coming doug. Guys makes sure to subscribe and support this guy for quality content
Dude this is awesome! Thanks so much!
Thankyou once again for the wonderful video, Dear Sir.
This guy is on another level
Thanks for this video...learned a lot of new things from this one..
this is the best channel , thanks a lot sir , respect ++
thank u so much i really enjoy following your video
I am very thankful to this awesome video tutorial. God bless you sir.
Haha..love love love from india..i purchased all ur udemy course..u r a gem
This video is GOLD.
Thanks Brad. You are my favorite teacher. I believe you introduced a few CSS selectors like display: block on the menu and the menu hover transition that might have been intimidating for new users. And that's because you started using them without mentioning them earlier so people might not be so clear on why they were used. Personally, I don't have a problem with that since I am an advanced user, I just mention what I have observed for your own consideration.
Thanks, and great catch. I actually wanted to take out those two things (the display: block and the hover selector) for the reason you mentioned but I realized that I had already shown the hover effects in the preview at the start of the video, and didn't want to not have that in the final product as advertised.
I am learning a lot with Brad ... thanks mate
Hi Brad, thank you for your response. I am going to ask a big favour which is something I believe you can deliver ease. Could you teach us intermediate and advanced jQuery,? At your convenient time in order to progress with your JQuery series ONLY, >> ua-cam.com/video/1vMFpT0h-WI/v-deo.html.
I know you have the full stack course which I bought but I love JQuery.
Thank you in advance for your collaboration
Great video! even tho design is not my thing, I really enjoyed learning more about HTML and CSS. Thanks a lot!
Thank you: waiting for the full Grid tutorial.
notification on! well-deserved!
Thank you Brad! You're amazing!
You are a great teacher. Thanks, this has really helped me a lot. Please keep up with the videos. Receive my sub and like ...
i'll definitely take ur udemy courses man..u r just amazing!!!! Thank you so much
Thanks Brad ....... It helped me a lot..🤝
Great stuff and great references, thanks.
Nice lesson as usual! Thanks!
Great tutorial learned alot, went through it in one go!! currently scowering ur other vids xD
Great tutorial!
Good job brad
This was so help full thank you!!
I request you to make more videos Brad, you are better than any other coding teacher out there. Your teaching style is amazing.
Thank you so much! Encouragement like this means so much to me ❤️
Once more a very good lesson:-)
immediately save in favorites !
You are just superb!
Great video!!! Thank you!!!!!!!
thank you for your teaching
Perfect ! Thanks teacher
Great teacher
Hi, thanks for the video. I liked the explanation about grid ( even more simple then explained by Rachel Andrew or jen simmons), just perfect.
Now, i have to point point out two things:
first: i agree with @Andrew, nowadays, with html5, do not make any sense just using div tag to group things. As your are teaching, i know no one is perfect but you should always go with modern, best practice and guide lines, like using semantic tags, for example: header, footer, nav,, section, etc. By using it, all your views will know that exist and they should use it, as part of IT education.
second: the old problem with the footer, if you have, for example just two features, in mobile or in desktop view, the footer will not be in the bottom, will "push" near to the features with some blank space in the bottom. ;)
love the way teach, thank you!!
This is amazing
Absolutely superb! 😉💙
Waiting for you 🧡
Thanks for this, soo helpful! :)
Amazing video
this is great, love it
Hi. Why didn't you use padding to give space to the three items instead of using margin
Wow thank you for this
damn this video deserves million likes
thank you brad alot
thanks a lot,i'm happy
You are a legend
Lowkey in love
Amazing!!!!
thank you very much 🌹
thanks for this cours
Thank you so much