Thank you for producing this. A little constructive criticism. It would be more helpful to newbie’s if you explained what and why you chose these tags/css values as opposed to us just watching the code be written. You could have just as well posted the html and css in its finished state for us to consume and it would have had the same effect. Those that understand this stuff would be intrigued, and those that don’t, would still be scratching their head.
@@akhan3330 late but the numerical value of flex determins how much it will grow compared to others unless specified. It goes flex grow, flex shrink and flex basis with " flex" being the short hand for all three. I assume the 100% is for the basis? Im new to this tho
Because it doesn't go in depth, nothing is explained, just shown. I know there are different types of learning and this might work for people, but most people like it being explained.
Well Probably the same reason i did, annoying music & unless you have a really good connection the text appears at too low a res to be able to read and no voiceover explanation, so ends up being just a useless video with really annoying music, no offense just giving a blunt answer.
you're using flex shorthand for a '.main'. when i change a shorthand 'flex' to flex-grow for a '.main, a page doesn't align correctly as i using a 'flex' just like it's show on the video. as i know flex is a shorthand for a flex-grow, flex-shrink, and flex-basis
How can I stack like header, aside1, aside 2 , main and footer when we decrease the size (mobile or tab) ? On web, it should be like the above one (header, left, main, right, footer at the bottom.)
How to hide one element when the screen is for mobile? instrad of showing 5 divs only show 4 for example. But when the screen is for a desktop i want to show 5 divs
Hi thanx for dropiing this video can u also make video on explaining the role of pseudo elements or u can suggest me by providin link in comment. Btw am your one of follower from your IG
there is a lot of things here that seem weird to me, first of all what is that "aside" tag, I have never seen those before. you use "wrapper" instead of "container"? I thought wrappers are for child elements inside a big container?
@Vasu Devan Soory to hear that, the video is 2 3 years old so kindly check it out again with more keen observation and check out the comments box, may be other also face the same issue as you
@@csscoder8892 All your videos are wonderful, but think of us the beginners. Wavering thoughts, no focus at one place. Too much of videos calling us to watch. At this situation, when your wonderful video has no speech to hold us on the subject. We may skip it... So please add your voice however it sounds, no issue.
This is literally the only video that shows you how to actually build a functional web layout, all other videos just show you the commands. Thank you!
@@akhan3330 flex-grow: 1 , it makes the item grow to take the additional space
This is not a way to teach.... doesn't explain any basics of what flex means
Thank you for producing this. A little constructive criticism. It would be more helpful to newbie’s if you explained what and why you chose these tags/css values as opposed to us just watching the code be written. You could have just as well posted the html and css in its finished state for us to consume and it would have had the same effect. Those that understand this stuff would be intrigued, and those that don’t, would still be scratching their head.
Thanks for the feedback. It was created days earlier when we were new to UA-cam, in future we will definitely consider this.
Thank you bro, because of you, my assignment is done
Amazing ! Nice way to practise your understanding of flexbox. Thank you. I will definetely watch your other videos on channel.
Thank you
@@akhan3330 late but the numerical value of flex determins how much it will grow compared to others unless specified. It goes flex grow, flex shrink and flex basis with " flex" being the short hand for all three. I assume the 100% is for the basis? Im new to this tho
thanks for the emmet abbreviation :)) didn't know about it
My Pleasure Brother 👋
It doesn't work, could you please share a sandbox link with the cod in it?
leave the source code in the description section mate. It will be really helpful to save it for later also so that i can revise.
use your words my g speak to us
Got a web design assignment due you really helped bro
Did it work bro?
I typed everything on html exactly as he did and nothing is showing up
Next time, please provide the code in a github repo.
wow just wow, subscribed immediately
my thoughts exactly :P
Layout is good but at the end it is confusing. So please start explaining the things
How do you put images, text w/links inside those boxes?
Who else dislike this
how can someone dislike this? brilliant!
Thanks Brother for appreciation
Because it doesn't go in depth, nothing is explained, just shown. I know there are different types of learning and this might work for people, but most people like it being explained.
Well Probably the same reason i did, annoying music & unless you have a really good connection the text appears at too low a res to be able to read and no voiceover explanation, so ends up being just a useless video with really annoying music, no offense just giving a blunt answer.
you're using flex shorthand for a '.main'. when i change a shorthand 'flex' to flex-grow for a '.main, a page doesn't align correctly as i using a 'flex' just like it's show on the video. as i know flex is a shorthand for a flex-grow, flex-shrink, and flex-basis
Same
Yea.. confusing
For anyone trying to understand, flex: 1 means {flex-grow: 1; flex-shrink: 1; flex-basis: 0%;}
Lots of magic in this video :)
Thank you so much! do you have a tip on how to get the white border away so it fills the screen 100% in all directions? Thanks so much!
@Gamer Dahman And can you tell me that why I have some overflowing X white space on my responsive layout?
This content helped me lots!!!! Thank you
Glad it helped!
How to fix multiple elements in flex layout like heading paragraph and images
I know it's a quick demo, but you shouldn't have multiple H1 tags in the same page.
You are right 👍
How your two asides are places side
Can I use .wrapper > div instead of .wrapper > * if I just use div tag inside wrapper ?
Yes, it can be done only if you are pointing to direct div elements of wrapper class.
It doesn t work
Sos groso, Sabelo!!!!!
That's more helpful! Subscribed immediately
i was almost done but "order " won't work. i can't get aside 1 and aside 2 to align on left and right column
I had the same problem,
in css .main i missed it should be:
flex: 3;
and NOT
order: 3;
hehe..
Maybe is too late, but you should check out the wrapper section, it had to have "display: flex;" to worked correctly.
same problem here
I cant either, did you solve it?? Im gonna lose it over responsive flexbox
Please help, how can I make that aside1 will jump above main instead under when window bocomes smaller? Thank you.
What does .wrapper > * means?
* means all elements, so all elements in .wrapper class have zero margin and padding
select any direct children of element with class wrapper
I tried .wrapper>* and nothing happened can someone please help me using vscode
How can I stack like header, aside1, aside 2 , main and footer when we decrease the size (mobile or tab) ? On web, it should be like the above one (header, left, main, right, footer at the bottom.)
its good example but you fixed height of header and footer and even main, which is not goo way to design layout.
Can you explain also then it will be very helpful.
Thanks 😊
What is the VS code theme are you using
Sigh...commentary would be nice.
How to hide one element when the screen is for mobile? instrad of showing 5 divs only show 4 for example. But when the screen is for a desktop i want to show 5 divs
Use media query
Hi thanx for dropiing this video can u also make video on explaining the role of pseudo elements or u can suggest me by providin link in comment. Btw am your one of follower from your IG
Thanks Mate for reaching out, Hit me with a DM on Instagram
This is awesome sir
Whoa had no idea you could do a peroid as a shortcut for faster coding.
I thought maybe they had some nice extension... nope! Works in my VSCode! This is gonna be such a time saver!!
R.I.P my right ear where I had a headphone at the start of this video
Sorry dear
@@csscoder8892 lol still great help
Short and helpful
there is a lot of things here that seem weird to me, first of all what is that "aside" tag, I have never seen those before. you use "wrapper" instead of "container"? I thought wrappers are for child elements inside a big container?
It's just a class, the name of it doesn't matter :)
Aside is one of the semantic tags in html
It's new way to write html doc
when i am setting flex to a item in container its disappearing
I copied whatever you said but i don't get the layout. 😞
@Vasu Devan Soory to hear that, the video is 2 3 years old so kindly check it out again with more keen observation and check out the comments box, may be other also face the same issue as you
thank you!
You're welcome!
Bro try to explain the subject and video, This video only use for copy righters
Ufff atleast give with the explanation rather than the boring disturbing background music
Sure for next time
Brilliant Idea. But I didn't got the same order. Could anyone help please ?
I solved it. Notice for aside part there are 2 classes aside and aside1 ;)
Great, release more videos please, Thanks
Started today.... Thank you
Thank you! Nice!
don't use pix in 2020 :(
Great video buddy
Thanks Mate 🙏
Hey there bro,I just typed exactly as you typed the html and it's blank
U have missed something
@@csscoder8892 cool,I will check it out, thanks for replying.
Why the aside class have to be class=aside aside1 why not just aside1?
superb :)
Thank you
Thank you
Good job bro, JESUS IS COMING BACK VERY SOON; WATCH AND PREPARE
No, he’s not.
Perfect
is it mobile first?
Desktop first
@@csscoder8892 could you please make a video about mobile first?
is the source code on github?
Nope but will upload soon
Add imgand content then it goes unresponsive
muito bom, me salvou (y)
Why isn't the header and article on the same row?
Because header has a flex-grow of 1 and flex-basis of 100% so it is taking up the whole screen
Brilliant!
It doesn't work properly waste my time😢
Thanx bro
yoo in android it didn't work
I respect your opinion, but it is a web based layout
@@csscoder8892 it allredy work for me, i just forget to apply the thing insaide the sorry, and thanks
Pleasure, you got it.
Mu main kya dahi jma rakha hai kya🤣🤣
Thanksss
Welcome
Genial. Un fuerte abrazo.
Glad you find it helpful
@media all in does not work
Use @media screen only
Very short
awesome
Nice
Excelente! 💪
bhai kuch samjha bhi deta
Total waste without speech.
Try your best next time with speech.
Sure
Thank you for feedback
@@csscoder8892 All your videos are wonderful, but think of us the beginners.
Wavering thoughts, no focus at one place.
Too much of videos calling us to watch.
At this situation, when your wonderful video has no speech to hold us on the subject. We may skip it...
So please add your voice however it sounds, no issue.
cool
Thanks
No use for this video for actual learners
Nice cancer intro