Our First Tailwind CSS Website: Tailwind Tutorial #2
HTML-код
- Опубликовано: 6 июн 2024
- Tailwind CSS tutorials for beginners in Hindi: In this tailwind CSS tutorial, we will create our first tailwind CSS website!
This video will talk about why Tailwind CSS is a boon for developers who hate writing and maintaining CSS
All the source code and other material will be uploaded on codewithharry.com as and when available!
TimeStamps ⌚
Recap - 00:00
Creating Landing page - 04:59
Creating Navbar - 06:20
Adding Logo - 09:27
Creating Content Section - 12:31
Adding Picture - 19:14
►Check out my English channel here: / @programmingwithharry
►Instagram: codewithharry
python, C, C++, Java, JavaScript and Other Cheetsheets [++]:
Playlist: • Coding CheatSheets 🧾 b...
►Learn in One Video[++]:
Python[15 Hr] - • Python Tutorial For Be...
Python Advance[3.5 Hr] - • Python Programming Cou...
Python[1 Hr] - • Learn Python In Hindi ...
Python[2 Hr] - • Python Tutorial In Hin...
Python[15 Min] - • 15 Minute Python Tutor...
JavaScript[1 Hr] - • JavaScript Tutorial
C[1.3 Hr]- • C Programming Tutorial...
php[1 Hr] - • Learn Php In One Video...
php[2.3 Hr] - • Php Tutorial for Begin...
php[Project]- • Login And Registration...
HTML[30 Min] - • HTML 5 Tutorial For Be...
CSS[8.5 Hr] - • CSS Tutorial In Hindi ...
CSS[1.4 Hr] - • CSS 3 Tutorial For Beg...
Wordpress[3.2 Hr] - • How To Make a WordPres...
Angular[2 Hr] - • Angular Tutorial in Hindi
Java[2.3 Hr] - • Java tutorial in hindi 🔥
Web Scraping[1 Hr] - • Web Scraping Tutorial ...
MongoDB[2 Hr] - • MongoDb Tutorial For B...
Numpy[1 Hr] - • Numpy Tutorial in Hindi
Android Dev[12 Hr]- • Android Development Tu...
Linux[1 Hr] - • Linux Tutorial For Beg...
JQuery[1.1 Hr] - • jQuery Tutorial For Be...
Git and GitHub[1.1 Hr] - • Git & GitHub Tutorial ...
►Complete course [playlist]:
React - • React Js Tutorials in ...
Python- • Python Tutorials For A...
OOP Python- • Object Oriented Progra...
Java - • Java Tutorials For Beg...
Android Dev- • Android Development Tu...
Python GUI- • Python GUI: Tkinter Tu...
Web Development- • Web Development Tutori...
Python Django - • Python Django Tutorial...
Projects Using HTML, CSS & Javascript- • Projects Using HTML, C...
Data Structure and Algo - • Data Structures and Al...
Python Practice programs - • Python Practice Progra...
Basic Python Programs- • [Hindi] Basic Python P...
General Python Errors- • [Solved] General Pytho...
PHP chatroom- • Realtime PHP Chatroom ...
Follow Me On Social Media
►Website (created using Django Rest & Angular) - www.codewithharry.com
►Facebook - / codewithharry
►Instagram - / codewithharry
Twitter - / haris_is_here
Comment "#HarryBhai" if you read this 😉😉
npm init -y (y means yes to all)
for server use (npx serve) it serves your files on your current working directory on localhost also on your network.
npx server does not support live reloading you must have to relaod the page manually.
For auto reloading this javascript code will help you,add this code in your script tag in your html:
function AutoRefresh( time ) {
setTimeout("location.reload(true);", time);
}
AutoRefresh(1000)
// It will fire location.reload function every 1 second and this will help you
//to reload page in every 1 second.
thanks
thanks
Thank You
Brother what to do with the Node modules folder and other files that was created during the installation of Tailwind CSS?
@@the_shuvo_sarkaryou just ignore them they include other functionalities for tailwind . your main focus is on the file on which you are working
Great course. For information: Vite is a bundler which is used to optimize our code, it performs various other tasks such as automatic refresh if there is any change in our program, tree shaking etc. Documentation is amazing if you want more info.
Harry Bhai....Really Your Are a best Teacher for web Development in the history of RUclips......
The new Animation / intro , the way it's edited - it's great. Love you code with harry.❤❤
Into music ka naam pta he kya kisikio
I see intro many times .. It's Awsm
@@coderzadda naam pta he music 🎶 🎵 ka
@@himanshusharma1710 nhi
@@himanshusharma1710 fire drill by cushy sound name
I am starting to learn to code and doing some basic HTML, CSS and JS, content like this keeps me going, what a wonderful presentation! Keep it up!
ummm it's been 2 years what are you doing now
Great Course from Harry Sir. Its something very interesting thing that gives a lot of boost to productivity and makes us a fast front end designer. Thanks Harry Sir for rolling out this course
Bohot cool hai ye framework, maza aa raha hai iske sath work karne me 😄😄 I loved it !!!!! Thank you harry bhai for this amazing course !!!!!!!
Sir, you are the best teacher in the world. Thanks for teaching us
if harry bhai starts a course then he will be consistence till the end of the course 🥰🥰💞
Like if you agree ✌✌
Tailwind CSS is very useful because I made this website using pure CSS. Then I should write 76 lines of CSS but with using CSS should write only 37 lines of HTML. It will save our time,effort,energy and space.
Thankyou harry Bhai this video is really very helpful recently I completed your ultimate J's course and now start learning this technology and inshallah after this start learning react from your playlist ❣️
Pahli video ke baad laga tha ki maybe utni achi na ho tailwind bcz customisation is always great. But ab dekha ki kitni kam lines of code me ye kaam ho gaya!!
Sir your content are unique as compare to other and I have a request to make full html,css, javascript in one video 🙏🙏
Suggestion! 👇
Harry bhai please zoom in your vs code screen while you record so that we can see the code
I spend almost 5 hours a day and
Less zoom cause a lot of strain on eyes
So please keep this in mind while you record
And top of that
I love you the way you teach ✨❤️
I love you harry bhai ✨❤️
Long live and keep teaching✨❤️
Thoroughly enjoying this series. Your tutorials are very good and using tailwind css is also really fun!
Bhai bahut mazedar cheez hai tailwind CSS. Dil se respect aapke liye
This playlist will gonna be the best one 🔥🔥
This course of Tailwind css is very amazing & its gives me very help in my web developer career. I requesting you that make projects on html + tailwind css + Js dynamic websites.
Yes plz ASAP
Yes
Love you sir and salute for your work 🙏 You are helping many needed persons .
Every playlist gives us a new hope,
Energy and excitement.
Harry bhai Thanks a lot...
*ONE REQUEST TO CodeWithHarry*
Harry Bhai, while watching your video. I usually write codes (learning while watching). And it was great to clear the doubts while watching your videos. I've learned HTML&CSS basics and believe me it was a great course.
*REQUEST :* I only have a 14-inch laptop on which I usually write codes, But at the same time, I split my window into 2 halves, first for code and another one for your video. And sometimes I find it very difficult to see the code (Due to their small size).
So I request you to kindly use the zoom feature while writing the codes.
And I think some of the students are also dealing with the same issue which I was facing.
And *Thanks A Lot*, your videos help us many times.❤❤
bro use Windows Key + ZOom Button And Zoom To 200% ot 300% btw same size of laptop
This playlist is gonna be the best tailwind tutorial 🔥🔥🔥
Yes
@@Super_Student2.O Harrybhaiop
lol this design. client won't even take it for free
yes
@@greenshaheen6716 it's just for example :/
apka html and css ka course ko pdh kar he mere life bnai hai ab lagta hai ki haa merko kuch aata hai nahi to after bca ka bade bhi aise lagta tha ki kuch nahi aata merko ones agin thankyou
Great courses by the great man, harry sir is the real badshah in coding world... Thankyou harry sir.
Its npm init -y to generate package.json with default value, by the way amazing course.🥳🥳🥳
Thanks bro
😇
Thanks for a help bro
Finally full tutorial series started! ❤️🔥
The new edit in your website is super amazing.
Love ur videos
Thanks bhai for creating tutorial on tailwind css earlier, recently earn 3500 by creating simple landing page for salon
Video editing next level 👌🏿
At 11:00 instead of adding padding give height and width to img tag and then align-items as center to its parent element which will make the logo(image) to display at center.
Yes I also noticed it.
❤️❤️❤️thnku harry bhai ,your videos are much better than any paid courses
With the starting of the new year, Harry Bhai also started the new course of master tailwind CSS.
Thanks for this..Please add full tutorial series of SQL if you can 🥺🥺
NEW YEAR IS GOING TO ROCK WITH TAILWIND CSS
Loved this whole Tutorial. Thanks a lot Harry Bhai!
Sir thankyou word is so small in front of your efforts without taking any fees or any kind of greediness i wasn't able to control myself to write this 🙏
Harray Sir your content and video are great. but how do we know which class is best to use and how to memorize the things. Like why I use items-center and why not content-center this is one of the examples.
This background music is giving a lot of motivation 🔥🔥😎
there is no background music
intro, the way it's edited - it's great. Harry.❤❤
new intro is really gajab sir, that give vibes --good job harry sir.
2:20 its npm init -y flag for default json file setup ☺️
gg
Same
You are legend ❤️
mazedaar hai tailwind css, mazaa aagaya harry bhai(epic landing page)
Happy new year Harry bhai . Your videos helped in gaining technical knowledge.
2:12 npm init ke baad -y lagao to questions nahi pooche jate.
Bhai error aa rha
Npm is not recognized
npm init -y
just a thought, if we have installed tailwind css via NPM then why should we include the same via CDN?
aglyy lecture k intazar mein ....
just too good
These high quality production videos are fire
Speed of my finger when typing school work - 15wpm
Speed of my finger when clicking on harry bhaiyas notification - 170 wpm
Harry bhai Aj smart lg rh ho year ke last din😁... And thanks alot for all this😇
mai react bhi sikh rhah hoon or tailwind bhi or tailwindcss main react mai use krky sikh rha hoon thanks harry
thanks harry bhai, worlds best teacher.
harry bhai my all problems are solved and landing page is awesome.
Happy new year Harry bhaiya.. U made my life awesome.. Thank you very much
Naya editing style Kadak hai bhai 👌
Harry bhai maja aa gya ek dm❤❤❤❤❤❤❤❤
Respect++
Harry bhai apko aur sabko HAPPY NEW YEAR, aur course bhi bahot badiya hai!
par agle video mai zara font size please badha dena.
Hum smartphone se video dekhte hai.
Awesome Intro & Video Harry Bhai
Thanks Bhai aur Happy New year🥳🥳
fabulous intro😲😲😲and tutorials always outstanding ❤from faridabad
bhai kya intro bnaya h jitni baar dekho utna acha lagta h
Great Instructor !!! Lot of Love From Pakistan 😍
Harry bhaiya OP🤩.
Thanks for it👌🤘.
Nice Sir.
Now i can start using tailwind css in my project and remove css from it!🤝
THE BEST TAILWIND CSS COURCE IS HERE
WOW editing skills 🔥🔥🔥
Intro 🔥🔥 ❤️
Harry Bhai!!!!!! You are Great Person....Thank You
Amazing lecture harry sir ....❤
This course is Very helpful. You forgot to say. But really all courses are very helpful.
started my new year while watching this ❤️😊
Great tutorial. I learned so many things.
majedar cheej hai ,,harry bhai is op
Just great teaching bro... Loving it😍
Your content is very helpful to me. love your videos 👍 😄
This course is really very helpful 😊😊😊😊
Yaar bohot majedaar hai 😀👌💘❤️
Thank you so much harry bhai. It helps a lot.
bhaiya jee :D :D u really enjoy the coding im so impressed by .. thanks from pakistan
Bhai qasam se ye "Tailwind" ma bohat maza araha ha :)
moj karadi apne harry bhai...maza aa gaya ..
Just amazing as always :-)
Nice❤️music in the end harry bhai✨
Harry bhai aap ek advanced video editing course bhi lao plz....
Seriously cuz I'm really impressed by his editing skills...
Its very easy for me beacause i kkow about bootstrap css thank u harry bhai😍💗
Awesome Harry Bhai... 👌👌👌
Love you brother for your support. Appreciated
This tailwind css is very very helpful thank u harry bhai
HARRY BHAI IS A LEGEND
@@manishathemahi U ARE RIGHT
Love your way of Teaching
thank you harry bro
I am ali from Pakistan and i am your student
your are looking so beautiful and the way you can teach us so amazing
god bless you
Bawa ek dam jham video aapse web development ka gyan grahan karne mai dhanya ho gya bas aap apne codes public kijiye sahab
What a loving intro man.
Harry bhai Maja aa gaya😍
it is mazedaar as you💜
Harry bhai looking awesome ❤️
Bhai fan hu me apka big fan❤️❤️❤️
great course harry bhai.....
ek request hai thoda zoom kr k bnaoo to boht bdiya dikhega
Very interesting bohot majedar hai sir
Such an amazing harry bhai
It's awesome Harry Bhai
You are my coding teacher harry
Bhi😍😘