Plan, Code & Clone Any Website Better Using CSS Grids & Box Model - Complete Tutorial

This is a tutorial video where I share a simple trick I use before creating any website. This helps in planning and coding better, regardless of if you're using frameworks like ReactJS or vanilla HTML, CSS.

This video is a part of Web Development Bootcamp and the Front-End Basics, for beginners to skill up and become comfortable with building beautiful, responsive, and static websites.

Take part in the learning in public initiative! Share your learnings on Twitter. Write Blogs & Twitter Threads and share them with #LearningWithApoorv and don't forget to tag me @apoorvtwts

I'm Apoorv Goyal, a software engineer with over 4 years of experience in software engineering and web development. I dropped out of college in my first semester and had ZERO knowledge in tech when I started on my own from scratch.

=========================================

=========================================
➡️ Playlists:

=========================================
➡️ Connect with me:

=========================================
➡️ Support My Work:

=========================================

Timestamps:
00:00 Introduction
00:42 Grid Layout In CSS
01:25 Implementing Grids
05:50 Different CSS Properties For Grids
19:24 Positioning In CSS Grids
30:45 Understanding How Positioning Works
40:12 Box Model In CSS
44:42 Representing Website As Boxes
48:09 Wireframing - A Simple Trick
49:40 Exercise To Plan & Code Better
58:52 Coding Our VTS Website Layout
01:14:50 Assignment
01:19:06 Conclusion
01:19:53 Learn In-Public & Outro

#html #css #tutorial #course

[alchemistmd]

2:30 emmet shortcut
div.box{Box $}*9

[ram_yuva]

When your are going to add next part of this series ?

[HarshDoes]

Just 30 mins into the video and this is pure gold 🤌❤

[siddhantota]

🥲make a tutorial on how to wait for the premier to start

[prathamchellani]

What do you think First year students should do? Internship and open source or Try portfolio development to get job within the year or any other combination?

[prathamchellani]

Waiting for the next video! Yet another Web Dev marvel by Apoorv.
Till then I will clear my github backlog haha

[Skiid]

Comment with external link isn’t allowed ?

[AkshatVerma-choc]

Sir waiting for your next video desperately.When it will come

[unknwn]

Watching these videos without paying a single penny felt illegal 😂

[nitinnangnurkar]

bro utility classes ke bare me bhi thoda batao

[learncode]

Hey Hi Apoorv. instead of Bootstrap please bring first Tailwind CSS its in demand in recent market.Thank you

[awesomeliving]

Bhaiya I am in my 12th and I don't have CS in my 12th but I want to make my career as a software engineer
Does it make Difference?

[_RITIK_]

Great one! 😄
Btw, I wanted to know how much emphasis does degree get for a hike in salary?
Apparantly, a master's degree generally helps in getting higher salary hikes, doesn't it?

[siddharthkumar]

Unrivaled.
Great effort in making this video
And Great results as well
Well done
Thank you

[abhishekkhatana]

Bhaiya aaj hi apke teeno video dekh khtm ki hai aur teeno lecture paid course se jada aache aur depth of knowledge hai usemein bhi last wala jo apne grid ke help se smjhya hai aur wireframe wala section bhi phele design kro phir implement kro sidha code pe mt kudo 🙌🙌🙌🙌🙌 i Appreciate your work Bhaiya 🙏🙏🙏🙏 aur next video kab aa rhi hai aapki ise playlist mein bhaiya

[vinaypatil]

Sir Your Hard Work and dedication clearly revealed in this Lecture 😊.
Your teaching style, tips & tricks are just OP 🔥🔥🔥

Can't wait for next awesome lectures sir.

Thank you so much for everything ❤️😊

[siddhantota]

🤤 I was thinking some simple regular grid stuffs but thn I realised you always drop something new. Wireframing idea op ∞ 🔥

[.squash.]

OMG apoorv!
I am a beginner and I mostly use Flex-box.
At first I was going to skip this lecture
But i saw your insta story and i came here
Seriously 💥 no one ever told me about this Wire frame and planing things out .
Mostly i just spam divs and then use Flex-box and somehow get the results.
Super excited for your upcoming videos now 💗😇.