Copy this code to get box, box2 and container as per the tutorial in your external style sheet. .container { background-color: coral; border: 10px solid black; } .box{ background-color: lightblue; padding: 5px 10px 10px 5px; margin: 10px 20px 20px 10px; width: 120px; height: 120px; box-shadow: 2px 2px 2px black; } .box2{ background-color: lightblue; padding: 5px 10px 10px 5px; margin: 10px 20px 20px 10px; width: 120px; height: 80px; box-shadow: 2px 2px 2px black; }

@minimalisttt3439

4 жыл бұрын

Thanks :)

@al4485

4 жыл бұрын

not a hero we deserved, but a hero we needed

@tanyagupta3376

3 жыл бұрын

idk whats wrong but even after copying this code in ss it don't show that coral background, I've been trying for so long. if anyone can help?

@sadiqhussain9202

3 жыл бұрын

@@tanyagupta3376 use it in Style.css it worked for me

@sadiqhussain9202

3 жыл бұрын

1 2 3 4 5 use this in your html I added the link tag

I'm sorry, but this tutorial needs to be re-done overall; out of all of the tutorial videos, this is the only one I had issues with, but honestly, the CSS Selectors needs some work too.

@princesinday6570

4 жыл бұрын

i followed from HTML lessons to CSS and This lesson i got really confused but good news is that someone posted the code needed. XD

@davidabba7663

2 жыл бұрын

@@princesinday6570 well me too got confused here

If anyone is still confused after watching this have a look at the w3schools lesson on Flexbox. I feel like it covers the topic better.

Tip : If someone has issue with display:flex; ,then you are probably using width in your container ,try using max-width.

this is the code , you can also personalize it . 1 ijk 5 o

@henryhsu9517

2 жыл бұрын

Fixed~ 1 2 ijk 4 5

@agostinaej2782

Жыл бұрын

thanks a lot, but I think it should be like this: 1 2 3 4 5

I'm so confused, I think you left out some important parts.

@princesinday6570

4 жыл бұрын

the code is in the comment. someone posted it. XD

The code in the link is not complete, the classes box1 box2 container are missing.

we cant see code, and we cant understend what is happening....

Didn't understand it at first. After I started building my own website it makes a lot more sense. For myself, it was just a matter of playing around with the items and getting them to appear the way I wanted them to, hopefully that helps somebody. Also Mike usually has the link in the description for the source code of each video.

@Moodboard39

Жыл бұрын

That's the point ..many idiots don't practice ..

This one is a miss. Didn't understand.

In other to get the flex container to work properly, creat a style tag in the head of your html. Create a class for "container" give it attributes like background-color; width; height. also, you will need to create a "flex-item" give it some attributes like background-color; font-size; margin; and padding.

The boxes do not work with the code in the link, I just see numbers bunched

@Ryan_Parmelee

5 жыл бұрын

Right above the code it says the css for the actual boxes is not included. You have to write that yourself.

I think the whole concept of Flexbox is just hard to comprehend at first. I watched a couple of other tutorials before this and honestly they're just about the same.

@Moodboard39

Жыл бұрын

Yea, and people complaining . It's their fault if they can't understand it ...

I look at the code and trying to figure out where all this boxes came from but no clue

This video doesn't show the .css file for the output that u have. That means we cannot see the .css files for the class 'box', 'box2' and 'flex-items'

Hey Mike, I think this tutorial still is very good as the others and its very understandable, great video and thanks!

Hey Mike, it will really help me if you'll tell me how did you make it so that the background in the HTML document will spread to the whole document because when i'm trying it. the background (the father div) takes the whole space of the document only horizonly and that ruined half of what i tried to do in your video

hi, I tried to use yourhtml code and the css code but I got nothing just 1 2 3 4 with no boxes. is there a part missing

I think you missed flex video. It just has a flex-container...

How did you made the background

Doubt, where did we use the flex-item class?

code: .box{ background-color: #669ed5; color: black; width: 100px; margin: 10px;} .box2{ background-color: #0051ff; color: black; width: 150px; margin: 30px; } .flex-item { text-align: center; font-size: 30px; border-radius: 50px ; box-shadow: 5px 5px 5px black } .flex-container { display: flex; flex-direction: row; justify-content: space-around; flex-wrap: wrap; align-items: center; align-content: space-around; }

As a beginner, I would say this tutorial has a lot to take in ,in very little time . I felt this video very fast pace with very less time given to understand it(code).

I saw he was writing: class="flex-container container" and later used only .flex-container So what exactly another container doing there is the class???

@ebeldekoning5331

2 жыл бұрын

the second "container" was used for the individual css code on the parent

thank you for your explanations and presentation!

Hey Mike, I am just watching thru this tutorial for the second time, hands off. Can you address the first two comments here, so when i come back thru this tutorial hands-on, i dont run into whatever problem theyre having? Thanks youre the man.

1 2 3 4 5 Css codes: .flex-container { display: flex; } .flex-container > div { background-color: blue; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; }

@randimapss

2 жыл бұрын

Thank you.

Pls show the whole HTML code that you've writen

The code on line 12 is critical and is not showing fully on the screen. So am not able to understand the class fully.

It was a bit confusing ... But all and all Good tutorial

Updated URL for the cheat sheet at the end of the video: jonitrythall.com/flexbox-cheatsheet jonibologna.com/assets/flexboxfieldguide.pdf

You didnt explain anything about flex in html

I don think this video is harder to understand or harder to understand bc of his teaching 😂 I understand them w no problem. Just ways to regulate a bunch boxes/layout

I fully agree with the comments below that this tutorial needs to be improved.

he missed the flex container. try this code and you will get the boxes. .flex-container > div { background-color: blue; width: 100px; margin: 10px; text-align: center; line-height: 75px; font-size: 30px; }

@wozskiyeh9651

4 жыл бұрын

thanks mate!

and this flexbox part is not imp @Jane Kimani and all of u

Yeah i kinda have problems to truly understand lesson 12 and 13..

Not Sure why Yall are confused. Its quite simple and he shows the DIVS at the beginning

more or less somthing like this .box{ background-color:lightblue; padding: 5px 10px 10px 5px; width:120px; height:120px; } .box2{ background-color: lightblue; padding: 10px 20px 20px 10px; width:120px; height:80px; } .container{ background-color: pink; border: 10px solid black; }

@limitless1692

5 жыл бұрын

Thanks You are the man !

なんかこのチュートリアルだけMike適当やな

@arx2796

4 жыл бұрын

はい、マイク・マオです

I'm sorry but I was confused with this video.

This video certainly was not helpful like the past ones.

Sorry, I couldn't understand almost nothing

Please skip this tutorial you will all get confused and you won't learn anything. Don't attempt to follow, just skip this one.

What is so confusing about this? It's simple. Srsly, if you're confused at a stuff like this then you have a long way to go.

@user-ft8kn2um7q

2 жыл бұрын

well that's normal because we have different capacities and different knowledge

I am a 14 year old that understands this curse, and when i see the comments that many people had problems. Honestly, just code ok? Like, if you copy and paste it, you will not learn anything. Experiment with what have you learned till now, THEN go and learn new stuff. Because the old things you havent learn are gonna hunt you down all the time!

@wristace3870

4 жыл бұрын

Honestly dont critize peoples way of learning ok? if people learn code one way their learning code so quit critizing people based on their way of learning...

@xeomiku4940

4 жыл бұрын

Lol another "i'm better, i'm the best" youngster...

@aznajhi1718

3 жыл бұрын

I hope you'll grow up not becoming a toxic person, kid.

@Standboard

2 жыл бұрын

everything is about learning from others if u knew everything from your birth then dont come to the comment section to spout your bullshit

@nikolaidisandreas

2 жыл бұрын

@@aznajhi1718 I was stupid when I was 14 no cap ab it, I don't even know why I commented that, I was truly a prieck wasn't I....

11:54 - The link is jonitrythall.com/content/images/flexboxsheet.pdf. It looks like the owner changed their website name.