How to build complex layouts using CSS Flexbox and Grid - Part 1 of 3

[@workingTchr]

Flexbox is nothing new now (2023), but this video was very helpful. Essentially you start from the outside and work inward. And to get it responsive, we basically switch between 'column' and 'row' as the flexbox direction of our containers.

[@Elregar71]

Dude, I learned more here than 3 months of school. Thank you.

[@heckyes]

Grid reminds me a lot of my beloved . I might actually get back into front end now.

[@tsmspace]

Thank you so much, I'm a complete newb and following various youtube or udemy videos, but this video was very important for me, as so many videos jump past this material into bootstrap, . This is an excellent code-a-long, one of the best, most clear and explicit I've followed. I just wish I could review the code more easily than wiping the video slider.

[@hansschenker]

Very straight forward sample for flexbox layout!

[@knitelite4894]

Discovered an issue when trying to follow this tutorial on Codepen. Since you have a CSS style sheet and a Flexbox style sheet separately, it doesn't affect .pf-grid-item:last-child bottom margin. Had me stumped for quite a while. Other than that this is a lovely tutorial. Thank you for your time.

[@ilonkaivanova9404]

This video is amazing!!! Thank you very very much! Flex is no more a mistery for the ones who were still floating ;)...

[@r.j.schodowski5699]

This is very helpful, thank you! Just wondering, is there a repository with the files you use so we can practice along with you? Thanks again.

[@josemaesgm]

Excellent video, gran vídeo muchas gracias

[@vincesanchez7790]

Very helpful video this man is a gem :)

[@dnahomeremodelingandrepair4373]

You had 2 div's named pf-content, one was the outer-wrapper and one was also named pf-content within the container. Later you have the outer-wrapper renamed pf-container, am I correct or missing something?

yes, you are right. Not good tutorial as it might be, there are gaps in the code, not well explained, confusing from time to time.

[@ilonkaivanova9404]

In this real life coding video it is actually helpful to see the process of clearing things out, constantly changing to the best result for UX...

[@no1TFKfan]

Oh thank god you noticed that. I was so confused what wasn't working! Thought I had made a mistake lol

[@JamesTaylor-vx4vu]

Hey, is there any reason in particular that you decided to use "flex-wrap: wrap" to align the grid items vertically instead of setting the flex-direction to column?

[@jared394]

Excellent video, where can we find parts 2 and 3? Thanks!

[@HackerEarthInc]

+Jared Hensley We will be releasing that soon, stay tuned!

[@MaxPicAxe]

I've been trying to find out how to make a portfolio with fixed sidebar in css grid layout! I really hope this tutorial gives me the solution...

[@gaogao_yanjiu]

Where can I find the source code?

[@andrescramosm]

what is the difference in using vw units or percetange values?

[@LopogaX]

vw and vh is relative to the viewport and percentage is relative to the size of the parent element

[@tedshapera8062]

Great Video, but I'm stuck! I've checked my pf-flex.css over and over but it just won't do the sidebar on the right at >900px. Have I just gone code blind? In Dev Tools it shows the "flex: 35vw;" at > 900px but its not displaying it! Apologies in advance if its something obvious! @media only screen and (min-width: 901px) { .pf-sidebar { flex: 35vw; } .pf-content { flex: 65vw; } .pf-grid { display: flex; flex-wrap: wrap; } }

[@katieangelopoulos4706]

I'm having the same problem 4 years later...

[@tedthetutor4587]

@@katieangelopoulos4706 Well Katie, maybe its not us!!!

[@sumahassan7326]

hi thanks a lot to make to understand how to make complex layout but can you teach us full cose of web development

[@StephanieLoveful]

Is this better then bootstrap 4 ?

[@DavidJeffreyOConnor]

Significantly (IMO). This is native CSS and does not require the end users browser to dl the bootstrap files. Some say that performance hit is mitigated by using CDN, so maybe the point is moot. Bottom line is, bootstrap is a great way to make a page responsive, but being able to create and maintain responsive layouts in native CSS has a lot of advantages in both performance and maintenance. Juicefulll is right - the biggest problem right now is the compatibility in browsers for grid. My advice - learn grid now and take advantage of how good it is in the future. I personally love the way you can define a grid and control the positioning of items using grid template areas.

[@LesDunning]

Bootstrap websites tend to look the same, or at least very similar. Flexbox seems to give lots more freedom.

[@vim1000]

Thanks a ton.

[@designdaddy4112]

You are awesome :)

[@HarpreetSingh-cz2zh]

use emmet for dom creation so much faster

[@shashwatasati8391]

Powerful videos by you. Can I know your name and contact?

[@mikezcooler]

Nice

[@kaszakaria1996]

thanks man (y)

[@poorvajanbandhu7039]

The reason why I :thumbsdown: this video is because 1) I don't care about how you set up your local environment to serve up files 2) I don't care about prettifying my view with font families, line heights and font colors and all that jazz. 3) There is so much moving around, you lose track. Your content might be all great and from the end result that you're trying to achieve, I can tell that this video tutorial will be immensely helpful. But I have been watching multiple tutorials back to back to learn the various difference nuances of the grid layout, and I can safely say that in the time that you type out all your CSS and move things around, I may have learnt 3 new grid concepts in another tutorial. I don't mean offense and this is just genuine feedback :-)

[@mathislove3722]

No offense. the content of your tutorial is good but you spend too much time on things that are irrelevant. The pace of your tutorial is extremely slow. I upvoted it anyway because I think you're trying your best to be as helpful as possible but I think you're trying too much.

[@ladymiriah1692]

You can't close that stupid "message" box in the bottom right corner because of the icon you have over it! Beyond annoying and you need to fix the problem!

[@poetkifaya]

Just go into full screen or theater mode....

[@oussamacheta7106]

is the code in the video available ?