Very strange that we have gotten so far away from proper coding skills that "raw CSS" is considered some kind of special thing. I've tried all of these libraries, and I can tell you they are not better than knowing how to write CSS properly. Maybe if you're doing a design that is the same as 10,000 websites before you. But if you need to do something unique, these libraries will slow you down.
I learn from a rock star programmer that could do responsive web design in the old school way without relying on the new libraries, and everything in general. I highly agree, the community should learn core basics of css and even javascript. All these frameworks and libraries keep changing you won't be able to keep up. It will also make you dumb cause you don't understand how it actually works internally and highly rely on these libraries. These libraries are only good if you know how it works internally and want to save development time.
Yeah, the only real reason libraries became standard is because when larger teams are working on projects, everything is standard and you don't have to hunt through someone else's styles to figure out where a padding or border-radius was set. That's basically it. The annoying part comes with the fact that people are changing their CSS libraries every couple years. It's really annoying to not only have to memorize basic CSS to know what you're doing but also all the classes for Bootstrap, Material and Tailwind. And whatever comes next. Thankfully, I don't work in a larger team, so I basically just use CSS. Even if I use Bootstrap, I don't really use their utility classes much unless I have to.
@@AtacamaHumanoid: Yeah, I think about that all the time. As an independent developer, I get pulled into lots of projects that are built with CSS and JS libraries. I can tell you that the idea that libraries allow teams to have "standards" almost makes me laugh. I've seen so many projects where clients made a bigger mess with the libraries. I could write a book on all the ways this happens! There is over-use of library elements, applying the wrong elements to the tasks, and overriding library CSS classes in almost random ways. Many projects just use growing lists of libraries pulled together without much organized thought. Often, entire libraries are used just for one or two visual elements that could easily have been done with plain CSS or a single JS plugin. And then there's the constant overhaul as the next greatest library comes along, and all the under-30 designers actually believe this one will be the "game changer."
I have been waiting for this comment, nothing beats pure CSS, it's easy and fast with experience. I have been working with numerous UX designers and they have been complaining about how most developers can't replicate her designs and complain of her ambiguity, but looking at those designs, they are easy to implement. I think these CSS libraries have made developers lazier.
thanks harkiat for making such videos that talk about the basics as sometimes, it just becomes overwhelming when you are a fresher in tech and see the huge roadmaps and you also feel fomo by realising that you have to do a whole lot of stuff even after full stack
As a senior frontend developer in my point of view who doesn’t know css properly that person can’t design I mean he can’t able to solve ui problems bcz my one of my junior know bootstrap and it’s ok but when he stuck in some where he struggles like some thing 😂😂 bcz of lake of css knowledge so in my point of view have a strong knowledge in CSS will help you a lot while designing UI
Mui provides sx prop by the help of which any component can be customised similar to providing inline css. Also mui is not just about css, they provide lot many useful components which if you design with tailwind and plain html will take time.
More than ever I'm convinced that designers need to get over their aversion to code and step into the CSS space because, in their absence, developers are absorbing it for their convoluted tech stack tooling
The choice between raw CSS and CSS libraries depends on the project requirements, timelines, team expertise, and specific goals of the development process.
While I don't know what the statistics are, the claim that no one is writing raw CSS is a pretty bold one without any substantiation. Definitely not the case in my work experience.
Love u bhaiya 😍 Aap humesha bhot jyada practical & time saving advice dete ho.... Main abhi 4 dinn se CSS par hi mehnat karr raha tha but now i know that where i should focus more upon
Great Explanation! You were firm with your decision. That is unique thing about you. I have seen may reviewers of libraries, They are still confused. And we as a viewers also end up getting in confusion. So, This attitude is really very cool. Keep it up.
I think that Bootstrap and Tailwind CSS can be a bit repetitive when you have to apply the same style to many elements by give those 30 class names to each element. If I need to modify elements, again I have to modify each one separately..
tailwind is made so that you have predefined components, be they in Laravel Blade, React, vue, etc and then you use the component, maybe with some passthrou css
The pace of this tutorial was really nice. Usually it looks like you have a lot of information that you want to concise in small video hence running with your sentences. This one is slightly better in terms of pace compared to others. Thanks for sharing this one good luck for future ones.
tailwind: - ml-5 id not same as marginLeft:5, ml-5 is marginLeft:20px; - "highly unopinionated", its "opiniated". only thing is we can override if needed.
If you are still learning, learn css not library. If you cant do things you do with library in vanilla css, know that you know nothing. And you can do nothing. Learn from the basics, library is for easing the work, not “learning”.
Harkirat bhaiya, First year Fresher. I started learning html , css and Js from last 3 months. Now, I am building my first project. Thanks for showing a great tool for that.
things you should learn for styling - css - scss - tailwind + radix + headless UI chakra ui is dead in my take when next 13 got introduced. from chakra ui - " Next.js 13 introduces a new app/ directory / folder structure. By default it uses Server Components. However, Chakra UI only works in client-side components." which basically makes the app same as create-react-app (fully client side app) fully client side app is no more.
Bootstrap exposes css classes like tailwind, also some utility classes allowing you to write accordion like components as in Radix. So I feel bootstrap = radix+tailwind, but doesn't have much customization though
In the beginning there was js, then a whole slew of js wrappers to get it to work uniformly. Nowadays, plain js is better, browsers caught up. The same is happening with css. I work for big companies, one 30k employees, 8 milion users on the website. We recently dumped the framework and library wars. Native css brings us way more then the constant new hype that happens every year in js/css. Just finally start learning css and discover that it nowadays just works.
Our team uses material UI. Last year there was a requirement to re-style the webpage based on company branding. It was a hell to write custom styles for everything.
It's documentation is also quite difficult to go through. And they keep changing the API for every version so the previous solutions you find online do not work.
Even I started with Material UI and slowly moved to Pure Tailwind( With great power comes great Responsibilities ), now started moving to Shadcn and Tailwind
Material is opinionated. Whereas Tailwind is like a canvas you can draw anything. But both have their pros and cons. Material Ui provides consistency so the users know how exactly a component works so they can easily interact with it. Whereas in case of that are not bound to any opinion has freedom to create anything but that can take away the consistency and it makes things harder for the user to interact with the frontend if you make some complex UI that is hard for them to understand initially and for them it's more like a learning curve to use that software...
As a fresher what to choose full stack web developer vs data engineer vs data analyst more job opening more package future growth bcuz as a data guy with all datasets a data guy can give future predictions which is very helpful for companies to take business decisions
Also why you forgot to use sx prop to write your css?. Also Mui neve says to use the emotion directly. Mui gives you styled utility present in @mui/material and /system. Using mui is from past 2 years it's highly customisable. Look at how to customize page in documentation first.
But MUI won't change its look suddenly in a particular version. If they want to change, they'll do it in a different version. So as long as we keep using a particular version of MUI, it's going to be fine
Agreed. If people cant do shit in vanilla css and and relying on library only, i can only imagine the mess they would have done to their code. Hopefully im not the one that have to deal with it.
This was a great historical survey of coding for someone new to the subject like me. Would you categorize something like GSAP technically a Radix library (or are GSAP and Radix two separate JavaScript libraries)?
Harkirat, I would like to request you to make a video on how and where can we find reliable and profitable internships? Something for the people currently pursuing engineering plis?
MUI is a very customizable UI library and emotions is not the recommended way. MUI itself has ways to create customized components using a predefined theme. You should do more research on each of these libraries before doing a comparison between them.
I need to create a react custom components library which can be used for all frameworks like react, typescript, angular etc. Make a video on this with the best practices.
I thought Vue.js is the web clutter to use this month... or was that last month? Hard to keep up. Even if I end up with a few more lines of script and css, I prefer to stay away from ANY framework or web library, because it is all over-engineered junk. I had a Vue.js replacement to my "native" project running and decided to keep the native one. Along with those libraries and frameworks, comes some build tooling - something you do not need at all if you do "native".
i want to know one thing, right now i am using styled-component/native for making my component library in react native app, but i am facing performance lag. what should be the ideal css framework for making component lib for react native app?
I am kinda confused. Tailwind utility first CSS framework. It is not collection of components. It helps u write CSS in atomic way. Essentially if u are only using Tailwind in ur project, you are writing CSS. We shouldn't get confused. When u combine that with other bare bones component libraries like ShadCn which uses RadixUI to output components or someother project. They are using Tailwind or Bulma or other atomic CSS libraries to improve ur productivity and such. Rest of the component frameworks u have mentioned does fit into the category. Where u don't have to write major part of the CSS, but still CSS is integral part of Web DEV. Shouldn't be ignored and the thumbnail is just click-bait. Refrain from using click-bait, content will drive the subscribers to u. Good luck
When you work on a real world project, and when you use a ui library, you will hit a point from which you cannot move forward. Then you'll throw away all these ui libraries and write the plain old css. If you don't know css, none of these libraries can really help you to complete any production ready projects.
Very strange that we have gotten so far away from proper coding skills that "raw CSS" is considered some kind of special thing. I've tried all of these libraries, and I can tell you they are not better than knowing how to write CSS properly. Maybe if you're doing a design that is the same as 10,000 websites before you. But if you need to do something unique, these libraries will slow you down.
I learn from a rock star programmer that could do responsive web design in the old school way without relying on the new libraries, and everything in general. I highly agree, the community should learn core basics of css and even javascript. All these frameworks and libraries keep changing you won't be able to keep up. It will also make you dumb cause you don't understand how it actually works internally and highly rely on these libraries. These libraries are only good if you know how it works internally and want to save development time.
I agree :)
Yeah, the only real reason libraries became standard is because when larger teams are working on projects, everything is standard and you don't have to hunt through someone else's styles to figure out where a padding or border-radius was set. That's basically it. The annoying part comes with the fact that people are changing their CSS libraries every couple years. It's really annoying to not only have to memorize basic CSS to know what you're doing but also all the classes for Bootstrap, Material and Tailwind. And whatever comes next. Thankfully, I don't work in a larger team, so I basically just use CSS. Even if I use Bootstrap, I don't really use their utility classes much unless I have to.
@@AtacamaHumanoid: Yeah, I think about that all the time. As an independent developer, I get pulled into lots of projects that are built with CSS and JS libraries. I can tell you that the idea that libraries allow teams to have "standards" almost makes me laugh. I've seen so many projects where clients made a bigger mess with the libraries. I could write a book on all the ways this happens! There is over-use of library elements, applying the wrong elements to the tasks, and overriding library CSS classes in almost random ways. Many projects just use growing lists of libraries pulled together without much organized thought. Often, entire libraries are used just for one or two visual elements that could easily have been done with plain CSS or a single JS plugin. And then there's the constant overhaul as the next greatest library comes along, and all the under-30 designers actually believe this one will be the "game changer."
I have been waiting for this comment, nothing beats pure CSS, it's easy and fast with experience. I have been working with numerous UX designers and they have been complaining about how most developers can't replicate her designs and complain of her ambiguity, but looking at those designs, they are easy to implement.
I think these CSS libraries have made developers lazier.
thanks harkiat for making such videos that talk about the basics as sometimes, it just becomes overwhelming when you are a fresher in tech and see the huge roadmaps and you also feel fomo by realising that you have to do a whole lot of stuff even after full stack
As a senior frontend developer in my point of view who doesn’t know css properly that person can’t design I mean he can’t able to solve ui problems bcz my one of my junior know bootstrap and it’s ok but when he stuck in some where he struggles like some thing 😂😂 bcz of lake of css knowledge so in my point of view have a strong knowledge in CSS will help you a lot while designing UI
Shadcn and Tailwind is my go to UI library.
Have you used shadcn in any production level app ?
Making a project with shadcn. Looks very promising
@@khizer3528he made none because he don't know how enterprise apps are made
@@khizer3528 Not yet. Used for my personal projects.
@@khizer3528yes it's pretty good
Mui provides sx prop by the help of which any component can be customised similar to providing inline css. Also mui is not just about css, they provide lot many useful components which if you design with tailwind and plain html will take time.
yeah i was thinking same, the sx prop is pretty useful
though i agree, the the entire framework is quite heavy
Last time I checked they have put Sx prop in legacy. Means now they don't recommend it. The newer version doesn't have that prop.
@@HarshShah465Sx is not legacy.
Styles Library with Styled is legacy.
I have recently used Mantine UI Library in one of a project and honestly, it's pretty insane. Kinda a combination of MUI and Tailwind.
Thank you harkirat !! I was extremely confused with all these options but your videos saved the day !! Thanks a lot and keep up the good work
Material UI is my go to. It integrates with react seamlessly.
learning curve is longer
More than ever I'm convinced that designers need to get over their aversion to code and step into the CSS space because, in their absence, developers are absorbing it for their convoluted tech stack tooling
The choice between raw CSS and CSS libraries depends on the project requirements, timelines, team expertise, and specific goals of the development process.
While I don't know what the statistics are, the claim that no one is writing raw CSS is a pretty bold one without any substantiation. Definitely not the case in my work experience.
I think AntD is one of the most under-rated UI libraries out there; they provide so much funtionality and are very cutomizable.
yeah , idk why much youtubers donot mention it
@@gg.cip0tbecause it's unpacked size is too much. Just look at the npm and compare it with other options.
AntD is brilliant without doubt. It has so much more than UI or react based components. It teaches u how ui should be.
Agreed. But customising the styles isn't very convenient.
@@shreshthmohanwhy not? Im using it in my company, didn't come across any problems regarding customisation of styles.
Love u bhaiya 😍
Aap humesha bhot jyada practical & time saving advice dete ho....
Main abhi 4 dinn se CSS par hi mehnat karr raha tha but now i know that where i should focus more upon
Great Explanation! You were firm with your decision. That is unique thing about you. I have seen may reviewers of libraries, They are still confused. And we as a viewers also end up getting in confusion. So, This attitude is really very cool. Keep it up.
We need a 100x devs bootcamp video on your ai progress and what is actually being used in the industry which we should learn to be employable
Thanks a ton for summarizing these libraries! Super helpful!
I think that Bootstrap and Tailwind CSS can be a bit repetitive when you have to apply the same style to many elements by give those 30 class names to each element. If I need to modify elements, again I have to modify each one separately..
People repeat tailwind classes? if there are multiple elements using the same set of tailwind classes, best put that in a variable
tailwind is made so that you have predefined components, be they in Laravel Blade, React, vue, etc and then you use the component, maybe with some passthrou css
The pace of this tutorial was really nice. Usually it looks like you have a lot of information that you want to concise in small video hence running with your sentences. This one is slightly better in terms of pace compared to others. Thanks for sharing this one good luck for future ones.
tailwind:
- ml-5 id not same as marginLeft:5, ml-5 is marginLeft:20px;
- "highly unopinionated", its "opiniated". only thing is we can override if needed.
Bro you can use any data in square braces.. like ml-[7px] will give you margin left of 7 pixel
I can't believe people haven't heard of Mantine. It's an absolute beast of a UI library. It dwarfs Chakra and Material UI. Seriously
much needed video and perfectly timed, i am learning React and styling a website is pain in the ass
If you are still learning, learn css not library. If you cant do things you do with library in vanilla css, know that you know nothing. And you can do nothing. Learn from the basics, library is for easing the work, not “learning”.
Your courses are really good, thanks for choosing to teach web development ❤ it helped me greatly in my journey.
Is there any update on when you will start your next web dev bootcamp?
Harkirat bhaiya, First year Fresher. I started learning html , css and Js from last 3 months. Now, I am building my first project. Thanks for showing a great tool for that.
things you should learn for styling
- css
- scss
- tailwind + radix + headless UI
chakra ui is dead in my take when next 13 got introduced.
from chakra ui -
" Next.js 13 introduces a new app/ directory / folder structure. By default it uses Server Components. However, Chakra UI only works in client-side components."
which basically makes the app same as create-react-app (fully client side app)
fully client side app is no more.
Never knew about CSS in this depth. Thank you 🙏
U are saying no industry is using pure CSS. then what is a tailwind CSS. If u don't know pure CSS then what will do with tailwind CSS?
This series is really helpful thanks harkirat
Excellent video, succinct and focused. 🙌
Really informative video. Thanks Harkirat!
Your videos always gives clarity
Bootstrap exposes css classes like tailwind, also some utility classes allowing you to write accordion like components as in Radix. So I feel bootstrap = radix+tailwind, but doesn't have much customization though
Personally from graduating my bootcamp for full stack web development i find it easier to use raw css because i know it like the back of my hand
you should add DaisyUI build by the top of TailwindCSS is a game changer!
you summarized whole css Tech👏
still raw css is a must have for beginner and pro!
very good and easy explanation about the UI libraries. I think Tailwind and Radix is good combination
In the beginning there was js, then a whole slew of js wrappers to get it to work uniformly. Nowadays, plain js is better, browsers caught up. The same is happening with css. I work for big companies, one 30k employees, 8 milion users on the website. We recently dumped the framework and library wars. Native css brings us way more then the constant new hype that happens every year in js/css. Just finally start learning css and discover that it nowadays just works.
but there are limitations to frontend ui libraries . when you have to build custome ui component there raw css plays a major role
Our team uses material UI. Last year there was a requirement to re-style the webpage based on company branding.
It was a hell to write custom styles for everything.
It's documentation is also quite difficult to go through. And they keep changing the API for every version so the previous solutions you find online do not work.
More content like this. 💯 Before learning a tech stack one must know a higher picture of it...
Lifesaver for my project....thanks HS
Even I started with Material UI and slowly moved to Pure Tailwind( With great power comes great Responsibilities ), now started moving to Shadcn and Tailwind
Material is opinionated.
Whereas Tailwind is like a canvas you can draw anything.
But both have their pros and cons.
Material Ui provides consistency so the users know how exactly a component works so they can easily interact with it.
Whereas in case of that are not bound to any opinion has freedom to create anything but that can take away the consistency and it makes things harder for the user to interact with the frontend if you make some complex UI that is hard for them to understand initially and for them it's more like a learning curve to use that software...
Thanks for sharing or spreading awareness in this field
As a fresher what to choose full stack web developer vs data engineer vs data analyst more job opening more package future growth bcuz as a data guy with all datasets a data guy can give future predictions which is very helpful for companies to take business decisions
From experience I like tw, MUI is just too heavy, and bootstrap is just mehhh, AntD is also really good
3:44 Did you say tailwind is more cleaner than raw CSS?
Also why you forgot to use sx prop to write your css?. Also Mui neve says to use the emotion directly. Mui gives you styled utility present in @mui/material and /system. Using mui is from past 2 years it's highly customisable. Look at how to customize page in documentation first.
Very well explained. Thank you.
Loved ittttt!!!!!! that hichki at the end though 😁
Hlo Harkirat bhaiya ,Could you please provide approx. timing when you will be launching your next cohort or should i go with the previous one??
Nice explanation all of confusion cleared thanks to Bhaiya ❤
I think there is some problem with audio quality. It sounds a bit low. Idk maybe it's a problem on my side.
Nobody is talking about Shadcn
its awesome
Does anyone has heard about AntDesign?
But MUI won't change its look suddenly in a particular version. If they want to change, they'll do it in a different version. So as long as we keep using a particular version of MUI, it's going to be fine
You can use these libraries well enough if you know how to write good raw CSS.
They all help you write CSS faster anyway
Agreed. If people cant do shit in vanilla css and and relying on library only, i can only imagine the mess they would have done to their code. Hopefully im not the one that have to deal with it.
👀 Bro You are a pro Developer 🔥
This was a great historical survey of coding for someone new to the subject like me. Would you categorize something like GSAP technically a Radix library (or are GSAP and Radix two separate JavaScript libraries)?
Appreciate the simplicity
Thank you for giving clear idea!!
Harkirat, I would like to request you to make a video on how and where can we find reliable and profitable internships? Something for the people currently pursuing engineering plis?
whats that IDE seems it is form JETBrains Intellij IDEA?
WHICH UI Library is a game changer? You discussed so many!
To learn how UI library works we gotta know the basics of css how it’s working and what’s happening
Bootstrap is the best !!
MUI is a very customizable UI library and emotions is not the recommended way. MUI itself has ways to create customized components using a predefined theme. You should do more research on each of these libraries before doing a comparison between them.
When will you come up with the next cohort?
Hello Harkirat, When is the next cohort of the web dev open source bootcamp gonna start?
When can I join the next cohort
Hey sir, should i start with dsa or web development?
Hey Harkirat,Can you share your study routine during your college days?
shadcn + tailwind is my go to UI stack.
Still you need these components to be placed with the help of css
I need to create a react custom components library which can be used for all frameworks like react, typescript, angular etc. Make a video on this with the best practices.
Nice explained ❤
I thought Vue.js is the web clutter to use this month... or was that last month? Hard to keep up. Even if I end up with a few more lines of script and css, I prefer to stay away from ANY framework or web library, because it is all over-engineered junk. I had a Vue.js replacement to my "native" project running and decided to keep the native one. Along with those libraries and frameworks, comes some build tooling - something you do not need at all if you do "native".
MUI is also bringing baseUi a skeleton ui.
i want to know one thing, right now i am using styled-component/native for making my component library in react native app, but i am facing performance lag. what should be the ideal css framework for making component lib for react native app?
css
What do you think about Flowbite in this chart ?
It only is a good idea for projects with a large dev team imho. Else raw CSS all the way.
I am using raw css to be more precise i am writing module css in my current website in next js
Harkirat Bhaiya it would be great if you could make some videos on system design
Why did you change thumbnail
I think Material UI helps developers alot much
When is the next batch of mern cohort starting??? Please answer
why not ant design a fully riped library ? MUI is still under development still lacks lots of feature and functionality
Using libraries was cool 10 years ago. Now CSS go so far, that there is no need to use them.
radix+tailwind is my go-to for ui
Next13 + tailwind + shadcn ui = 🔥🔥
what if you use chatgpt or other AI tools to write the javascript for adding reactivity for you?
you are a good teacher🙏
What about, buying vuexy template ? 😅
I am kinda confused. Tailwind utility first CSS framework. It is not collection of components. It helps u write CSS in atomic way. Essentially if u are only using Tailwind in ur project, you are writing CSS. We shouldn't get confused. When u combine that with other bare bones component libraries like ShadCn which uses RadixUI to output components or someother project. They are using Tailwind or Bulma or other atomic CSS libraries to improve ur productivity and such.
Rest of the component frameworks u have mentioned does fit into the category. Where u don't have to write major part of the CSS, but still CSS is integral part of Web DEV. Shouldn't be ignored and the thumbnail is just click-bait. Refrain from using click-bait, content will drive the subscribers to u. Good luck
Brother which ide you're using
Hi Harkirat can you please share the mernStack repositories where we solve issue to upgrade our skills
When you work on a real world project, and when you use a ui library, you will hit a point from which you cannot move forward. Then you'll throw away all these ui libraries and write the plain old css.
If you don't know css, none of these libraries can really help you to complete any production ready projects.
Do Goldman Sachs or JP Morgan hire from Toptal or Upwork?
Saying that no one in the world uses raw CSS is blasphemous; the entire internet is built upon it.
The background looks so cool . Can I have that bg image Kirat?
A great overview of the options available to provide styling to one's fornt-end. Thanks.
{2023-11-30}
StyleX?