Laravel for Beginners Part-5: How to add css, js, and images in laravel |add static files in laravel

hey guys welcome back in this video we are going to see how to add the static files in our project so by static files i mean to say the css js and images folders in our project so let's get started so first we'll open our project run the project php artisan serve enter and we'll check the output like we had stopped in the previous video so okay so we had added this template inheritance so now we'll see how to add the css js files and images files in the project so here we have to go so our resources views pages is here so let's go to the index page so here we are okay so main the template is in this which we are inheriting so we have the css over here we have to uh put it in the local file so here all your assets will be inside the public folder so just create a new folder inside the public give assets hit enter and create folder css enter and new folder js and for the images we'll create one more the images okay this has been created inside now okay so now let us just copy this link copy go to google chrome paste this link over here copy the css from here control ac and paste it inside your css folder create a new file bootstrap.css so inside bootstrap.css just paste the whole css over here and now make one more file here for the custom css whatever you want to give custom create new file view custom dot css okay hit enter so now here we have given this external link so you can remove this and just remove this whole thing close okay so we are giving link it is a style sheet and here just within double curly braces you have to give a set function that the function call i said to call all this so give within asset function give the directory inside the public folder i will show you so open the public folder we need to go inside the assets folder here so type assets here assets slash assets and we are calling the css file here so for the css file then the file name so here we'll give css slash bootstrap dot css okay so now we'll copy and paste the same thing for custom css so now for the jquery also it's the same way i'll do for this one and show you so paste it over here enter copy the jquery and go to your js files create new file and give this is jquery okay so jquery.js okay so paste it over here okay so close this and you can remove this thing also now just remove the whole thing okay so here we need to add it i'll give script and inside this let's script src and the same way again within double curly braces you have to give it here call asset open inside the public folder in which directory we want to go public and asset so from public it will start so you have to define it from inside public so assets slash give js slash jqe jquery dot js okay so now we have given the css and js now let us think the images so first we'll put a image over here so this is my folder open go to public assets images and i have a image on my desktop so i'm gonna pull that here just pull it and leave it over here okay so sharma quarter logo i just make it small logo.png okay so now let us call it in our navbar so here it is navbar now okay now our brand is here remove this put img your source again double curly braces within the double curly braces you have to call your asset function asset and give assets slash images slash logo dot png okay that alter all text earlier so here image here for those who don't know what is this all tag if the image is not available this alternate tag will be shown over there whatever we give a message here it will be shown over there so now let us close this and reload the output so the css is loading the image is too big so we'll just uh make it small in the custom css so this way we can test our custom css also if it's working or not so let's give a class here class equal to logo copy it go to the custom css paste the class name and just give width oops a bit this will keep 120 px now let us reload the page okay you see it has become smaller here so that's it in this video guys we have seen how to add the static files the images json css files in our project locally within the project in our system so thank you for watching this video guys please like the video and subscribe to the channel and thank you for watching

Channel: Sharma Coder

Views: 10,438

Keywords: how to link css js in laravel, how to include css js files in laravel, include css and js files in laravel, how to add css js files in laravel, how to create css and js files and link in laravel, how to create css and js files, how to integrate css js in laravel, how to integrate bootstrap in laravel, how to make a laravel project, larave crash course, laravel tutorials, laravel for beginners, laravel course, how to use laravel, login form in php, login form in laravel

Id: PSW0E2pr0sE

Length: 7min 37sec (457 seconds)

Published: Sat Jan 02 2021