How to build a 2-column layout using flexbox | HTML/CSS
HTML-код
- Опубликовано: 21 авг 2024
- 🔥 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
![[TF2] The Russian Bear Trap](http://i.ytimg.com/vi/YFNSwz2_rOA/mqdefault.jpg)
I love your pronunciation, it's outstanding
watching this doesn't make me feel guilty, very informative!!
Loved it, you broke it down really well. Looking forward to the grid one!
Thanks so much! The next video should be a fun one to make too 😁
youre a savior
Thank you for explaing this! THis Help me a lot !!
You’re amazing at explaining these concepts. Thank you so much!
finally, i found @thecodercoder channel. thank you for sharing
Thanks for watching!
Very well explained. Thank You.
Thanks for watching!
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
You can always start trying it out! :)
I'm always hit a thums up then strat to see your videos ❤️
too clever too smart thanks for help me understand the flexbox properties and usage
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...
Thanks for the suggestion! I'll definitely add it to the list 👍
Your content is amazing and so helpful, thank you for sharing your knowledge!
thanx for explain this way to work. It helps me!
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.
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?
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!
Thank you. your amazing.
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?
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!
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... ???
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
Oh, you a coder CODER!?
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
Excuse me, how you make a sidebar on top of a sidebar?
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
hello. great video. do you do a live mentorship?
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
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!
thanku
Which extension you are using for this white text .
Any tutorial about SAAS?
Kobayashi San
How to make it stack 18:57.
👌🏻
🙏
which theme are you using
Dark+ Materials but I tweaked the colors a bit
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.
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.
Is your husband/boyfriend is graphic designer expert? 🤔
Basically
And video editing/animation, altho I actually edited this one 😂