Build an HTML + CSS Layout with Flexbox in just a few lines of code

No video

Build an HTML + CSS Layout with Flexbox in just a few lines of code

Рет қаралды 447,494

Күн бұрын

Build a Flexbox grid layout in just a couple lines of code! Getting good with HTML + CSS Layouts gets you very far, very fast with web development.
Watch this full course!: • Latest Web Development...
Building an HTML + CSS Layout is the first core skill you learn in web development. Lots of people think it's very hard, but it doesn't have to be. This course of web development tutorials for beginners will show you how to build an HTML CSS Layout, then add content with HTML CSS content blocks, which is where you learn all the tips and tricks it takes to build a website.
~-~~-~~~-~~-~
Also watch: "Tailwind CSS - why CSS utility classes save so much time"
• Tailwind CSS - why CSS...
~-~~-~~~-~~-~

Пікірлер: 192

@julialisboa9684 4 жыл бұрын

I was watching an hour-long class on web dev, and, when they got to flex, I understood absolutely nothing. 30min explanation, nothing. I came here and in 7min BOOM. Amazing!

@MikeGTraining 5 жыл бұрын

MORE!!! WE WANT MORE !! hahaha seriously tho you're a really good teacher. Really enjoying the series. Thanks

@sleazymansion639 4 жыл бұрын

Agreed 👍🏽

@aarikaturner6833 3 жыл бұрын

I just want to say how much this has helped me with my coding and web development class! My repositories look so much more professional! Thank you for breaking everything down to simpler terms!

@Anna-ot7dg 3 жыл бұрын

OMG you are the BEST! Thank you so so so much!!!! I have ADHD and this was MAGIC for me. To read or seeing someone talking about this...no, too much info to sort. To only hear and watch: perfect. I'm obsessed with HTML and CSS now.

@overflow7592 3 жыл бұрын

How has the learning process been? Where are you now?

@nenadmylink 4 жыл бұрын

Make sure we all watch all Ads on this channell so they give us more of this BEST available tutorials I have found on you tube!!!

@tristanbouchard9997 3 жыл бұрын

These tutorials are actually how I'm learning to make my own professional website from scratch. A lot better when you're a developer and can say you made your site on your own without any tools like wordpress

@soulforthekindheart3766 2 жыл бұрын

this video jumped me 1 month ahead of the class per se, I researched this countless times. sometimes it is not the information we're looking for but the right teacher.

@slimyelow 2 жыл бұрын

The best explanation of inline block I have ever seen.

@poojagarg2028 Ай бұрын

I just loved your way of explaining each topic. Thanks for the great help 🙂

@Lightdarksnake 5 жыл бұрын

Can't wait to build out more of the website! Always looking forwards to your videos!

@kariette4 4 жыл бұрын

So clear and well organized. Glad I could find it. Thank you!

@YuuffyLIVE 5 жыл бұрын

wow i learned so much from this, cant wait for more videos, thanks!!

@vm6445 2 жыл бұрын

I was shocked that the video has ended already. Lol. You are explaining it very well!

@uaeson4386 2 жыл бұрын

You explain the concept clearly. I really need to dive deeper into flex layout and grid as well. Thank you so much.

@sethpahre7165 Жыл бұрын

I could listen to you all day! Really great video, thank you

@valentineonyedikachi1439 Жыл бұрын

I love this, this tutorial is helping me master my coding abilities.

@lguadez 5 жыл бұрын

Wow! amazing, you really showed me clearly on how to make layout. I am getting frustrated why I cannot do a basic layout, I thought I am the dumbest person in the world. With simple and clear explanation, you save me, now I can do my assignment. Thank you , I am a new subscriber.

@olililo215 4 жыл бұрын

"to some people somewhere in the earth." HAHAHAHA!

@cjeeckazad2995 4 жыл бұрын

olililo maybe you will be this person one day.Who knows, Don’t sell your 🖊!

@muhammadtalhaakbar826 2 жыл бұрын

This is what I was looking for. Simple to learn and great stuff. Thank you very much

@sheikhshakoor5062 6 ай бұрын

Honestly man, your a blessing 🎉

@TheDreamFx Жыл бұрын

Hey, thank you for this series. I'm coming from matlab and python and wanted to have a look at webdev and your videos are very good starting point. Thank you so much!

@sirClogg 3 жыл бұрын

Thanks. It's the first time I ever worked with flexbox and I actually happened to use both column-reverse and row-reverse. The website has a set of rules in a form of image and text next to it. I wanted to have every other rule with text on the left and image on the right to make it more visually interesting. And with the mobile version, I wanted to be the rule with the image at the bottom.

@twanmooij1224 5 жыл бұрын

This is great. Had a bit of a background to HTML, but this explains it all. Can't wait for the next video's. Thanks!

@bayonmbayo2997 5 жыл бұрын

Thanks for the courses video, I learn so much

@darwinvasquez1051 5 жыл бұрын

I just was thinking on how can i learn to use flexbox.. thanks

@OhReseT 3 жыл бұрын

Love your videos man. They're very informative and helpful. Please continue!

@naazimjaleel9546 3 жыл бұрын

What a Great Class! Love it till Now!

@laceyhunter2209 3 жыл бұрын

I love when Jason Batemen does tutorials.

@janpedersen9120 5 жыл бұрын

Really awesome, cant wait for next part. thanks a lot for doing this series.

@emilyhuang2759 4 жыл бұрын

shortcut: ul>li*3 Is there a way of including the href in the automation?

@user-dr2ji9jh7l 4 жыл бұрын

This is how you do it: ul>li*3>a

@bensamsabu3047 4 жыл бұрын

your classes are just great...Thanx a lot

@aah134-K 5 жыл бұрын

These two videos need their playlist. Favorite video easy to follow. Do you have a video on your environment? Ad IDE

@eightfake9798 3 жыл бұрын

sorry im so late, but his IDE is Visual Studio Code by Microsoft

@erlgr 5 жыл бұрын

Here I finish for today, you are really good at explaining!

@MD-nt9nv 5 жыл бұрын

Great clear easy to understand and well explained. What editor are you using?

@bhorpoetry7104 5 жыл бұрын

visual studio code.......he is using ,,,

@probhakarsarkar2430 3 жыл бұрын

Best css on earth. but the playlist is haphazard, cna you make a series?

@szaboferenc1141 5 жыл бұрын

web developing is actually fking beautyful :O

@hanssans3040 3 жыл бұрын

No it isn't I only do it for the money imagine actually having any passion for this shit

@rhinni 4 жыл бұрын

row-reverse and column-reverse can be very useful if you want to use the ~ (next siblings) and + (direct next sibling) selector. Since it only works on next siblings, reversing the order can make it possible to get the target elements as next siblings, even if visually they are previous siblings.

@eurostar0711 5 сағат бұрын

It seems really easy and logical. Is it easier now than it used to be? Im asking because the video is 5 years old so maybe there is some advancement in this field.

@aultravision123 10 ай бұрын

This video helped me out so much man

@hartfordacademy7375 2 жыл бұрын

This is the BEST tutorial EVER! I could KISS you right now man!

@phoenixflamez6859 3 жыл бұрын

bro u are a legend thanks for the big help

@ryemccoy 5 жыл бұрын

Reverse direction can sometimes be useful for responsive stacking...when you want something on left to be on bottom of a stack...for instance.

@bigcheesepuff1 5 жыл бұрын

Cant it be used to sort a list of items?

@mihaialexandru5264 5 жыл бұрын

dude thanks a lot ur videos helped me pass my exam I love u BIG UP

@ebizguy23 4 жыл бұрын

Interested in the next video on Flexbox. It seems like you were going to make another video on it. Sincerely, Kim

@sebagabomoses619 Жыл бұрын

Thank you sir for all your time But below footer how did it turn white

@ShaggyCZ Ай бұрын

The row-reverse value is likely useful for Arabic or other languages that are written right to left :)

@EvanDear 4 жыл бұрын

If you want to jump to the next tab like he did in 0:36, go to keyboard shortcuts in file-> preferance, search editor.emmet.action.nextEditPoint and create any key combination you want

@frouMagician 4 жыл бұрын

thank you so much good sir

@EvanDear 4 жыл бұрын

@@frouMagician you are welcome!

@andrewtram3256 5 жыл бұрын

Love it! Very direct tutorial

@ibeky_1 2 ай бұрын

i watched a lot of coding learning vidios and i did not learn anything. i watched this and BOOM

@ourlittlefarminfulton4916 3 жыл бұрын

I've run into a problem with flex. My browser shows the divs of the triple section centered on the screen in a column. Here is my styling code followed by the html: section { background: white; color: gray; display: flex; flex-direction: row; padding: 20px; } div { background: red; margin: auto; width: 100px; } header a b c lower saection footer Any help in understanding where I went wrong would be much appreciated.

@ourlittlefarminfulton4916 3 жыл бұрын

I have found my mistake: a stray curly brace between my header styling and my section styling. The lesson learned is that the mistake may be outside the portion of the code where the mistake becomes apparent.

@Bongorfians 4 жыл бұрын

I have a question. What is the point/reason in learning web development this way instead of using another website to make one? for example wix and webflow

@pavlemilosevic8224 4 жыл бұрын

So you think facebook or youtube could be made on wix or webflow?

@ricardovazquez2274 5 жыл бұрын

Ive seen alot of use margin: auto; why not use space-between or space-around ?

@DavidElstob73 4 жыл бұрын

Beginner friendly - that's why!

@imani828 3 жыл бұрын

Very Helpful - thank you

@SpookySkeletons 5 ай бұрын

How do you jump to a new line without carrying over the end of the previous line? Or jump to the very end behind the text in one line? Online it says "END" but that doesnt work

@goncalocantante 4 жыл бұрын

Great videos man, thank you!

@kritimandal686 4 жыл бұрын

i just loved it. Thank you.

@ORIJINN_STUDIO 4 жыл бұрын

Excellent tutorials

@dorotaparzych2830 4 жыл бұрын

I don't understand one thing because I want a similar header as you showed in the movie ( in my case instead of a header a have a head which is above the body) When I want the black background to be stretched all over the width of the page... Why applying margin 0; and padding 0; to the header isn't working while writing the same in the body does the trick even though the body is below head? Thanks in advance. Ps. I really appreciate your content! It helped me to break through the problems of a fledgling WebDev:)

@bdrsubuntu3159 4 жыл бұрын

so far so good

@carlerikssonskogh5784 2 жыл бұрын

I don't understand where the css code is? when I made a website as a school project I had a separate tab in vs code with css code. what I mean is that the html file and css file was separated.

@fireantseason5629 2 жыл бұрын

there are three different implementations you can have with css; the first is inline, which is where you insert the css directly into the html elements in the the second is internal css, which is what the video shows. you place the css into the of the document the third method, which is what you're thinking of, is external css, where you link the stylesheet in the

@carlerikssonskogh5784 2 жыл бұрын

okay, I understand. Thank you for the explanation!

@daverdal1 4 жыл бұрын

Great video, only recommendation is to use a black background so its easier on the eye balls.

@DmitryRee 5 жыл бұрын

Thanks for the video. How to get half screen both for code and browser? Any html extension needed?

@hideokzm 5 жыл бұрын

no you don't need any extensions to do that. just minimize you code editor same with the browser.

@lewiscritchley958 5 жыл бұрын

if you are on windows hold window key and press the arrow key if you are on mac hold the green window full-screen button at the top and drop and drag

@nettaj2453 4 жыл бұрын

Another problem I'm having, when trying to figure out possibly what I did wrong with her flex button, is when I delete inline block, my list goes back vertical instead of staying horizontal. Am I missing something??? It looks just like his screen.

@MatttCollins 4 жыл бұрын

Same here, I can't figure this one out. I thought it might just be a problem with chrome but it doesn't display as a row in any browser I try.

@MatttCollins 4 жыл бұрын

Figured it out. You probably have your HTML set up like this: a Div>b Div>c but you need it set up like this: a Div>b Div>c . Your div tags need to be nested inside the tag.

@nettaj2453 4 жыл бұрын

I'll check it out. Thank you.

@waseemahmed2567 4 жыл бұрын

Awesome Videos really awesome

@thewindowgames2610 3 жыл бұрын

Thank you kind sir.

@matoblazek17 5 жыл бұрын

When is the next vid commin out, i cant wait :D

@tranquilmagister8481 2 жыл бұрын

4:33 it is a little bit different *qwack sounds* xD well that was at least different. Jokes aside, years latter still really good tutorial

@markanthonybautista1325 5 жыл бұрын

Great tutorial!!

@silksong7277 2 жыл бұрын

At 5:03 when you where typing in text for the li tags, how do you automatically jump to the next line in-between the html tags? Every time I press the down after typing in some text it places the cursor directly underneath on the next line. I looked at the shortcuts for macs in vscode but I don’t see a shortcut for it.

@medbenzekri 3 жыл бұрын

really amazing you got my subscribe ;)

@sakinak8643 4 жыл бұрын

Thank you thank you thank you SOOO MUCH!!

@chslamenik9131 4 жыл бұрын

How do you do the quick switching between those lines of code? If I use just an arrow, it throws the cursor in the wrong place. Thanks!

@crazy1star 3 жыл бұрын

I'm having an issue in Dreamweaver where I put display: flex; and follow it with flex-direction: row; and nothing happens. I may or may not be just dumb but any tips would really help this noob out. These tutorials are immensely helpful to someone with 0 coding experience, btw. Update: I think I figured out why the display changes werent affecting my abcd divs. However, when I set the margin to auto they get super spread out lol Up-Update: Nvm I get it now lol.

@pavlemilosevic8224 4 жыл бұрын

For some reason I can't make my margin-right work for li, even after doing all you did in tutorial. Here goes the code: li{ display: inline-block; margin-right: 20px; } I will comment the rest of my CSS code if I made mistake there. Update: I solved this, but from the other side I didn't. I just abandoned first document and did everything again and this time it worked fine, idk what was wrong first time but now everything is alright.

@pavlemilosevic8224 4 жыл бұрын

body{ background:rgb(88, 88, 88); color: white; font-family: Arial, Helvetica, Helvetica Neue, sans-serif ; margin: 0; padding: 0; } header{ background: black; padding: 20px 40px; } section{ background: white; color: gray; padding: 20px; display: flex; flex-direction: row; } div{ background: red; margin: auto; width: 100px; } footer{ background: black; padding: 10px 20px; } ul{ margin: 0; padding: 0; list-style-type: none; } li{ display: inline-block; margin-right: 20px; }

@hilmiarkan 5 жыл бұрын

please do the backend course, like php and mysql. Thanks!

@badreddinesalmi6412 5 жыл бұрын

visual studio code

@RobisHaTa 5 жыл бұрын

on this day still, you should use float layout because not all browser supports flexbox or parts of it but you have to know all 3 ways of laying your design

@oksanaaloshyna2222 5 жыл бұрын

Very glad that I've found this awesome course, thank you! Have a little question: for some reason,

@emilyhuang2759 5 жыл бұрын

Might note help, but in the older version of these videos, he had us install Emmett library.

@TheFlyingFerret 4 жыл бұрын

If your using visual studio code, don't type the '

@rahmats.8913 4 жыл бұрын

how to bring the li section to the right corner of the page?

@zealace8573 5 жыл бұрын

good video...please do in separate page for css..

@motazuk 4 жыл бұрын

section{display: flex; flex-direction: row;} div{width: 100px;} Did not display as you've shown. What went wrong for me? ☹ Oops! Forgot to close the div tags. Sorry 😁

@victorlara8356 5 жыл бұрын

Can you make a tutorial on html5 canvas websites ? Using three.js maybe ?

@whoeverwhoever400 5 жыл бұрын

5:29 If ul has the margin and padding 0 by default, then why did you type them? are they necessary?

@waseemahmed2567 4 жыл бұрын

if you want the text to start at very beginning of the block then do that ...Its quite similar to what we did to body(selector) to remove the left and right spaces

@nettaj2453 4 жыл бұрын

My display (ex: display: flex;) is not blue. All of the other style tags are (background, color, and padding). I keep going back but I don't understand what is wrong. Please help me as I want to continue to learn.

@battlesocke 4 жыл бұрын

Did you add a semicolon ; to the end of the previous line?

@travishill3002 4 жыл бұрын

Why not use flexbox for the nav too?

@coreyf9475 4 жыл бұрын

at the display: inline;, the background-color disappeared and the 3 sections remained as one.....

@coreyf9475 4 жыл бұрын

this is a 7:04 or about, can not get past this point and don't know why

@TheBaffledZone 4 жыл бұрын

Nice video Will! Or Fred.... Idk

@BUGPLAYS 2 жыл бұрын

I know over time it is going to click... but currently flexbox just feels like pushing buttons and hoping for it to work. What a headache!

@DrLobster 5 жыл бұрын

CSS Grid would be a great addition, if you already haven't done one yet.

@lifegpt 5 жыл бұрын

I don't get how that multiply command works when i type in div*2 or whatever it displays it in the code but doesnt multiply the code by 2?

@mastertyystudios5572 5 жыл бұрын

Did you press tab? I guess it also depends what IDE you're using.

@Luuucaa 5 жыл бұрын

Are we abandoning the triple-section? PS loving the videos

@bhavanshgupta6476 4 жыл бұрын

which key shortcuts do you use to directly jump from middle to end of tag . i use arrow key + ctrl but it goes one at a time and gets really annoying

@dashingammar9747 3 жыл бұрын

End key I guess?

@dariusz8005 3 жыл бұрын

How add post window php in row ?

@guidance_topicssibghat8537 3 жыл бұрын

Hi Sir, These videos are extremely good but there is a huge issue for beginners that is lecture numbers are not give accordingly so I don't understand clearly that what is the next or previous video, So may be I watch them randomly, I think this is not good for me