- Видео 80
- Просмотров 668 958
Thirus
Индия
Добавлен 27 авг 2020
Thirus (pronounced "thigh-rus") is an effort to bring hundreds of simple web development tips and tutorials together that you can consume regularly on your coding journey.
I am Shruti Balasa - the owner of this channel. I'm a Full Stack Web Developer, Mentor, Course Creator, Tech Speaker and now a RUclipsr from Bangalore, India.
Like my content? Buy me a coffee ☕️
www.buymeacoffee.com/shrutibalasa
CONNECT TO ME:
Website: www.shrutibalasa.com | www.thirus.in
Twitter: shrutibalasa
LinkedIn: www.linkedin.com/in/shrutibalasa
Instagram: shruti_balasa_thirus
Subscribe & Stay tuned for awesome content!
Style your email views with Tailwind CSS using Maizzle
In this video, we’ll see how to integrate Maizzle into a Laravel project and seemlessly design all the email views using Tailwind.
Creating HTML emails is still a pain, even in 2024. But what if you could use your favourite Tailwind CSS itself to style your mail views and stay in your comfort zone? With Maizzle you can do exactly that.
Want to master Tailwind CSS and learn about some hidden gems? You'd love my eBook and video course "Level up with Tailwind CSS". Check it out here - shrutibalasa.gumroad.com/l/level-up-with-tailwind-css
Use the discount code "THIRUS10" to get a special 10% discount.
Follow me on Twitter / X - shrutibalasa
Creating HTML emails is still a pain, even in 2024. But what if you could use your favourite Tailwind CSS itself to style your mail views and stay in your comfort zone? With Maizzle you can do exactly that.
Want to master Tailwind CSS and learn about some hidden gems? You'd love my eBook and video course "Level up with Tailwind CSS". Check it out here - shrutibalasa.gumroad.com/l/level-up-with-tailwind-css
Use the discount code "THIRUS10" to get a special 10% discount.
Follow me on Twitter / X - shrutibalasa
Просмотров: 1 838
Видео
Create custom Dynamic Components in Tailwind CSS using matchComponents Plugin Function
Просмотров 1,5 тыс.4 месяца назад
In Tailwind you can create your own components which are can vary slightly based on your custom key in the theme. Avatar is one such example for a dynamic component that you can create using the matchComponents plugin function in Tailwind configuration. You will see why and how to create one in this video. Demo: play.tailwindcss.com/4cuLPqCv05 Want to master Tailwind CSS with such awesome examp...
What are Container Queries and how to use them in Tailwind CSS
Просмотров 2,2 тыс.5 месяцев назад
Container queries help us define different styles for components based on the size of its parent container. This video shows you a real world use case and how to implement that using Tailwind CSS's official plugin of container queries. Demo on GitHub: github.com/ThirusOfficial/container-queries-tailwind-example Want to master Tailwind CSS with such awesome examples and explanations? You'd love ...
How to Make a Game using CSS? Rock Paper Scissors in CSS
Просмотров 2,3 тыс.Год назад
Learn how to make a simple “Rock paper scissors” game using only HTML and CSS. No JavaScript needed. There are some CSS hacks that let you get a random output. Watch the full video to learn those :) CodePen Demo: codepen.io/thirus/pen/jOpzJzZ This video is sponsored by Limey. Create your one page website today using limey.io/ If you liked this video, you'll love my eBook too. Check out "Complet...
Tailwind CSS v3.2 Crash Course - Build a responsive conference landing page
Просмотров 24 тыс.Год назад
Get started with Tailwind CSS and get yourself familiar about everything in this framework. We’re going to build a cool conference landing page using Tailwind CSS and learn things along the way. We’ll also learn how to make it responsive. Demo on Github: github.com/ThirusOfficial/tailwind-css-frontconf This video is sponsored by the FreelancerX community by Kyle Prinsloo. A free community for w...
Build a Serverless full stack app with Nhost using Hasura, GraphQL, Vanilla JavaScript and Vite
Просмотров 1,7 тыс.Год назад
This video demonstrates building a simple Full Stack App using Nhost Serverless platform as the backend and vanilla JavaScript as the frontend with Vite. Prerequisites: To follow this video, you just need a basic understanding of Javascript, GIT and npm. I use Tailwind CSS for the styling, but it’s totally okay to skip it and use regular CSS instead. This video is sponsored by Nhost. Sign up at...
Easy Responsive Grid Layouts in Tailwind CSS without Breakpoints | Single utility class
Просмотров 22 тыс.Год назад
This video shows you how to create responsive grid layouts in Tailwind CSS without using breakpoints like sm: md: or anything. We’ll be using a plugin I created myself. Tailwind Grid Auto Fit Plugin: github.com/ThirusOfficial/tailwind-grid-auto-fit Demo Repository: github.com/ThirusOfficial/tailwind-responsive-grid-demo Want to learn the whole of Flexbox and Grid and build web pages seemlessly?...
Deploy Eleventy site using Netlify CLI through GitHub
Просмотров 1,8 тыс.2 года назад
This video shows you how to host an Eleventy project on Netlify server using Github and Netlify CLI and also set up continuous deployment. Part 1: Build a Simple Static Website with Eleventy and Tailwind CSS and Deploy to Netlify ruclips.net/video/VcW3T9EOo5M/видео.html 0:00 Introduction 0:44 Create Tailwind CSS build script 1:17 Create GitHub repository and push the code 4:16 Install Netlify C...
Build a Simple Static Website with Eleventy and Tailwind CSS and Deploy to Netlify - Part 1
Просмотров 8 тыс.2 года назад
Tailwind CSS makes it very quick to style web pages. However, the most common complaints devs have with Tailwind CSS is that: 1. It’s hard to look at the huge list of class names in the markup. Especially for simple websites, if we don’t use any frameworks, there’s no way to create components. So, all the markup ends up in a single file and this definitely looks messy! 2. Without using componen...
Complete Guide to CSS Flexbox & Grid - The eBook
Просмотров 2,3 тыс.2 года назад
Watch this short video to know why you'd want to grab this 190 pages eBook right now: "Complete Guide to CSS Flex & Grid" - shrutibalasa.gumroad.com/l/css-flex-and-grid Download sample for free: shrutibalasa.gumroad.com/l/ZCxqk #css #cssflex #cssgrid
Install Tailwind CSS v3 - CDN vs CLI vs PostCSS
Просмотров 30 тыс.2 года назад
Tailwind CSS released it’s major version 3.0 on December 9th. If you’re new to Tailwind or front end development, you might wonder how to install and start working with this latest version of Tailwind CSS in simple projects that don’t use any of the frameworks listed in the documentation. In this video I’ll show you three ways - via CDN, using Tailwind CLI and using PostCSS and talk about when ...
Responsive Sticky Navbar that Shrinks on Scroll with Tailwind CSS & Alpine JS
Просмотров 34 тыс.2 года назад
This is a tutorial to create a sticky navigation bar that shrinks when the user scrolls up, using Tailwind CSS & Alpine JS. The navigation is completely responsive too, with a full page menu toggle. CodePen Demo Link : codepen.io/shrutibalasa/pen/qBjYjOP?editors=1100 This video is sponsored by Showwcase: Join me - www.showwcase.com using the invite code "joinshrutibalasa" Work illustrations by ...
Lightweight CSS Animations on Scroll using Alpine JS
Просмотров 17 тыс.2 года назад
This video will show you how to animate elements on web page while scrolling, using Alpine JS - a very lightweight JavaScript framework, in a very simple way. We focus on both accessibility and performance. Starter Project: github.com/ThirusOfficial/animate-on-scroll-starter Completed Project: github.com/ThirusOfficial/animate-on-scroll-alpinejs This video is sponsored by Showwcase: Join me - w...
Coming Soon Page with Countdown Timer using Tailwind CSS & Alpine JS
Просмотров 5 тыс.2 года назад
Build a simple yet brilliant coming soon page using Tailwind CSS and Alpine JS, with a countdown timer and an email input with a floating label. What you will learn: - Building various components with Flexbox - Adding custom fonts - Arbitarary values in 'JIT' mode - Responsive layouts - Floating label for input using sibling selector GitHub Repositories: Starter template: github.com/ThirusOffic...
Install Tailwind CSS as a PostCSS Plugin with JIT mode enabled (Latest Version v2.2)
Просмотров 6 тыс.2 года назад
Install Tailwind CSS as a PostCSS Plugin with JIT mode enabled (Latest Version v2.2)
Light & Dark Mode toggle using Tailwind CSS & Alpine JS
Просмотров 6 тыс.2 года назад
Light & Dark Mode toggle using Tailwind CSS & Alpine JS
Get started with Tailwind CSS latest version 2.2 without installing it
Просмотров 3,7 тыс.2 года назад
Get started with Tailwind CSS latest version 2.2 without installing it
CSS Beginner Concepts - Cascade & Specificity
Просмотров 2,4 тыс.3 года назад
CSS Beginner Concepts - Cascade & Specificity
Recreate Bootstrap Grid System in Tailwind CSS
Просмотров 6 тыс.3 года назад
Recreate Bootstrap Grid System in Tailwind CSS
Complete CSS Grid Tutorial using Tailwind CSS
Просмотров 38 тыс.3 года назад
Complete CSS Grid Tutorial using Tailwind CSS
Responsive Side Navigation with Tailwind CSS and Alpine JS
Просмотров 26 тыс.3 года назад
Responsive Side Navigation with Tailwind CSS and Alpine JS
HTML & CSS Course for Absolute Beginners | Build a website and launch
Просмотров 17 тыс.3 года назад
HTML & CSS Course for Absolute Beginners | Build a website and launch
Install & Explore JIT Compiler for Tailwind CSS in a simple project
Просмотров 4,9 тыс.3 года назад
Install & Explore JIT Compiler for Tailwind CSS in a simple project
Complete CSS Flexbox Tutorial using Tailwind CSS
Просмотров 38 тыс.3 года назад
Complete CSS Flexbox Tutorial using Tailwind CSS
Responsive Contact Section using Tailwind CSS
Просмотров 24 тыс.3 года назад
Responsive Contact Section using Tailwind CSS
Starter Template for Tailwind CSS 2.0 installed as a PostCSS Plugin
Просмотров 1,2 тыс.3 года назад
Starter Template for Tailwind CSS 2.0 installed as a PostCSS Plugin
Build a Responsive Timeline Design using Tailwind CSS
Просмотров 9 тыс.3 года назад
Build a Responsive Timeline Design using Tailwind CSS
Install Tailwind CSS 2.0 in a React Project with Create React App
Просмотров 4,4 тыс.3 года назад
Install Tailwind CSS 2.0 in a React Project with Create React App
Install & Setup Tailwind CSS 2.0 with Angular 11
Просмотров 4,6 тыс.3 года назад
Install & Setup Tailwind CSS 2.0 with Angular 11
Install Tailwind CSS with Vue 3 and Vite
Просмотров 6 тыс.3 года назад
Install Tailwind CSS with Vue 3 and Vite
Great tutorial. Thanks a lot
You’re welcome!
I like to buy, Pure CSS + Tailwind CSS ($27), is there a coupon code or discount you would like to share?
Please send a DM to x.com/shrutibalasa
Replying through link is an issue. It tries to register and sends a verification code to my phone but code never reaches. No worries and Shruti, I like the way you explains the css, great job!!
Thank you so much, I was struggling with the large rebuild times, this has helped me reduced the time to few ms. Thanks again
You’re welcome. Now JIT mode is default.
Thanks, great video!
You’re welcome!
Thanks madam
You’re welcome
mam i getting error when i am try to connect docker on ubuntu. permission denied.
Sorry, I don’t have much knowledge about Docker
@@Thirus Problem resolve ma'am
@@Thirus Ma'am, actually I am a fresher and I have joined the company as a backend developer. I have been working on a project that uses Nhost. As I am currently doing an internship, I have set up Nhost locally. Now I am getting all the schema files directly in my Nhost project folder when I create tables and other things in Hasura. It works like this: we do not have to create it manually, right? Ma'am, as a backend developer, I have not written any code so far because everything is available on Nhost Hasura.
Please help, When I upload the downloaded files, reload, and open the links in Let'sencrypte both links give 404 error
Please check the folder names and paths correctly.
Thanks this was very helpful
Great to know that
Thank you Thirus!
You’re welcome
The video with such a clear guideline was very much helpful. Thank you very much.
You’re welcome!
Can I send the email design made by maizzle to my clients by code instead of using laravel emails?
Yes, exactly.
@@Thirus How can I use it? Can you make a video explains how to send emails designed by maizzle?
showing 10 vulnerabilities found after npm install and after npm run build it shows error what to do ?
This is a very old video. Please follow this one: ruclips.net/video/ei20HfTloFE/видео.html
Lovely, Thank you! Any tips on handling Dark mode on iOS/Android?
Sorry no idea
Im using wordpress and my site doesn't load
Dear @Thirus i love your content, actually i'm a backend developer and your tutorials help me to understand how frontend could be so easy :) therefore i'd like to know, what is the purpose of of postcss in modern days? i always use 'pnpm dlx tailwindcss -i ... -o ... --minify --watch' instead. And i got always the same minimized css output :) hence what is the advantage of post now?
This video was created long ago. Back then this was how Tailwind CSS could be installed. You can ignore it now. And glad to hear that you enjoy my videos!
@@Thirus yeah i really enjoy that, therefore i wish you will release an animation course with tailwind and alpine... but unfortunately, that isn't your aim right now😅
thankyou i love you
Completed, Thank you so much🤗
You’re welcome!
Thanks so much♥
You’re welcome!
❤
It works! Thank you so much❤
underrated channel <3
Hi! thanks for the very clear video, I was able to install succesfully the SSL certificate on the cpanel, however when I opened my website it still shows that the site is not secure, I am not sure why as it shows that the domain is secure on the cpanel, I even cleared the cache on my browser before opening my site again
You will have to manually type https instead of http
@@Thirus is there a way to avoid that so it loads automatically, thank you !
sup shruti how you doing, do I need to learn php before laravel ? I know a tiny bit of MERN but nothing about OOP, PHP, or SQL databases. thanks.
Yes, it’s good to learn the basics of PHP (latest version), object oriented concepts and database before jumping into Laravel. If you directly start learning Laravel, you’ll struggle later because of the gaps.
thank u so much! great video
You’re welcome
thanks
Welcome!
wow amazing sister you made my day love you. i had been struggling to install ssl certificate from past 4 weeks after watching tons of videos it was not working. Finally your video worked
Glad to know that :)
I should still not use grid/flex even with Mizzle right? If I use GRID that doesn't translate to a all compataible-email-client plain CSS? Like I should still stick with the CSS email patterns?
Right, you still cannot use grid or flex. Need to use email compatible stuff only.
can u configure on plesk hosting (windows)
Sorry I don’t know
I have a problem in from just i the break point
Send me a DM on Twitter with more details - twitter.com/shrutibalasa
Tq Mam
You’re welcome
Thanks! Your explanation helped me understand it better
I’m glad it did :)
This video provides the most comprehensive explanation of flexbox I've come across, surpassing even commercial training materials.
Thanks a lot! 😊
Really liked the way you explain things directly to the point and just what is needed to make a good layout and design. You made it look so easy. Glad I came across your videos. No one is making such good content at least in CSS, keep up the good work.
Thank you very much Parikshit 😊
Really great, easy to follow and well explained tutorial - great job @thirus
Thank you Paul!
In godaddy Web Hosting is not shown what is the problem ?
It’s better to contact Godaddy
What happens when it won't let me add a ".well-known" folder? to the "public_html?"
What’s the error or message you see when you try adding?
I wish it had more components like react-email
I think the creator is coming up with something pretty soon
Thank you. This looks excellent!
You’re welcome!
What if I wanted to just use this tool Maizzle as a standalone and create TailWindCSS based templates to copy-paste into Brevo / MailChimp / Madmimi etc ?
You can absolutely do that. It’s actually a standalone framework.
Awesome video 👏
Thank you!
Thanks a ton Shruthi. As usual, you are amazing. We all know till 8:10. From then on it is totally new. Thanks once again for this video
Glad to hear that 😊
I use maizzle for my emails. but i prefer mjml . mjml is good and easy compared to maizzle. I suggest using both because maizzle supports tailwindcss and mjml makes coding easy
Yes, I’ve seen mjml. That’s useful for complicated layouts and promotional emails. For quick transactional ones or simple emails, I prefer this.
@@Thirus exactly
First viewer of the video 😅. After a long time. Thanks for sharing such valuable content.
Super quick comment 😀 Hope you like the video
Really nice overview, thank you! PS, it sounded like you were saying ampersand (&) when you said ampersat (@) a couple of times. Calling it an “at sign” may be more common and well-understood :)
Oh damn! I never meant to say ampersat. Totally confused the the name 😅
how to use it for windows hosting websites in godaddy..coz it is not working with windows hosted websites
I’m not sure, sorry
❤
Perfect in all respects ❤
I have seen videos on this topic From the css legends But the way you have explained is superb 💯
Thank you Abdul!
mam which has future bootstrap or tailwind?
Tailwind has gained a lot more users in the last few years compared to Bootstrap. Definitely Tailwind has a better future
thanks,watched almost all the youtube videos on ssl but didnt worked ,watched your videos and followed the steps it works ,thanks madam you re genious!! subscribing you for more videos for future.thanks again .
Happy to know :)