How to build a 2-column layout using flexbox | HTML/CSS

🔥 My course: Responsive Design for Beginners! coder-coder.co...
💻 Become a full-stack web dev with Zero to Mastery: academy.zeroto...
Two column layouts are a super common pattern in website design. In this tutorial, you'll learn how to build a responsive two-column layout using flexbox!
Source code on Codepen: codepen.io/the...
Music: Radiant Vibes by Harris Heller
• Radiant Vibes
_____________________________________
SUPPORT THE CHANNEL
⭐ Join channel members and get perks: / @thecodercoder
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: marketplace.vi...
WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: coder-coder.co...
🌟 Gulp for Beginners: coder-coder.co...
RECOMMENDATIONS
⌨ My keyboard-- get 10% off with code THECODERCODER -- vissles.com/?r...
💻 Other gear -- www.amazon.com...
📚 My Favorite Books -- coder-coder.co...
📺 My Favorite Courses -- coder-coder.co...
🔽 FOLLOW CODER CODER
Blog -- coder-coder.com/
Twitter -- / thecodercoder
Instagram -- / thecodercoder
#webdevelopment #coding #programming

[@starterdev]

I love your pronunciation, it's outstanding

[@kobebriansantos5558]

watching this doesn't make me feel guilty, very informative!!

[@codecrumbs]

Loved it, you broke it down really well. Looking forward to the grid one!

[@TheCoderCoder]

Thanks so much! The next video should be a fun one to make too 😁

[@taydvon]

You’re amazing at explaining these concepts. Thank you so much!

[@wisnu2226]

finally, i found @thecodercoder channel. thank you for sharing

[@TheCoderCoder]

Thanks for watching!

[@3isley133]

Thank you for explaing this! THis Help me a lot !!

[@100XPercentX]

You're an angel this is what I needed wooo hoooo Edit: your theme is so nice and vibrant I wish I started with vs but I cant move from atom lol

[@TheCoderCoder]

You can always start trying it out! :)

[@loverphp5605]

too clever too smart thanks for help me understand the flexbox properties and usage

[@jaggyjut]

Very well explained. Thank You.

[@TheCoderCoder]

Thanks for watching!

[@ShakilMorad]

I'm always hit a thums up then strat to see your videos ❤️

[@theREALESTrealistUNPOPULAR]

youre a savior

[@progtom7585]

please make a video on emmet shortcuts, i heard emmet first on your videos. I googled emmet and found a startling array of shortcuts - too much for a newbie, although now ive watched the video i see you using them fairly constantly... thanks for the video...

[@TheCoderCoder]

Thanks for the suggestion! I'll definitely add it to the list 👍

[@af_bets_6389]

Amazing video. I was able to follow all along up until the very end, where I ran into an issue with the @media query. When I write out .flex-container { @media (min-width: 43.75em) { display: flex; } } I get the error message "Invalid Property Name" when inspecting the Rules in Firefox. Any advice on how to troubleshoot this?

[@TheCoderCoder]

Are you using SCSS or CSS? The above example is how you can write it in SCSS. It will be invalid in CSS. For CSS the @media rule needs to come first, and the .flex-container nested in it. Hope this helps!

[@rncongi6641]

Love the tutorial, I'm running into an issue with the @media query. When I add in the query, I'm never getting the flex display, both boxes are on top of each other even after adjusting size of window. Any suggestions?

[@TheArtsyAxolotl]

I know this comment is like 2 years old and I'm sure you figured it out, but for anyone else passing by: I have no idea how she got it to work that way (not sarcastic or judgmental, I'm not great at this kind of thing so I genuinely don't know). I could only get it to work if I put the media tag on the outside instead of the inside. @media (min-width: 900px) { .flex-container{ display: flex; } } Hope that helps someone!

[@bronnieg-beyondtheblockcha2830]

Your content is amazing and so helpful, thank you for sharing your knowledge!

[@chome4]

How would you fit an image to the left of the first section's text And have it 'jump' above this text when on a mobile? I can do it, just about, with media queries, but flexbox seems to be good with simple contents, ie, not text and images, but I hope I'm wrong on this!

[@farodelsurservicios]

thanx for explain this way to work. It helps me!

[@budstran2121]

How can I link web pages to flex container & replace the Main Content & Sidebar paragraphs? I have home, about, activity, service, contact links above flex contrainers and wanna display them on both flex containers. Thanks

[@Jezza3110]

nope - couldn't get this one to work :-( It's unclear if you created the dist folder or if its propagated by live sass compiler like the style.css is. I even deleted the code I had typed and copy/pasted from the codepen. no joy. uninstalled the extension and re-installed the extension but nothing just script/text from Index.html - frustrating as it was such a good video tutorial

[@tonybp]

I'm learning Flexbox and playing around with it... but something is driving me nuts: I have a flex-container and inside an image and a paragraph, when I set the flex-container to display:flex the image blows up to a huge size and the paragraph is all squashed up in a tiny narrow column... what's going on? what is making the image huge when all I've done is set the parent containter to display:flex... ???

[@edlynpamittan194]

I download the Kite and also in VScode when I try this code it and watch it live it's nothing change and it appears folder instead of html

[@mr.thomaswaffles6700]

Excuse me, how you make a sidebar on top of a sidebar?

[@prahladkumarverma3035]

Which extension you are using for this white text .

[@rhymekidstv]

Oh wow! I have been enjoying your videos and I just realised I haven't subscribed yet. I have done it now. Thank you for making this tutorial simple to digest.

[@markuzroy3014]

hello. great video. do you do a live mentorship?

[@rodericklamano6488]

Thank you. your amazing.

[@vaibhavudande9837]

thanku

[@B3T0M4N]

Any tutorial about SAAS?

[@Wintry_j]

So clickbait damn it’s suppose to be beginner friendly trying to make a website but can’t cause I’m using css not scss and make it impossible to understand it

[@andregant9980]

Oh, you a coder CODER!?

[@junaidtariq4547]

which theme are you using

[@TheCoderCoder]

Dark+ Materials but I tweaked the colors a bit

[@carminalourdesatienzasopra9160]

How to make it stack 18:57.

[@esagecantu]

I can't connect the CSS to the index. I see that the index header it link to style.css. But when opened in VSC it is labeled as style.scss.

[@TheCoderCoder]

Make sure the Live Sass extension is running, and check that it's generating a style.css file in your project. By default it will create it in the same location as style.scss, but in the video I had customized it so it generated it in the dist folder.

[@andrewcalix9447]

Kobayashi San

[@syedacodes]

👌🏻

[@TheCoderCoder]

🙏

[@Grewal0007]

Is your husband/boyfriend is graphic designer expert? 🤔

[@TheCoderCoder]

Basically

[@TheCoderCoder]

And video editing/animation, altho I actually edited this one 😂