Learn CSS Layout & Flexbox in 2022! Free Software Engineering Bootcamp! (class 11) -

[@ZenkaiCommunity]

I hope you guys love these classes as much as I do!

[@Rascal_Two]

Here are timestamps for the slides, for whomever needs them: 00:05:30 Question of the Day: For the rest of your life, only be able to whisper or shout? 00:06:41 #02 Questions 00:15:21 #01 Agenda 00:17:42 #03 Checking In 00:18:23 #04 Friends 00:23:14 #05 Submitting Work 00:23:25 #06 Homework 00:24:28 #07 Networking 00:27:29 #08 Stranger > Acquaintance > Friend > Referral > Coworker 00:28:30 #09 USE THE SHEET! 00:30:27 #10 Coding Challenges Daily 00:30:43 #11 Paid Client 00:31:19 #12 Celebrations 00:33:42 #13 Jeffn12 00:36:41 #14 Just because... 00:37:00 #15 The Golden Rule 00:37:23 #16 Progressive Enhancement 00:37:59 #17 CSS Where does CSS GO? 00:38:43 #18 CSS BREAK DOWN 00:39:39 #19 CSS is read top to bottom 00:40:06 #20 Selecting By Relationship 00:40:34 #21 Selecting By Relationship 00:40:52 #22 Selecting By Relationship 00:41:25 #23 Selecting By Relationship 00:42:28 #24 IDs & Classes 00:42:33 #25 IDs 00:42:44 #26 Classes 00:43:04 #27 Specificity 00:45:19 #28 Specificity 00:46:13 #29 The Box Model By Matthias Apsel 00:46:20 #30 Let's Code Box Model Practice 00:47:56 Timer Started 00:55:56 Timer Ended 01:12:44 Break Started 01:17:44 Break Ended 01:19:06 #31 Responsive Websites 01:19:42 #32 Fixed Vs. Responsive 01:20:38 #33 What makes a site responsive? 01:20:46 #34 Fluid 01:21:22 #35 Elastic 01:26:37 Timer Started 01:34:37 Timer Ended 01:53:35 Break Started 01:58:35 Break Ended 01:59:59 #37 Content Decisions 02:01:24 #38 How do we make content decisions? 02:01:39 #39 Media Queries 02:02:44 #40 Let's Code Media Query Practice 02:04:20 Break Started 02:12:20 Break Ended 02:38:11 #41 Important Addition To The Template 02:38:28 #42 Time For Some Layouts 02:38:32 #43 Let's Talk About Floats 02:38:38 #44 SIIIIIIIIKE 02:38:44 #45 FLEXBOX 02:40:35 #46 WARNING 02:41:00 #47 Let's Write BADD CODE With Flexbox 02:41:02 #48 Layout 1 02:44:05 #49 Layout 2 02:55:02 #50 Layout 3

[@renatosousa9971]

THE REAL MVP!

[@ameyashetty1441]

what a fucking legend bro

[@portfedh]

Thanks for this!

[@myruh87]

You're seriously the best! Thank you so much for doing this!

[@davidc2072]

Quote on slides is from Romeo & Juliet by Hobo Johnson. ChatGPT 4o said it was Joe Purdy "People Falling Out of Love." It will be some time before AI replaces software engineers. :)

[@SaphirePrincess8764]

Whoooo class 11 and still going strong! I feel like I'm missing out not being apart of the big cohort but at least discord is still alive and well :)

[@jitone1]

did you finish? how's the job search?

[@SunshineMcNair]

@@jitone1 I was about to ask that same question. Are you in one of the catchup crew communities on Discord? I'm in the April Catchup Crew.

[@SunshineMcNair]

Here in June 2024. #catchupcrew I was in an in-person bootcamp at the beginning of the year and had to put it on pause. I discovered 100Devs and am learning so much. I'm not going back to the in-person bootcamp. I'm going to finish this program.

[@Ubernightz]

How are you doing been at for 2 months now trying to get through it slowly with my busy schedule

[@jwise7439]

@@Ubernightz Same here! Feel free to reach out!

[@AngelCodes95]

2:18 I really loved. Helped a lot! I like that we get the shortcut/trick/tip first like the width=device-width portion added in early. And then Leon shows us WHY! the WHY is what solidifies the concept for me. I get it now!

[@daphilip93]

I am super behind since I found Leon only a month ago but if anyone else is still catching up from this point YOU GOT THIS!

[@MrZealot11]

Same here! Just started a month ago.

[@magdalenakoleva5231]

Same here too

[@dywa_varaprasad]

Same here 💪

[@lovevidehart]

+

[@Chocolatinhermoso]

lets go !!!

[@davidc2072]

For fellow ADHDers who block search engines while studying: Hufflepuff crest color = EABD32

[@TimLines]

Liking, commenting, and subscribing because past Leon called me out. Anyone here in 2024? Let's go get.

[@TenderHip]

thank you for explaining why the main collapses when the sections float. i didnt get it until you drew it out 😭

[@luisv8887]

for real! beautiful explanation.

[@falafel6644]

finished class 4 today 🤦

[@cherieecoco]

You'll get there. Finished class six today. We'll all get there.

[@gin.and.j]

Nothing wrong with working at your own pace. We all have things going on outside of class. Don't burn yourself out! I almost did... until someone reminded me that it's a marathon, not a sprint.

[@MrJlace]

It’s alright I’m just getting to class 11 lol

[@yourhighnessdames3354]

The em's and rem's gave me the blues this class :/ But I'm going to keep moving forward, pushing the boats and logs uphill.

[@sylviareece3119]

#catchupcrew Check-in. Thank you Leon!

[@ad3rinto]

One of the easiest tutorials to follow ever made. Thanks Leon

[@deshael6532]

Had to double back months later and it makes even more sense now

[@chimychary]

You don't know how much I appreaciate you Leon! Thanks for all the free content.

[@loveyvicky]

That was such a clear and excellent explanation on floats and clearfixing

[@AmandaPerry-m2i]

Loving this journey! Let's GO

[@noahmilliken4259]

so nice to be able to review all of these videos again!

[@joshnewman3152]

Im just now finishing class 10!

[@arturorincon6615]

Me too.Hey how can I join a study group?

[@mohamedbelkacem9889]

@@arturorincon6615 can i as well?

[@hellaevie]

after sitting on the struggle bus with Floats. Leon casually drops -display: flex;- I. am. shooketh. ....I'm about to go flex on all previous layouts. brb.

[@0xzi]

When talking about the color picker tool particularily in the box-model-practice part, it's worth noting dev tools on your browser yourself also has a color picker! On firefox if you just click it will automatically copy the color.

[@corysimpson1223]

Catching up after my vacation! Will hopefully be completely caught up tomorrow! Thanks Leon :):)

[@FamousChickenLittle]

man, that clear fix thing with the float got me banging my head, if anyone can explained it more detailed I would appreciate it. Thank you for all the knowledge, Leon!

[@sabhinai3737]

1. Containers main and section (with class = "bottom") has the elements inside them that are floated (which will remove them from normal flow), So basically these containers don't have any elements inside them (that are in normal flow), hence they are shrinking as they don't have to contain any elements. 2. Using clearfix class on these containers adds an invisible block element after the floated elements in those containers, now containers should contain that invisible element which is after the floated elements, so this will prevent containers from shrinking. Hope this is helpful🙂

[@kellyjin2469]

@@sabhinai3737 so are these invisible block elements in the normal flow and 'under' the floated elements? also what does clear:both mean in the clearfix class??

[@sabhinai3737]

@@kellyjin2469 yes these invisible block elements are in Normal flow and under floated elements. Clear:both means it will check for floated elements on both left and right sides to add invisible element in the end, so that the parent element can contain floated elements from both sides

[@annaburnett8964]

Leon's classes are always the best! Such a good teacher and human.

[@Spudscript]

Thanks Leon! These layouts…pain is weakness leaving the body.

[@portfedh]

Great class like always. Drowning in homework, but very happy on this learning Journey! Thanks for making this available for all of us!

[@jitone1]

did you finish? how's the job search?

[@misterb4352]

Catching up, catching up!

[@adriancpm]

Let's go! Finally watched!

[@Darkangel9036]

#CatchupCrew!

[@dywa_varaprasad]

Hey there, #CatchupCrew! Here too

[@victoriaparker2255]

Great Class! Thank you Leon!!

[@claybreland9196]

Let's Goooooo. Thanks Leon, you're the best

[@kjmoore22]

Thanks Leon! WE GO GET!

[@fredricklowe8195]

Catching up after my heavy medical check-up.

[@spicythunder4462]

Let's Gooooo

[@IdrisElmi-f4y]

This is amazing !!!

[@eirikmcgrady301]

Get in!

[@grendabanda8832]

Leon, Thank you.

[@YoungLink51423]

Thank you Leon

[@pauldhaliwal2682]

great job!

[@joesangine4914]

I like your dog... also thank you so much this course has been a wonderful experience for me

[@racheleckenrod]

Thank you, Leon!

[@sravanirebba364]

Hi Guys,Where can we find the office hours classes?

[@divinerosebudtarot]

sadly they’re deleted after 60 days on twitch & he doesn’t upload them to twitter. but any questions can be answered on discord!

[@natehenson71]

Thank you, Leon! You the Man!

[@oaianeagraa]

If u want a great color picker on windows u can download PowerToys from the store for free.

[@fullstack_anto8851]

Thanks for sharing!

[@younesslahdiri5818]

than you leon

[@Agong22067]

Lets go!

[@rimora.]

the clearfix collapsing thing still doesn't make any sense

[@dominicasio4085]

Thank you Leon

[@The_buzzr]

Thank you Leon 😊

[@mattvail5301]

Thanks Leon

[@theeredqueen]

Here , we, go! Carrying them boats and logs bb. Don't you gaslight me with your dog LEON, CUTEST PUPPER.

[@jitone1]

I'm🤯 at 743 flash cards before starting this class.

[@purifiedlofi]

#catchupcrew checkin in!

[@Nohelysview]

Does anyone know how Leon's able to comment out so easily on VS code?

[@HellenMarya]

crtl + ;

[@malc_makes]

on windows it's: 'Ctrl' + '/'

[@Eric-bi5ud]

(In Pauly Shore voice) Yeeeeeaaahhh Budddddy!

[@Kayceenuel7]

done with class11

[@StudyTmeENG]

you are amazing

[@josephkeepers8008]

class 11!

[@manmohitsingh502]

checking in #catchupcrew

[@AkhilSharma022]

MMMMMUUUUUSSSSTTTTAAAARRRRRDDDDDD

[@randomrock3439]

Legend

[@nuhakhangr8]

2:58:05 / 3:07:03

[@noface00]

feeding the algo

[@hemant3123]

I am in

[@ceptember.]

I wuz here

[@shivambaniya8207]

Commenting just because...

[@julieburtond249]

nc

[@Morniquie]

🧆💻

[@LarissaCrawford-bj5qw]

M :)

[@elisabethwolden]

M 😂

[@elisabethwolden]

You're kind of evil, Leon (said in jest). Leon: *comments out 50 lines of float code and types display: flex; * Lol. Buuuut I will know why a section has collapsed when floats are utilized!

[@ranaswami5389]

#catchupcrew Check-in. Thank you Leon!