How to Create a Responsive Website Layout Using CSS Grid Template Areas and Flexbox [Part 1]


AVOID this Company!!! – I do not leave negative reviews very often. But this is the worst company and experience I have had in a LONG time! I purchased a domain with the intention of using it as the address for my blog. In the whole year I had it, I was NEVER able to get the customer agents (yes PLURAL) to point it to my blog. I sent them the instructions I found online but I did not have access to make changes to the things that needed changing. Over and over again they sent me to new customer service agents who would start from the beginning. I finally gave up and wrote it off as a loss. But that’s not the end. When the year was up, I got notices that it was time to renew. The email told me they WOULD renew it unless I let them know I didn’t want it. So… I opened a billing ticket saying I didn’t want it. They replied with SOMEONE ELSE’S information – a website and hosting package that is not mine!! I told them that, but they don’t seem to understand English. I advise to AVOID this company! Alicia, London UK


In this video we will be taking a look at how we can easily create certain layouts using CSS Grid template areas and Flexbox. We will be using Grid to achieve the main layout and Flexbox for the other components. I hope you all find this useful! Don’t forget to like, share, and subscribe for more content like this.

Don’t forget to like, comment, and subscribe!
More from me: https://bit.ly/2Q3pCiB

Disclaimer: To save time, I rarely include css vendor prefixes for cross browser compatibility. If you plan to use this code please make sure that you use a prefixer.

————————-
Want to set up your own website?
Get affordable domain and web hosting service by HostGator (Affiliate link):

https://bit.ly/2ZfR0u3

Save up to 60% off with coupon code:

JULIOCODES60

Video tutorial on how to purchase a domain and hosting plan. Also, how to launch your website online:


————————-

▬▬▬▬▬▬▬▬▬▬▬▬▬
Contact info:

codingwithjulio@outlook.com
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Ignore:

css,html,responsive website,responsive website design,css grid,css flexbox layout,css flexbox,flexbox grid,css grid,css grid tutorial,css grid areas,css grid areas tutorial,css grid template areas,css grid template areas tutorial,grid areas tutorial,grid areas,grid template areas,grid-template-areas,grid-area,grid area,grid tutorial,css tutorial,css3 tutorial,layout tutorial,css layout,css layouts,css layout tutorial,css grid layout

Coding with Julio

18 Comments
  • ectoplasm
    Posted at 17:05h, 22 June

    please make it responsive 🙂

  • Paras Arora
    Posted at 17:42h, 22 June

    make it responsive !!!!! 🤩🤩

  • Azzy 007
    Posted at 17:44h, 22 June

    Not just responsive make it dynamic 😉 please

  • Alem Kahrovic
    Posted at 18:41h, 22 June

    Perfect for smaller projects👌🏻show us please how you make this responsive, keep it up Julio 💪🏻

  • Colorblind Creative
    Posted at 19:40h, 22 June

    What difference would it make if you had put border-box on reset rather than inherit?

  • David Carter
    Posted at 00:38h, 23 June

    I am enjoying your tutorials. keep up the great work.

  • Nikola Pokrajac
    Posted at 00:45h, 23 June

    Making videos at 4am, did u wake up early af or not go to bed yet? I prefer working nights as well. Great video as always.

  • Ran Dawg87
    Posted at 05:31h, 23 June

    Good job dude! I'm working on making a tutorial/ interact with people and learn to code website. 😋
    This is different then the css I'm used to. What you did in the wrapper was a little confusing, but I'm workin with it. I think I'm just not used to grid. 🤔

  • TechGeeker
    Posted at 08:10h, 23 June

    Make it responsive..

  • Junaid Tariq
    Posted at 08:19h, 23 June

    make it responsive bro

  • Myles Luke
    Posted at 10:08h, 23 June

    My take on this with some basic effects and responsiveness: https://pastebin.com/MwnA2tJW

  • chuks annoyxx
    Posted at 20:30h, 24 June

    i want to see how you make responsive

  • Andres Mena
    Posted at 02:01h, 25 June

    Make responsive bro

  • Davyyd
    Posted at 19:21h, 05 July

    It is better if u explain to us what are u doi g there. I mean to explain the code u writing

  • Vermin Productions
    Posted at 21:13h, 08 July

    im following your instructions and coding all of this (but using adobe dreamweaver) and it isnt working at all, please respond im using this all for an afterschool program website!!

  • Micke Berg
    Posted at 15:07h, 15 July

    Thanks! Once again a great tutorial Julio! I really appreciate the effort. I also like that you base them on pages that you´ve found on Dribble.

  • Hassan Tariq
    Posted at 21:18h, 21 July

    amazing 💎
    keep up the good work
    🏅

  • Ricardo Vazquez
    Posted at 22:33h, 29 July

    im a bit confuse on "grid-template-rows: auto 80%; " would it be auto for the rest of the page, and like 10% for the footer ?