Build and Deploy Laravel 9 Portfolio - For Beginners

in this video we're going to build portfolio website in laravel 9. we will start from scratch we will install laravel we're going to build the project we're going to deploy the project we're going to attach it to custom domain and finally we're going to generate ssl certificate for our website hello everybody my name is zura and i'm the co-colleague on this channel i share my 10 years of experience in web development i create coding tutorials and challenges and from time to time i create content about tips tricks and advices if that sounds interesting to you consider subscribing all right let's immediately have a look at the demo when you open the website you immediately see an overview about me who am i what i generally do on my youtube link to my youtube channel and link to my my projects and the picture of me so we have this navigation uh let's scroll down below i have right here social media my social media icons and down below i have a featured section that's a call to action uh section and i promote uh my php developer roadmap which you can find on github or watch on youtube so if you want to become a php developer just check out uh the following section down below i have more information about me uh like three of my pictures probably i should leave only one or two i don't know but that's a template taken and i'm gonna show you from where i actually took that template down below we have this view my channel link and now we have portfolio section or my project section so we have a couple of um tags and tabs right here those are filtering my projects i added right now totally six projects and all of them are links to my github so you can do you can change of course to to yours down below we have video tutorials and you can click any of the videos and immediately open and watch them uh or click just a viewable tutorials which will be again linked to my youtube and down below we have a contact form section which is fully implemented and we can fill up some information john smith with test 2022 i'm gonna hit send message that actually should be email john example.com and i'm gonna hit send message we get this access notification and let's check gmail and here is email received zero minutes ago john john example.com test2022 the website is fully responsive so if we just switch to any screen size we can see uh let's scroll for let's start from the very top okay scroll down below uh let's actually zoom this on a full screen so this is the call to action section about me uh my projects you can filter them of course video tutorials and videos of course are also playable on a mobile screen and down below we have this contact section and in the footer we have again follow me on social media and all of them are basically linked at the moment to my social media but you can link them to yours of course all right that's it and let's build this nice portfolio website and one small thing let's check the navigation on mobile this is how it looks like and we have right here the youtube my youtube button so this is just to subscribe easily on my youtube or just see how many subscribers i have you probably if you don't have youtube channel you probably won't need that button and last but not the least feature of the website is that it supports white mode as well so in html element we have class dark if we simply remove that now the whole website is in white mode and it looks i think amazing not compared to dark mode maybe but in general it looks amazing the whole source code is available on my github it's open source you can clone you can modify and redeploy on your domain what are we gonna learn by building this project we're gonna learn how to install and manage laravel project with sale which is a common light interface built on top of docker how to add talon css to our laravel project how to work with tileman components we're going to learn how to add alpine js in our larval project and how to work with it we're going to learn how to work with laravel components how to generate them what are the differences between anonymous and class-based components we're going to create scalable component directory structure which can be used in much bigger projects than a single page portfolio website we're going to learn how to handle form submission and data validation with both alpine js and laravel we're going to learn how to configure and use laravel 9's symphony mailer in our project how to deploy our application on a production-ready environment and attach it to a custom domain and finally how to generate ssl certificates and attach it to our domain if at some point you feel that you don't understand certain things you can of course let me know in the comment section and i will do my best to help you if you find this video helpful make sure you like it and share because that really helps me to grow on youtube and if you want to see more videos from my channel hit the subscribe button and enable notifications alright no further time spending let's jump into the project code 19 in pandemic showed everybody how important it is to be software developer and have well paid remote job today's sponsor is arc arc is the easiest way to find remote job as a software developer arc has amazing services to help you prepare your resume get prepared for your technical interview and find your desired remote job arts resume builder is an excellent tool to prepare your resume for your next remote job you can upload your existing resume or prepare new one from scratch arc also offers resume guide which will help you to avoid common mistakes many developers make when building up their resumes arc offers a very powerful tool to search your desired jobs and filter them by multiple criterias starting from tech stack ending up with job location and average salary arc offers salary explorer tool which will give you possibility to explore average salaries in your stack before you start applying to jobs arc also has a dedicated section for technical interview preparation on that section you will find practical tips and questions to level up your interview skills to start with arc simply click on the link in the video description it's absolutely free let's open larval.com and go in the documentation section right here let's click on your first laravel project and right here we have a couple of ways to install our laravel project the way we're going to choose is using sail which is a command line tool built on top of docker and it makes it very easy to interact with the docker okay let's scroll down below and we have three sections getting started on mac on windows and on linux on all those three operating systems we need to run finally the same command which will be using c url just we need to make sure that we are able to run linux commands on our operating system for mac and for linux it's pretty straightforward however if you are a windows user you need to have first of all docker installed on your operating system basically you need to have docker installed on all those three operating systems okay however on windows we need to have installed wsl 2 as well and we need to have installed ubuntu operating system as well so i have a video in which i set up a fully working docket docker uh environment on windows 10. you can check this out i installed docker desktop wsl 2 installed ubuntu as well and here we have all this setup already so in my case i'm going to open ubuntu which you can just click in the start menu and type ubuntu if you just follow my widow and it opens that ubuntu terminal i can run any linux commands right here and i'm going to run the following command on my ubuntu terminal however if you don't have docker desktop and you don't want to follow this with a docker desktop which by the way is my recommended way and i really really really encourage you to follow this tutorial using just like i do install docker desktop and follow with the sale but if you don't want that you can scroll down below and find a section which gives you possibility to install new project using composer okay you can do this if you want in my case i'm going to scroll up and copy the following command go in my terminal and paste it right here i'm going to change the example up name into laravel actually first i'm going to navigate into www folder then i'm going to paste this and change this into laravel 9 portfolio and i'm gonna hit enter the very first time you're gonna run this it's gonna take a lot of time so you can go ahead and have a good sleep and come back and when this is done oh that's pretty cool support ukraine i lost that here it is that's pretty cool all done um again the very first time you're going to run this it's going to take a couple of minutes you can have you can do whatever you want and then come back to this and you're gonna have your project basically installed okay so here is project downloaded and now it asks me my ubuntu sudo password the ubuntu the same ubuntu which i installed on my windows inside wsl 2. so i'm going to provide my password right here and hit enter and now my project was successfully installed i can navigate into laravel 9 portfolio and i can run slash dot slash vendor being sale up and that's gonna start my sale services so here are all the services that are running okay here's the very first problem and let's start solving our problems the error basically indicates that i have some application running on port 3306 which is a port for database and the port is already allocated so i cannot start my services so if you have some um some application already running for example if you have xampp already running apa with apache in mysql they are gonna occupy port 80 and port 3306 so you need to stop those the the example apache and mysql or anything basically which occupies the following ports 3306 and 80 and then you need to rerun this so i had another docker containers running so i just top them clear up everything and now i'm going to rerun vendor bin sale up and it should start my applications let's wait couple of seconds all right here we have it now i'm going to open browser and in the browser i'm going to simply type localhost and here i have very easily and in like two minutes you can have your new laravel application up and running with database with a mail testing mail hog and couple of other things okay all of that is actually ready perfect now we can already start developing our application let's first open our folder using editor or ide i'm gonna use uh in general i use php store but i'm gonna show you how you can open this using vs code so you have to either open new ubuntu terminal and navigate into this folder or i'm going to simply hit ctrl and c right here which will stop basically all the services running right here you can hit ctrl c multiple times if the first time doesn't work it cannot take uh five six seconds to basically stop all the services and i killed all the containers and now i can run code dot which basically will try to open the current folder using vs code okay or i can run explorer dot which is gonna explorer dot xa dot which will open the current folder in the windows explorer okay and look at the path this is the uh ubuntu operating system file system uh inside my windows okay i can right click and open this as a phpstorm project or open with a vs code however if you want to open this with vs code the other way is preferable first of all let me open this up with phpstorm because i do use phpstorm all the time for php development so here is the project now let me collapse this and let's open this ubuntu once again and i'm going to run code dot okay now it already opened vs code and here is my project so if you want to develop on vs code you can just open vs code otherwise just follow with me like i open with php store okay here's my project when i was building this portfolio i used the following website for taking the ready components so if you go in the component section you can file find a lot of ready components a couple of them a few of them are free and most of them are actually not free and you can purchase them but what i found and where i needed was available for free as well so for example if we check models so in most cases the first one is free and the others are not free if you go in the footer section the first one this one is free others are not free and like this basically i copied only those sections which were free and then i modified like if we go in the portfolio section this is the portfolio which is free and this the others are not free okay so if you click on this free version you can have a preview this is how it looks like and go in the code section and then we can grab the code and modify however this one uses alpine js which is a very lightweight javascript framework which is um very easy to use basically easy to set up and easy to use and it's heavily used in larval components and third parties and so on okay so we're gonna use alpine and then we will be able to copy and paste those components and modify as much as we want let's open now um phpstorm you can open vs code if you want to develop on vs code and the main thing that we need to open terminal okay we need to open native ubuntu terminal like i can uh go in the ubuntu terminal right here and i can run any commands from here or i can open vs code if you are developing on vs code and click on terminal new terminal just make sure that right here you choose a terminal which comes from uh ubuntu so on the bottom left corner you should see right here running in ubuntu wsl2 then you're good to go you can run any linux commands right here okay i'm gonna open vs code as i mentioned you can click right here and now this is also integrated with wsl and this is ubuntu terminal also so i can run any comments right here so first of all i need to show you how you can run any comment you want inside the project so if you have a fresh new installed of wsl and ubuntu you might not have uh any comments like you might not even have npm and that's uh that's the case in in my uh scenario in my case okay i don't have npm i don't have php i don't have any comments running right here so that's the whole point of having your project in the docker so you install only docker and then anything everything is run inside the docker okay that's pretty cool right now our application is not actually started so if you go in the localhost and refresh we won't see anything because we stopped using control and see our uh project let me actually close this ubuntu terminal so i don't need that let's go in the php store and first of all i'm going to run vendor being sale up okay that's going to restart all my services now i'm going to reload right here and here it is so my laravel application is up and running now i'm going to open new terminal right here or i can actually again kill just the following and just one sale vendor bin sale up using a hd which can run this in a detached mode it's going to take a few seconds and right here i can run i can go inside the docker container so i'm going to run vendor bean sale shell and that's going to give me access inside the docker container where the source code is located so if i just type ls-la right here is my project and inside i do have php so i can run php-v which is the php 8.1 i can run npm v dash v and i have nodejs and everything where i want okay so now from inside i'm going to run npm install alpine js hit enter and alpine js was installed now let's open up js i'm going to go in the resources js and i'm going to write here enable my alpine first of all i'm going to import alpine from alpine alpine js package then i'm going to assign the alpine to window alpine so that i can globally access that and then i can run alpine start that basically will give me to use alpine js code in html let's open welcome blade php and let's try to use alpine let's scroll down below and right here i'm going to create a div element and use alpine.js let's create a div element assign use the x data property to specify the alpine js data in this case we only specify count zero then we output that count zero and i'm going to create also button which when we click on the button it simply increases the counter so that's really simple you have probably seen this in other frameworks as well so let's just open now in the browser and reload the page and right here we see this click me but when we click on that it doesn't do anything the thing what we missed is that we don't build our up js so and we don't probably include that as well so right here i'm going to run npm run watch i think we haven't run npm install as well but because we installed alpine js it actually run npm install behind best would be before running npm install alpine js we should have run npm install in general now npm run watch is running let's go in the welcome blade and down below i'm going to include before closing body tag i'm going to include the up js from assets folder okay let's just save this and reload the page and right here i see zero so when i keep clicking on the button the counter increases which proves that we have successfully installed and activated alpine js in our project now let's install talon css let's open the terminal i'm going to kill this npm run watch and i'm going to run npm install tailwind css i'm going to specify s to save this okay table and css was successfully installed let's actually open package.json and have a look the dependencies so in the dependencies we have alpine js and towel and css now we need to generate tile wind config i'm going to run npx tailwind css init so it created a default tailwind config.js we can have a look right here okay it doesn't have anything right here we need to specify certain things in the config in the config we need to specify that the tallwind needs to watch the following files it needs to watch storage framework views dot php files it needs to watch resources blade php files inside inside resources folder it needs to watch resources js and it needs to watch vue.js files just in case there's a default uh configuration just in case uh we're gonna have some view js files so if you want to see all these things uh in the written documentation i really encourage you to check out the laravel documentation scroll very top and you can find tailwind css right here somewhere and this is going to give you a detailed guide how you can install talents is in your project and do this basically i'm going to show you the same thing right now okay let's open our php store once again let's close this and now i'm going to open resources css up css and right here i'm going to paste tile wind layers the the following things so let's just paste them right here and we need to open uh webpack mix.js and right here we're going to include talon css simply i'm going to write require tailwind css let's save this and now if we just run npm run watch it's going to build the talon css and the build files will be saved in the public css up css okay this is it now we need to include this in our welcome blade php where it is so right here let's scroll at the top and instead of this inline styles right here i'm going to remove this and i'm going to simply write a link with href and from asset we are gonna include css app css let's save this oh i think we need rel to be stylesheet as well okay here we go so here we have talon css included now since we installed alpine.js in thailand css we need to activate some tile wind tail grids components in certain things if we go in the template section scroll down below or we can click any of the templates download section which will redirect us to this pricing scheme but at the very bottom there is option to download talgrid's free core version and this is 100 free for uh and it's open source and you can use for any any purpose you want so we're going to click download on this okay this is downloaded and i'm going to extract it right here and let's have a look what we need to do so here we have a couple of files and the main thing what we need to do is to have a look in the tailwind config js so i'm going to open this with vs code and look at this so in the content it has html and some javascript but the main thing is that it uses inside plugin section it uses a custom plugin called uh plug-in simply plug-in js so this is the thing what we need to do so i'm going to copy this go in our project and we need to open uh talent config.js and in the plugin section i'm going to put this but we need to open and copy these plugin js as well so i'm going to copy this and paste it right here and we can copy the post css config as well and paste this right here okay we're good now let's have a look in the what is inside the plugin js it has a couple of css classes basically added right here and some styles to edit inside a snap image the the scroll snap align center and so on so it's some boilerplate code for this plugin but we can customize anything if we don't want it to be right here so if we scroll down below we need to change a few things in my case so in the color section we have the primary and that's not the primary color i want to have so i'm going to change this primary i'm going to set this into 0c7187 okay that's my brand color i'm going to actually customize also the font size and down below i'm going to copy and paste certain font sizes okay now i'm going to save this and we have to rerun npm run watch now it was successfully built let's open in the browser and reload and few things have been changed right here now we can copy and paste the components and have a look how it looks like so let's go in the component section and let's find navbars for example and grab the very first one the whole code i'm going to copy this go in the project let's open welcome blade and let's scroll down below and just right here we can actually delete the whole thing so i'm going to delete everything and right here i'm going to paste this and form up the code save this and have a look in the browser okay here is the nav bar let's inspect this and have a look if we have some errors right here no we don't have anything if we just click on this we see that the altman js is also working because that functionality comes from the javascript that's perfect very good start i want to add two more things first i'm going to open source talon css and down below let's scroll down below and i'm gonna grab everything let's open our project that should be under resources css up css and we're gonna paste this here and i'm going to use a roboto mono font right here so i'm going to put this right here you can grab this from google fonts api so just type google fonts and we search for roboto mono and this is what i got so you can either download or select the style and then you can grab this so i want to select everything from robotomono so i'm going to basically click on select select so i select all and then we go in the import section and i'm going to grab this and you paste it right here so this is um now i have a correct font and correct css okay perfect so let's close everything and i'm gonna actually open editor config file and make a few changes right here so for default as a default i'm going to set the indent size to b2 and i'm going to duplicate these four php files the indent size should be four and for rest i can't i think i can leave everything as it is right now okay those two changes are enough so i'm gonna save it and now i'm gonna generate component for layout now let's open the terminal so this npm run which is running and it should be running okay so now i'm going to open a second terminal and go inside the container vendor bin sale shell and right here i can run artisan comments php artisan make component and i'm going to call this up layout hit enter the component was successfully created let's have a look let's scroll up in the app view components up layout this is how it looks like i'm going to change the view into layouts or layout up layout or layout simply up and now if we go in the resources views components we see right here up layout i can create and i'm going to create a new folder right here for layout and i'm going to move this up layout inside the layout folder and instead of up layout they should be called up blade php okay we need to have a header and footer right here so let's just write header we're gonna have footer right here and inside we're going to output slot the slot which will be passed from the welcome blade php let's open welcome blade and i'm going to copy everything and go in the up blade and i'm going to paste everything right here so we have this header we have this standard html boilerplate code we have this nunito phone which i'm going to remove and let's remove this one as well and we have header i'm going to create right here uh footer and then again we're going to have slot now if we go in the welcome blade we obviously don't need this header right here anymore because that's part of the template and i'm going to basically delete everything and create empty div element right here which gonna be the content let's save this but actually we need to use the layout what we just created right here okay so we need to write what's the name of the component the component is called up layout which is inside the components so we need to use up layout up x dash up dash layout let's save this and have a look in the browser reload and we see header and we see content and let's have a look in the footer if we see that footer save and refresh and we see footer right here okay just like that we easily created a component now let's talk more about components and generate a few more components let's bring up the terminal and i'm going to run php artisan make component i'm going to create now navbar component but i want this component to be inside the layout folder inside components slash layout or yeah component slash layout so better if i do layout slash navbar so i want to generate the following component i want to generate a footer component as well hit enter i want to generate navbar item for each individual item and i want to generate navbar hamburger button as well hit enter so i generated those four components all of them are in components layout folder down below if we have a look for the blade php files those are in components layout but we don't want them to be under components layout we want them to be under layout so i'm going to copy everything cut and put them in the layout however it's not going to work like this because the php file component php file indicates where the actual blade php file lives so if we open now bar right here under render it says that the view for the following component is under components layout navbar okay this is something we need to change so simply we need to remove the components from here and we tell the php component class that the view file lives under layout footer okay let's do the same for all okay and just like this we we have our components ready when we generate components we can generate components as only blade php files if we don't want to have class we can generate only blade php files however if we want to change the view path where the blade page believes we cannot do this if we just generate blade php file we need to generate class as well but if we simply need a test or a button component we can give it a flag dash dash vu which will only generate blade php file under components and it's not going to generate class right here okay and but in this case the location for the component is a default location it's under components i think this makes sense so if you want to customize your location for the component or if you want to pass any additional variables to your blade php you need to generate class as well for example in the nav bar we're going to create a public variable right here public oops public and that's going to be array and that's going to be navigation items for example and that navigation items will be available in the navbarblade.php file so if we just simply print right here navigation items just like this it's going to be available okay now we need to start step by step and create those components let's actually open this let's actually clear up everything in the navbar and let's start step by step right here let's first open this now bar class and i'm going to define the navigation items right here okay these navigation items equals array and we're going to have a couple of items in the array about section so we're doing a single page uh portfolio website so we're gonna have sections about section we're gonna have project section we're gonna have coding tutorial section and we're gonna have contact section and that's going to be basically all now let's open the nav bar blade let's actually close anything else for now we don't need them we open number blade and let's start writing html i'm going to actually run a page before on a full screen that's much better okay we define comments for now bar section start and number section end then we create header tag with x data number open false which indicates whether the navbar is open on mobile screen or it's closed we specify classes right here as well so we need to give it a position fixed left 0 top 0 the index 15 background white we're going to give it a full width flex item center we're gonna give it a little bit of shadow and when the dark mode is enabled it's background will change into slate 900 and the height will be 24. so if we have a look in the tailwind css let's quickly open that so i really encourage you to have always have opened the documentation of laravel when you are working on a project the documentation of alpine js as well as the documentation of talon css because we're using those three technologies at the moment if we go in the dock section right here we can see uh colors and where are those colors colors and let's have a look slate okay this is the color in slate 900 this is the color which will be given to our header when the dark mode is enabled okay let's continue next we're going to create a container with a shrinked width where inside there we're going to have an item with display flex item center justified between it's going to have position relative and it's going to have negative horizontal margin as well okay inside there we're going to have a div for the logo wrapper it's going to it's going to have a padding of padding right of four it's going to have width and max with as well inside there we're going to have an anchor link with href slash full width display flex item center so those are i think pretty straightforward talent css classes i explained it once and then i think it will be very clear so display flex alignment temp center and vertical padding 2. inside there we're going to have two images one for a white mode and second for dark mode okay this is going to be for the right white mode this is going to be for the dark mode and we're going to give them classes as well so the width of 48 pixel on a large screen is going to have slightly more width in line block and on dark screen on a dark mode this is going to be hidden okay for the second one with is the same and by default it's going to be hidden but on a dark mode it will be visible next we're going to put right here as span with the code holic the my name my nickname and we're going to have some font size on a large screen it's going to have even more font size font bold text color and on a dark mode this is going to be white okay so we can save this and have a look already how this looks we don't have images probably and we won't see much so let's say this i think we don't use this navbar plate okay let's finish this file and then we can use this in the layout okay next we're going to have a div element to wrap the right side which will be the menu items okay flex horizontal padding justify end item center continue we're gonna have another div inside there we're gonna have component which we just created but we don't have content right there it's going to be navbar hamburger component okay whenever this is clicked we're going to inverse the number open variable so if it's open we're going to close if it's closed we're going to open and if it's open we're gonna also add class number toggler active so that instead of this three uh bar we're gonna see this x okay let's continue and we're gonna have enough and the nav will have a class of hidden if it is not open okay and that's relevant for mobile okay so the nav will be hidden on mobile screens if it's not open and it's going to have id of course inside classes we're going to have position absolute right uh top fully full uh position from the top yeah background white horizontal padding vertical padding's index some shadow a little bit rounded and with full then we're gonna have colors for the dark mode bg slate 900 and text gray 300 and we're going to have some uh classes for large screen like we change the padding we change the full width and we change the position the display in position as well so position will be static on a large screen and display will be block on a large screen okay however on small screens the position will be absolute and it's hidden if the number is not open okay let's continue inside there we're going to have ul unordered list with block and on large screen it's going to have display flex and inside there we're going to iterate those navigation items and these navigation items are what we declared right here okay so we iterate and we're going to use navbar item component i haven't mentioned this but any component should be prefixed with x and again um i encourage you to always no you you should always have your documentation open so if we search for blade right here and search for a component section you're going to find a lot of information regarding components okay just have a look and right here somewhere it is mentioned that you should always prefix your components with x dot okay it's going to be written somewhere right here but yeah generally uh without x and dash it's not going to work and we're going to use the number item which what we just created we haven't written the actual code inside there but the file is there okay then we're gonna output the label this one and inside href we're gonna pass the item href yeah that's it inside this file let's save this and we don't use this so let's actually go in the up blade let's remove this header completely and i'm going to use now x layout layout.navbar okay so when the i think it's layout.navbar let's have a look so the component is inside the layout folder so when the component is inside the folder you should separate with the dot okay in this case we should always prefix the component with x dash and then we write layout and then we write dots because the number is inside the layout and here is the null bar okay we save this and now have a look in the browser refresh okay let's enlarge this so we don't see logos because we don't have them but why don't we see menu items of course because we haven't implemented these files and the hamburger as well all right let's first copy and paste logos so let's go in the public and inside the public i'm going to create a folder called image and inside the image i'm going to copy and paste my images here i'm pasting two images logo png this one and logo white png this one okay so i save this and refresh and now my logos is there all right let's talk about the dark mode so if we open the up blade and we need to add right here class of dark so if we save this and refresh all right nothing really happens and it doesn't affect because we have to change one thing in the talent config right here there's a property called dark dark mode and by default it takes the browser settings and in my case my browser setting is set to white mode but if i change the dark mode to be class based in this case because i added right here a class it's gonna change the dark mode and my number should be dark so reload and just like this my navbar is basically dark so if i remove this class dark and refresh then my navbar is light all right i'm going to set this into dark and let's go in the now bar item and let's implement this but before the before the before we work on the blade php let's actually open number item and add right here a public property href because we're passing that href right here and then we're using that inside we should use that inside the number item so open number item and i'm going to write here constructor property promotion php 8.0 feature so public string href and just like this this will be available in the navbar item and i can simply print this right here href save and reload all right sometimes this doesn't work sometimes i see blade errors because of caching and this happens quite often in my case so simply i'm going to run php artisan view column clear that's going to clear caches for view files and let's reload the page and now it works so that was the reason but why we don't see the menu items so let's expand this and click on this under ul we do have those items okay but why we don't see probably because we're on a small screen if i zoom out now i see them yeah because i was on a small screen so that's a mobile screen that's why i didn't see them so if you just zoom out them or if i just move this down and zoom in now i see them all right that's perfect now let's work on this file so here i'm going to create a lead tag inside there i'm going to create a tag with href and i'm going to output slot okay and i'm going to give it classes as well some text small font medium text dark and i'm going to add on hover to be text primary i'm going to give it on dark mode the text to be gray and on large screens and extra large screens i adjust the positioning and margin okay that's all so i save this and i refresh this and here are my menu items now let's create number hamburger so we don't need to work basically anything right here we don't need to pass any arguments simply we're going to open number hamburger plate php and we're going to make some changes right here all the code i'm writing uh here comes from these tailgrids navbar section so if you go right here so this is the number hamburger which i'm going to copy and paste i already have those copy and pasted but if you don't have you can actually get those from here so this is hamburger for example so we can get this button from here copy and put this right here let's format this and save and then we refresh and zoom in and here's this hamburger button okay so if i just simply delete this then the hamburger button is not visible okay but i'm going to make some adjustments right here so that's why um let me actually deal it up and rewrite everything so we create button right here with three bars inside there i'm going to use php blades variable built-in variable attributes but i'm going to take all the attributes given to this number hamburger component and i'm going to merge those attributes to the current ones so in this case we're merging although all the given attributes with the number toggler id and for the classes we're gonna specify block absolutes and margins paddings rounded and couple of other things and for the focus we're gonna give it ring two and on a large screen it's gonna be hidden okay now i save this and refresh in the browser and here's our hamburger which looks pretty much the same what we had when we copy and paste it from here alright now we have created a navbar let's focus on the footer so i'm going to open the footer right here let's open tell grids and have a look in the footers so this is the footer let's click on this first one which is free and let's slightly zoom out it's much better so we have a lot of sections right here but we don't want all of them so i just want to have the social icons and maybe a text follow me on social media so i don't have those things but i really like those elements so this circle which fades out into white and down below there is another circle which also fades out so those elements make a website uh pretty in my opinion okay so i want those elements and then simple text and social icons okay so if we have a look in the code we can analyze right here bunch of svgs so those are menu items but if i scroll down below so this is the svg and that svg basically describes those paths okay so you can grab those svgs and put in our code here are more svgs this is the linear gradient i think those are those are the circles and the other svgs are social icons okay we need all of them so let's go in the uh php store and i'm going to actually create one component for social icons because i'm going to use that component in other section as well so php artisan make component and let's call these social social icons and this component should be view only i don't want class to be generated i don't i want this to be on its default location and also i'm not going to pass any any attributes to this component so i'm going to give it view let's hit enter the component was created let's have a look and under component section this is social icons blade all right let me actually uh copy and paste these icons so this div scroll down below copy and put this right here format the code i'm going to adjust this uh right here because i want to slightly increase the width and height and i'm going to do all these things in a moment but let's go in the footer and in the footer simply i'm going to use x social dash icons okay that's the component i'm going to use let's actually open up blade and let's use right here x layout router let's save this and have a look right here all right we don't see the footer what's the reason so in the elements we have body we have header content and we have footer but that footer is i see that footer is below the nub bar this header because this one has position fixed and that's why the footer is below that so we need to give it a slight padding so let's actually open up a blade right here actually i'm going to do a few things so um let's add the following classes so on the body i'm going to give it a class text a gray 800 and on a dark mode let's give it a text gray 200. i'm going to create additional deal right here with classes of mean hate screen background gray hundred on a dark screen we change the background and with padding top 24 that's gonna do the trick and then everything will go inside the div this is good let's refresh the page and here is my footer okay it doesn't look pretty that's why i want to adjust that let's go in the footer and let me work right here all right let's work on the footer so we're going to create section start and end inside there we're going to create footer with the background for the dark mode and for white mode as well inside there i'm going to create container inside there we're going to have a display flex div and right there we're going to have this follow me on social media text and on the right side we're going to have these social icons let's create footer with classes like background gray on dark mode background slate and so on inside there i'm going to create container and an element with display flex then we're going to create the follow me on social media text and on the right side we're going to have these social icons and i'm going to remove the margin bottom any kind of margins on that social icons and then down below i'm going to create those two svg elements so again let's have a look right here so we have those two nice svg elements this one and the other one so i'm gonna simply copy and paste those svg elements the first one both of them will have position absolute left zero bottom zero and this is the first one and let's save this and here is the second one so let's hit this save and open and refresh and this is my follow me on social media that's pretty cool i i really like those svg icons right here and right here so let's let's actually work on the social icons and i'm going to slightly change those let's go in the social icons section first of all i'm going to link this into my facebook page so let's put right here my facebook page url let's change the width into 10 and 8 into 10. this one has border a specific color so i'm going to change this into border dark i'm going to give this one also border 2 then we're going to have tex dark and actually on a dark screen i'm going to give it text white on hover it's also text white on hover the color is changing to primary the background color the border color color is also primary and i'm gonna do the following on a hover on a dark mode i'm going to change the border to be primary as well so it has a slight margin and i think that's good i'm going to also change the width and height of this so i'm going to change this into 10 and maybe 18. save this and have a look so this is my facebook and i think that's not bad maybe i should change the border color into white as well so on a dark mode let me write here on the dark mode border to be white save and refresh and that's good okay i need to copy and paste those css classes for other social icons as well save and refresh that's pretty cool i really like it all right now let's link those social icons to my actual pages so let's collapse this the second one is the twitter put this right here the third one is youtube put this right here and the last one is linkedin i don't use linkedin that much and it's not relevant for my profile so i need to change this into instagram or something else so if we just type instagram svg icons we can see a bunch of svg icons right here you can download any um whichever you want and just replace this okay this is uh i already searched for an instagram svg icon so i'm going to replace this svg with mine let's save this and refresh and this is the instagram icon and i just need to link this into my instagram page and that's it so i now have all those pages linked but i'm going to add target blink to all those pages as well so first one i'm going to use a multi-cursor right here using my alt and then target needs to be blank for every link refresh the page click good click perfect so all of them works fine so we have header we have footer i think we need to focus on the content before i focus on the content i need to do a few more things so first of all this is not perfectly aligned vertically so i probably need to do some things this one has margin bottom six and let's actually go in the footer and we use this right here but that those classes are not actually used so that happens probably because we don't use them right here so i'm going to use attributes class and we're passing right here what we have by default and it's going to override what it comes let me actually completely remove this margin bottom six i don't want that so save and refresh and now it is perfectly aligned in the center another thing i want to do is i want to put a youtube subscribe button in the header in the nav bar so let's actually open navbar dot ablate php and down below in this unordered list i want to put a youtube subscribe button so we need to create right here a div with a special class g yt subscribe we're going to specify right here data channel id that's going to be my channel id and then i'm going to specify attribute data layout to be default but that's not going to work unless we include the javascript file so let's go in the layout up ablate php and in the header before the closing head tag i'm going to include the script tag from the apsgoogle.com js platform js so if i save this and refresh refreshing the browser we see right here the youtube with my subscriber count and uh it's it's basically there well we need to apply a little bit of css right here so let's go in the navbar and i'm going to actually wrap this button inside a div with margin left with on the large screen it's going to have margin left 10 or an extra large it's going to have even more it's going to be position relative and top one if we save this and refresh now it looks much better okay let's now start working on the sections and let's open tail grids and i want to copy and paste a few sections from here so let's scroll down below um well let's click on about so this is the first section i want to have maybe we're going to first have a hero section and then other sections so but this is the about section which i definitely want to include i also have images prepared uh where is the hero section headers and heroes so this is the hero section i want to include okay then what we have features and services i don't want any features and services i want definitely portfolio section this one i want call to action section so i'm going to use this one as well and i think that's basically all so we're going to have hero section call to actions section about portfolio and some videos so that's that's also good so i'm going to use this individual video and create new unique section so all the source code oh i'm using only three components don't be scared you can also use those components if you want i already have them slightly modified so i'm not gonna come right here and click uh copy and paste although you can do this thing but i'm going to actually uh write those talon css classes all right let's start from scratch and i'm going to generate sections so i'm going to generate components so php artisan make component and first let's start with hero well when you generate components you can generate class component or those are anonymous components view only components okay in most cases i need only view on the components there are two sections which i want to be class paste one is the videos and second is the portfolio items because i'm going to pass those elements video elements and portfolio items from the component itself so i'm going to simply generate right now only anonymous components php artisan make component hero and dash view but i want that to be inside a home folder so i want to create a component directory structure which can be scalable which can be useful for any kind of project okay so i'm going to organize my sections inside a folder in this case home and that's going to be the page so later if i have a blog added in this we're going to have different folders for each section but i'm gonna organize right now all of them into a home folder so we have hero we're gonna have um about section i'm gonna use the call to this uh call to action is a learn php section so learn php we're going to have a portfolio section and we're gonna have well actually the portfolio should not be view only it should be normal component so i'm gonna delete the portfolio and regenerate it without the fuel flag and i'm going to generate now video tutorials section and that's going to be also class based component all right i think that's all we have i think five sections and the last one is contact section and completely forget that so we need contact and that should be also uh view only component and for the contact section we can use if we go in the forms we cannot use this one i'm sure there is a contact section somewhere contacts and this is it so i'm going to use the following section for contact so all of them is free and you can use also let's start step by step and i'm going to start with the hero section let's create a wrapper element for everything inside there we're going to create container and then add d with a flex and then another d with full width and then we're going to have the hero content d inside there i'm going to create h1 with the text with the welcome text basically the very first text the very first text what the other users are gonna see and down below we're gonna have a paragraph with some additional information about me and down below we're gonna have a link to my youtube channel and down below i'm gonna also create a button which gonna be linked to my projects so right here we are using x button link component and that component doesn't exist yet but we're gonna create that soon down below i'm gonna create another div with the class clients and follow me on social media that is basically copied from the tail grids from the hero section from here and then this uh this basically was changed into social icons so i decided to change this into social icons and then right here we have these x social icons down below we're going to have the div for the right side for this section uh we're going to have a couple of nested d elements then we're going to have image and we're going to have this span with svg for those circles all right i think that's it right here now let's actually use this hero blade in the welcome blade php but actually i'm going to change this welcome blade php into probably home homeblade.php and let's open roads so we are let's go in the config where is oops roads web php and instead of welcome i'm going to change this into home and if we just open home blade php we can change this into x home dot hero okay that's the section i want to use let's save this and refresh and we have an error because the button link component doesn't exist now i'm going to create this component and i'm going to actually specify right here um i think i think we made a mistake so when we generated these video tutorials we made a mistake and before i generate this um button link component let me actually fix this mistake so we gave it name um with the dashes and then probably if we have a look in the components home this video tutorials php is generated with dashes and inside there the class name also is generated with dashes which is obviously wrong so i delete this portfolio and video tutorials or we can actually undo this and i can manually fix so this should be uppercase portfolio and that should be pascal case video tutorials okay or when you generate those components you should always give it uppercase so uppercase home slash video tutorials so i'm not going to run this because it's going to complain that video tutorials blade php file already exists so i'm going to leave this as it is and i'm going to change the name of the files as well that should be video tutorials and that should be uppercase p portfolio and i'm going to change the namespace as well to the uppercase home however we need to change the namespace here and here as well okay pagevisor automatically changed that for me all right now let's actually generate a component button that should be a class based component so button link make a make component button link okay awesome so here is button link component and we're going to pass a couple of things right here first of all we're going to accept href public string href um let's actually open button link blade as well and this should be a and inside the href we're gonna output um href and we need target as well to be let's output target and open this button link and we're going to use public string target targ target to be by default self okay we're doing this and then we can output the rest of the attributes using attributes and i think that's it or of course we can call attributes merge with href and target which is going to be the default thing so we have different possibilities to do the same thing right here but the main thing is that this button link component will be a very reusable component in my website okay i'm going to have it in multiple places in a different variations different colors etc so i'm going to add a variant public property right here public string variant and it's going to be primary but i'm going to support other variants as well let me actually move this down and then right here i'm going to use the default classes okay let's move this down as well okay on attributes i'm going to call class and then right here we're going to have default classes as a default classes for every button link we're going to give the following classes so some paddings it's going to be rounded the font size border etc okay then based on the variant we're going to give additional classes like if the variant is outline primary we're going to give it a hover on hover it's going to be background should be primary border should be primary and text should be white on outline red we're going to give the on hover background should be red border should be red and etc so you get the idea so you can read these classes on red it's going to have border red with a background red text white we're going to have dark variant and that's basically it and we're going to have of course primary variant okay so we have those variants already and inside that button i'm going to of course output slot which is going to be the default slot now i save this and let's refresh the page and now this is how my section looks like my name is zura i am the code colleague i'm a developer with 10 plus years of experience i'm sharing blah blah blah i click on the youtube channel it's going to open in a new tab and this is the link button link which we just created my project so when i click on that it's it's not going to do anything right now basically it opens in a new tab which is not good it should basically scroll down to the project section which we haven't yet implemented okay if we go in the hero right here we have this button link we don't provide target blank right here but why does it have target blank no it doesn't it has target itself but should we target underscore self it's my bet underscore self okay refresh and clicking doesn't do anything at the moment let me actually copy and paste this hero image in our project so let's go in the public folder so right here under images so i'm going to actually copy and paste all my images so i have four of them so this is the me hero which i want to put on the hero section so we have this first one the second one and the third one and that will go in the about section but as far as we have this mean hero then we should see it right here and we do see that perfectly and the social icons uh that's reusable component which we use in the footer and in about me as well that's linked to the corresponding um social media channels and while we are here and watching my social media why don't you click the subscribe and notification button and follow me on social media i really appreciate your like if you if you enjoy this video if you learn at least the basic things your appreciation will be just like subscribe and share thanks a lot and let's move on in next section which will be about section let me actually close all these tabs i don't need them anymore and let's open about dot blade php and let's work right here okay i'm going to create div element with talon css classes and id about and when we click on the menu item right here and about to scroll down to the about section we have of course talent css classes and when it's about when we're using talon css we're gonna always have bunch of towel and css classes so we have um on dark mode the background should be slate 800 we're going to have padding top on a large screen even more padding and so on so you get the idea so if you are at least familiar with the basics of talent css you should be able to read what those classes are doing if you don't if you have zero experience of course it's going to be hard and probably you should have like zero experience what the am i talking about inside the section we're gonna have nested div elements container with the flex and the full width and another flex and another full width and then we're going to have a image that's going to be the very first image let's actually have a look into the about section from the tailwinds how this should look like about this is what we are doing okay and we have a dots right here as well which we're going to do if we have a look in the code we see a lot of um svg circle elements and that describes those dots we're going to extract them into a separate component because it's going to make our about section very large for no reason okay let's move on and then we're going to have a div element for the third image which is going to be this one and then we're going to have another development down below which will have an image too so this one okay next we're gonna create uh those dots it's about dots we don't have again this component but we're gonna create that down below we're gonna have additional d which describes the right side of the about section inside there we're going to have a bullock quote i wanted to put a single block quote white right there which describes my personal uh character so and i believe that everything is really achievable with hard work i really believe that from my experience um like i really wanted to achieve one certain thing for five years and i was doing the necessary thing for uh every day every week and finally i achieved that so everything is really achievable with hard work that's that's my blog quote and you should of course put your blog code whatever you want there of course then we're going to have some information about myself and there's going to be the title we're going to have a paragraph uh two paragraphs basically about me the first and the second and then i'm gonna again put a link to my youtube channel because um that's where i can um where i can share to anybody else so i share all my knowledge there so that's why i promote my youtube channel and if you find that useful you should uh like i really appreciate if you share it to others as well okay let's talk about this uh about dots so we definitely need to create this component in this case it's gonna be a view only anonymous component and i'm going to call this actually i already call that about dots dash dash view hit enter now let's let's open about dots blade and let's copy those dots from from here okay well actually let's have a look so after the image then it comes about dots so i think you should take this one the whole span element scroll down below there are a lot of dots okay i copied this pan element go in about dots replace everything format the code it's not actually well formatted but okay now let's have a look in the browser refresh well we don't see anything because we don't use that let's open homeblade.php and duplicate this and x home about save and refresh and here is about section this is the block quote everything is achievable with hard work about me and view my channel i think this looks good however i want to have something in between right here the hero section and the about me section so i'm going to put right here right there learn php which is going to be call to action so i'm going to create this one okay let's go in the page storm and we actually i think created this component so if we go in the resources views components home we have learn php right here okay so i'm gonna i'm going to put right here my learn php but i'm going to also create another component which is going to be reusable call to action component so that we can use any time we want okay so let's create a make component um well actually let's make this as a class-based component so let's call this call to action and we don't need this view hit the enter let's open the left side in the component section we created this a call to action and let's now implement this let's have a look a close look how this looks like there are two svg elements look at this in the background so this circle and right here is there's another circle and then text and buttons let's collapse the left side and right here we're going to create a section wrapper for everything else then we're going to have d element with the background primary and position relative slightly rounded and with the paddings and inside there we're going to have container with the elements and then i'm going to output title right here and then we're going to have another div elements and we're going to output default slot information right here and down below we're going to have a wrapper for those two svg elements the first one and here's the second one and we're gonna use this in the learn php okay let's clean up everything and right here we start using this call to action component and inside the call to action component we output two variables title and slot and we're going to create two slots right here one will be named slot and second will will be default slot so x slot title and whatever we put inside there it's going to be output it right here and okay then we write here h4 tag check my php developer roadmap and another h2 which will be start learning a php for free and then down below we're going to have buttons and that those buttons will be in the default slot and output right here one button will be to view my channel and second will be to watch on youtube okay so we save this and let's actually use this in the homeblade php so in between i'm going to write x learn php save that and refresh it and we have an error x learn php doesn't exist why doesn't exist because it should come from home home.learn.php doesn't exist well learn php doesn't exist but it should be home learn php refresh and here's our section okay view my channel i think the text should be different it should be view on github because that links to a github refresh view on github and watching youtube so this is my this is a promotion of my php developer roadmap and you can start learning php4 free of course you can check it on github in which you will find basically all the resources i recommend and the path and watch on youtube uh where i define what path you want to follow which what what steps you want to follow basically to become a php developer okay this one is really good now we have a good separation between the about section hero section and about section all right the next section we're gonna work is portfolio section let's have a look in the tile wind halloween grids tail grids so we have these portfolios and i'm going to grab that so it has a couple of items it's going to also apply some filtering using alpine js which is pretty interesting so let's let's implement this okay let's open uh portfolio blade php clean up uh everything right here we're going to also open portfolio php and we're going to define portfolio items right here i'm going to define two variables right here public array items and the second one will be tabs okay we do have items right here six item but they are spread into four categories branding design marketing and development so we need array of tabs and we need array of items that's why i define those two areas right here now let's go in the portfolio blade all right let's start creating portfolio section and first we define the section we give id we give classes and in the x data i'm going to define a couple of properties selected tab which by default is all we're going to have active classes and we're going to have inactive classes so those classes will be added to the corresponding tab elements then down below we create container with nested div elements everything should be centered and then we create h2 my recent projects that's going to be title of the section and subtitle will be you learn by building mo something basically uh that's that's what i think personally so i think that ulearn or kid is learning by doing certain things by breaking down by building and we developers when we grow we learn as we build more and more and that's what i'm thinking okay the next will be a section for the portfolio items itself and right here no first we're going to have tabs and right here we're going to have the very first tab which will be all projects tab and of course we're going to give talent css classes and then we're going to start iterating the rest of the tabs okay and we need to declare those tabs right here and by when we start iterating then we have each tab and if the whenever the tab is clicked the selected tab becomes this tab and we also add a conditional classes if the tab is active we add active classes if it's not we add inactive classes and we also give it default classes right here okay and down below we have a main section for our portfolio items and right here we iterate over my items and pass the attributes to x portfolio item we give it a title we give it category we give it image and the github link and this portfolio item does not exist yet but we're going to create that all right this file is ready let's go in the portfolio php and define items right here in the constructor these items equals an array and let's start defining each individual portfolio item i'm going to put the items which the portfolio items the projects which i have built and in my opinion will be useful for others to view on github because all of them are open source or watch on youtube you should put the projects you're proud of and you want the decision makers of the companies to have a look so that they can hire you if you're looking for a job okay here are my portfolio items i'm going to give each item category laravel talent system view 3 are the categories of the first item the title the image url and the github link okay and let's define other items this is my second my third fourth and fifth and the last one sixth one and those are my tabs sorry those are my items and now i want to define tabs so the tabs basically should be the unique list of categories okay i basically want to take the categories of all items where i have right here combine them into a single array and then take unique values because e2 is twice and the other categories are also twice so what i do i do the exact same thing right here so these tabs equals these items but i want to first take the categories from those items and i'm going to use array helper plug method which will take the categories in this case we give the second argument category so which will take the categories and create an array of areas of categories okay then i'm going to apply arrayflatten which will take that array of arrays and convert into a single dimensional array and in this case we're going to have a single dimensional array but the elements will be twice there so if i just save this and go in the browser and refresh let's see uh where is the portfolio we don't use that okay let's try to use and see what's the result homeblade.php and x home portfolio save and refresh we have an error portfolio item does not exist um all right let's first create that i want to show you um the process of this thing okay so php artisan make component portfolio item hit enter on that we don't need to put anything right there it can be empty at the moment refresh it and down below you see we have all those tabs okay if we just uh revert this into array plot then we're going to have area of arrays and we're going to have problem right here okay but in this case we have a plain array of categories but because we have repeated values we simply want to take a unique value so i'm going to call array unique on that and this is the final thing so we have the following categories laravel talon css view 3 e2 bootstrap php and view js perfect now i think we can work on the portfolio item which we just created portfolio item blade php okay we create a div element for everything then we're going to create x data categories so basically from the portfolio we pass the categories and that one is an array okay this is what is passed in the portfolio item so we call json encode that which converts this into a json and then we initialize categories using alpine jsx data attributes okay now categories is alpine js categories area then right here we add conditionally we add classes if the selected tab is all or categories include selected tab we give it a block otherwise hidden so that's basically important to hide and show like it is implemented right here to hide and show certain items okay if the given categories includes the selected category then we give it a block or if the selected type is all okay that's pretty straightforward let's move and now we're going to create a div element to wrap the image we're going to also wrap the anchor tag around the image so that whenever you click an image it's going to open the github link here is our image down below we're going to have a description title we're going to have categories separated by comma and we're going to have title and we're going to have the button the button will do the same thing when we're clicking on the image itself okay so we save that and refresh that and we have in our undefined variable categories that should not be undefined unless we missed one thing so let's open portfolio item a thing we missed right here so here we're gonna have public string title public string or public area categories we're gonna have public string image and public string github link okay we save that and refresh that and an original dependency resolving string title all right maybe that's the case of the cache the problem of the cache so php artisan view clear refresh and i was right so that laravel cache is kind of annoying very often okay all right let's zoom out slightly um definitely the items don't look nice they don't look as i expected the images of are of course missing so let's actually copy and paste those images let's go in the public image and paste we have six images basically so let's refresh okay and here are our images but they are huge huge so i think we missed some css classes let's go in the portfolio item right here and understand what is missing uh that's actually good that it happened so the reason is that uh the mpn npm run watch is not running so i stopped it between recording different sections and this is stopped and that's the reason so talon css watches what classes you have given to html elements and then generates css based on that and right now because it doesn't watch that's why it didn't uh include a couple of css uh classes in the final output okay and that's why we we see that huge huge images so simply if we just run npm run watch it's going to start watching you can run npm run dev as well but it's compiled successfully and if we refresh the page now this is how our portfolio items look like okay which is pretty cool so if we click on them it's going to open github links for each individual portfolio item pretty cool all right let's zoom out okay i think we are done right here let's test the filtering okay filtering works perfectly as well awesome the next section is the video items section okay let's close those tabs and we actually have generated the video items let's just open a video tutorials played and we're going to work right here we will need video tutorials php to define items right here and we need to declare video tutorial item as well so for this let's go inside the container shell so vendor bean basically when you notice right here your computer name and your project folder it indicates you that you are not in the container terminal so we are right now in the ubuntu terminal so vendor bin sale shell and we are right now in the container shell and we can run php artisan make component video tutorial item hit enter on that and let's open now video tutorial item and we need blade file as well idle tutorial item blade awesome let's start defining video tutorials right here i'm going to define a public property right here public array video tutorials and then down below we're going to assign so each video tutorial we're going to have video id title and description and based on the video idea i'm going to generate a link for the youtube okay let's open a video tutorial item and we're going to define right here public string video id public string title and public string description okay those variables will be available in the video tutorial item let's actually define this item first each individual video item should look like like it is on the tile grid so if we have a look in the videos so this is how each individual item should look like so we have this play button we have the dots uh we have the uh this spinning animation but we need to add a few more elements like we need to specify title and description a short very short description of the video as well okay so let's go in the portfolio item and first define div elements with the w full and background white and this one will have a different width based on different screen size on very large we're going to show three items on medium screens we're going to show two items on a small screen we're going to show one item inside there we're going to have video section and then video content and this video content will be for title and description inside that video section we're going to have this section which basically will hold the alpine js data right there okay this alpine js data will have video open whether the current item video is open or not by default it's of course false what's the actual video url and based on the video idea we generate this following uh video url and we're gonna have the current iframe url which by default is false so whenever someone clicks on the video we're gonna set this url based on this video url and also we set the video open true which displays the pop-up the pop-up is by the way displayed right here as well so when you click on the item it opens and when anywhere outside is clicked the video is basically closed okay but right here on this example uh when we click outside the video still continues playing so if you have a look it's a 152 click outside wait a couple of seconds click and then it continues this is something we don't want okay we don't want the video to be played in the background so we simply need to uh stop the video so that's what what we're going to do next we're going to have a div elements for the thumbnail of the video and we're going to generate the thumbnail based on the video id so if you know video id you can easily get the thumbnail and that's i dot yi ytimg.com uh vi and the video idea original jpg so that's that's what i'm guessing what i'm getting uh we're going to give some talent css classes with full hateful object cover to the image down below we're going to have a video play section which will have position absolute so this will be for the play button which we need to put in the center okay this is what we are doing right here and we're going to also wrap everything in the anchor tag and give this one classes to put them put it in the center inside there and whenever this item this is important whenever this play video is clicked we set the video open to be true in the url to be video url okay this url then will be used inside the iframe okay we're gonna have this span which will be for this animate uh spin or ping how it's called it's i think animate ping and then we're gonna have the play icon the svg play icon down below in the video section we're gonna have the div which will be displayed only if a video open is true and it will be displayed using animation transition it will have position fixed top left full width height will be also full and inside there we're going to have a iframe which will have the source bound from the url okay that right here we use alpine js binding possibility and whenever outside of this development somewhere outside is clicked we set the video open to be false but we remove reset the url to be an empty so basically iframe will not have url when outside is clicked and just like that it's simply uh stop stop playing the video will stop the playing okay then down below we're gonna have another button which will be the close button for the video which will set the video open to the false and then we're gonna have this close svg icon right there so and in the video content we're gonna have div element which will have the section of 324 i hate of 320 pixel and inside there we're going gonna have h3 uh it will have the link to the actual video which will open on the youtube in uh target blank and down below this h3 we're gonna have a description okay that's it right here and let's actually now go in the video tutorials and implement the section and then we will be able to see okay we create the main section for video tutorials inside there we created four nested developments again uh like i don't really like that many nesting html elements but i copied and pasted this from the tail grids and because it was there like this i simply copied and pasted i generally when i write from scratch i try to have as less nesting as possible but i'm not expert design guy so i just use existing designs as they are so right here we put video tutorials title and put a subtitle and down below we start iterating over our video tutorials and we render each individual video tutorial item passing video id title and description and down below we're going to put a button in the center that's going to be view all tutorials okay i think that's it right here let's actually save this and have a look so we refresh and and and where our video tutorials they are not here because we don't use home blade x home video tutorials save and refresh okay now here is our video tutorial section we have those videos pretty nice view old tutorials when we click on this it opens a youtube channel we have the title so when we click it opens each individual videos which is pretty cool and when we click on these it opens the video but it doesn't auto-play let's have a look in the video tutorial item so when we define the url we specified autoplay to be one but the restriction from the browser is that you cannot auto play if you don't have your player muted so if we set our player muted then autoplay will work but i don't want to start my video tutorials muted because the whole idea is to listen them so that's why i don't uh this this outer play but by the way is probably extra so we don't need them so when you click simply opens click on them and then it starts playing okay and it's not actually muted and when you click outside like this is 1930 when you click outside the video doesn't play and when you click there it starts from scratch okay it doesn't continue playing in the background all right that's for the video tutorial section i think the last section we have to do is the context contact section including email sending now let's work on the contact section i'm going to close everything and let's actually open contact blade php and clean up everything right here for the contact section we're gonna use the following element it should be somewhere right here contacts click on this okay on the left side we're going to have um like a small text and maybe my email and on the right side we're going to have a name email and i don't need phone i'm going to remove that and message so you can have all kind of information you want but i generally don't even don't want the contact form on my profile so i maybe even comment out when i launch my website on production but i definitely wanted to include this in the video because contact form is a very essential in when you are doing your portfolio or single page uh corporate website or whatever so working with email sending emails in laravel is absolutely important if you want to have a portfolio so let's do this let's define the main section for contact with backgrounds and with paddings and some overflow and everything uh regarding css next we're going to define nested containers inside there we're going to define the title for business and queries let's actually immediately include this so that we can have a look and test this so refresh and okay for business inquiries let's continue and then we're going to define a paragraph with some text why people should reach you why should people contact you then we're going to have a flex element with flex and inside there we're going to display the svg icon which will be the following icon or the following icon whatever whichever you want in this case in my case i'm going to only have email so i will have envelope icon and down below i'm going to put this h4 email address will be my email address okay save this and refresh and this is how it looks like in my case okay we continue and down below we create now section for the right side for the contact form area we define the form the action will be contact submit method will be post and we define the x data i'm going to do the forum submission using ajax and i'm going to use alpine js for sending uh the data for using the two-way binding on the form inputs also displaying errors okay i'm going to use alpine.js for that so i define a form data inside this form we have this csrf which i think we don't need but let's have it and we can delete it later if we don't need that because we're we're going to do the csr validation sort of passing token slightly differently okay then we're going to have inputs right here okay those are the components which don't exist forms input but we're going to create that we're going to have name email and text area which will be message and down below we're going to have a button x button component this button or component also doesn't exist and we're going to create that soon so if we just refresh right now we're going to see error because forms input component doesn't exist okay let's continue down below we're going to have a element that's the design element um this one this blue circle uh half circle quarter circle something okay that's the design element what do we have down below and down below we're gonna have dots uh dots top and bottom so i created those components because one is for this one top and the bottom is for this one if we go in the code we see down below a lot of circles and i didn't want the contact form to be very large just because of circles okay so i created uh those components okay now let's create those components like contact dots and forms text area x button and so on so let's bring up the terminal and we're going to run php artisan make component let's start from the bottom so it's going to be contact because though those are very easy so contact dots top and they should be view only contact dot stop that's right second will be contact.python we're going to create now without with class based components there's going to be forms slash input forms slash text area and we're going to have a normal class based button component as well view already exists did we create it if we go in the resources views components we do have button component but that's empty i think we created uh this one when we created button link okay that's good we do have those now let's actually grab those elements so we have two sections one for top second for bottom let's grab them let's open contact dots top and here are copied svg elements and let's open second one contact dots bottom and paste them right here we do have all the components created so let's reload the page we should not see any errors that's right scroll down below and we do have those elements like dots button dots on the right side which is pretty cool now let's implement those inputs let's open uh let's actually first implement button button blade php which basically will be equivalent to link pattern link but with minor differences okay this should be button this should not have href it should not have target but it can have all those things and if we open right now button php uh we just need to have right here what do we need i think the only thing we need is variant okay public string variant let's save this and reload the page okay variant okay i think this is due to cache so let's run php artisan view clear reload no i think this is not because of public string variant um [Music] strange why do we get that enable an original dependency resolving do we pass the variant no we don't pass that's the thing that's why we need right here default value primary save and refresh okay now down below we have this send message button okay let's focus on the inputs forms slash input blade php and the second one will be forms slash text area blade php and we also need to open forms slash input class and forms slash text area class let's start with the input okay if we have a look in the uh i'll tile grids and have a look what are how how the inputs look like so each input has a type placeholder and class type placeholder class and the text area has of course rows placeholder in class so we don't actually need to define any attributes explicitly in the component class at the moment so that we can simply go in this input and if we just copy this okay and slightly modify okay we just format that and then what we need to do is uh we simply output attributes class and we specify right here default classes so those are the default classes we put them right there and the attributes class basically will output any additional attributes like type text or placeholder so if we just simply remove these everything i think that's what we need save that and refresh and we see those two inputs okay but i want to make this um nice on a like make this dark in a dark mode so i'm going to add additional classes okay for dark mode it should have bg slate 800 and on dark mode its text color should be gray 300 save this and refresh okay looks nice your email your name your email and let's focus on the text area let's think we have it opened here we have this and let me actually copy everything from here into text area this into text area and let's have a look so we have this which looks which looks nice so we have now form our form ready when we click on the send message it does the uh normal form submission but we want to change this and convert this into ajax form okay now let's go in the contact blade and now let's focus on the couple of other things so first of all looking at the x data on the form we need to add right here two variables errors and success message so when there is an error on the form submission like for example email is not valid email or name is required and user didn't provide that we're going to put all that in the errors object success message will be displayed whenever user successfully submitted the form okay next we're going to define submit form function which will accept an event right here first of all it's going to reset the success message and errors if they are set and we need to add this submit form on the form itself using x on which is the alpine alpine way to attach even handler on the submit x on submit and we also call the prevent uh this function will be called okay then we're going to call fetch and we're going to make a request on the following endpoint slash contact submit the method will be post and we pass body and that's going to be this form data scrolling down below we see that each form element has x model and the text model defines two-way data binding on the form data name or form data email okay and that's uh from the alpine js that's coming from the alpine okay and just like that the form data will contain name email and message next we need to pass the headers so we we need to indicate the backend that the content type of the request is application json we're going to also indicate that the request is made with xml http request that's going to that's going to play a key role how the response is returned from the back end so if we don't pass this x requested with and then if something is wrong the back end will trigger a redirect header but if we pass it that hey we are making requests using ajax then back end laravel will return the corresponding json okay and we also need to pass csrf token inside the header so we pass x csrf token and we need to take the meta with the name csrf token and use its content okay so for this we need to open up blade php and we don't have meta right here so we need to define that meta which will have name to be csrf token and content will be csrf token okay just like this okay go back in the contact so we pass this header and then we need to uh listen when the request is fetched then when the request is finished so we need to get the response if the response status code is 200 then we're good to go and we can return response json however if this status code is not 200 we're going to throw the response okay and we're going to add additional then which will be triggered if the response is 200 and right here we get the result json and we reset the form data and we show the success notification that thanks for your contact request i will get back to you shortly okay and down below we're going to have catch which will be executed the catch callback will be executed when uh the response status code is not 200 and if the status code is 422 we're gonna we know that we're going to have errors okay and result errors we're going to assign this into errors object and we also console.log the result down below we want to display the uh success message so if the success message exists we're going to display that with some padding and colors and the background will be green and the text will be white okay and now we need to handle validations as well okay so if the errors are returned then we know that something uh bad happened and the errors object basically right here will contain the key inside the errors object will be the field name the and the value will be array okay we can pause right here and just uh go back and implement the controller at the moment and then we can display the errors if something is going on okay now we're going to create php we're going to run php artisan make controller make controller and we're going to call this contact controller let's open now contact controller and create function submit okay we get of course request right here and i'm going to call request validate we have name and this needs to be required we have i think they switch to javascript we have email which needs to be also required and it must be also valid email address and we have message which needs to be required as well okay when this request validate happens we're going to get the validated data and if something bad is going on laravel will automatically return uh errors array we don't need to do anything right here but if code execution comes right here we can already send email okay we know that we're good to go and we can send email and we can return with some something you know success true whatever because the status code as far as the status code is 200 then uh the front end the alpine js knows that it's success okay we can return success true okay so we save this now we need to open web php and we need to add a road or contact submission wrote on post contact slash submit we're gonna use contact controller submit method okay now let's open the browser and refresh and let's open developer tools go in the network section uh let's zoom out slightly or move this on the right side okay let's do like this and let's actually click this send message immediately okay the request was made look at this and the response is uh response contains errors right there the email field is required message field is required name fields are required that's the case we need to handle okay we hit we submit to the empty form and we need to display errors right there so let's go in the contact again and whenever so we're sure that we get the whenever we get the errors the errors these errors will be populated okay so we need to do like this if errors contain inside their name then on input we add border red 500 and on focus we also add border rate 500 okay without this when we focus focus on the input it's going to turn into a primary color okay we do the same thing for others and we also need to display the error so if error's name exists we simply display the first error there okay there might be multiple errors we don't need to display all of them we simply display the first one and we do the same thing for email and display the first email error and for message okay and display the first error there save this and reload the page and hit the send button we don't see the error if we go in the console result is not defined i think that happens right here that should be res because right here we have res so we save this and refresh scroll down below go in the network clear hit right here and we have another error let's go in the console um okay can't read properties of undefined reading message so the problem is that errors is not defined okay let's observe what is the result right here so let's go in the info section and click and we get response okay so this is the response but we don't actually want if the response status is 222 then we need to get the response body and then we need to take errors from here so that was my mistake sorry for that so this is response and if the response status is 422 or in general we get const res equals response.json like this and then we get res errors right here so let's reload the page and click send message ah simply because the response json returns a promise so we can write a weight here we can make this asynchronous function save and refresh and hit this okay here we go so we get errors printed right here and the form inputs are also highlighted which is the more important thing is that we need to actually send an email right so if everything is okay if i fill up my form let's fill up certain things and hit send message the errors disappear we get this success notification thanks for your contact request i will get back to you shortly but the actual email is not of course sent okay this is something we need to take here all right let's now bring up the terminal and we need to generate a mailable class php artisan make mail and let's call this contact mail without space okay mail was created and you can find the mailable classes right here in the up mail contact mail and the purpose of this class is that it contains all the logic of email sending including the building the email itself okay we can accept some arguments in the constructor we can create public properties right there and those public properties will be available in the template a common practice is to create a template inside the email folder and let's call this contact so let's go in the resources views and inside views i'm going to create a folder called email and inside there i'm going to create a blade file contact blade php okay simply let's just put right there contact um contact form it's still like this okay but right here we need to define certain things so first of all in the constructor i'm going to define public string name public string email and public string message and then right here i'm going to set the subject of the following contact request should be contact mail from the codeholic.com so that's my website and i said the the subject will be contact mail from the codeholy.com and i'm going to set the reply to as well so reply to will be this this email whoever entered his email right there that's going to be reply to so whenever i reply from my email it should go to there let's go now in the contact controller and finalize the thing so we're going to use mail helper illuminate supports facemail facade and we're going to use two and in this case i'm going to specify the email to which i want to send an email okay i can set this to my email the codeholic at gmail.com okay that's my email and after this i'm going to call send method right there new and in the same we're going to pass mailable class in this case we pass contact mail and we pass the name email and message and all that comes from validated so validated name validated email and validated message okay so let's move this send down below but one tricky thing so i actually spent some time to figure out that i had this problem is that so one important thing is that right here we have we defined a message that wasn't actually a good idea because the message keyword is preserved in the contact email contact so if we open right here no if we open where is it so let's just open email slash contact message keyword message variable is preserved okay and it means something else if you want to know more about sending emails in laravel check out the mail section right here and you can find uh all the details including more information about the message so the message is automatically available in every uh blade file which is used to send an email and just like this you cannot uh you can use that so we sh we need to call this something else so let's go in the contact mail and maybe we can call this body okay and now open this email contact and define this okay so here's my template so you have contact request in h3 name and email and body so we output all that now let's go in the user interface and actually make a contact submission request uh however we need to test where the email uh will be sent so because we have our application start and up and running using docker and sale the there is a service for for that mail hog and mailhog will send emails that's a tool service for testing email sending and locally on local host port um 8 000 i think 25 um yeah there's the email hawk service running i'm going to allow notifications and any email sent right now from my laravel installation will be received right here so if we open env file and have a look in the um where's email host whenever the email host is mailhog then it comes right here okay so on production we need to change the email hosting to something google or whatever smtp we are using and then in this case it's gonna work but for now let's go and fill up the form i'm going to call this john john at example.com hello there and hit the send message okay i got the notification i got even a desktop notification and here is email on laravel contact mail from thecodeholic.com the sender in this case is laravel because that's the application name and we can change this if we go simply right here we can set the codeholic.com that's the application name but you have contact request name is john email is this and hello is there and we don't see reply to probably right there we don't see that but reply to will be used the join at example.com so whenever we get this when an actual email then we can easily reply now let's have a final look of our website so we have um starting from the header we have the hero section with social icons everything is linked to linked properly we have this some call to action section you should probably put right here whatever is more relevant and you want to highlight that section about me um pretty descriptive pretty straightforward we have the my recent projects or portfolio section we have the links to the projects on github we have we do video tutorials section we have finally contact section and everything is responsive so we can test this starting from a very screen size we can see that everything looks nice the buttons can be uh like we need probably a small margin right there and let's actually do this very quickly so let's search for this is learn php section okay we have two buttons right here and we need to give this one class we do have class so we need to give this one width of full margin button three okay refresh we have the full width button we need to give it also text center let's move this down okay view on github however this will not be good on a large screen size so we need to adjust this as well on a large screen size we need to have width to be with to be probably 64 pixel let's let's test this how it looks like no 64 no 64 is too small um it should be about giving auto without okay i think that's good and yeah that good that's good so we copy and put this right here oops refresh two buttons and on a small screen this is how it looks like okay let's scroll down below view my channel it can be on the full screen as well on small small screen down below videos let's open the video okay pretty nice and we have the contact four everything is really good really nice i think now we can start working to deploy this and final thing i missed uh we need to test how white mode looks like okay um just close your eyes i'm gonna switch this to white mode okay did you close okay let's have a look so this is how white mode looks like i think that's pretty nice as well the filtering works fine this is the context form looks pretty nice let's try to submit the contact form on white mode okay nice so everything works fine let's switch this back to dark mode okay you can open your eyes my current domain is managed by godaddy so i have purchased from godaddy and we have to change the dns settings so that it now points to the hosting provider we choose in this case i want to host my website on hostinger so i'm going to click on my domain which i want to manage then on the right side there's manage domain link i click on that and if you scroll down below we have right here dns as well so we can click right here or down below the domain has a manage dns button okay so let's click on this and here we have the dns records and down below we have name servers on my current website the codeholic.com is hosted on uh digitalocean let's see this so this is coming soon page which i i did like two years ago and since that i just couldn't find time to create website okay this is managed uh on digital ocean this is hosted on digital ocean which is by the way an amazing hosting platform i really like digitalocean it's very uh like convenient they have pretty good servers and it's cheap but i'm gonna host on hostinger because it's even easier so i'm gonna choose shared hosting and i don't have to manage my servers i don't have to manage my database anything so all is managed by the hostinger and it's also very cheap even cheaper uh if you just purchase one year plan it's even cheaper than it is on digitalocean and but biggest advantage is that i don't have to manage my apache and server and mysql and everything okay so i have simple ssh access on the hostinger and i can go go there and uh deploy some changes okay i'm going to click change right here enter my own name servers and i can delete this and we have to put hostinger name servers right here okay so here is my hostinger account and here are name servers for hostinger so this is the first one this is the second one and let's delete this one i'm gonna click save if you have already existing accounts then you can change uh name servers and point to whichever hosting provider you want to choose i'm using hostinger this video is not sponsored by hostinger i did couple of sponsored videos with them but this particular one is not sponsored i just like their services and just want to share this with you and i'm honestly hosting my service my website on the hostinger that's the fact okay i want to change this it's going to take a couple of uh seconds or minutes or even hours uh depending on depending on where is your location and certain things and after this when we refresh the website we basically don't see anything it's going to be broken but we're going to host it on the hostinger and then we will make it active again another good thing i like in hostinger is that they give you a very good email service on your custom domain so in this case i have possibility to when i move my website into hostinger i have possibility to take email hosting as well anything at the codeholic.com will be my email and i can use that so this is the hostinger welcome page if you want to uh follow with me and host your website on hostinger you have to first sign up it costs three dollar per it costs three dollar per month if you purchase it uh for one year subscription now you hit the getting started section you read all those things you go in the uh you can choose right here uh 48 month 24 month whichever you prefer but if you decide to go with the hustinger use the coupon code right here use the coupon code the codeholic and that's going to give you additional uh 10 percent discount so if you switch to 12 month you have to pay uh 33 uh totally for one year okay and that's that includes a custom domain name if you don't have a domain like i do have and i just redirect my domain into hostinger but if you don't have a domain and you want to have a domain then it gives you a domain name it gives you a ssl certificate it gives you a couple of other benefits and uh you have premium shared hosting for 12 months which is believe me it's very awesome so if you just decide to uh host on hostinger use the coupon code the code holic and you're gonna you're gonna get additional discount okay after several minutes the codeholic.com got offline because the dns was changed now we need to go in the hostinger uh control panel and we need to add right here a new website so i'm going to click on manage on premium shared hosting let's scroll down below and we need to find a website under domains so i'm going to click on this and i'm going to specify the domain name and that's going to be the codeholic.com the password which will be used for ftp we can leave this empty or click on this generate password we cannot actually leave this empty we need to generate you can type whatever you want or just hit the button and generate random password i'm going to add website and i'm going to save the password because that password can be used for ftp access later if i want let's go on second page the codeholic.com i'm going to click on manage on this domain now let's scroll down below and i want to access the file system using ssh scroll down below go in the ssh access and here is my putty access credentials and here is the ssh cli comment using which i'm able to access it i can use puti or any ssh client to easily access my server so just make sure that ssh access is actually activated and your public key is added right here okay if you just registered on hostinger and you want to access using ssh you have to add your public keys we need to download putty which comes with a put again so let's just open uti again and right here you need to click the generate button and move your mouse randomly which will generate public private keys based on your randomness and then you can save public keys and save your private keys under dot ssh folder in your home directory i do have those already saved so make sure you save them if you are doing this a very first time your public keys and your private keys okay again save public key and you need to call this idrsa.pub and the private one will be idrsa.ppk okay now let's close this and i'm going to open now idrisa.pub so for this you can simply go to your home directory under ssh folder and right click on idrsa.pop and open this with a vs code okay and this is it so we can copy this and put this on your hostinger ssh public key section i think i already have this edit right here so i'm not going to do this but if you're doing this very first time if you don't know how to generate your public private keys just follow the instructions what i showed to you now i will be able to access my server using command line let's let's click right here and open putty which is a client to access your ssh client to access your servers right here we need to specify the server host name or ip and this is the ip i'm going to put this right here the port is this one so we need to put port right here and we have the username as well so i'm going to copy the username so i'm i can give it a name and this is the codeholic.com and i'm going to click save right here and then go in the connection data and under auto login username i can put this username okay and we need to go in the ssh section under um under auth and right here i need to choose from my home directory idrsa.ppk so i'm going to open this now we need to go in the session and click save again which will save your auth private key as well as connection data username if we go in the session right now and click open it's going to open ssh connection into our server okay so let me actually collapse this and have a look so we need to now clone our project and install this first of all let's go in the file manager and have a look so if we just type the codeholic.com we don't get anything we have the ssa ssl error because the ssl certificate is not installed on hostinger however if we just open this in incognito the codeholic.com without https okay this is what we get okay your account has been created and this indicates that we have successfully connected our website to hostinger we don't have ssl which is fine for now we're gonna we can add this later but as for the website itself it's uh already connected okay we need to go in the file manager the code dot com and in the public html right here we see this default php which is the content rendered right here okay we don't need that default php we need to do it slightly differently okay what i'm going to do now open putty again and type ls ls-la to see in which folder i am and right now i am in the root folder right here where i i see only public html all the other files are basically hidden uh for me okay now i want to clone my project right here so let's check in which folder i am i'm in the root folder and i need to clone my project under domains okay so let's go in the domains and see what domains i have there i'm managing multiple domains and i want to go inside the codeholic.com cd the codeholic.com ls and right here i see public html so i'm going to clone my project right here in this co the codeholic.com i'm going to copy my git repository https url and i'm going to actually remove this public html so i can remove this from here as well so click on delete click on delete i think i don't have permission to delete that okay i can do this from here so rm-rf public html okay it was deleted now the codeholic.com if i refresh it it's gonna go offline okay not found that's fine now i'm in the the code folder i'm going to run git clone and the url and i'm going to specify dot which indicates that i want to clone this project in the current directory hit enter it's going to take some time okay it was very fast and now i have all the projects right here so if i click refresh i see all the projects right here and the thing is that i need to have right here public html and i don't don't have that public html that should be the web accessible uh folder okay i'm gonna do the following i'm gonna create symbolic link ln dash s uh public should be linked into public underscore html okay and if i refresh this right now i see that public has a symbolic link to public so that's actually wrong shown in the hostinger file manager if i type ls dash la i see public html there is public html which is simply click link on public now i need to run composer install to install all my laravel dependencies if you are running this very first time on your hostinger it's going to take some time it has to download all the dependencies as soon as this is ready we need to continue okay composer install was successfully run if we just try to have a look in the browser we should see a couple of errors it's not going to work because we have not yet successfully configured let's have a look the first thing we need to do let's enlarge this we need to create eno dot en file so i'm going to copy en example into dot en and now let's open en and adjust few things first of all the application name is laravel and i'm going to change this into the codeholic.com the environment should be production up key we need to generate that up key we can set the debug into false but let's leave this if there is some error so that we can easily fix up url will be the codeholic.com uh for log channel and everything else we can leave this for mysql i don't really care because at the moment i don't use mysql so which is fine down below we have a couple of other options we will need to uh configure mailer settings mailer host and port and everything but let's leave this for now and make the application first running so i save this reload no encryption key is set which is fine we're going to run php artisan key generate dash dash and si okay the key was set successfully refresh the page and here's our website on the codeholic.com so we have our website hosted already in a minute in a couple of minutes which works fine uh linking to any social media and anything like of course the contact form will not work yet because we haven't provided correct smtp credentials but everything else everything else should work all right let's now take care of smtp credentials so i'm going to go in the hostinger and let's click on the home page and down below i have this email section and i can configure all my um email hostings from here so if you um if you just registered in hostinger and just took a new domain uh you're gonna have as i mentioned hosting and um ssl and you're gonna have also email hosting so you can easily take your email on hostinger let's go on the second page right here and here's the codeholic.com setup not finished i'm gonna click on this and now configure smtp credentials so here i have two options to choose the business email which is one dollar per month or i can have free mail so because i migrated my domain from another domain provider that's why i have to choose business email i have to pay if i want to choose business email but if you just purchased uh the hostinger shared hosting services you probably will have business email there i'm going to select the free plan for now and i just need to configure that okay i can choose zura at the codeholic.com and let's automatically generate password i'm going to copy that password recovery email address i'm going to specify my email address right here i'm going to click create new account and now we have to verify our domain ownership okay that's something we must do generally if we want to connect email hosting to our domain so let's click this verify domain button i think we don't have anything else let's click on verify domain and what we need to do is that we need to add these mx records to our hosting okay because my hosting my domain is now managed on hostinger i can do this from the hostinger panel okay i'm going to open this in a new tab and let's click on websites and i'm going to click on the codeholic.com and let's search for emails no we need to go to dns section uh subdomains let's search for dns okay where's it okay dns zone editor this is what we're looking for and right here we have a couple of dns records but what we need to do is to add these amix records mx1 titan email so let's click on let's choose the type amex the name will be this one mail server mx1 titan we edit first amex mx2 titan we added the second and since after we did that we need to go in the hosting again let's go back or right here we basically have a couple of options for domain verifications one is for mx records second is for takes records okay delete other existing amex records we don't have i think any amex records no we do have mx1 hostinger.com let's leave those and have a look and after this we need to click verify my domain let's have a look it's going to tell us if it's successfully verified or not now they are not verified let's do the second step access your domain's dns settings and the following takes recorded we need to add the text record as well so let me copy this come right here and add takes record with this text value okay we added this text record somewhere here here we have that now let's click verify my domain again okay for text record it was verified however it's not verified for mx records and the possible reason might be that we have other amix records for hostinger so let's delete that amex hostinger this one and this one as well and we only have titan emails left mx records perfect now let's go on the second tab and verify my domain okay now text record is unverified it's weird so where's the text record here it is so let's reload the page and have a look so we have takes records let's search for this one we have successfully added okay let's click this verify once again now both are unverified i think it needs some time so dns changes can take up to 24 hours to reflect that's totally true it generally takes much less but we need to wait so when you are transferring your domain it generally needs some time especially if you are making some changes in the dns so let's wait and i will check it later i think we didn't do it pretty correctly so we didn't specify priorities at all so for mx1 the priority should be 10 for mx2 priority should be 20. so let's go in the dns and find the mx1 and for mx1 the priority should be 10 for mx2 we should change the priority to be 20 and there it is this should be 20 and we also need to set the ttl to be 3600 so let's change 3600 and the priority should be 20. let's update this and let's update the ttl for mx1 as well it was automatically updated let's reload the page okay for mx1 and mx2 ttls are correct priorities are correct let's check for text tx record what is the ttl uh the details is not correct let's change this into 3600 and let's now click verify okay that was the case so now both was successfully verified and my email the codeholic.com is now active all right how i can test this let's go in the email section and i need to get first smtp credentials so click on this because i'm going to use that for email sending we have email accounts i do have a possibility to check my inbox right here here it is access webmail just click on that and that's going to give me access to my webmail i need to use the password which was generated when i created that email i'm going to put the password right here and click on login confirm the recovery email and voila i was able to access my email so i do have now my custom email addresses zura the codeholic.com which is pretty cool okay i can do other things like to finish my setup i don't actually care this at the moment what i care is that to use the smtp credentials i can turn on the notifications okay but um i want to set up i want to take cred smtp credentials to use that so let's search for where are those smtp credentials it should not be here in my opinion it should be somewhere right here okay it's not here let's let's check what what do we have here okay email accounts internal forwarding catch up catch all emails import email data domain verification get mobile application custom day key im configure desktop up upgrade plan let's click on configure desktop up maybe it can give us some smtp credentials crts so here we have something configured via imap and via pop3 okay this is something i'm going to use right now so let's go in the terminal and clear up everything everything and i'm going to open dot en file and if we go in the mailing section um mail mailer will be smtp uh let me actually paste password right here which is the password for zura the codelike.com i'm going to blur this and the username needs to be zura at the codeholic.com let's specify the port that should be 587 is for the host the host will be smtp titan email that's going to be the outgoing server so we have host we have port we have username and password for the encryption we need to specify start tls and we need to test this everything okay this is the start dls and from email address in this case will be zura at the codeholic.com and mailer from up will be the application name okay let me actually save this and we need to test email sending if that works or not so let's go on the website and go in the contact section john email will be john example.com i should receive my email on the codeholicgmail.com because we left that as hard-coded in our code okay lorem ipsum so let's click send message and we got success notification which is cool now let me access my gmail okay here i got email in spam so that was received in spam because simply similar messages were identified as spam the email template is not well formatted it might cause the problems but you get and i'm going to report that this is not spam so that's i need to have this in my inbox and here it is from the codeholic.com i received a request that john example.com has the following message lorem ipsum which is awesome so we have successfully deployed our application uh we have also successfully implemented we have successfully taken custom email and the only thing which is missing right here is ssl to set up the ssl we need to do two things first let's go to the hostinger age panel dashboard and click the manage button right here and let's change the domain into the codeholic.com then i'm going to search right here dns we need to update uh dns records right here and the second thing we need is ssl i'm gonna open this in a new tab we need to have both open right here so we need to generate our ssl certificates and we need to update dns records as well if we go in the ssl we have two options we can purchase ssl for our domain or we can import a pre-generated existing ssl certificates but in this case if we're going to import we have to generate somewhere for our domain if we want to purchase we have to pay about 12 bucks and let's say that's a lifetime price for the certificate i believe it's a lifetime generally certificates cost per year but i think hostinger offers you a lifetime anyways i don't want to purchase new ssl so we want to generate free ssl certificate and import it right here so for us relevant section will be second tab which is import ssl and right here we have two text area fields to require text stereo files one is for crt and second is for key so we need to generate those and put them right here to generate ssl certificates we need to use the following package i'm going to put link in the video description let's scroll down below and find the installation section and on that installation section we need to download and unzip the latest archive and here i downloaded and unzipped and now i'm going to open cmd and i'm going to navigate to the path where this exit file exists and then we're going to run certain comments let's scroll down below in the documentation and we need to find quick start on windows section and i'm going to copy the following command and we need to modify a couple of things i'm going to change email at thecodeholigategmail.com i'm going to change the file names and i'm going to name it the codeholic.comcsr the codeholy.com.key and crt will be the codaholic.comcrt and i'm going to of course specify domains i'm going to generate the ssl certificates for two domains the codeholic.com and www.thekotolic.com and i'm going to provide one additional flag right here which gonna be which is in the documentation let's search for dns and it's handle as dns so this will give us dns records to update so i'm going to specify right here dash dash handle as dns and hit enter it's going to take a couple of seconds as you can see it generated new csr for domains and it also saved csr into the codelike.com csr and the key was saved in the codaholic.com and right here it mentions that the challenge for the codeholic.com requires the following dns records to be updated and it basically gave us the dns record let's say a text type dns record which has host and the value now we're going to update that in the hosting garage panel let's go in the age panel and i'm going to change the type into txt and i'm going to provide the value as well as the host into the name i'm going to change ttl into 1800 and a hit add record okay the dns record was added and right here it mentions that we need to wait for the dns to update by checking with the following comment nslookup i'm going to open new cmd terminal and paste that nslookup command and hit enter so right here we see record which proves that dns our recorded in dns was successfully saved and we can hit enter on the csr generation screen and here it requires to add the following dns records for second domain which is www.decodaholic.com let's go in the dns zone and i'm going to change the type into txt i'm going to set the ttl into 60 seconds i'm going to set the value as well as the name and hit add record that was successfully added however when i run nslookup into a new command prompt for www.cod.com it tells me that it didn't find that particular txt type dns records on that domain i run nslookup couple of times but it was always giving me the same output so finally i decided to hit enter on certificate generation screen and it worked so certificates for both the colonic.com and www were successfully generated and now we can delete those txt records edit in our dns and let's encrypt tells us to enjoy our certificates now let's open the folder in which the exa file locates and right here we see four new files created but we are interested in crt and key files let's go in the import ssl section on hostinger and right here we have two required text areas for crt and key so let's open newly generated crt file using any editor you want i'm going to open with vs code and i'm going to copy everything and paste into hostinger crt section next i'm going to open key file i'm going to copy again everything and put in the key text area and down below i'm going to click install ssl section ssl is successfully installed and we can already check that on website also hostinger automatically forced ssl on my domain so whenever you access with http you're going to be redirected to https so i click on the codeholic.com with ssl and it simply works like a charm according to the output when we generated our certificates we can now delete dns records so let's go in the dns zone and delete both the txt records we just added now if we go in the certificate section we see that uh the certificate for domain the codeholic.com is active the certificate expired date basically is 90 days from now on and we just need to set a reminder that we don't forget that in 90 days we have to regenerate those certificates let's go on a github package which turns out to be a very cool package and i'm going to hit the star button right here to support this package now let's go in the age panel and i'm going to open file manager for the codeholic.com and i'm going to open an edit dot en file whenever we created that and we configured in the app url we wrote there http the codeholic.com but now we have ssl installed so right here on line 5 we're going to change http into https and i'm going to save this now just to make sure that everything works fine let's test the contact form let's fill up with name with email some test message and i'm going to hit send message button and let me check my gmail mailbox and right here i have mail received contact mail from thecodeholic.com all right guys that's it for this video and thanks for watching if you like the video make sure you hit the like button if you are new to my channel consider subscribing and enable notifications if you have any questions regarding video or regarding anything about me you can let me know in the comment section down below also please let me know in the comments if you really like the video because positive comments also help my youtube videos to be promoted by youtube's algorithm alright thanks for watching and see you in the next time you

Channel: The Codeholic

Views: 104,432

Keywords: TheCodeholic, laravel full project, laravel full stack, Laravel Full Stack App, Laravel 9 full stack app, laravel, Laravel 9, laravel portfolio website, laravel portfolio, laravel 9 portfolio, laravel 9 portfolio website, laravel 9 tailwindcss, php tutorial, learn laravel, laravel project, build and deploy laravel website, Laravel project tutorial, laravel 9 project, Build Laravel 9 portfolio, Laravel 9 project tutorial, build portfolio, build portfolio website

Id: JNhmEoBsZ48

Length: 173min 40sec (10420 seconds)

Published: Tue Mar 29 2022