Easily Structure your Layout with CSS Grid's 'grid-template-areas'

Поделиться
HTML-код
  • Опубликовано: 17 ноя 2024

Комментарии • 291

  • @DesignCourse
    @DesignCourse  6 лет назад +24

    Smash that Subscribe Button! My answer for today's question: I have to say, the biggest challenge I face is coming up with relevant and unique content 4 days a week for this channel, ha. It's been about a month since I've started this new content schedule, but I've made it work. It's easy to pump out content like today's relatively short and niche topic, but I'm finding it a bit harder to dedicate the time to learn more in-depth topics. The solution to this is delegating/outsourcing some of this work, which I've begun to do by hiring my first writers for Coursetro.com! Either way, there's always a solution to these challenges.

    • @michongoma7598
      @michongoma7598 6 лет назад

      Are you still hiring?

    • @jmcbade2960
      @jmcbade2960 5 лет назад

      Quote: "I have to say, the biggest challenge I face is coming up with relevant and unique content 4 days a week for this channel,"
      I can help with that :) Please seriously consider expanding the topic to how to use flex-box with CSS Grid with a practical example or two. This is important because CSS "Sub-grids" are not a reality yet. Thanks!

  • @sveinsoermo9883
    @sveinsoermo9883 6 лет назад +50

    U'r CSS videos are just amazing, there is no substitution. More of the same pls. What about a more comprehensive CSS grid crash course?

  • @carrillocarlosce
    @carrillocarlosce 6 лет назад +37

    Hi, I think my biggest challenge was to step fordward from learning, to real life work as a freelancer, because you don't know if you are enought prepare for the job, or the things you have to do, as a freelancer I have face several challenges and almost always i had to use the words, yes I know how to do that, and at the same time researching in google how to do it xD, I think that we all have done that because we trust in our hability to self taught anything.

  • @franceshanna3724
    @franceshanna3724 2 года назад

    I am a novice to CSS Grid layout and have been teaching floats as a layout tool to my high school students but wanted to update my skills. This is by far the best video I have come across in my search to find how to best teach CSS layout to non designers/coders. Grid-area as a layout tool is so simple, intuitive and great for visual learners. So my biggest challenge has been where to go from floats. After watching this I don't see the need for flex-box (or floats for that matter), which seems quite complex in comparison, although I could be wrong. Thank you, you are a natural teacher!

  • @xavilopez8293
    @xavilopez8293 6 лет назад +2

    My biggest challenge as a coder is to organize and place all the elements on the document without creating a messy css, and I'm feeling like this tutorial will help me a lot on that. Big thanks!

  • @darkmift
    @darkmift 6 лет назад +13

    As a novice I always struggle with responsive.
    This will definitely make my life easier.
    Thanks!

  • @robertp3596
    @robertp3596 6 лет назад +1

    Hey!
    My most difficult issue as a front end developer is coming up with a good concept for design. A super simple amateurish design I made took me about 5 hours and a few mock ups.
    Appreciate your content, as a person who is less creative, your content has been a blessing. Also, thanks to all i've learned from your videos I landed a job as a Front-End Developer!
    Thanks!

  • @philipowino-jofon
    @philipowino-jofon 2 года назад

    I found this 4 years down the line. Thank you Garry

  • @blacknbone
    @blacknbone 6 лет назад +86

    My biggest problem is applying my knowledge into real life applications. I kinda get lost or mixed up on where to start or how to start.

    • @Deskofmj
      @Deskofmj 5 лет назад +10

      for everything that you start learning pretend that you're doing it for a client and build on it ;) that's how i started on angular at least ..

    • @ralexand56
      @ralexand56 5 лет назад +7

      Don't focus on the tech, focus on a project that you want to build and apply the tech to it.

    • @dbased1915
      @dbased1915 4 года назад +2

      find a real life site or app that you like then try to replicate it, i did this with footlocker using react. Took me an entire month but ended up pretty dope.

    • @zdarofMERGAITES
      @zdarofMERGAITES 4 года назад +2

      Try to plan ahead, draw design on a paper and then apply the grid rules, i kinda struggle with the same, but in javascript. But you should have got it by this time now i guess so this is more for others

    • @AjayKumar-id7mb
      @AjayKumar-id7mb 2 года назад

      Because you are only watching tutorials

  • @ricardocalderon9823
    @ricardocalderon9823 5 лет назад +7

    My biggest challenge is trying not to get intimidated by the amount of options I have. And I, always wanting to do things the optimal way, will sometimes get my self stuck on "is this the best way to do it? maybe I should start over..."

  • @kaunganyirenda6068
    @kaunganyirenda6068 5 лет назад

    My biggest challenge in my self taught coding is knowing which language to learn first for every specific thing for example whats the best language for web page behaviour or Database designing? i actually first started out with WordPress but it didn't give me the satisfaction i needed, had to pat for nearly every little thing. So i decided to learn code myself. This tutorial just made my coding life easy for responsive designing. Thanks Man!

  • @kevinzhang8974
    @kevinzhang8974 6 лет назад +1

    Hi Gary: Thanks for this simple tutorial to refresh the basic of the CSS grid. As a developer/coder, my biggest challenge these days is: there are way too many things to learn. I am very enthusiastic for learning things beside my full time job ... technology and languages I am learning these days: Node.js, React, Vue, JS (ES6), CSS, Big Data, Python, SQL/PLSQL, Oracle APEX (a very cool Oracle technology for rapid build modern web application), Rest web service, cloud, AI ... etc ... The list is growing everyday ... I also have 2 kids (6 & 8) and I am struggling to find time to learn ...

  • @Avean
    @Avean 5 лет назад

    Never thought of using the body tag as a wrapper but it makes sense. The body is the structure of the document and should be a wrapper. Amazing video!

  • @mikersson
    @mikersson Год назад

    Nice explanation. Simple. The structure is not complicated to understand... I really liked it, thank you for sharing.

  • @Mallick7
    @Mallick7 4 года назад

    You saved a lot of my time and I am not afraid of grid anymore. Thank you.

  • @NbaLive4ever
    @NbaLive4ever 4 года назад +1

    Applying what you just learned onto real projects is def my problem!
    Thanks for the css grid video, it makes Grid so much easier to use!

  • @syedmohiddin480
    @syedmohiddin480 6 лет назад

    My huge challenge is web designing & communication ... I'm basically a coder .got a lot of appreciation from various clients... totally goes to logical part

  • @sveinsoermo9883
    @sveinsoermo9883 6 лет назад

    As a Angular/JavaScript coder, by far DESIGN. CSS grid HELPED a lot, but still on a learning curve.

  • @anar11714
    @anar11714 2 года назад

    Perfect explanation. Thank you very much! I was struggling with "grid-template-areas" understanding.

  • @HikwaMehluli
    @HikwaMehluli 6 лет назад

    Thank you all your work bro. My biggest Challenge thus far as a Designer who has intergrated into a front end coder is understanding JavaScript and Bundling using webpack, especially when enquering jquery as dependency

  • @bcochannel1296
    @bcochannel1296 2 года назад

    Good afternoon Gary, I just watched this tutorial and was able to follow along and have everything work perfectly, just as per your video. Thanks a mil for sharing. Even though this video was made 3 years ago, it seems, it really helped me today as I found myself "stuck" on a project related to CSS grid. Hopefully your tutorial will help get me "over-the-line". To answer your question of the day, I am really finding it difficult to manage the coursework for the bootcamp I am enrolled in. I basically find myself having to re-shuffle family responsibilities in order to get to completing the coursework "on time!". I know I will get there though, once again, thanks a mil. I subscribed to your channel also joined your discord channel now...see you on the other side, Lordwilling...

  • @sivavadlamani887
    @sivavadlamani887 4 года назад

    When I know how to write code for a specific problem, I struggle with the design. When I come up with a fresh design, I struggle to write efficient code. That's my problem. Your UI Design Course is helping me a lot though, cheers for that.

  • @teppichkuchen8606
    @teppichkuchen8606 6 лет назад +10

    Would like to see intelligent use of flexbox and grid layouts, how they can work together in the best way. And second part the fallbacks of these for older browsers :)

    • @FunIsGoingOn
      @FunIsGoingOn 6 лет назад +1

      What kind of fallbacks for older browsers do you think you need? IE 10/11 supports parts of flexbox/grid with -ms- prefix, but that's 5-6 year old browsers on 9 year old Win7. If that is your concerned audience, give just div's in the html one after another, rendering like the mobile view. I don't know however what content you would present on the site on such old browsers. Any non-IE browser on Win7/8/10 aswell as edge and anything linux/mac support flex/grid since 2-6 years, all auto-update and even in ESR releases.

  • @jacobybroadnax
    @jacobybroadnax 6 лет назад +13

    My biggest challenge is staying committed to learning something. Because I always deviate from what I want to learn and do something completely different.

    • @adisreyaj
      @adisreyaj 6 лет назад +3

      Jacoby Broadnax This is totally me...

    • @Akki8181
      @Akki8181 6 лет назад +2

      same here

    • @supreetkumar7604
      @supreetkumar7604 4 года назад +1

      My suggestion:
      Before going to sleep at night, think about top 3 things you're going to learn tomorrow. Like flexbox, grids, navbar. If you achieved these 3 things, your day was successful. You can learn more than that, but its optional. But, you have perfect these 3 things mentioned at any cost. That's an effective way to learn.

    • @sauvikgoel591
      @sauvikgoel591 4 года назад

      @@supreetkumar7604 but the problem here is, one doesn't know all the topics, so it would be a little difficult to cope up with this habit after sometime : ( , do you know any resource from where one can acknowledge/update themselves of the various topics in their domain, preferably web domain here...
      thanks in advance!!

    • @supreetkumar7604
      @supreetkumar7604 4 года назад

      @@sauvikgoel591 Watch 'Flux' YT channel

  • @wahibashraf4117
    @wahibashraf4117 6 лет назад

    Biggest Challenge is to learn the design front end As I've been coding in the backend over 3 years , But after landed at your channel it's seems like i can learn this with time

  • @lipslide101
    @lipslide101 6 лет назад

    I'm a java webdeveloper in a small company and my biggest challenge is to work with frameworks which do A LOT for you, which sounds nice but it really isn't. It's frustrating to try to implement EXACTLY what you want to achieve without crazy bypasses and stupid tricks. This is why I love barebones webdev/webdesign without any big frameworks. You have so much freedom as a developer.

  • @SWGTBruno
    @SWGTBruno 6 лет назад

    NOTIFICATION SQUAD!!!
    The single most thing i face while a coder and designer is working with angular, rules based on drools that get DB items from hibernate mappings while i have a C# backend to work with, which has the funtions to "glue" them all.. it´s painfull!! And you helped me a lot at designing in angular.. hope to see more tutorials of it.. (like notifications and inbox messagens in an angular adminpage )

  • @AdamButler-gv2gv
    @AdamButler-gv2gv Год назад

    This helped me start to love CSS, when I had been disliking it for so long.
    Thank you!

  • @manamarketingsa6538
    @manamarketingsa6538 2 года назад

    To understand everything logically and find someone that can actually teach you why the stuff works... so you can implement them on your own with your own ideas ... plus as a beginner I need to get the hang of CSS first.... lol

  • @SterlingCobb
    @SterlingCobb 2 года назад

    Wow, I didn't understand grid-template-area util this video. You laid it out very well.

  • @michaelwalton8427
    @michaelwalton8427 5 лет назад +2

    Thank you for making a great tutorial on css grid-template-areas!

  • @muhammadusman7217
    @muhammadusman7217 6 лет назад

    Basically it's all about time, you have you give time to learn what you want, I know we can learn stuff if we want but we have to give the time to that!!!

  • @wolfenrico
    @wolfenrico 4 года назад

    Thanks for the tutorial. My biggest challenge is to change this tempalte for a second or third page in order to have only 2 sections on the second page and maybe no sidebar.

  • @propeldigital
    @propeldigital 2 года назад

    Very easy to follow tutorial. Awesome stuff! Implemented this on a project I'm working on and it was easy as can be! 🙌

  • @richardhendricks4107
    @richardhendricks4107 6 лет назад +9

    I think the most complex thing for me as a designer (I'm not a designer) is to make a really cool design. As a coder - nothing.

    • @kettenbach
      @kettenbach 6 лет назад +1

      Richard Hendricks I have this problem. Lots of technical skills but very little creative / design skills

    • @richardhendricks4107
      @richardhendricks4107 6 лет назад +1

      Every time I watch some designer's video I'm impressed how they can in a short time make really awesome design.

    • @djhonz45
      @djhonz45 5 лет назад

      Richard Hendricks likewise!!

  • @Nour-fakhryy
    @Nour-fakhryy 3 года назад

    Learning New Concepts for the very first time

  • @nathandowner6007
    @nathandowner6007 6 лет назад

    Hey Gary, you can use alt + tab to switch between your last used application/window to save time instead of using the mouse to selecting it from the taskbar

    • @kettenbach
      @kettenbach 6 лет назад

      Nathan Downer lol he is a keyboard shortcut enthusiast, surely he knows this one, but yeah good point

  • @BneiAnusim
    @BneiAnusim 5 лет назад

    Short and right to the point. Love it! Thanks

  • @ralexand56
    @ralexand56 6 лет назад

    I believe the recommendation is to use fractional units fr over percentages. Great video!

  • @chakiss
    @chakiss 5 месяцев назад

    Excellent video. To the point and very clear!

  • @dav1d_andrew
    @dav1d_andrew 5 лет назад

    So helpful. Thank you so much for showing grid-template-areas

  •  2 года назад

    Amazing video! My greatest challenge in becoming a dev is learn several languages at the same time.

  • @nathandowner6007
    @nathandowner6007 6 лет назад

    as a coder/designer, my biggest challenge is remembering the css properties. I'm pretty new to web dev and I know it'll take time but yea, definitely my hardest bit

  • @BneiAnusim
    @BneiAnusim 5 лет назад

    My biggest challenge as a dev/designer is TIME. It takes lots of time to learn the new tech! We have to focus on and manage our time wisely so we can have a LIFE and because Time is Money! I said all the time: Oh I learn Flex and Grid tomorrow. Well, the time came, I was not prepared and lost an 85K a year gig for not been prepared. I had to take a hands-on test and guess what? Flex, Grid, BEM, and Viewport units were in the test! I love what I do, but I feel sometimes that I need a day of 35 hrs.

  • @andySip808
    @andySip808 6 лет назад

    The biggest challenge and also the most rewarding is keeping up ever-changing CSS/javascript ecosystems. Seems like everyday there is a new CSS property and javascript framework.

  • @noymorgenshtein9191
    @noymorgenshtein9191 3 года назад

    this video is pure gold

  • @NirdeshPokhrel
    @NirdeshPokhrel 4 года назад

    Thank you for the great knowledge about the CSS grid System.

  • @Konamti
    @Konamti Год назад

    My greatest challenge has been; Sometimes not being able to properly set the responsiveness after coding a whole website.
    The responsive part has been a bit challenge. The most challenging is the position of tags with their elements " position: relative, absolute, fixed, inherit,...etc" This is my biggest challenge for now. Brother please I want a full comprehensive video on the positioning. I will really appreciate it. Yet to uncover the areas of Javascript.

  • @michongoma7598
    @michongoma7598 6 лет назад

    My Biggest challenge is staying up to date with the ever changing front end JavaScript frameworks. Its hard to work on big enterprise project when things are being deprecated, APIs changing, Tools becoming more complicated.

  • @rjunior2006
    @rjunior2006 6 лет назад

    My biggest chalange is to create the design itself. I mean, how to distribute things in the screen, choose colors, etc that doesnt sucks! Programming and write the HTML/css is the easy part for me.

  • @TheRahul1994
    @TheRahul1994 6 лет назад

    Hi Gary. After working on few projects, I got to know that my challenge is that I can't harness the true of power of any language, be it HTML, CSS, Angular. I implement it but later I get to know that there is a better way of doing it using some pre defined functions. So I lack there

  • @hanshansen4267
    @hanshansen4267 6 лет назад +1

    Great Videos! Just started working through your content.

  • @ekoren6116
    @ekoren6116 5 лет назад

    Thank you so much for showing this. It helped me clear allot of confusions.

  • @amiraljion6555
    @amiraljion6555 5 лет назад +1

    It's a great video, and I can said that I learned something new today. Thank you!

  • @hansmills9228
    @hansmills9228 3 года назад

    You are a life saver! Thanks so much, really appreciated.

  • @99Pakii
    @99Pakii 3 года назад

    I loved this video. I think it was satisfying to watch

  • @alexschimmer2014
    @alexschimmer2014 5 лет назад

    responsive in coding and contrast and pixel perfect designs in designing

  • @Black1Sabbath100
    @Black1Sabbath100 5 лет назад

    this is pure gold

  • @大盗江南
    @大盗江南 2 года назад

    Great video buddy! U just made responsive design so simple........lol.....i am always afraid of that

  • @mirdonpleskey5634
    @mirdonpleskey5634 3 года назад

    Thanks. This is really usefull. I can't even imagine, how i would be able to create eshop without this trick 🔥🔥🔥.

  • @jairusomollo4955
    @jairusomollo4955 5 лет назад +1

    The challenge I face is laboring for hours before coming to a flow state of mind.

  • @jamesriley5806
    @jamesriley5806 6 лет назад

    My biggest problem is knowing what to learn next.
    Lovin the tuts, btw

  • @gouravkhator
    @gouravkhator 4 года назад

    My biggest challenge as a web developer is some times, responsive css properties like % don't work as expected or some css grid won't work as expected. Then, after lots of debugging, it will work.

  • @mariospittas9331
    @mariospittas9331 5 лет назад +1

    Ah, I can't remember the syntax for the media queries :/. But now i tried to learn and remeber it.

  • @sciences-sci
    @sciences-sci 2 года назад

    very good explanation

  • @hroman_codes
    @hroman_codes 4 года назад

    Thank you 🙏exactly what I was looking for!

  • @yossel6529
    @yossel6529 3 года назад

    Very well explained!

  • @DiscraftJunkies
    @DiscraftJunkies 3 года назад

    Been in and out of web design for over 15years, but haven't fiddled with any coding since 2014. A lot has been adde since then, and its hardest to adapt to the new things that are available and most of all my lack of ability to paying attention. Im sitting up for hours on end, coding and testing new things; because I am trying to build my boss a website for his small business as a gift for Christmas. its nothing too complex, but I seep trying to design something other than what I have on paper, or can't figure out how to do it the most effective but not utilizing too much brain storage to where all I dream about is Coding. I know the basics and majority of CSS except what's become of since 2014. I am really interested in the grid block idea, I guess I need a full run down on an explanation, because my ADD doesn't compute why This does This and this and not that, maybe a rundown on the mathematics. Is it easier to just start from a template and fiddle with the code like I used to do with Good Ol MySpace? I just feel like using a template is cheating, but I just want to do something basic, yet expand my abilities and get back into coding as a side gig when I'm not Graphx designing. thanks for the video.

  • @originunknown4273
    @originunknown4273 3 года назад +1

    I'm new to web development. What are the reasons someone wouldn't use grid template areas to layout their website? This seems much easier

  • @JoyinCrafting
    @JoyinCrafting 3 года назад

    amazing! thanks for this quick explanation, I'm using a blank Wordpress theme and it uses grid template areas which confuses me so much on how it works. lol

  • @stomperhk9107
    @stomperhk9107 3 года назад

    Thanks for the video man, you helped me a lot.

  • @horrorlovestories
    @horrorlovestories 2 года назад

    So easy to understand 👍👍👍 nice

  • @cyrusbfbulan6573
    @cyrusbfbulan6573 6 лет назад

    easy to understand sir..thank you thank you

  • @_the_one_1
    @_the_one_1 5 лет назад

    Late to the party but the most difficult task as a coder is when dealing with css. I mean with legacy CSS. I mean with many many overrides of CSS.

  • @DividedStates
    @DividedStates 5 лет назад +5

    Hey, I am complete beginner. You tutorials are helping me a lot with my hobby side project. Thanks a lot for that.
    I had a question, about CSS. Is there some kind of good practice for media query breakpoint? How many? At which sizes?

    • @goczbela8469
      @goczbela8469 4 года назад

      www.w3schools.com/HOWTO/howto_css_media_query_breakpoints.asp

  • @kyle6754
    @kyle6754 4 года назад

    I think the hardest thing that I've done since I just started is getting my css to be positioned exactly the way I want and knowing how to troubleshoot why I'm not able to get something to do what I want it to.

  • @daisykmr2
    @daisykmr2 4 года назад

    Desiging is fun but challenge is with tools and masking techniques or isometric designs. Coding- Learning methods to make a for for example e-commerce site. Animations is a challenge

  • @SalmaK.
    @SalmaK. 2 года назад +1

    I didn't get the media query part, why didn't you use flexboxes?

  • @EvandroPastor
    @EvandroPastor 6 лет назад

    Finaly I get this stuff! Thanks for the video.

  • @NoahBreen
    @NoahBreen 6 лет назад

    Nice video, maybe if you could show in another video how to make a similar layout with CSS Grid work in IE10, that would cool.

  • @undefinedkawsar6802
    @undefinedkawsar6802 6 лет назад

    Distraction and staying focused is the biggest challange.

  • @callmekaymusic
    @callmekaymusic 5 лет назад

    this was an amazing tutorial i really enjoyed please know that you just earned a subscriber

  • @iamsh4r106
    @iamsh4r106 6 лет назад

    For me the biggest challenge is trying not to get frustrated when I can't get a design right!

  • @mani6678
    @mani6678 Год назад

    Thanking Sir, I will try.....

  • @Biglex524
    @Biglex524 3 года назад

    I kinda got lost when naming the sections in the grid area, are you able to individually name them like you did to aside and header? I might sound stupid but I'm a novice and curiosity is key when learning!

  • @hamzaramadan5848
    @hamzaramadan5848 Год назад

    my biggest challenge in coding journey is the long search term that i face to known a specific info. or technology

  • @ottovon8793
    @ottovon8793 6 лет назад

    Hi, it works in your demo even when there's min-width instead of max-width in @media line. On my comp doesn't ;-)

  • @rajkathal3251
    @rajkathal3251 6 лет назад

    Well , I am a frontend coder , the biggest challenge that I face , when the designer gives the design of the application, I am not able to create exactly the same what he has given, rather making him to use what I can make...... This is the biggest problem , Gary please suggest what should I do in this case ? And I guess there will many people who is facing the same issue.

  • @sayed1821
    @sayed1821 6 лет назад

    Thinking about the new style for the webpage

  • @m3rl1on
    @m3rl1on 5 лет назад

    biggest challenge? having to keep up to the ever growing & new technologies that always popped up every few years.
    that's also the most fun part though.

  • @thomaskahr990
    @thomaskahr990 5 лет назад

    really nice. thanks for this great video.

  • @akj3388
    @akj3388 2 года назад

    And now I am guessing you add things like links, images and paragraphs on those different areas... do they stay inside those areas of overflow? Thanks.

  • @HeilTec
    @HeilTec 6 лет назад

    Developing software engineered using legacy tools and still use modern principles of coding today when a rewrite is precluded.

  • @nerosonic
    @nerosonic 5 лет назад

    thanks for the tutorial!

  • @backendfyi
    @backendfyi 6 лет назад

    Can you please make an html and CSS dashboard with hide/show sidebar using css grid? I've been wanting this and haven't found a better tutorials on RUclips yet. Thanks 👍

  • @Dinesh-ql1ok
    @Dinesh-ql1ok 6 лет назад

    Gary your subs are increasing enormously.

    • @DesignCourse
      @DesignCourse  6 лет назад +1

      I know, I'm getting 1k+ new subs a day. Nuts

  •  6 лет назад

    Making reality the designs from creative people!!! ;)

  • @drawdownwind6636
    @drawdownwind6636 Год назад

    Hi, mate. What programme are you using to actually view the code form VSC? Can you recommend one? Thanks..

  • @icreator_websites
    @icreator_websites 2 года назад

    I am a beginner self-taught coder. So far most difficult and time-consuming to learn is to use @media for mobile devices. Can't figure out general rule that would be applicable for Androids and iPhones as well...

    • @josephlivengood4508
      @josephlivengood4508 2 года назад

      Look up Kevin Powell and you'll learn so much more. He using @media for larder screens.

  • @strec93
    @strec93 2 года назад

    Your videos are great help please keep posting. Absolutely love the way you explain everything. Awesome job. Would love to have you as a mentor since I am just starting my journey into the web dev world. Please let me know how I can get in contact with you directly. I am here in east bay California.