Portfolio Website with Tailwind CSS | Tailwind Tutorial for Beginners

hello friends today we are gonna create this beautiful portfolio page using tailwind css you are gonna learn the most common usage of talent utilities by creating a real world project before starting i will cover all the basics of tailwind that we need installation configuration team customization and more and we are gonna use the greatest strength of tailwind called mobile first breakpoint system and you will see how easy to create fully responsive websites using only class names then we will go ahead and create this dark mode toggle and we will be able to change our teams in a second it's an awesome project to learn tailwind from scratch and finally we are gonna deploy this website using a hosting service as always we will be using hostinger it's my favorite hosting provider and the sponsor of this video it's my favorite because i've been using hostinger for two years and never had a single issue servers are really fast and you can deploy all your websites in one hosting and the best thing is you are gonna get a free domain and free ssl certificate at this price choose your time period here and if you use the link in the description below or lamadev coupon code here you are gonna get an extra discount after choosing the payment methods and purchasing you are gonna redirect it to hostinger panel so let's claim our free domain and set up our hosting i'm gonna write a domain name after the registration it's ready to use so let's set up our hosting start from scratch and i'm gonna select my domain name now we can finish this setup it's gonna take a while and right after that you are gonna see your panel here and this panel is really user friendly you can manage your hosting your domains your files and you are gonna see how easy to deploy any website using this file manager in a minute so if you are ready let's create our website and deploy it here okay firstly i want to show you some features of tailwind before starting our project so it will be easier for beginners of course i will not talk about what the tailwind is all those boring introductions if you are watching this video you already know what it's used for probably you just need practice to understand tailwind capabilities i will open up its playground play.tailwindcss.com and here i want to create a div and inside let's say lamadev okay as you can see its reflection is here so i'm gonna give here a class name and let's see what we can do for example we can change its color i will say text as you can see all those properties are here we can give any color like that or we can give font size actually i will just move with my keyboard as you can see small large x large 2x large it works like that and it's really easy to use let's say something like that and i want to give text color let's say blue 800 i can give font weight as you can see extra light light normal medium let's give bold i can give any padding like that i can give background color let's say red for example like this i can give any width or height let's say 56 for example and as you can see it's actual size is here it's 14 ram and 224 pixels or i can give any height let's say 32 it works like that it's that easy for all those properties you can check the documentation of tailwind you'll find everything here i'm not gonna explain everything one by one it's gonna take hours but what i want to say is do not try to memorize anything just use this documentation and just open up this page whenever you need and there is one more important thing and it's responsive design this is my favorite feature of tailwind css because it actually uses mobile first approach if you used any other framework like bootstrap probably you are familiar with it let me show you how it works basically when you write any css property here it applies for small screens first let me show you its breakpoints as you can see there are some common breakpoints here small screens medium screens and others and everything you write here applies for this small screen first and if you want to change your css style for other screens you have to indicate them otherwise it's gonna apply for all screens like that as you can see nothing is changing so let's say i want to change its height between this small screen and medium screen to do that i should use this breakpoint prefix i will say small and height will be let's say 56 as you can see it's still the same but if i move this screen and as you can see it's getting bigger in this point because it's our breakpoint if i come here and say for medium screens text color will be let's say white let's try i'm coming here and as you can see after this breakpoint it's white it works like that and it's really useful let me show you one example and you are gonna understand why let's move this here and delete everything here let's create a div and i will give class name and i want to give background color it's going to be blue and let's say this color and i want to make this do full screen remember how we are using this in css we are using height and 100vh we will do exactly the same thing here i will say height but this time we are using screen and as you can see its value is here 100vh and i want to center everything inside this div to do that we can use flexbox i will say align item center to do that we are using item center and justify content center to do that i will say justify center and that's all it's here now instead of this text let's create another div and it's going to be a box i will say class background color will be white and i'm going to give some width and height 48 height 48 and for small screen let's say 64. again height 64. you have to write this small again and again you cannot do like that and for medium let's say 96 i'm gonna move this screen as you can see it's bigger and for the medium screen it's that easy let's give a better example i'm going to delete this i'm going to create another do again it's going to be a box and inside i'm going to create a user image and username and under them i'm gonna create a text so let's create do is gonna include our image i'm gonna copy this link and after that i will say jane doe let's give a width and height for this image i will say class it will be 8 it will be the same to keep its ratio i will say object fit and it's gonna be cover like that okay right now i can give class for my main div it's gonna be again byte let's say pg white i'm gonna give some padding it's gonna be four i want to give border radius to do this i'm going to use rounded as you can see small medium large and others let's use large and i want to give some shadow again small medium large let's use 2x large as you realize there is a dark shadow here and for this image and span container i'm going to say display flex so it's gonna be horizontal to center them i'll say item center and i can give gap between them let's say two as you can see they are separated right now let's make this image circle i will say rounded and it's going to be full like that and i want to create one more div here and it's going to include a p tag and inside i will copy and paste my text like that and under that s pen i'm gonna paste let's give class name i'm gonna give a color text gray and let's say 400 i want to make this text smaller and for this p tag i'm going to say italic and font weight will be 18 so i will say phone t i can give some space between those divs i will say class name margin top is gonna be two like that and for this main div maybe i can give some padding like that as you can see it looks pretty good for small screen but i want to change its behavior somewhere here i want to see bigger image and i want to make them horizontal to do that firstly i will give flexbox here so i will say small and it's going to be flex so if i extend this screen as you can see it's horizontal right now i can delete this padding and i can give space between them i will see if it's small gap will be let's say 16 and padding will be zero like that let's increase this input size is gonna be full height i will come here as you can see it was eight i will say small screen height will be full which means a hundred percent and i'm gonna give it it's gonna be 36 and i want to delete this rounded small rounded and no as you can see it looks much better right now for small screens it's like a square and it's vertical and for bigger screens it's gonna be horizontal like that and it's awesome guys it makes everything easier but how we are gonna create a tailwind project in our vs code let's come here as you can see to install tailwind you are gonna need some steps here but don't worry it's really easy firstly we are gonna install tailwind css i'm gonna copy here and in the vs codes i'm gonna paste to my terminal by the way if you don't have node.js in your computer make sure that you install that first otherwise you won't be able to install any library using npm i'm gonna enter and after that we are gonna initialize our application like that and as you can see there is a config file here we are going to make all team customization here you are going to see soon and here we should provide our files which we are gonna use for tailwind in this case we are gonna have just a index.html here and we are gonna use tailwind inside this html file so basically i will say in main folder index.html or if you are using any other html files basically you can say all html files after that we should create input css input.css i will paste it and finally we are gonna build our application i will copy this and paste here basically it takes this input css and build a css file that we are gonna use inside index.html you are gonna understand better but before let's delete this source part because we don't have any source i'm gonna enter and as you can see there is an output here and it includes default css elements but how we are gonna use this css file i'm just gonna write here link and this output css so we are able to reach this file right now i'm gonna come here and copy my codes and i'm gonna paste here as you can see something has changed let's open up output css and scroll down and as you can see these are what we have used in our index file all those properties are here basically whatever you apply in this html file it's gonna directly affect this css file so tailwind css doing everything for you we are giving only class names and they are immediately here it works like that by the way we are gonna be using this extension as you can see this is how it predicts what we are gonna write it's really useful whenever you write any letter as you can see it gives those recommendations and finally if you want to customize your team you can use this config file for example let's say colors let's say this gray color and we will be able to use this color everywhere let's say background and my color as you can see it's here in the same way you can add here your font family your spacing screens anything you want to customize okay that's all i think we can start our project but before i want to say something if you don't know css or if you feel you don't have enough css knowledge starting with tailwind might not be a good idea if you didn't create any website using pure css i recommend you to watch my video about tailwind and bootstrap i think it will give some ideas about starting from scratch so that video will be in the description and in the cards you can watch it and decide okay anyway let's create our portfolio page okay i created a new folder and inside let's install tailwind i'm gonna do exactly the same thing i will copy this and i'm gonna initialize my tailwind like that and inside config file i should provide my html or javascript files in this case we are gonna use this main folder so i'm gonna come here and say check the main folder and take every html file inside i'm gonna create input css i will copy them new file input.css i'm gonna paste and finally i'm gonna build my tailwind i will paste here of course i'm gonna delay it here we don't have any source file it's gonna be our main folder and for the output let's say css folder and create style.css i'm gonna enter and as you can see it's here okay perfect let's create an html file here i will say index.html i'm going to create my document and let's say tailwind portfolio and i'm going to link my css file i'm gonna say link css folder and style css let's try i'm gonna create here h1 tag and let's say hello and for the class name i'm going to say text red 500 i'm going to open with live server and it's here okay it works i can delete here and let's see what we are going to create okay as you can see it's going to be our first section it's going to include this nail bar and this introduction and it's going to cover all screen which means i'm going to make it 100 vh so let's start i will say intro section and let's create our first div and inside we are gonna have our navbar let's create now tag here and after that we are going to have our content which includes this text this image and these do so i'm going to say intro content and i'm gonna create another div okay we are gonna handle them but before i just wanna change something inside tailwind in tailwind by default it uses these breakpoints but i want to change this small number i think it's too big how i'm gonna do this i'm gonna come here config file i'm gonna use exactly the same sizes for other screens like md lg but i just wanna change this one to do that i'm gonna go to extend object and i will say screens and i will say small screen and it's gonna be 480 and also we are going to use this font family if you go to google phones you can find it i've just chosen all of those styles only thing i should do is to take this link and paste inside my html let's paste here like that and inside config file i'm gonna create a font family i will say phones family so let's name our font family it's going to be nonito and let's check what we are going to need font family nonito and sans serif let's copy them and paste here of course it should be in code like that and let's try again i'm gonna come here and say h1 test and for the small screen it's gonna be let's say red and if it's more than small it's gonna be text blue let's say 500 and let's test as you can see it's blue right now and i'm gonna move this console and under 480 is gonna be red let's check 500 okay perfect it works and for font family i'm gonna come here inside body i will say font nonito like that okay i'm gonna delete this h1 and for this div i'm gonna say class name let's check our website here i'm gonna open console here and as you can see its height is half of this screen as you can see still but if i get more than x large like that as you can see it's full screen to do that i'm gonna say h half screen and if it's lg it's gonna be h screen which means 100 vh as you can see it's here you should definitely add this extension so you will be able to see its actual size here it's really useful so i'm going to say 8 screen and what i'm gonna do is giving this linear gradient background to do that i'm gonna say background gradient to top so we are gonna start from bottom and we are gonna go to top let me close this sidebar by the way okay it's better and i'm gonna write bottom color to do that i will say from indigo to 100 it's gonna start from 200 and it's gonna reduce this color and at the top as you can see it's gonna be white of course you can indicate here any other color by saying two red five hundred as you can see it's gonna start from indigo and it's gonna go to red it's that easy okay perfect let's check our size by the way i'm gonna open mobile version as you can see it's half screen when i move my screen it's gonna be bigger okay so let's create our nail bar let's say class name i'm gonna make this fixed position that because when we scroll through our application is gonna stay here it's not gonna be disappeared to do that i should give any position and it's gonna be top in this case it's gonna stick the top zero and let's say background color is gonna be white and inside i'm gonna create a container that because if i don't do that let me close here if i don't do that when i add any item inside it's gonna start from here but i just want to create a container and make every items centered let's check our application i'm going to close here and as you can see there's a container here and it keeps everything centered i will say do let's write here something and i'm going to show you what i mean by that as you can see it starts from here if i change this color you will understand better of course i want to make this full screen so i'm gonna say with full okay as you can see it starts from here so if i give container property for this second div and if i give auto margin it's gonna give default spacing according to current screen size what i mean by that i will say class container and mx will be auto i'm saying mx that because it's going to be horizontal margin from left and right and as you can see there is a space here if i shrink here automatically gives a space and it's awesome and for all screen types perfect what else i can give i can give a padding let's say vertical padding is going to be 5 which means 20 pixels like that and i'm going to make this container flexbox that because we are going to have our logo here our links and this button so i will say flex and i'm going to separate them by using justify between let's try actually one two and three i'm going to open my app and as you can see they are separated and first one will be our logo let's create instead of spam i'm gonna create a view it's gonna contain our logo let's say image by the way we didn't create our image folder let's create and i'm gonna move my images here okay as you can see we have logo here i'm gonna use it let's say image folder and logo and next to this image i'm going to create my website name let's say span and it's going to be port wind so i can make this div display flex so they can be horizontal i will say class name is going to be flags like that how i'm going to center them vertically only thing i should do is using item center and i want to give a space between this logo and this text so i will say gap like that let's reduce this image size i will say class let's say 8 like that it's better right now and i'm going to give some style for this text i'll say class name text will be 2x large and i'm going to make it bold and text color will be indigo 900 like this of course let's delete this background it's going to be white again we don't need this anymore okay perfect so what about this second part it's gonna be our links i'm gonna delete this one and i'm gonna create ul and my list items and the first one will be anchor tag that because it's going to be a link it's going to be home page and let's create others about me services works and contact like that i'm gonna open my mobile version quickly and as you can see it's not a good idea to see our list here for small screens we are gonna use a hamburger menu here and when we click this we are gonna see all those lists somewhere here so basically we don't need this here so i'll say class and at the beginning is gonna be hidden like that and whenever we change to middle screen i'm gonna say flex so it's gonna be a horizontal list let's try i'm here i'm gonna pull this to right and [Music] okay perfect we are gonna see it here we are using flexbox so we can give a gap but also there is one more solution you can give space x and let's say that like that by the way this logo and these items are not vertically centered so i'm gonna come here item center and what else we can give i'm gonna give a color let's say text gray is gonna be 600 and i'm going to make them bold and text size will be small gray bold and small it doesn't look good that because they are lower case to prevent this basically i can just write here uppercase okay it looks pretty good but when i hover over we don't see any changes for the user experience we can give some hover effect i'm gonna choose all of my allies i will say class and hover text gray but this time it's going to be 500 it's going to be a little bit softer like this so what about this last element i'm gonna write this three instead i'm gonna say image and it's gonna be image folder and moon png like that but it's too big let's give class quickly with five and also i'm gonna give cursor pointer okay awesome but in the mobile version instead of this image we are gonna show here a hamburger menu so basically i'm gonna say at the beginning it's gonna be hidden but if it's medium screen it's gonna be let's say block like that so let's create our menu here i'm gonna say do and inside we are gonna have three lines of course you can use any icon but let me open my console as you can see we are going to use these three lines let's create two and i'm going to give class let's say bit six height is going to be one pixel or smaller we will see background will be black like that as you can see it's a little bit thicker so let's say 0.5 okay it's better i think and i'm gonna create two more okay they are here but we cannot see that because they are stick together to prevent this i'm gonna give here a class name i can make it flexbox and column but also as i said we can give any space so it's gonna be space y and let's say one as you can see it's an another solution and for medium screens we shouldn't see this hamburger menu that because we are gonna have our items here our links so i will say if it's md it's gonna be hidden by the way i can say cursor pointer let's try other screens okay it's coming to medium screen and boom perfect so for small screens i can create my menu here when we click this button it's gonna be here i'm gonna come here and create one more list actually i can directly copy from here like that now we don't need any class i'm going to delete them so let's give class name for this it's going to be hidden and when we click this button we are going to use javascript and change this display property but to see better i'm gonna delete this otherwise we will not be able to see let's give background color is gonna be again indigo 900 like that but there's a problem here that because it's inside our nail bar and it behaves like a third item here but i don't want to do this it's going to be independent from this snapper basically i'm going to give absolute positioning and i will say left 0 top zero and as you can see it starts from here and if i say bit full it's gonna cover all these bit i can give some padding let's say 10 and i want to give a border radius here for this bottom to do this i'm going to use rounded as you can see many options here let's use 3x large as you can see it's rounded but i forgot here i'm not going to use for top so it's going to be rounded only bottom like that let's give space between them space y 10 and let's change text color it's going to be white okay perfect and i'm going to center them to do this i'm going to use tag center like that so i can write here hidden we don't need this anymore okay awesome but how we are gonna make this interactive when we click this button it's gonna be open up here to do that we are gonna use a javascript but don't worry it's really easy one you don't need to be advanced or something i will say app.js and we are going to use this js file inside our html before this body tag i'm gonna say scripts and i'm gonna give my source which is app.js actually let's write here main folder app.js okay let's try if it works or not i will say console lock it works i'm gonna come here and as you can see it's here so what i'm gonna do is choosing this hamburger menu element and choosing my mobile menu here and after that we are gonna create some functions but how we are gonna choose them it's really easy nothing complicated here i'm gonna say const hamburger menu i mean this button and here i'm gonna use documents and query selector with these methods we can choose any item inside this html but to do that we should specify our items for example for this hamburger button i'm gonna give an id let's say hamburger so we can use this id i'm gonna write hashtag if you are using an id don't forget you should write hashtag if you are using a class name it should be dot but we are using id and i'm gonna create one more and it's gonna be menu and for this menu i'm gonna give id menu okay we have our items right now what i'm gonna do is to give a click event for this button and inside this click event we are gonna change our menu class here we are gonna delete this hidden to do this i'm gonna choose my button here and i will say add event listener and our listener will be click event and i'm gonna write here a function whenever we click this button we are gonna change menu's class name so basically in the first click we should delete this hidden class name but when we click one more time it's gonna be hidden again basically we should toggle this hidden class name only thing we should is to give toggle function and hidden class name let's try i'm going to click mini class name it's not class name i'm sorry it's going to be class list because it's going to look inside this class list but it's going to change only this one let's try again i'm gonna click and as you can see it's here i'm gonna click again but it's not here that's because we are using absolute positioning here and it calls our button to prevent this i'm going to give here that index let's say 10 or 20. doesn't matter by default every element has set index 0 in this case our menu will be 0 and if we give any index number more than zero it's gonna be over this menu let's see i'm gonna click and as you can see it's here i'm gonna click again and it's gone it's that easy but in this case our button is still black here basically we can give any background color for this line container let's do that here so i'm gonna do exactly the same thing but this time i'm gonna choose menu button and i'm gonna toggle bg white and it looks much better of course what you can do you can choose those lines you can give id and you can change this black colors but also as i did you can give this background and it looks really stylish i really like it so that's all so we've finished our number let's take care of this introduction content so let's write here what we are gonna need firstly we are gonna need an image as you can see we are going to have this image this animated text this circle and finally this div here circle and finally other texts let's say texts let's create our image i'm gonna choose my image in this folder and man.png like that i'm gonna open mobile version and what i'm gonna do is making this image position absolute and align this image to right and bottom so it's gonna be somewhere here so let's give class name it's going to be absolute button will be zero and right will be zero as you can see there is a problem here that because we are using absolute but we didn't give relative positioning for its parent which is this blue div let's do that i'm gonna come here and say relative okay perfect but this image is too big let's give some height i'm gonna say height five of six and i'm gonna give object fit color that because we are giving only height here basically its size is not going to change we set right 0 but it starts from here that because our image is a little bit big let me show you as you can see it starts from right zero maybe i could crop this image from here but anyway it can stay it's not a big deal and for big screens after lg's screen i'm gonna center this image so if i say lg left0 and mx auto it's gonna center my image like that it's on the right it's on the center perfect so let's create a circle here for small screens i'm gonna hide that circle but when it comes to lg screen it's gonna be under this image so let's create i'm going to say class name at the beginning it's going to be hidden and for lg it's going to be block and position will be absolute i'm not going to center this circle here instead i'm gonna give some space let's check here as you can see it starts from here so i should give negative button position so i will say minus bottom and 104. let's check here of course we didn't give any width and height if you check sizes you are gonna see that the maximum size is 96 which is 24 ram but i want to make this bigger let's check actually i'm going to say 96 again and let's give background color it's going to be again indigo 900 and i'm going to make this circle so i'll say rounded and full and of course i'm gonna center this to do that i'm gonna give right zero left zero and if i say mx auto it's gonna center this horizontally oops why it's here it's going to be bottom of course not b okay and as you can see its size is too small what i'm gonna do i'm gonna customize my sizes i'm gonna open tailwind config and i'm gonna extend my sizes to do that i will say spacing and i'm gonna add one more item you can give any number or any text it really doesn't matter let's say peak and it's gonna be 48 ram let's see i'm gonna change this width and height is going to be big like that it's much better but i want to see this circle under this image i will say minus c and let's say 10 remember our image is zero and it's going to be minus which means it's going to appear before this image okay by the way there is a problem here we should give the index for this nail bar also it's here let's say z10 okay perfect but there is another problem that because our circle is overflowing to prevent this i'm gonna come here and i'm gonna say overflow heater like that okay so let's create our animated div here and it's gonna be a little bit complicated because for small screen for medium screen for large and x large screen it's going to be different position let's say dew and inside i'm going to create a span let's say freelance and i'm going to create a p tag and we are going to write our animated text like this but before this animation let's write just developer we are going to fix this later and i want to give some class for them i will say text gray 600 and it's gonna be red let's say 500 let's give our first position for small screens i will say top 103 let's see actually i'm gonna open mobile version and as you can see it's somewhere here maybe let's give some space here i'm gonna say left five maybe okay perfect by the way let's increase this font size i'm gonna say text x large okay perfect and after this small screen somewhere here i'm gonna give more space so let's say after small screen left will be 10 like that and i'm gonna increase font size let's say four 4x large like that and if it's more than medium screen i'm gonna move this more it's gonna be somewhere here let's say left 104 and i'm gonna increase font size again i'll say md left 104 and md text 6 x slash and when it comes to large screen i'm gonna move back to left 5 because our item is full screen right now i will say lg left 5 again okay perfect and finally for x large let's move it actually let's close this as you can see it's too far right now i'm gonna give new position x large last will be 46. okay of course you don't have to give these exact numbers just play around it and try to find the perfect position by the way i can increase this font size also i'm going to say x large and text will be 7 x latch like that maybe i can make this bolt okay awesome i'm gonna create this animation but before let's create our text view here and add those texts and this button i'm gonna come here and create new deal i'm gonna create h1 let's say hi i'm john i'm gonna create a p tag and i will just copy paste my text i don't wanna waste time and finally a button you can create a button or anchor tag it doesn't matter let's create anchor and it's gonna go to contact and i'll say hire me and for small and medium screens we are not gonna see it after large screen we are gonna see it somewhere here let's do that i'm gonna say class name hidden and for lg it's gonna be flex of course it's not going to be horizontal it's going to be flag's column let's give our position i'm going to center this vertically what i mean by that as you can see it's on the middle of the screen so it means it's going to be top 0 bottom 0 and margin will be alto and for the right side i can give 10 or something like that let's try i will say top 0 bottom 0 oops and auto we are going to center and finally right then i'm gonna give a background color and it's going to be just white and maybe padding inside okay something is wrong that because its height is full right now to prevent this i'm going to give height and feet as you can see it's gonna fit according to our content okay perfect but we don't have any width it contains all screen here let's give it i will say 103 like that okay awesome let's move this as you can see perfect and i'm gonna give some gap between those items as you remember we set flags column i will say gap and 5 like that and i'm going to give some border radius let's say round it and let's say small okay it's too small let's say maybe md okay it's better and i'm gonna give some box shuttle it's really easy i'll just say shadow and let's say x slash as you can see it looks better if i give different color you are gonna see better i think i will say shadow red as you can see it's here of course i'm going to delete this and what else it's enough i think let's take care of our texts here for this h1 is going to be for x large font will be bold and it's going to be indigo like that so for this text let's give gray 400 and our link will be pg indigo and text will be white text x large like that i'm gonna give some padding let's say three and i'm gonna decrease this width it's full right now but i'm gonna fit to my content remember w fit like this maybe i can increase this padding between top and bottom so what i'm gonna do is gonna be x only horizontal but for vertical it's gonna be just two okay let's give border radius i'll say rounded md and font will be semi-bold like that by the way why it's not gray ah i said two it's gonna be text okay awesome let's check again mobile version for tablets bigger screens and full screen okay let's take care of this animation to do that we are gonna use this small library as you can see it's almost two kilobytes and only thing we should do is importing this javascript file and creating our animation instance as you can see we are gonna choose our item in this case it's gonna be where is our item this p tag and instead of this developer we are gonna write those texts you can write here whatever you want and for options let's check here as you can see we can write type speed late speed how many milliseconds we are gonna wait before deleting and it's gonna be something like that as you can see let's come here and open up this javascript i'm just gonna copy this and i'm gonna create new file here let's say auto typing and i'm gonna paste you can check this quote here and after that finally let's come back i'm gonna create this instance and paste here it's gonna be developer designer and author so let's choose our selector remember how we are doing this we are providing here our id let's say text in this case of course i should provide here an id which is text so basically it's gonna choose this p tag and it's gonna write all those example texts of course to run this javascript file i should import this auto typing js okay it's here perfect you can play around those speeds for example i will say 100 100 so it's gonna be slower like that and it looks awesome it's that easy so we finished our first section let's take care of this about me section firstly we are gonna have a container here again we are gonna make this margin auto so it's gonna start from here and end here and after that it's gonna be flexbox and in this flexbox we are gonna have two sections one of them will be this image section and second one will be those texts but before this container i'm gonna create another div that because when we apply our dark mode this space and this right space should be dark also so let's do that i'm gonna create here by the way this do when did i create this okay it's gonna be under introduction and it's gonna be about page about section and i'm going to create a container i will say mx also and inside this container we are going to have left side and right side for this left side i'm gonna create a div and it's gonna contain two items first one will be those dots this is an image it's gonna be position absolute and position will be top zero left zero so it's gonna stay here and second item will be our main image let's create i'll say dear of course it's gonna be relative that because it's apparent and my first image and it's gonna be image and dots let's give class name and position will be absolute but before let's see i'm gonna close here by the way okay as you can see it's really big let's say with 1 4 height will be the same and it's going to be position absolute top 0 left 0. let's create our second image to do that i'm going to create a div here and inside we are going to have our image and portrait.png i'm creating here do that because i'm going to make this something like a circle as you can see something like that but these dots look a little bit weird i can give here object fit color or let's delete this one okay it's much better right now that because it's a square we don't have to give any width it's going to be the same size and what about this d i will say class h will be full it's going to contain all our d here and i will say rounded full it's not going to be total circle that because our image here is not a square it's going to be something like that but of course we cannot see it that because it's overflowing let's say overflow hidden but there is a problem here it's still too big that because we don't have an item here let's try to write something for the right side and let's make it flexbox and as you can see it looks awesome by the way for these boards i can give the index let's say minus 10. okay perfect and our about section next to this item to prevent this i'm gonna give some padding here let's say padding vertically it's gonna be 40. okay so let's give some gap between them it's a flexbox i can give gap it's going to be 20 like that and let's create those items i'm going to say do let's move this hello here and let's try to center this if i say my auto as you can see it's going to be centered and again it's going to be flex but flex direction will be column and i'm gonna give gap between each items let's check here as you can see each space will be three i'm gonna create my first item about me i'll say class name text indigo 600 and font will be bold like that let's create others better design better experience i'm going to delete them and i'm going to say text 3x large and font will be medium like that let's create our p tag here as you can see i'm going to copy this i will say p tag and i'm going to paste it let's create quick br class text will be gray 400. i said 2 again it's going to be text okay so let's create our items here it's going to be an h2 text and after i'm going to create a div here this gray one will be parent and this indigo will be our percentage let's do that after this p tag i will say h2 first one will be html i will say class name text gray for hundreds and font will be medium and after that i'm going to create my progress bar and this parent will be with full pg gray and i'm gonna give h and it's gonna be one and half and it's gonna be rounded let's say md like that and inside this parent i'm gonna create one more let's copy this actually i'm gonna paste but this time it will be different actually for this one it's a hundred percent as you can see it can stay but color will be different indigo 600 like that and i'm gonna create others let's copy this and duplicate it's going to be javascript and it's going to be react for example and i'm going to change this size let's say something like that and for this one okay it looks awesome but we didn't arrange this for the mobile version let's see as you can see it's pretty ugly right now what i can do firstly i'm gonna give a padding between this left and right side let's find out our main div here i'm gonna say padding x it's gonna be 10 like that and for this container it was a flexbox but basically i can make it flex column actually let's say reverse so we are going to see this text before this image i'm gonna save as you can see it's here and when it comes to lg screen flags will be row let's check i'm gonna close mobile version as you can see it's column by the way we can center this item center like that and when it's a bigger screen it's gonna be horizontal perfect so we finish this action also let's create these services again a main view after that a container those are gonna be top section and those cuts will be bottom let's do that by the way what are those okay let's create service or services we are going to have main deal inside a container and inside top and bottom class name will be container mx auto and inside desktop i'm gonna create h1 tag it's going to be services actually it's going to be exactly the same let's copy this and paste here and one more h1 and i will say what do i offer and it's going to be text 3x latch like that let's create a p tag and i'm gonna paste here class and let's see as you can see those are not centered how i can fix that basically i can give a parent here and i can cover them and i'm gonna say flexbox flags column i'm gonna give gap between them and i will say item center like that but this p tag is really long i'm gonna make this a little bit smaller so i will say with half of this parent and i can center this text text center awesome and finally i'm gonna give text gray and 400. let's take care of this bottom side as you can see we are going to have six cards inside let's create two and inside we are going to create cards let's create here a class it's going to be flexbox but in this case if we create six cards they are all gonna be horizontal to prevent this i'm gonna use flex wrap basically it's gonna be a flexbox but if our cards don't fit in this section in this div basically it's gonna move other items into a new line like that let me show you actually i'm gonna create a card here it's gonna include image it's gonna be icon png h1 tag let's see here ux ui design it's gonna be a p attack i'm gonna copy here and finally a tech and it's gonna be read more like so okay let's see i'm gonna save here okay it's here if i create one more card or two more as you can see they are getting smaller if i add more example here they all are gonna be in the same line but if i say flags wrap here as you can see it separates them like that it's gonna separate them according to our screen size as you can see only one item two items and if our screen is bigger it's gonna be three for whatever so i'm gonna delete those cards here after finishing one of them we can duplicate i'm gonna delete them and let's give a class name for the mobile version bit will be full of course in this case we are gonna need some padding here let's say five like that and if it's bigger than small screen i'm gonna reduce this size let's come here i will say md which will be 4 12. basically it's going to be 33 percent like that by the way i'm gonna give some shadow let's say x large and it's gonna be rounded let's say large okay as you can see we don't have any padding let's give it's gonna be five and i'm gonna separate those items to do that i can make flags and flex column and gap between let's say three okay but this image is really big right now let's give class name and i'm gonna say with 10 it's going to be 40px ok perfect font will be medium and text will be large like that and for the p tag it's going to be a gray color text gray 400 and for this text this link is going to be indigo 600 it's going to be semi-bold and text will be small okay let's create other items i hope i didn't forget anything two three four five six as you can see three items if i shrink this it's gonna be one item of course you can change this with if you wanna see two items you can make it bigger but for me it's totally okay it looks pretty good by the way for big screens we don't need this padding anymore let's delete this where is our container here i'm gonna say if it's not a mobile device it's gonna be padding zero but this space is not enough and for here what i can do let's open up mobile version first as you can see i can increase margin here i'm gonna choose all of them all of those cards and i'm gonna say m y and it's gonna be three like that and if it's bigger i'm gonna give more space so let's say if it's md it's gonna be 10 like that okay it's better i'm not sure should they be stick together or i should decrease this number and give here just five between of course for this screen it doesn't look good just play around here and find for yourself i think this is better let's check here okay it's same i think by the way our application is larger as you can see it starts from here and ours is here i think i use different breakpoints i don't know which one is better here is the same only thing is this container what do you think guys which one is better okay in the previous application i used those screens and in our application we are using only this screen we are extending if i play this as you can see right now it's the same only difference is font type it can stay like that and let's take care of this portfolio it's gonna be really similar we are gonna have top and bottom we are gonna have cards only difference we don't need any text insights it's gonna be only image i'm gonna copy these services let's copy from here and i will paste it's gonna be portfolio or works portfolio works and projects and this text and for those cards let's delete those items instead we are going to create image and source will be image folder item.png like that and we don't need this flexbox anymore we have only an image okay like that maybe i can give margin margin one but i'm gonna decrease this size for large screen it's gonna be 105 like that of course i'm gonna need two more items okay perfect let's check our mobile version okay perfect small screens for medium screen i can increase this size i'm gonna choose them again and it's gonna be five okay it's much better and if it's a large screen it's gonna be four items like that perfect let's check here okay awesome and we are gonna need this contact section we are gonna use exactly the same titles and after we are going to create a form i will say contacts we are going to have a main view and a container and we'll have top actually i don't need to write them anymore but anyway if you are using tailwind it's really hard to find your code so it's gonna be really useful let's actually copy this top section and paste here it's gonna be contact i have a question and this text and here i'm gonna create a form and we are gonna have let's see two inputs and one text area because it's bigger and one button here i'll say input text and i'm gonna give a placeholder it's gonna be name surname one more and it's gonna be email type will be email also and i'm gonna create a text area let's delete them and again i'm gonna give placeholder and it's going to be message and finally let's say button and submit as you can see they are horizontal let's take care of this i'm going to say class name it's going to be flex plus column and i'm going to give gap and i'm gonna center them okay of course we are gonna give additional styles but first i'm gonna open my mobile version by the way let's give margin here i will say margin top five and let's take care of these inputs i will say class name first here i want to give some padding inside and i will say v8 full and i'm going to give some border to do that we are going to use ring like that and as you can see it contains all this screen because we set with full to prevent this let's say p8 is going to be a padding and i can change this ring color ring indigo let's say 300 and i'm gonna give border radius to do that of course we are using rounded it's gonna be small right now i will do the same thing for others i'm gonna copy here like that and for this button let's say class name again which will be half i'm gonna give background color it's gonna be 600 text will be white and font will be medium okay let's give some padding remember what we did before px3 py2 is going to be like that let's give cursor pointer and border radius i will say md and cursor pointer ok for the mobile version it looks pretty nice but here as you can see it's really big i will say for md screens it's gonna be with half so i'm gonna choose them and i will say md beat half as you can see it's much better for small screen and larger ones if i make this bigger it's gonna get larger and perfect right now we need only this filter and after that we are gonna take care of dark mode actually it's gonna be exactly the same thing with this number but instead of this list i'm gonna write a text so i'm gonna go to navbar and i'm gonna copy this and i will paste for footer of course it's not going to be number it's going to be just a d and we don't need fixed and background color will be gray a touched we don't need the index here okay it's here i'm gonna change this logo color it's gonna be white we don't need this list anymore instead i'm gonna write a text let's see what we have okay i'm gonna copy this it's gonna be a span and i will paste but for the mobile version i don't wanna see this text i just wanna see this logo and my social media accounts so i'll come here and i'm gonna say hidden if it's md it's gonna be block let's say font medium and text white and we don't need this hamburger menu instead i'm gonna create a do it's gonna be flexbox and i'm gonna separate my social media icons and let's create first one it's gonna be facebook and class name will be v4 and cursor pointer like that let's add others i will say instagram twitter and linkedin like that if i close here of course we don't need this moon let's delete okay perfect there's a mistake here that because they are really close let's go to portfolio for this one maybe i can say padding 40 of course only vertical okay it's much better by the way when we click any of these links it's not going anywhere that because for sections we didn't give any id what i mean by that as you can see we are using only home page here for this one i will say about services works and contact i will do the same thing for here and for about me section here i'm gonna give my id it's gonna be about in this case if i click here it's gonna go to about page by the way when i click one of these items i'm not supposed to see this menu anymore let's come here i'm gonna choose those links of course i need id for that let's choose them and i'm gonna give id and it's gonna be let's say h link so i'm gonna choose all of those items remember what we are doing it's gonna be h link but we don't have only one item in this case i'm gonna use query selector all it's gonna choose all of items and when i click one of them we are gonna close our menu so i'll say h link actually it's gonna be links we have five links here i'm gonna use here a loop i will say for each and for each link i'm gonna create event listener i will do exactly the same thing here i can copy this paste then we click any link we are gonna close our menu let's see opening clicking and it's gone perfect so let's do the same thing for others i mean this id services works and contact let's see right now and clicking here we are going to about me page services works and contact perfect so what i'm gonna do is taking care of this dark mode when you are using tailwind it's really easy to handle that only thing we should do is to provide dark properties like that as you can see text is this color but if it's in dark mode text will be white of course we are gonna toggle our dark mode by using this button if you are using toggle you should add this property for config file you are gonna understand everything better right now i'm gonna come here and dark mode and class let's try i'm going to go to number and remember it was background white but this time i will say if it's a dark mode background will be slate and 900 and if i come here and change my body class it's going to be dark and as you can see it's black by the way there is a problem here for this animation okay i forgot lighting this developer okay as you can see it's that easy so let's change those items it was gray 600 i'm gonna say if it's dark text will be gray a hundred like that also i can change here i will say dark text will be white like that what about this color i will say dark mode is going to be from slate 800 to slate 900 by the way there is no space here let's see as you can see from 800 to 900 it's not gonna work anymore because our parent is back so i can do the same thing for others for example this div it was white i'm gonna say dark against slate 900 like that but in this case we cannot see our shadow let's change this also i will say dark mode again and shadow will be slate and 800 as you can see it's much better what about here i'm gonna do the same thing again and again about dark mode slate 900 services 900 works and contact as you can see it's all dark but let's change some additional items for example these texts here i'm gonna choose them and i will say dark mode text will be white like this and here let's search for it dark mode will be text white again i'm gonna copy this and i will do the same thing for these titles i'm gonna choose all my cards and paste it here like that and for this one and here and what about these inputs let's change them also i will choose my items and i will say if it said dark mode pg slate 800 and i'm going to delete those rings dark ring zero and text will be white dark text white okay it looks much better right now but how we are gonna change dark mode using this button it's really easy at the beginning it's not gonna be dark i'm gonna come here and choose body here it's a tag name so we don't need this hashtag and also we are gonna choose moon button let's give an id i will say id moon and when i click on moon button i'm gonna toggle buddy's class name so i will say moon i don't need this i'm gonna change body's class name and i'm gonna toggle dark key when we click it's gonna write here dark when we click again it's gonna delete let's refresh the page i'm gonna click as you can see dark mode click again perfect as you can see it's really easy to handle dark mode in tailwind and it's pretty old i think it's enough for a beginner project of course in the future we are gonna create more complex projects for example a social media application or an e-commerce application and when you use tailwind with react or nexus you are gonna see that they actually make more sense in plain html it's still okay but it's really hard to read and it's really hard to remember what you have done what you have created but as i said for the future projects it's gonna be much more effective so let's deploy our application it's really easy to do it's gonna take just a minute i'm gonna open up my host finger panel and here i'm gonna choose file manager it's gonna open my website directory as you can see public html it's our main folder i'm gonna click here and as you can see there is a default file here i'm gonna delete this let's open up our website folder and only thing i shall do is to copy app.js hyping.js css folder image folder and index html right after that i'm gonna drag those files and drop here and that's all let's check our website and as you can see it's here of course our connection is not secure right now let's open up home page and as you can see this is our free ssl certification let's set up i'm going to choose my website name and install ssl as you can see it's status is installing and right now it's ready let's try when you refresh your page you are gonna see that your connection is secure right now and our website is working awesome it's that easy if you want to you can deploy your other applications here also and if you want to use only one domain you can create other sub-domains and deploy your websites in those sub domains and that's all i hope you liked it if you learned something new today please like the video you can support lamadev using the link in the description below or joining to channel and don't forget to follow lamadev's social media accounts i hope i will see you in the next tutorial goodbye

Channel: Lama Dev

Views: 89,726

Keywords: tailwind, tailwind css, tailwind tutorial, tailwind project, tailwind course, tailwind crash course, learn tailwind, tailwind portfolio, tailwind website, tailwind for beginners, portfolio, portfolio website, html css, portfolio app, web design, lama dev, tailwind css portfolio website, tailwind css real-word project, responsive web design, responsive portfolio website, tailwind css responsive, tailwind dark mode

Id: 4zHNGNCIezY

Length: 93min 44sec (5624 seconds)

Published: Tue Jun 07 2022