Tailwind CSS Tutorial #2 - HTML Template
HTML-код
- Опубликовано: 5 июл 2020
- Hey gang, in this tailwind css tutorial we'll create the base html template for our project, so that in future lessons we can just focus on tailwind classes.
Full html template - github.com/iamshaunjp/tailwin...
🐱👤🐱👤 JOIN THE GANG -
/ @netninja
----------------------------------------
🐱💻 🐱💻 My Udemy Courses:
+ Modern JavaScript - www.thenetninja.co.uk/udemy/m...
+ Vue JS & Firebase - www.thenetninja.co.uk/udemy/vu...
+ D3.js & Firebase - www.thenetninja.co.uk/udemy/d...
🐱💻 🐱💻 Course Files:
+ github.com/iamshaunjp/tailwin...
+ Full html template - github.com/iamshaunjp/tailwin...
🐱💻 🐱💻 Other Related Free Courses:
+ • HTML & CSS Crash Cours...
Download node.js - nodejs.org/en/
Get VS Code - code.visualstudio.com/
For lazy 😴 guys like me -
Emmet shortcut for the template:
div>(div>nav>(div>h1)+ul>(li>a>span)*4)+main>(div>a*2)+(header>h2+h3)+(div>h4)+(div>div>img+div>span*2)*4+div>div
just fill it and use it 👍
You're an absolute legend
@@pandahacker789 Thanks for the appreciation.
still learning ..😊
You are a crazy guy lol
Press F for respect *LEGEND*
WoW Who will use this, lazy fakers, no ur just annoying
Love that you showed explicitly all HTML you create along with a comment. Really appreciate it
The basics spelled out clearly. Well done. Thank you.
Shaun, do you ever take a break😂😂anyways always good to see an update from you. Very hardworking...
Haha, sometimes. Luckily I just really enjoy coding & learning, so I don't always see it as work.
@@NetNinja You are the definition of inspiration mate. Keep it up.
Netninja with tailwind!!!, seems like I'm in heaven, thanks for kicking this off
To spin up a auto build add in package.json file
"build-css":"tailwindcss build src/style.css -o public/style.css",
"watch":"tailwindcss build src/style.css -o public/style.css --watch"
in terminal run the command:
npm run watch
Shaun! i have been watching your tutorials since last three months.. i kind of been through all the playlist you made.... for me literally these lessons and contents are like blessings.... all the lessons are super well explained and its just brilliant... you are very hardworking.
p.s - can you please make a separate playlist on docker.. ! :)
I love this. i am just so excited!
Best teacher to learn web dev from!!
Man thumbs up to you I owe you big for helping me all this time with php css js react you name it!!
Yesssss, thats what i was looking for. hanks for helping
@The Net Ninja What styles did you use to remove the default browser settings?
What is the difference from using the VS Code live server vs the npm live server? I tried googling it but got nothing. It appears they do the same thing.
Thanks for the html template!
Respect to your good work, thanks a lot
Much appreciated! Thanks Moisés.
I come here first for tutorials , keep it up !
Thank you for your hardwork
Thank you teacher 🙏🏻
What is the color theme that you were using in the tutorial?
Thanks alot sir!!!!
Question : Is the live server extension in vs code basically the same thing as the live server package you downloaded at 7min into the video?
yes
thanks much!
Nice bro👌❤️❤️
Just a slight observation; You didn't include the tailwind.config.js file where content to be processed by tailwindcss is determined
Some updates in 2024:
1. In terminal run
> npm install -D tailwindcss
> npx tailwindcss init
npx creates a tailwind.config.js, but you nee to change the content file path manually
2. In package.json
"scripts": {
"build-css": "tailwindcss -i ./src/styles.css -o ./public/styles.css",
"watch-css": "tailwindcss -i ./src/styles.css -o ./public/styles.css --watch"
},
Run "npm run watch-css". This enables tailwind changes from html to be shown live
Wooohooo!
Live server can also be installed as an extension inside vsCode 🤪
Thank you
Emmet for the cards:
div>(figure>img+figcaption>span{TITLE}span{Recipe By Dude})
thank you
Awsome guy
thanks!
which vscode theme is that?
thank you so much sir
You're welcome Raj! :) thanks for watching
Please i can't see the course file on GitHub can you help
Where do we get the pictures?
First time caller first time listener. The content is great but im having to pausse at every sentence as my guy is moving at lightning speed
What if i use the cdn?
why is the live-server public have error on me
my bro loves divs
i support everyo one who talk abou coding
Can you help me my tailwind wont work with my php
My index.html in the browser won't update with the image and also other updates aren't taking place and I can't figure out why. Did anyone else have trouble with this?
To spin up a auto build add in package.json file
"build-css":"tailwindcss build src/style.css -o public/style.css",
"watch":"tailwindcss build src/style.css -o public/style.css --watch"
in terminal run the command:
npm run watch
I'm following everything to the letter. But this does not work:
WHY?!
Please it’s not working,my text are still in black,please help
Semantic html fam, its the new ting, yea
9:13 live-server public
its not removing the default browser styles as in video
Silly mistake, i named the file styles.css and linked style.css
live-server : File C:\Users\Izzham\AppData\Roaming
pm\live-server.ps1 cannot
be loaded because running scripts is disabled on this system. For more
information, see about_Execution_Policies at
https:/go.microsoft.com/fwlink/?LinkID=135170.
At line:1 char:1
+ live-server public
+ ~~~~~~~~~~~
+ CategoryInfo : SecurityError: (:) [], PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess
it come out like this , when i wrote live-server public . Did anyone know how to overcome this .
i am not sure man
sorry
We need a roadmap to follow your channel content?
Bro VS Code Theme name please
"let me copy my dude" - net ninja
why so many divs?
I was just about to type this
7th..!
Wrong use of title tags, their use is SEO, not markup.
Hey, hitting a block here, i'm getting the following error in the console:
Not allowed to load local resource: styles.css
Does anyone know a work around for this?
i am not sure man
sorry :(
Anyone in 2024?
For sure
a div inside of a div inside of a div...
Anyone in 2023
me
24
Too many nested divs.
{2024-04-18}
Anyone in 2024😅
All of us!! :D
Yes 😂