Job Listing App - ReactJS and TailwindCSS Tutorial

hello hello and welcome to this live stream in which we're going to create a job listing app with react yes and tailwind CSS hello everybody in the live chat say hi if you can hear me hopefully let's see if everything works correctly and then we can start all right everything seems to be working correctly hello Achmed let me pop up the check here so I can see it better all right good how are you today this will be a fun fun project as one that was requested a lot so yeah we're also going to use react until with CSS which are one of the most trending technologies so that's fun hello l Valdo Bambi Milosh because ohm car toast welcome everybody all right let's see seems to be working so this is what we're going to do today this is how it should look we're going to say if we manage to do it to look like this hello Mihai hello mr. ah hello mirros all the M people have one after the other all right yeah so basically it's a job listing app in which we have we are just listing some jobs and we have some filters here I can see yeah and we also have the responsive there is positive design so not a very very complex app but still we're going to learn a few things now for those of you who don't know I'm using the project well the design is from front-end mentor you can find a link in the description of the entire platform in this platform you can find a ton let me first download this and then I'll go over yeah so in this platform for those we don't know although I have like 12 live streams and which we built twelve twelve in which we build twelve project already but you're getting the design already you're getting the text you're getting the assets you're getting the colors that the font everything you need you just you just go and start coding the HTML and CSS some projects have JavaScript which you can use well you can use vanilla JavaScript or you can use the react as we were going to do today okay hello Carlos Pro Joey hi Horacio what's up 3 bar pro email alright 45 people already good my my bat was that today we're going to have the record of most viewers but we'll see we had the record of 61 people greetings from Nebraska oh nice yeah let's make a small pool to see where are you from I like to see where people are from those of you who are watching hello Java Script color giants Lexy all right curvy hey Joe ah good Portugal nice okay what I did before the stream this is why I was late one minute is that I wanted to create a react project with create react app usually while I'm streaming the Mac is not at the highest capacity so I did the creation of the react app before I'm going over what we have all right let's see whoa okay so Russia India South Africa in Germany India Morocco I don't know react yes I have a live stream or rag GS from fickle camp search it on you too Daniel Muni Kentucky France well Spain but leaving your friends oh okay good good good India Portugal Poland oh nice get Nebraska all right I am from Florida I bet would you like to see how you plan the state at the components I would like to see okay India Albania oh nice so people all over the world I guess this is a good time to stream I get most of the time zones let's get this party going 60 people all right two more people and we have record one more okay so what we're getting let me make this big here so for those of you who don't know we create react app you can just run the command let me see where I run it can we watch the live sheep after can watch the video after the lesson yes it will be recorded and it will be saved 63 people we have a record I need some I need this sounding board so we can place out hello and welcome so somewhere here yeah I run the MPX create react app dot this comment this is the command I ran and it created the boilerplate for us salute salute can make that 69 [Laughter] just be posted to 183 K people whoa that's it alright now we can start this reactive by running a yarn start and this will create a well I guess let me minify this and it will start the server for us so we can see the project live which is pretty noise do you like typescript I haven't used it that much only on my job will the job posting be coming from an APR or just manually entering we don't have an API this time I do have I looked over the files they gave us and there's a J sub JSON file 70 people there's a JSON file which we're going to get the job listings from but now I'm going to do it in such a way that it will be just as easy to swap out the JSON file with a with an API call oh yeah will you be using hooks only yeah I will be using hooks because I want to and not haven't use it that much so I want to practice as much as possible so yeah I am testing it on you life I guess all right so what we have here is the react project we're giving by default now let me delete some files here because I don't like them so we don't need that I don't need testing now I don't need a logo no serviceworker okay I just need the index ESS mm probably but I'm going to use tailwind SSO probably not that much okay let me remove that and this and in fgs we don't need this this and this can say Oh poppers all right and now yeah so there you go we have very blank react project is this a beginner friend video you should know react but well it won't be that heavily based on react but still you should know a bit about it yeah JavaScript yeah yeah I see what you mean there okay now let's see we have the project so basically what they gave us it's a folder let me open this so you can see exactly what we have from them which is pretty nice okay so first we have a style guide here we can see what colors were used font size and the font family which is great now here we have the data Jason I was talking about so this is these are all job listing we'll have ten of them not that much but you can see they have quite a few properties so yeah that will be interesting to to see how it will work we have posted act one day ago one day ago three weeks ago hmm I see they said guess we'll need something like mom on moment I think it's called two parts that time we'll see okay but other than that you can see here logo images the air company yeah so we have all the images we need for the project well I guess they're all SVG which is good we can preview them here but well we have all the images and we also have the design how it should look like one two three four five six seven eight nine ten okay let's see what we have in the index.html all right so in the index.html we have all the data at the written but yeah we won't use this what I want from this project is let me put this up a bit all right so I want the the images I want the design so we can see what we need to do and I want the data right and the side right so let's get this somehow let's see I will drag the data I guess mm-hmm let me create a folder here source which will be the data they today Donna will be I guess let's call it a although it's not an API but that ever better name if you do let me know now we need the images I guess we could call it assets yeah let's call it that yes [Music] good so we have the data Jason let me drag over the images oh I can't oh can I select them all like this and create a folder images and direct them like this alright get so I drag those let's put the designs too although design although we don't really need all of these but Noah just to have them here in the project so I can close the other project and the style bit here okay good so now basically this is what we get from them the design the image is the data and the satellite other than that no that's all I can close this project good where I am from I am from Romania so no way to learn react router that's what you mean it's so good to watch life okay I'm glad you like it maybe you could call it model yeah it could well let's leave it like this for now so assets I guess it's it's good all right so that's that now let me open the desktop design or should I open the desktop mobile I always tell when I think tailwind is mobile first right offers army you almost look like my brother okay brother yeah so Desktop design yeah let's open this area finder and I can where are you okay here good and let's have it here so we can see what's going on Elwyn use mobile first okay I guess well we'll do desktop first I will we'll do this and see how it will be changed I guess all right so what we have here we have a simple header with some illustration here I guess it's an SVG and then we have 10 boxes 10 tiles then job boxes I don't know how to call them I never know which are centered here which is good but now let's look closer to what one box has because we need to consider this when we're creating the JSX structure right so we have the box now I see there are three inner boxes in our box here we have the image then we have this detail section and then we have this tag section I guess it's called get and these two are on the left and this is on the right so obviously something like flex it will work just perfectly here now this looks like a ch3 I guess this looks like an h2 now we have some labels here and here's some paragraph and this could be span elements I guess so yeah it's good to have a an overview picture before you go into creating the the gsx in our case usually you can you'll write HTML if you don't have reactor iron something like that get now let's see should we start we have our app yes now we need to do - let me write some one two three is it big oops one two okay I think is big enough now so you can see I don't need this yeah so let's write some to do this here just for us to keep track of what we have to do first [Music] we need to study also the data to see what we need to get while we studied study the design right then I guess design and API which is well in our case the API is the JSON right what do you do for work because you always seem to have a lot of time to see this is my work I this is what they do I'm streaming yeah it's on column layout you're right Ahmed good so we studied the design and JSON to know how to structure our GSX then mmm I guess we need to create one component which we should call job board component this will be the component which will receive the data from so basically we have a JSON here we have a JSON an array of objects well this will be converted in an array of objects and each object will be passed down to this job board component right and then the job board component we'll know how to arrange it on page you could have a server to serve the JSON to the close of yeah well I'm going to do it in I think I'm going to use use effect just to get the day to put the data in the state yeah we'll see how it goes hello Yvonne welcome okay now create I guess create job the job or component then three we're going to get the data from the JSON all right pass down the data to the job bar component JBC and then okay hey this looks good for now I guess then we could style it we also need to have a way to filter it I think this is pretty much all we need to do one more 470 yeah we had his in desert we had 70 so yeah that's the record okay I think this is it we'll see if something new appear something new pops up in the middle of the job all right so study design and Jason we did that well we did the design let's look over to Jason again so we have an ID we have the company which is like a header the image good new featured okay I guess these are the tags their position role level posted at I'm just concerned about this a bit if we should convert this to date object and have a way to loop over okay and contract location so yeah it doesn't seem is just more more data it's not that complicated and we have an array of tools so these are called tools well I would call them tags but oh wow oh so we have tools and languages and what's the difference tool and language oh well so yeah language is JavaScript and CSS and tolerance reactant says I guess we're going to loop over boat and see when we're going to create those those pen elements okay my mouth is going dry as I'm talking too much you should talk to filter component yeah let's put that also down filter component um but I guess this goes here filtered data filter component we'll see if we're going to do one competitor component I will do it going to do it in the app all right so [Music] that my hair now I'm not that pretty anymore do that so yeah what's next always the hardest part is to start it gets so let's create that component we need go here create a components folder any side it was great job job art component J s good no this will import react from react we're going to have a Const job board component which will be for now a Dave I I am a job board alright so we can see the job or component and we're going to export default job board component prehung thank you very much for the donation it started with the Denis all right for those of you don't know we have a donation jar every time someone donates in a in the memory of the donation you'll get your name inside the jar and yeah every time when someone donates I'm going to take a piece of paper and write its name thank you very much again for your donation patel let me write your name okay Priyank Patel alright and the date which is 9 okay oh there you go you have your name and the amount and you get inside of the nation jar thank you for your support means a lot okay you so there's the jar there's your name there's your name in the jar seems like programming we have a jar we have a name put the name inside the jar all right so we have the job or component goody-goody now let's import it here import job board component from let's see components job or component goody-goody and now let's put it here job or component and see if we get it on the page yes hi I am a job board good good now we have this done I guess we can add a check mark we have that done we have this done now let's get the data from the JSON I'm going to import I think that would work right if I import the data from assets data Jason let me cause of that log of data so we can see not sure if I imported the data as a JSON late lately so let's see all right yeah so apparently it works we have an array Narae evolved data now how we're going to put the data inside the state we're going to use use state and use effect although use effect is not really really needed this time because we're not calling an API but as I said I want to I want to make it so that if we're removing the date the JSON and we're doing a call to an API it will remain pretty much the same now so here we're going to have a Const of jo du-sik looks like all's donation bigger than 0 name otherwise it yeah and good good so here we're going to have the jobs well actually we're going to have an array they are not yet the master of hooks so we're going to have the jobs and the set jobs which will be used state and by default we're going to have an empty array right now in our case we could have used here instead of an empty array we could have just best in the data yeah and it's it looked a bit weird because if we had to add the API later than we need to change it and all that but now if we're doing a use effect a call here let me see if I got it too right so we're going to use effect and here we're going to set the jobs as the data right and now we have inside the job so initially we have an empty right well actually let's let's check it here in the in the console oh I guess yeah let's cancel that flog jobs okay so you can see initially we have an empty array because that's what we said to have as a say state for the jobs and then we'll get the data from the JSON and it will put it in the jobs estate make sense you can make it more real and fetch the JSON file instead of importing it can I fetch it from locally sujin 30 minutes fetch it locally yes ah well let's try that I guess so let's see we can use the fetch API why use effect runs two times you can see everything runs two times now why two times that's a good question no I'll not use effect runs two times the component is rear-ended or well trended four times for some reason yeah that's interesting it should only render two times so let me yeah so for some reason two times it's empty and two times it's the array now why the time hmm interesting from Romania Jason is a text file it can be server third word from an HTTP server yeah you need to have a local server yeah so well I guess let's try it so we're going to fetch the asset data JSON and here we're going to have a response we're converting it to JSON and then another will get the data and here we can set jobs data is the fetch version and now we don't need this let's see if this works the same yeah so it doesn't Thank You Akash you have the local server now from trajector yeah so I have it but apparently doesn't like it because probably the the path is not right because it's not in a public folders yeah let me close the the mobile phone yeah so this is how would you do it with an API and just put the API URL here try it without the JSON let's see yeah same thing yeah it's already known JSON file oh well so yeah this is how would you would do it you will have HTTP your date your URL that come slash API slash jobs something like that and then this would work but for some reason doesn't fetch the local but anyway we're going to do it like this now we're just fetching it from well we're getting it from here if you can put the adjacent the public it will be served yeah all right good anyway now we have it what we want to do now is we want to loop over this day over the jobs so if the jobs length is zero we want to make a check if it's zero then let's have text saying I don't know jobs are fetching tink all right good otherwise we're going to have the job component no wait we did something so something bad so otherwise we're going to take the jobs we're going to map over we get the job but every every room every loop and here we're going to have whoops where is our chop board component okay like that and we're going to pass in the job as a as a job prop and we need a key so let's put the job that ad all right and now hopefully we're going to have ten hello or hi I am in Joburg you look at that so now we're fetching the date we're fetching the date huh because it's well luckily I think because it's already JSON and you're calling Jason it expects the string maybe hmm well not sure because when you're fetching the data is also JSON from the server who knows oh wait a second I forgot to I have an app of labels which changes the labels on the screen with whoever donates all right get it updated okay good back to back to work yeah so we're fetching fetching the data and then we're looping over the jobs and creating a job comp own job board component or every job available hello I am job I'm a job board okay so this is pretty much it for the app now we're going to have another app filter component but for now we should be good to go let me put this pass down the date style it okay this is next hello yeah try removing curly braces from use effect this I guess this should work right yeah okay now the reason we need an empty array here as the second parameter for the use effect is if I'm not wrong I learned it a couple of times but hopefully I'm not wrong this is what dependency we want well we're checking if there are any dependencies that are changed and if they are changed they use effect will run again but we don't want this to if we don't have an empty array it will run over and over and over and over hmm because the state it's well it should run over and over all so that Barbie jobs let's see yeah so it turns multiple times because it works now like which was the lifecycle method component did update and if we're pressing an empty a Hitler runs like the component did Matt will mount hmm which one is it component date month yeah yeah as I say I'm still learning to explain better I know it in my mind I don't you don't know to explain it that well okay how do feel about making a full courser react I still need to learn a couple things okay good so now let's go to our we can close this I'm going to get tailwind they'll win CSS I need the CDN I haven't used they'll win without the city and yet but it has some cool stuff if you want to customize it I'm still not sure about the light component lifecycles well they aren't that use now with hooks we have hooks lifecycles right I think that's how they called okay now we have tailwind I want to add it inside index.html here because well we have the CDN so link to the CDN oops I already have the link okay good and let's call this job for Deb app app it's app is too much to say but oh well now you can see that all the text look text looks the same tailwind is a low how it's called low let me look at it again at their page yeah and Tillet e first CSS framework so basically what it does is that you don't need to add that much CSS anymore you just add the low-level classes they have for almost everything yeah lightweight okay yeah joy is right you can use effect for three lifecycle methods joy you should get the job fast and you know so much okay so you it seems that you can fetch the JSON file only if it is in the public folder yeah okay good now what I like about tailwind is that it makes styling so easy because they already have the colors they have the spacing for you down you just apply a couple of classes not a few and you have these beautiful components look at this button now and the good the drawback with something like tailwind is that if you're using it in just a plain HTML CSS website you will find yourself copying a lot of classes when you have double components which are duplicated which is not very good because if you have for example in let's see this example if we did it in an HTML you can see that it looks pretty much the same it's just the same component copy and paste it and change the change the data right and if we had to do some changes later intel wind we need to change all of the classes which is not the best but here is where react comes and when you have react with tailwind it's amazing you just create one component and apply the classes there and then you just change the class in one space in one place not space and it will update everywhere I still like CSS which says better okay use what you like you can create your own classes with art apply mmm interesting you build Microsoft homepage clone and push it to github do you think you have any copyright issues I don't know maybe someone from the chat knows better I usually don't don't really copy things because you never know especially when you're creating the content you don't want to get strike hello Lucia and welcome okay so we talked a lot let's go to the job board I guess this class name let's make it [Music] text three for Excel all right so now it's bigger although we want you say hello Japan you can use something as apply border gray inside your CSS file when I think when you have the the Tailwind not imported as a CDN but with skunk Pig and all that during the discord yeah thank you even if you want to follow along when I'm going live if you want to join the awesome community join the discord we have a lot of fun people there including given all right so let's work on the job for component now keep in mind that this component receives the job as a prop so as a prop we could say props here or prop and I guess props and then years let me reformat this today today today you have just hello whatever so it won't reformat it for us again yet we could have props and we could say here and it look at the JSON props that company you don't need this do you go here alright so props props that job that company and now we should have look at that nicely I guess class name text 3 L 3 XL we tell when you just need to learn a couple of classes and see basically they're pretty intuitive if you want the font ball you just say text bold acting or font bold let's see a good thing is that here they have a nice search bold font weight a font bold yeah not textbook on bold and then there you go you have bold you if you want to have padding you just say padding three for example and you get padding all over it yeah so it's pretty nice nice nice nice nice good so now we have the company on the props that job that company but we can get the job from here it's deconstructing it here and then we can remove the props key word and now that's the same thing job that company alright let's work on the gsx for this style is there any ready-made style component for telling CSS not as far as I know I haven't checked yet but how did you become really proficient at it well it just took me seven years it takes a lot so don't worry about not knowing just go with it code create project start there is WI yeah but is that react based component it's not tell India UI is their HTML components okay so let's see how this is created we can reconstruct it in GS X so we have the this will be our job board component now it will be display flags it will have one two and three boxes inside for those of you who are asking which tool is days because they always get this question is the default image preview or Mac you can drag and you can man oh sorry you get the size and all that you yeah bet that tell when you eye looks pretty nice okay so let's start working on our box we need an image well let's do it here I'm going to remove this this will be our class name and it will be flex and inside it we're going to have three days now the first div will contain the image so let's put the cage here and image will go will get I will need logo so chop that logo and I guess as the alt we could use job that company let me get this out of here just so we can see the structure come on you don't like this attacks okay I just wanted to have it here as an example okay so we have an idea we have the company good now yeah this is an issue so the path to the logo is not right because we are in the components we need to go up one level inside the assets and then inside the images and what we get from the from our data is that slash images so here let's concatenate this - let's see so we are inside the components we need to go one level up then we want to go into assets and then we want to go into now we have that dot there mmm the wine might need to replace that let's see yeah or we could do I could do a find here in the file could replace all of them with just /mu get and now still not working let's see why we have the image yes it's oh we have double slashes okay it's images shortly SVG I'm we are here right we want to go up is it say the images and death hmm what's wrong is it again with the it is the same issue yeah okay let's put this inside the public and now we can just go to slash images I think we could go to slash images slash yeah so I put the folder inside public which is served here and now it will get it from there so we don't need this anymore all right yeah get your relative to the public route yeah okay there we go we have the images now let me make this background what color we have here well we have white very white but I want shadow kay kay does it should show up James with a donation thank you very much it should show up in midstream so I want to see the shadow James Maddox thank you very much another donation of $10 all right let's put you inside the donation jar thank you very very much for your support I have here this is almost yellow and I'm going to write your name James Maddox and date today and there you go like that okay get let's hold you up and put you down [Laughter] thank you very much for your support means a lot donation jar and James is now inside it officially I will create a website on my well a page on my website with all your names could you not use fragments instead of Dave's mmm interesting yeah well let's optimize this at the end okay we'll see at the end how we can optimize it even better but for now let's make it a look like that and work and then we can optimize it better I think we don't even need to use the deal shadow LG a shadow LG okay let's add some margin margin X so it has classes like margin padding board and stuff like that if you want margin over on all four corners you just say em 1 for example and they have a way to calculate how many pixels not sure which is by default but if you want magic margin top and bottom you will say you will think about the axis on which you want so margin y2 if we're at this will have margin on the y axis let's put something like 4 and save all right now you can see yeah it looks pretty nice though now we want padding all around so we can say padding four or five or let's see which works better or looks nice but actually let's have margin on the left and right two so we have it centered good so ya already looking much better and you can see we only added a couple of classes which is so nice now the shadow for some reason I like the shadow to be darker maybe MD yeah something like this and it also need on our app to have this background color so it will be different so on the body we want it actually let's go here in the index.html and add a class on the body or background Betsie read 100 this will be okay but let's see what colors we have and background color don't let the vs code extension yeah I wanted to do that before the same but I forgot so what color is this some kind of blue or green or cyan or attack this one okay I guess he'll steal let's see now too much too too too much maybe 100 all right I guess still to kill ich Betsy's blu-100 alright this this should work now we can see better the the our tiles or job our tiles or whatever they're good let's continue so we have the image now let's add all this mumbo-jumbo what we have here [Music] we have an h3 I said we have an h2 and we have so basically this is an h3 with the color this in an h2 and this is a paragraph and those are labels okay let's add them all so first a ch3 this will be what the name right so the company job that company we're going to add the labels in a second h2 this will be the position job that position and here we're going to have a paragraph we we'll have three properties the time the final what's that so the posted ad we're going to have some kind of point here but I'm going to add the stock in the meantime posted at we have contract yeah contract sorry job job that posted at job that contract and job that location let's see how this looks all right look at that Billy so now we have everything dynamic which is nice now let's add the class and push it a bit to the right so margin left to okay good for h3 let's have a class of Oh am i dot that is the HTML cool cool cool let's use that not sure if will this be interpreted as HTML yeah no it won't be I guess I just need to get that from Google here thank you bet so I copy this put it here it's not and it's not rendered by react but yeah look at that how nice thank you since you need every time job why you don't decompose yeah I kid to death [Music] can we use do something like this now semicolon where you need the SEMICON where-wherever okay let me continue this until you tell me where so now we need that color we need it to be font bold font bold we need to be text Excel and text color something yep okey okey so something like this job and dad oh okay the logo company I guess we can get all of these turn to them - mm - mm all of these and now go up like that and like that it doesn't look that well no and new whoa this is not a very good property because of that property I don't think we can do that it doesn't like the new we can't it does that's a special it's a keyword so let's just do a job that job that oh well I'm not sure why they added new but you know what now I will do this going to find all the new keywords here and change them wait is new right that we did it no he's a keyword yeah now he is new yet so we structured the property and with structured good job you will discover the structure the props and structure the jobs and now we can just remove this and add all of those alright look at that new is new I think hmm yeah me interesting now you can remove job yeah thank you for the idea good idea goody-goody now let's see what color we want here who has an eye for the design yes tail this one fits 500 text color and not text color text teal or color teal I forgot let's test them both and see which one works no tax deal all right yeah how do you do the quick multi cursor I use command + alt + command + alt on my Mac keyword Oh period my work for the duck well this works also I'm and then click or command and yeah comment and click to add well all then click on Mac to add two cursors okay okay let's focus now the colored looks right it looks right I won't bother anyone but the text is too big let's see text sighs next base is it text back well I think netting text base is like without having it yeah oops well I guess that works good now this one class name you want font the font bold we want this will be text LG and I think it's black by default so this should look good hmm a bit larger let's the textile g2 not LG itself what I'm doing alright Alex that looks pretty good maybe not dead that dark upper case what's uppercase and this will be class name text gray five hundred Nuuk darker 700 every time I come here I'm installing telling citizenry apart but I just imported the CDN so nothing special I feel that we need more margin but yeah look at that already looking pretty pretty good right I like it me like it yet so yeah it's probably not we can make it pixel perfect because these are probably slightly other colors but close enough just include CD and link yeah that's what I did get good good good good good like another fund mm-hmm oh wow I guess it works now what I want to do though I want you can see here that the height of this box matches the height of the image so for that I will use flex on the wrapper and [Music] I will use flex Direction column I just need to see black's column Black's real flex color good flex column like that and now [Music] Truong with two let's call ok-kk not God okay and I want to push them as much as possible so have a space between let's see justify space between I always forget let's install that extension how it's called tailwind intelligence is able I have it why doesn't it work then do I need to press something he'll wind tailwind doesn't work that's right justify between okay so that we have to guess yeah probably justified between it doesn't work in HTML either so all right you can see now that this text goes down there so it's very late spaced out it's crazy how many projects you have made yeah kind of it it's crazy what happens if you coding everyday and for some reason I got addictive dicted to do the live streams over 9000 projects now it's not true probably over hundreds but not 9000 where do you get the number from now it's impossible to have that man yet now let's create the right part here this one and for dead Dragonball me okay I didn't I I didn't watch Dragonball when I was little because it wasn't on a channel which we had or I don't know it was I didn't catch it yes I work for companies do you guys enjoy this dream so far they like react they like tailwind let me know this project was requested so should should be good are you freelancer now no I am a full-time youtuber I could say a double full-time youtuber because I work much more than 8 hours but yeah what was I doing here Oh creating these labels or the labels I [Music] to get the languages and the tools so let me go of our language [Music] languages and tools are pretty much the same Oh Steve naturally back end list a lie egg yeah yeah that could work or we could just use I will use pen elements let's do the language yes there is possibility to have zero so well I guess with map will work even if it's zero oh it will be undefined though won't we an empty empty array so we need to check do we have languages if we do then we do the map otherwise just have an empty string sir okay so languages map we get the language and we get the ID index I guess but you know the index is not the K for us to use here for that key but let's see so we're going to create a span and we're going to put the language inside see how this works yeah language language Oh like this CSS JavaScript perfect now the same thing we're going to do with tools tools and this will be too now-ish I don't like here is that we're repeating so what I'm going to do I'm going to do return here and I'm going to create an array called I know languages and tools lang and tools I guess and it will be an array of language yes [Music] but if you don't have language defined oh boy so [Music] let's think so we could have language we could don't we could not have language I want to take the languages and the tools to put them inside the Langan tools so we don't do this 2times now we could do languages and tools but we might not have the language isn't older then we can cannot use this what happens if you spread the operator on an undefined let's see and then we can use this and this will be Lang and to we carry over this but yeah that's tall is it not iterable I still love vanilla yeah yeah react looks much looks much easier than vanilla one she was trying to make my filter work yeah they have I like both so is there away languages and and spread and literacy knew dan can other way would be C language Jews then lank and tools push and we spread languages languages like that and we can set say the same with tools if we have the languages if we have the tools we just put them inside that array all right cool cool cool cool cool cool cool cool cool let's put the languages first we have a place for both of them we just need to style them first class name I want this to be this reflects I want them to be aligned Center justify:center I think align Center is the client center one let's see why don't you work BG read 900 okay so align Center now may be blind content Center an item's maybe it's a item center content center okay okay content say this is nice with the Tailwind a website well actually tailwind cheat sheet there is a cheat sheet which is very nice we could years we have everything on a page look at this yeah let's use this instead so we have the layout the Flex box we have the grade and don't you agree that much typography sizing colors borders of well at between allows justice if we need it good let's see now do you want to Center just if I sent on flex why don't you want to go to Center aligned content line items aligned items items Center a map contact my bad our eye look at that oh nice goody-goody so let's remove this and we want to style the span of it class name we want to have a background color of I think the same color we have for this yeah the text is the same so the text here is the same when background till 100 right something like that let's make it on twirled let's give it a margin three or something okay if padding to around it all right margin too much let's make it Marge into it's still with having pills now it so it doesn't have any components you just have the basic the basic ones everything's like neck project should be an alcohol tracker you keep track of how much you have for drink too much yeah figured I'm not drinking so it wouldn't be useful for me now I want them to be pushed to the right so instead of which one and some some of these should be end okay not this so just if I just if I can't and justify on the Flex end so flex and oh I know why uh well actually let's have today's margin-left:auto and then it should push it to the right yeah look at that noise so accent yeah so we we couldn't do 4x and because let me show you justify and what we need to have a color so background blue 900 so without is what I wanted to push the items to the right but they are already in there to the right right and what we have to do is to do margin-left:auto so it will push the entire container to the right dead so yeah uhh this already looks very very nice isn't it is just me petting more one more six yeah something like that pretty noise now let's add this for somewhere to the to the to the do we have it in this design I know in the images background had their desktop yeah so instead of this we're going to have a header and this will have an image come on why don't you help me source alt background background image and this will be acid no images background there stop jpg SVG I am very curious if I didn't yeah look at that I did it all right but yeah it should have a background color this component so class name so the SPG only have the shapes and we need to add a background color of this color which i think is the same background deal 500 yeah all right let's push everything down a bit Margene but or so Heather doesn't want to use margin-bottom why why-why-why oh is that just a little margin let's see in the cheat sheet margin so four is one of them okay we need something like twelve some opacity doing it I don't know doesn't need a pest in my opinion boo hello good evening you recently found your channel I'm really impressed by our content thank you I'm glad you like it I recently started booster for but I'm thinking of switching to tail wind in my opinion you can work with both if you want something I work with bootstrapped bootstrapper worked with it a lot I don't know years but now tail wind is picking up and it's pretty nice but with tail wind you should note CSS better then you need to know with bootstrap good step already has the classes for you just apply them and you don't care if they use flexbox or grid or float or reading you just applied the column and you have a column here you need to create your own columns and for that you need to know flexbox you need to note you need to know which classes to use from there wind which to the flexbox thing alright we style it pretty nice now let's may have a couple more things to do okay we have that I have one hour and a half left yet so we need also style it and I think 5b mob style mobile I guess this good should have been the first one each shirt styling oh yeah right good a good point also we need that rounded there so there are still a couple of things we need to do so let's put round it here to have that rounded corners get now let's see oh and we need this are you still going to do Torah only so the video will be smaller not on this one I already recorded a video in the morning which is now edited being edited and added I sent it to my editor so let's create this which will go here do we have is new if we have we can use the short circuit circuit operator here to create a span tag oops span like Beth Ann this will say new or I guess let's tell everything and we're going to have also featured where is it each role and level where where are those roar and level we're missing some some things here what's that so roll and level I think those are there yup let's see the first one role level yeah so we need to push that inside our right but see now the good thing that we did this stuff is that we can just add role and level here and then I think this could become tags tags this will be tagged and now look at that we keep quickly added those so pretty noise did you know you can change natural fight site names for free the name is with that notified the end always though yeah that's nice editor you had that job opening yep all right so see how fast we added those which is pretty nice middleweight middleweight is that the level middleweight I always knew it's middle alright alright let's add these tags where are they by the way we should have them oh no no okay we have them so if we have that we have new and we have featured now we need to style this class name let's see what we want this will be pretty much the same as this but reversed color and text transform uppercase so let's get this it's all surrounded you so a class name here I guess let me put it on another row so we can see better we're getting deeper and deeper back still so this will be background till 500 and the text will be dead not sure well we're going to need some margin and padding yeah margin let's remove the margin from now and rounded I will year's round it full is that the thing for radius where is the poor there where is the board there Bohr radius wonderful yeah haha I knew it pretty happy okay wonderful and now they're rounded awesome now these well we could copy this I guess and we're changing this to featured and we just need to find the color which is let me put the color and then I'm going over the chat so color Bagon call yeah sure so some kind of background cray or is it let's zoom in yeah I guess great could work background great dark some dark gray 800 background gray 800 and the color will be text light I think let's see yeah so okay look at that how nice and we can apply a margin to on this and it will create the spacing between them so nice maybe the padding is too much we want them to be a little smaller actually heading top one padding left the right - so padding on the white one and padding x2 adding y1 adding X to right look at that so nice looks pretty good yeah so tailwind becomes my favorite CSS framework okay are you thinking of maybe publishing some paid free more robust courses yes I want to do some paid courses because YouTube is not paying that much so I need to do it even though I like doing a lot of free stuff live streams and videos but fortunately can do only debt this little took me almost one day well it's fine don't worry I have experience and I know what I need to do so don't worry about that it will come with time I did not get how you added the features classes these ones each are new classes so it's I'm checking if we have the tag or whatever the flag not the tag and we added background teal textile font bold margin padding padding rounded yeah so the difference between padding and margin we have the box model let me show you quickly I should make a bit about this box model but always when you don't want to know the difference between the padding and margin look at this can I have it big tamo okay so this is the content right this is the new in our case the text the new we have padding around 8 and around around the content and between the border so here we have let's take which one yeah let's take this so you can see there's the text this is the text and we have padding between them and the border although the border now is 0 for us and then we have the margin the margin is the space outside the border in our case here is the space here between the tags not sure how well or I guess here you can see it better this is the margin and this is the padding just play with them create a box give it a fixed width and height give it a text inside and give it a border a padding and a margin and see how it works you'll you'll understand better okay super clear thank you well I guess I could crop this out and put it in a standalone video invisible so setting it to zero wouldn't directly change the look of the content right not really you could there are some elements like the UL which has margin by default so putting it to zero it will it will remove the margin so there it will be closer to its neighbors neighbor elements I guess could call it you right let's drink this is my very small cup it's helped it has a weird effect of using that's big but actually it's very very small it's not that big well I was kidding it's big all right look at people subscribing to my channel let's get to 100,000 subscribers by the end of the year shall we alright what's next we we added this now what I want I want to add this but this will be tricky with tailwind will it let's see dinging dinging so basically this will be another element but it will be positioned absolute and we're going to push it to the website but no that's the left side for you so we're going to push it in that side yeah let's try to do it border left border left won't work I had this discussion let's show you let me show you why okay first let's see can we Oh can I do yeah pour the left good so or the left wait so let me do if it's featured so only if its feature that means that we're going to convert this to template literal so we're going to have some logic inside if we have featured we want to have boarder left to be a boarder left board or left to we need to set the border color let's set it to black border black so we have borderline border to border style or the solid do we need to put all of them border solid not one percent sure but let's see so save this where we are yeah yeah so you can see we have let me put four so it will be bigger well actually look at that if we have to so that's what was my issue before if we have to you can see there is a little corner and it's not perfect but apparently if we have four it overrides the corner so mmm actually it was wrong I thought that we need another element but apparently how much border we can have wait two four eight yeah so I guess because it's so big sorry so it's so big that it covers that corner Oh my left has brought eleven it's working initially I did it with the position element but apparently it was wrong oh well let's his border left for and make it what color our TL border TL 500 all right and these two now have that interesting yeah well so what I did last time when I had something like this is I created another element gave it a width and a height and position it there but apparently this works awesome [Music] get further it's border left color border [Music] yeah you can set though all of those well I guess we could if you said all the border this doesn't really matter because well you can't really set the different borders yeah so you set the color of all the borders you can just set the width of different borders left top right of like that oh well I guess this works now yet oh let's do let's do the responsive part which now is broken look at this it doesn't look right let's open the mop by our design let me I'll close this all right look this there's a lot going on on mobile well actually we just changed the flex direction to kala hmm and we have here some kind of light let's see flex flex color no direction what was it Beck's called yeah look at that already looking much better but what we want the image is smaller yes okay the weight we eat real quick now with - fixed-width here let's use 40 [Music] classname wait 40 height 40 well might smaller 20 all right can we have negative margin you don't know because that's what we need here we need to put pull this image up mm-hmm let's see what tailwind allows us to do yes look at that we can have minus M well that's just so beautiful so margin minus margin top can we have that margin II [Music] yes could we do that with after if the border did not work well yeah sure we could have how long have you been seriously coding and any suggestion for learning beyond terminated CSS I've been coding for seven years well seriously for like five while I was in college so I guess that counts I start seven years ago I wasn't that what related so it was more like a hobby now where you can learn CSS I would suggest you take designs and try to match them to HTML CSS I would learn with with tutorials if possible but yeah it depends on what your learning style margin-top more the image could we do position absolute and relative on the parent Eve and then move the image around yeah my throat well not with tailwind I mean their wind allows a bit of customization with a margin but not that much this is really good tank story I'm glad you like it thank you for watching so we just need to find out what the I too much keep forgetting what's the property so we have 2060 sixteen hopefully it works with 16 finger trust all right I guess that works it's a min in the middle there delegate and we can push down margin bottom margin but yeah now too much Thanks even too much for okay but now this also needs to have margin more margin so margin let's make it ten yup it more on the why so make it why the 16 and exhbit 10 okay good look at that this will be a bit more spaced out but we'll see in a moment how to do that get-get-get nowadays should by default be on flex start Oh justify well I guess we don't need this we just need to not have this always hit starting the mobile view using Kelvin I just restyled it and then I'm going to do the desktop one I guess we should have you did this the mobile first oh wow yep no media queries where we have well you'll see in a moment what we're going to do so let me have a bit of margin and padding there on top margin-top for padding-top for order top ooh order color not border gray 200 border:solid if I nailed it it's so good well noise the color is a bit darker so yeah and I guess the porter top it's one oh we don't have I guess border tea yeah yeah and now it's too dark or not to to to to to alright now we'd have a bit it goes a bit outside which we don't like key because we have margin here [Music] you [Music] you and don't want Margie [Music] well I guess we could have padding all around and yeah no don't solve it marginal around it should push this like yeah awesome awesome awesome and heading ya know still the margin is not good we have margin here so the for the first element we don't want margin do you ever try out any other family yes I have a series fluorine versus X and there I'm trying new stuff I only did one for now what I planning to do more so I guess let's put this margin-right for and yeah look at that now it's pushed there on the right ah on the header' here I feel like you need beat of a margin Oh Marja my two yeah like angular view and swap don't like angular other than that they seem fine okay now this doesn't wrap so here we want flex to wrap it doesn't go to the next line all right flex wrap and now we have the problem of them being under each other so Margie right and margin-bottom for okay I guess that works adding top cape or the top well almost perfect we have more margin here but oh well I guess it's something we could go with margin for oh well actually margin for two to two wicked years margin top four and margin X bar and then margin bottom will be zero that will remove some space and now it's better all right so I guess this looks good enough for mobile right oh I like it now let's see what happens if we go back on that stuff this happens [Laughter] now we need to add the responsive part we're on desktop we do the other side yeah so keep in mind next time when we're doing tailwind window mobile first oh well - to digital let's see what are they responsive stuff we have [Music] responsive breakpoints yesö MS that am Beck hey welcome back so SM SM and the mean weight mean weight limit I guess on SM so everything now with what we did part it what what is the different between mt NM x mt is margin-top and X is margin top and bottom so M X its margin on the sorry sorry no no I'm rock so MT is margin top and X is margin left right because it's on the x axis and y is on the y axis so top and bottom so you have you can assign for six seven seven types of margin you can do em which is margin all across you can do em top mt mb m bottom m LM left m and right and you can have em X which is left and right on the x-axis and my which is top and bottom or horizontal and vertical yeah I keep I have in mind the X and y axis always mobile first it's easier to expand outward and add things than to crunch things down yes but the issue is that when you get from the design you will always get the desktop version so you have to do the mobile version in your head this is where I got used with the desktop version because I always got the desktop version I converted it and then I just pushed everything down on a column on mobile so yeah this yeah this is what I did before so oh wow now let's see yes yeah it's a we well in this case we have both designs which is good but usually you only have the well usually most cases you have the desktop version okay in order to use breakpoints as far as I know you can have something like this at the end or whatever you can do SM and you can have a margin top zero so basically we are resetting the margin-top is it right English class yeah look at that so when the the viewport where is it is min with 640 pixels we are going to remove the margin top negative but if we're a mobile we have it so that's pretty nice this is basically the responsive part now whenever you want to add something you just at the SMM or MD what are the others SMM dlg and Excel okay what else so here we want where you are so we want this SM to be flexural get get get now let's push this to the right so on the SM we want margin-left:auto go to the right please thank you now here we need some more stuff SM order zero [Laughter] hello Denise welcome to the live stream then is with another donation all right guys you want to be the top of the top donator yeah thank you very much Dennis let's add you to the list well to the donation to the donation jar how you Dennis just came to interrupt my stream again right [Laughter] Oh Dennis ivy uhh well I said 10 I guess that works networks well let me do another one this looks cool yeah it's their wind which is pretty nice I want to learn that one better it's pretty pretty pretty nice okay all right Dennis there you go again there's a name with my beautiful handwriting clean yeah it's pretty clean alright let me fold you and put you inside the donation jar vii hi I guess let's face it then this is your father giving your pocket money yeah all right here is Dennis and there you go we are probably halfway through with this I'm going to buy a better webcam I guess and other things to improve the live stream phil's uppercase yeah you mentioned that once again but where oh these ones oh okay okay good good good I forgot that thank you so this could should be text transform text uppercase is that the class No let's see uppercase next up oh just uppercase Oh Go Go Oh Burke is here uppercase here let's make a donation Denny's jar yeah we could and now they seem to be smaller size or well let's leave it like this good so what else we need to do on desktop I guess here we have the padding top so I guess SM padding top zero and SM margin-top zero we want to reset the padding in the margin all right Getti goody-goody [Music] petting top zero wait we have a margin top and margin X yeah that's good so something's wrong not centered anymore why why are you not centered a flexwrap items center and mix well let's see it's play flex okay line items Center okay do we have right left okay tops okay yeah would be centered does it need item Center I justify a no heightened center-aligned a decentralized way contents justify:center No yes she's weird Arjun top:0 oh wow teaching my graphic designer wife HTML says right now I'll get her to watch some of your stuff yeah that would be cool I hope she likes them oh I see so we have that margin bottom here on these so let's remove them as a margin bottom zero all right now they're septic yay I think it's all now the image is not not a goody-goody anymore mm-hmm yeah we don't have the desktop anymore but on the image we added a fixed width and height I guess some small we could do wait you so we have 20 24 32 let's see 24 32 something like that so that's the high 20 32 I want to be yeah that's too much 24 and wait 24 we should make a tailwind like maybe the top 20 years classes in these apps yeah and now that text has more this tag now this text where is it Arjun why so I guess smrg y0 what now so something is not cold let's inspect and see yet this is a cheat sheet on tailwind which is pretty nice yeah so that [Music] the image has so paddy margin margin bottom somewhere oh and before okay okay okay okay let's see more that we don't need to do what we did last time yes but instead on image as a margin bottom zero I guess could do as a margin y0 and remove this because that's both margin-top tomate fingers crossed all right look at that I still don't like this year too too big so let me find text text text text SM some spans here texture make it just a bit smaller all right good hey I guess that's all and now you can see we have desktop and mobile they don't look that good at this rate but oh well uh nobody look perfect this coding we're challenges are really cool as well I can do then but I'm so slow compared to that well practice practice makes it perfect all right I guess that's all we spent we spent a lot of time Intel wait yeah the shortest one are critical okay okie dokie let me think so we had some other react stuff to do right the filtering let's see mobile wood filters now let's see well I guess yeah when you do short challenges we we did the last night okay now this will be interesting so every time we click one of these tags it will be added here that's what's the time seven hmm don't have that much time Oh so basically when we're clicking days this should be done tags when we're clicking them we want to call them click and add them here and filter days by that tag create filter array yeah oh boy one issue we'll have is that these tags are from four different properties for some reason well that's one all the problem all those until I guess let's let's start working on that and we can see what's hat what's what's what's happening so we're going to need instead of jobs we're going to have a filtered jobs filtered jobs which will be jobs like that well I guess we could do jobs and we will filter by tags let me think Center to to to to to to to so let's create the function filter by tags now instead of jobs here we're going to have where is it map jobs map we're going to map over the filtered jobs right and this function filtered filter by tags let's put it here and this will get in the job yeah we need to return something so return job now yeah that's the issue that we have all those all of these tags basically there's no difference when we're clicking on front-end or react on the UI but on the backend sort of if we're clicking on front-end we need to check if we have the role right if we clicking on mid-weight we need to check if we have the label the level so I guess we could create the tags again if you filter immediately on click then you might have cases where you don't find the next act quick that's what you mean job or tag as a parameter well this will be job turbine yeah it's not and we're going to get okay Const here we're going to have filters and set filters this will be used State like that and now let's let's do the same thing with tags so we're creating the tags from the roll all level tools and languages we're getting that out of the job we're creating these tags and we want to return um [Music] tags dot includes so let's see we have all the tags and we want to see if inside the filters we have that but if you don't have filter we want to return now so as yeah I don't pass the Paramus is not called right so I guess it'll function get the job we created tags and we have the filters so tags find some inside the tags we want to find what oh boy we get the tag and want to do filters that includes tag find or some every summer if the that length zero then won't return true so we don't filter it out we can do this up here otherwise what created the tags so we're getting all of this right from the from our data now when we're clicking on front-end this will be added in the filters and here we want to check for the tags if it has one of the filters so we're checking basically array with array and this is why I do tags that some so at least one tag should be included in the filters but if we the filters length is zero then also be visible Asaph thank you you too can you take those properties on each object and create an array of those properties values tags iographer then check for items that have it is the same thing because here so this is how the data looks we could have languages we could have tools and we have a row and what was it level and we need to check all of these well now when we're clicking this is another thing so when we're clicking on a span on click will be I'm going to date like now no but it will be handled a tag click and it will be called with the tag handle tech click will come from the parent as a prop now needs to come from the parent so we have the jobs we have this and the tag click and here when we're getting the job setting the job the key and we're also going to send the handle click tag which will be our handle type tag click which we're going to create here I'll stand at a click which will get a tag and it will do set set filters and the tag Orion is in the zone yeah I need to be in the zone because I need to leave so if you filter by HTML then there is no way to see the job and lesson but not sure what me I think what you should be done at this point to get more user in create a playlist for 30 minutes okay yeah I will do a standalone video every day so that will be good if you select multiple tags do the items have to have every tag or it is just one of them one of them you alright I'm back and you hear me now [Music] some know sunk yes okay so apparently my Mac died not the first time it's older Mac and the parent victim doesn't support streaming chat open vs killed live server browser death okay yeah so Patel you were saying that it's too long yeah you were like yeah my life it is a bit long I agree but I'm doing it like you know so it's a live stream can't really can really crop it because well this is the beauty of life swimming I interact with you I could just create it and then with really called it you know and that's what I want to do in the near future refresh the page again defrag program yeah I need the better Mac or need to stream from another computer and record the screen of this Mac something like that oh well you what can we do yeah exactly I was just saying making place like 30 minutes with each concept yes so that's my idea I started today to record one video per day and I will cover all the topics in the livestream we're going to interact we're doing that fun code together crash the Mac and have half of people leave you know fun stuff like that nevertheless ah interaction is nice in this standalone video is informative but it's just that okay someone makes a lot of noise outside let me close the window [Music] okay me back yeah joy so the live stream will be just live stream and that's all it will be uploaded uploaded on my channel because some people like to like to watch them but what I want to do in the live stream we're going to build something and then I'm going to rebuild it in a shorter video 20-30 minutes because I already have the code I just need to go over again and explain it and it should be better I tried yesterday too the life seemed in such a way that it will be already ready for cropping but yeah they don't work well all right so let's see let's see what we did here let's stretch a bit open the live server again hopefully doesn't die would it not be too much work for you well what's the other option either do the livestream and crop it but that that means that I have to either get rid of the interaction with like people from the livestream and just focus on creating content or I could do what I'm doing now interacting with you and doing it again faster in the live stream in a standalone video yeah some people may like the whole stream cut is bad now not only your pig I don't know if you make smaller video and then again start in your livestream yeah so this is what I'm doing i I took a challenge of myself on doing one stand-alone video everyday in the life's we're going to build different projects and then the other way the the next day I'm going to build a standalone video in the future hopefully I can somehow find a way to just crop the livestream and have it that pushed again up that will be the best scenario but as of now as of now and not that good at that good at that all right let's see if our filtering works yarn start maybe do full consultation on the video and once you are done people may interact yes that could also work but that also means that I either have the entire code done and I just go over it and explain it and write it again like I do in the in a normal video or I have all the code here and I just poop it up I know that work that hard worker I could be even harder I guess I don't know maybe I am okay so we have this here let's let's see the tags so we don't see the tags yet let's make a diff here the field yet what are those filters yeah I'm not sure if that will some yeah okay thank you very much for the donation I will use the donation to buy a new Mac it gets I think it should I don't know get the project make some money and buy a new mac or I could wait a couple of months of donations and buy a new Mac but the thing is that I love doing life seems so much I would like to only do this all day but yeah not yet probably let me put you again you I think you are the the second the second-most the second-biggest donator swimlabs come on put that there put it on the screen all right good I also wanted to find some sponsors which could work but yeah no one responded find me some sponsors will you share this project yes I will have it on github your video quality is like top quality like the video video quality the visual or the content alright here you go again two dollars and you go inside the donation jar your content yeah I'm glad you like it with time I hope it will be better but yeah the nation jar oops and now you're in again thank you very much for the donation I appreciate it I guess I could add should I add here on the screen somewhere like a progress bar on how much donation I need to buy a Mac or I don't know they think that will be something useful I killed the death good so what I wanted to do here the filters right filters length Thank You Mistral filters that length if it's greater than zero then we want to create to go over the filters way to filter and have some kind of span with the filter inside now by default don't have any filter but if we click look at that front-end senior HTML CSS javascript javascript javascript javascript javascript that's not good but as far as I know it also works to filter them sass so the functionality works CSS let's see look at that noise uhh I won't be able to finish this I have a meeting in 30 minutes but I guess we could try last name let's make it background:white shadow md i think i want to do something like this I want to have a filter by default CSS I guess CSS like this now let me see here what I did to have the same design let me copy this Oh so here we're going to have a similar board a box with this this is why I copied we won't have the SM we won't have the featured a flex column no background white yes shadow yes margin padding rounded yes yes yes okay and now should have similar or yeah awesome now these pens where is the design okay needs to look like this sort of so this and it also will have a click event which will remove the filter yeah so I hope to at least finish the main art handle click now handle tech click tag is not defined yeah sure this is filter handle filter trick and this will be filter so when we're clicking the filter we want to remove it from the yeah and we don't have this so basically now Const and the filter click we have the filter and want to set filters to yield tears that filter pieces and we want to hmm let's call this past filter this will be filtered by filter filter now something's wrong doesn't look like let's put an F and if F equals not equals wait I want to remove this so we filter out if it's equals if yeah if it equals okay getting tired [Music] okay so yeah it looks like that if we click it it will go away and if we people we will have this okay so we get these it will filter if we click them it will go away now like tongue twister filter filter filter yeah it is what I want today is cursor:pointer is that the class yeah and also on these cursor:pointer now these have an X usually in this design where is it but oh well yeah this works I guess now what we need to do is to not add if we'd already is inside so if filters includes tag just returned so avoid reading the tag so now we can't add senior multiple times alright but let's have this out and one more thing have this only if we have the filters it will appear okay I messed something up what filter filter is not defined filter filter filter filter winterfeld are okay so now if we click it will appear if it click it will disappear hello get middleweight react in the wait I turn those days we only have Python click on this I guess how could we add that X what's the time well this went faster so I guess inside here which tag to use or react let's add inside here span with an X with an X XHTML I want an ex entity entity close yet this one all day okay so I want that to go here now get so if we have this we have an ex let me add AB can by default so we can see what we're doing CSS now this should be class name have let see background color of decent little color of these so let's get that color background color from here which is the new tags of background and text goody-goody yes now I guess we need to make it be big you you mm-hmm I could I guess we could do margin or so goes yeah nope [Music] let's take this and have two spans inside this pan looks we're now but have the text this would have the tax and something like that now we want all of these instead of the colors cursor:pointer will go on this okay now the margins and padding we go there the rounded will go there on the parent one Margene's 4k I guess cursor and only have the colors and that side bald all of these goes there and now we have something like that [Music] forgot that Margie font:bold adding we have panic so man still doesn't work they need padding unders [Music] okay that's the bedding here now I'm just try and there okay pretty good he rounded I guess this could be text to excel yeah patting one No [Music] nope okay I have another idea let's revert everything and this X will just go in front on the fielder yeah it's not the best but now you can see that it can be closed good enough Oh Jack welcome you're joining now good better late than never and now let's make that I guess I could have some margin acts but no March but or I guess we could have margin but remove it on SM okay get now look at that we have filtering and with a quick there's the only left wait yeah with this this very good feature I literally watch yeah let's add on the right filters length we have this Steve I will use this here I'm going to have that the clear button you no actually no I need it inside here the white box okay and this will have a class name off let's see font bold text gray 700 all right and maybe margin-left:auto go to the right perfect and this is clicked unclick wheeler on clear filters guess what the clear filters method will do we'll just set filters to an empty array okay sorry for you but what is different between empty and MX empty margin-top MX margin left and right MX on the horizontally on the x-axis okay so now if we clear this it will player all right I guess this works one thing I noticed when after my Mac broke is that on this big size we have it big so what we can do this app to be a container well actually not the app let me make this fragment actually everything after the header so this will be a class name of God data oops get this and put it around everything save and now everything should be centered almost margin Otto get now that's our application I see another buck the image is not perfect but yeah look at this we can see all the jobs it does like the margins being so big here so I guess here we could the margin why on SM to be and for let's just No I guess it's good maybe no to be smart all right like for okay there we go it was a fun project how much it took almost three hours but yeah I think this will make a very nice standalone reactor force well course video hello Brian how are you welcome to the live stream kay what else yeah I wanted to fix that image so the image here I want it to be in the app the header image I wanted to have a class name of weight fall ah yeah yes very nice react series they will be helpful for a lot of people and yeah we also have responsiveness here I guess we could change ascend to MD because this doesn't look right even now even tall G well now so we have som the LG Excel so that's the debt where we have s/m Sam Sam has Sam with this all over place let's make it only once let's make it LG and here we have a lot of SMS all of their Sam's oops them want them to make it LG and now we should make it better yeah look at that by default on LG it will start to look like this one thing you might have noticed is that this is on top there so we could I guess we could get margin-top a bit up wait - two - two - where is the filters container no this one margin why margin bottom but margin top will be - 16 let's see alright almost make it 20 and you can see the image is on top of it so do we have oops where is it here flex now flex zet index here so z10 let's use that so we put it on top of the the image but it doesn't have position so we need to do do we set position:relative relative so then it can have z-index and look at that now it's on top okay oh boy 2 hours and 43 minutes this was a lot I didn't think it could it will take me so much but yeah what are your thoughts on tailwind what versus material.you I I like telling a lot I haven't used materially white that much yeah so we can now there is a thing with the filters is that if for example we filter by CSS we have to but if we add HTML we have in front and we have all those so it does a filter by all of them so the project needs that have all but rather if the project has and this could be very very easily fixed by changing here for some to every every and we should be going okay or not CSS okay some new rock tags every tag includes no no now so let's eat some tags we go over the tags and we check it if it's inside of filters all the tags oh I guess we could beat other way around so filters every filter tags includes elder so we do it the other way around which get the filters and we see if the tags include all of these the filter is inside all the text right something like that okay so now if we do here senior only this will remain okay that's it folks I hope you liked it it looks very nice thanks to tailwind also responsive look at this very very very nice yeah thanks to fronted mentor for the design they're not sponsoring but they could danny's thank you very much again for your donation will there be in the video will it be there in the video not sure what you mean if I do the standalone so then is once to match three Inc okay let's add Dennis to the again inside the donation jar yesterday then he said that he'll he'll match whatever donation up to ten dollars which was crazy then is you're a crazy man I need to rewatch this thing again yeah 10 is Ivy for the 8 [Laughter] James you're still around thank you very much I really appreciate it guys so let me add Dennis and there you go James sweeter it attend donation $10 donation there are two 2020 yes sir where is it there Dennis is the craziest the the bar here didn't even get to update will you do this in vanilla JavaScript I'm not sure I like it in react so here is Dennis ones I'm glad that you learned a lot yeah it was a fun project it was really nice thank you very much Dennis you're crazy thank you James very much yeah your and I really appreciate it what will be the next topic tomorrow I don't know tomorrow is Friday I usually don't say more extreme faster Friday there is the donation jar once for Dennis is this hosted somewhere to the people who contribute yes I will be putting it on github and let me add James and then it's again it is this some kind of donation donation fighting game so James you uhh James medics all right there you go James with a yellow wish thank you very much I will create some day I will create a page with all the donators I guess I could easily get this out of stream laps okay here's the next job here's James and here's James inside of the nation Jack and now Dennis again I said I wrote Dennis so many times these past days [Laughter] I could try writing it with guys close okay there you go Dennis again okay I really hope you guys like the tutorial I really like how it went and we tell when they react I like the combination very very much my new website will be built with tailwind and then it's really be out there paying for for in strenght well I don't need the rent now I just need a new mech apparently because it keeps crashing the nation jar that is that is in generation yeah maybe before your stream right a few in advance a few what smaller video yeah this will make a good smaller video I think I will we'll record it a template for Dennis yeah just copy paste [Laughter] yeah sticking out with Danny's name yeah he donated so much he thank very much for for everyone who donated I think we had how many of the nation's we had let's see one two three for this is the best the longest I mean the most donations in the stream I know it's not any P equals the most donated one and one [Music] to three four five yeah oh it's five I think now we had the nation before just the chat didn't not showing it the nation from James before and from am i right yeah and from react taking praefectus also the second donation okay get good good I need to go in another in another meeting I guess let's see I'm going to spam other people's video what's the total donation so far how much does you to take you to takes 30% and if you donate from Android or iOS it gets also 20% unfortunately but yeah better debt than 0 now come check out the streamlet with different username wonder why it would not go more than 60 yeah so with super Jets they take a cut yeah 30% at minimum up to 50% with PayPal I would get more but it's not very easy for with four people to donate with paypal and yeah or stream laps but yeah it's easy to press the button and just click uh yep all right if you have any other questions I will be here for one two more minutes other than that after that they gets entire I don't have water that much paper it will get me the mo the most I think only takes five percent yeah stream labs also think it was send it to paper and it will take a cut so PayPal directly the link it will be but I can't tell people go donate paper it's not nice if they feel like donating and I think's good I appreciate every dollar it means a lot thanks again for everything you're doing thank you joy joy go and apply for jobs you know so many things go and apply for jobs get a job and you can split the salary with me [Laughter] all right get thank you everyone for joining we lost a couple of people along the way if you're still live say hi or bye or something let's see who remained until the end and yeah it was fun I really liked it I will put it on github it will I will also put it what was the net Levi this three bar Akash infographics I am NOT here okay Sam I will put it here in this page but later Mistral Brian okay get take care everybody and I'll see you tomorrow I will do it probably I will do a live stream tomorrow but it will be sooner probably will see please put the whole video on your YouTube if you don't mind yes it will be automatically updated on YouTube you need to wait a couple of hours for all the three hours to be uploaded by default you only have the last two hours bye-bye everyone thanks for joining I really appreciate your support give it a like to the video if you didn't share it with your friends for them to watch it will grow the channel and yeah I will appreciate it and thank you very much for the donations yeah smaller piece of videos coming every day I'm recording a smaller piece of video on broad topics so don't worry that's coming starting next week bye take care

Channel: Florin Pop

Views: 34,654

Keywords: florin pop, live coding, live, coding, programming, design, design to code, html, css, frontend mentor, design to html/css, tutorial, programming tutorial, github, netlify, website, reactjs, react tutorial, tailwindcss, dynamic website, json, reactjs tutorial

Id: JZQ8m08cbF0

Length: 173min 12sec (10392 seconds)

Published: Thu Apr 09 2020