HTML CSS Fully Responsive Holy Grail Layout || Web Development

#css #html #webDevelopment
Build a holy grail layout using HTML and CSS only. Here is a step-by-step guide to the holy grail layout.
New Video: • TEASER: Building a NAT...

[@e.b.iinterpreneur7666]

Truly underated video on the web and all of TH-cam. Simple, clear and precise without wasting one's time. Well done 👏

[@jurgensubat2827]

After several weeks of searching I found this video and at the end it was the best, short and greatest video which I have seen due to this topic. Thank you, thank you thank you

[@garylong9260]

Even a knucklehead like me understood ('a little'). Cool!

[@babatundeemmanuel9550]

this is a very good video , straight to the point . thank you

[@laagfrance1109]

Pro is here but not many views..upload more please we need more content like this. Subscribed!

[@neilbenz]

Thank you so much ❤

[@tasteyourlappy]

me too feels the same he should get more views and like

[@tryambakpathak5739]

Thank you so much bro/cutie
Maine ye bahut der se dhundh raha tha finally I got it thanks

[@Pkonreaction]

the simplest the better, been struggled with grid but you made it easy. keep it up you need to ged pay for this :)

[@TheAmetralladora]

This helped so much getting started, thank you!

[@vivarantx]

great video, do you have more layouts to show?

[@deyynskiartz8169]

Question, @3:34 what shortcut key did you use allowing you to type into selected lines??? That is so mind blowing to me. I need to know, please. Thank you😅

[@neilbenz]

It's multi cursor feature in vscode. (Alt + Click)

[@albertt755]

I liked this video, it is clear, short and explain the layout very well!

[@angelolobascio6608]

Fantastico saluti dall''Italia 💪

[@mohamedlafi3768]

super trick as a beginner it will help me alot + can u pls make a video about pseudo elements before and after i didn't get them and they are used anywhere

[@sanju0550]

Thank you so much...this really helped me🤗

[@Movie_Hub-d6e]

Lots of love bro ❤

[@ajdrag]

Very nice presentation.

[@neilbenz]

Thanks Alex :))

[@TsTheSeason]

Thank you G, this is so helpful

[@DavidRollinson-m6j]

Great tutorial thanks. Can you tell me what VS Code extensions you are using to get the live page preview of your HTML and CSS changes, and also to expand the code shortcuts like "aside.left" -> "".

[@neilbenz]

Hi David! I think I used *Live Preview* extension from microsoft to get the live reload functionality. And for that expansion part it is inbuilt in vs code which is powered by emmet, just write that "aside.left" and hit tab..... Let me know if you are facing any issue with this....

[@DavidRollinson-m6j]

@@neilbenz Thanks for the advice, Neil. I'm just getting started with Visual Studio Code. I've installed Live Preview and I'm finding the Emmet shortcuts amazing. On a large screen it is so great to have your HTML, CSS and live preview window all visible at once. Lots to learn! And thanks again for the great tutorial.

[@lastestnewsksa6239]

masha ALLAH, Brother

[@LasTCursE69]

What are you using to display the browser inside vscode like that?

[@sirbawa9112]

Awesome

[@manojk-r2p]

very good vedio

[@rubenijzerman5715]

Great tutorial video, I am subscribed!

[@iamraheemking]

very helpful tnx

[@VladislavaBors]

cool video)

[@GameSide1]

Cool!

[@fadyalamir]

Brilliant thanks ❤

[@vishvaboi]

Nice❤

[@xhappeningNow-hy5wl]

Why did you write body{height: 95vh;} ?????

[@souha3233]

Sir how to open another website on the same page layout that that website from the internet opens only in the main body of the layout which means we can still see left and right parts of my website because I'm opening that website on my website but in a specific size which is in the main content

[@neilbenz]

you can use inside main

[@brittneydavis3266]

My footer is showing up on the right and I can't figure out why. I went back through making sure my code matches :/ I'm using code pen.

[@ukwuodinakachi368]

Hii
Did you find a solution?
I’ve been having this same issues I dunno why

[@gianlucamusinu]

You need to put "FOOTER" outside the "main"

[@BAMBAMBAMBAMBAMval]

Would be cool if you shared the sourcecode too

[@BAMBAMBAMBAMBAMval]

Or i mean this is still cool but it could be cooler

[@mohamedkaffouh436]

thanks broo

[@neilbenz]

Wc bro ❤️❤️❤️ really appreciate your comment

[@khalfallahnadine246]

Thanks simple and very helpful

[@syedafrid8520]

how to change the size of box

[@gfbsssssssssssssf]

How do i put things in the layout? Like text?

[@neilbenz]

Text insertion in the layout is already demonstrated in the video. See those *LEFT*, *RIGHT* etc

[@jevaughnvickers335]

I did one thing wrong and it threw off the entire layout🤦‍♂️
Thank you!

[@ashleyheinlein325]

I watched this video several times trying to figure out what I did wrong lol. Copied everything exactly the way you did it and still no gaps between each of them. It’s all dark blue except around the outside 🤦🏻‍♀️

[@neilbenz]

Did you put
*{
margin: 10px;
}
in the css file?

[@ashleyheinlein325]

@@neilbenz dude I’m so stupid lol I forgot the * in front of the bracket. Lol thank you so much. 🥰

[@neilbenz]

No problem
Glad you got it after all 👍👍

[@Tom-gt8yv]

@Full Stack simp

[@Tom-gt8yv]

@Full Stack hhaahaaaa

[@rs459]

Grid : 2 lines 😅 per media queries

[@verny6109]

I tried this ! It wasn’t responsive

[@davidalexandr5716]

give code pls