ionic 5 Movies Application UI Design From Scratch - Free and Open Source

hello there we will be working in this UI project using ionic 5 with angular framework we will be doing the header with the icons the mini icons search icon we will add segments in here and the tag of the categories then the slides of the movies with the images poster title and rate we will be doing this all with ionic 5 and angular framework here I'm having the repository under my github account my name is Habib by the way so here is complete guide how to use this project it's free and open source this is my github account I have few repositories of ionic designs especially in UI design this is one old project with ionic 3 this is another one with ionic form this one also with ionic form and the last one with ionic 4 so this one will be using ionic 5 in this project and we will be building this nice looking application let's start here I will be starting by making a new ionic application up by using ionic start I will choose angular framework and the project name to be movie up I will choose the blank start a project as a template here I will not require to use capacitor so I will choose no then the application the created force it will take a while for the project to be initiated so wait till its end after that we can open the project in the code editor of our choice I will using vias code then I will be starting the application by using ionic serve so I will wait for this to end here it's completed which is known for creating free ionic account but they have one so I will navigate to the project folder CD movie app and I will open this in my code editor like this then I will open the project by using ionic serve so this command will run the project with the library loading so here is the file structure of the project here we have all the ionic foils for the project we'll be using the SRC folder in our coding so will you wait for the project to run and compile all its coils and to open in our web browser I will go to home page and we'll go to the CSS and clear all these then I will go to HTML and clear some of base I want the onion content to be blank and I don't want the title I will save it here is our application is fully blank we have the header and the content what we will do will get rid of this border in the header so I will add a class which is ion no border I will save then the border should disappear okay here in the ion toolbar I will add the buttons okay I want this lot to be end on click I don't want to do anything in here I don't want to text here I want actually a button for search so it should come here like this and another button I will call this start look it end I want a button as the menu so I will use grid outline will save it and it should come here like this okay we have done our header so I will come here in the content here I will add I on segment gave like this I don't want one change and the default value I want one and I want it to be scrollable is this here I want different segments first one I want the most recent movie movies then I want coming soon movies and we've had two extra three I want box-office and the last one will be the TV shows I will save this and it come this adorable Cygnet then what I will do I will add here a dance for the movies I will rub it in a div and I will assign a class of no padding like this here I will be adding a dread Hanukkah red he will get total since I wanted to be four columns in one row so I will make it three and I will add two more columns and in each one I will add a badge that will show the category of the movie so here I own badge and the color would be light mod we don't want to set the mold and I will write the name of the category like here action they've had the same badge in all columns and I will change the category name so we have actions maybe crime and horror and here we have a drama so you can choose whatever and save this and it came here last thing I will add that sliding images or the movies as a slide so I on slides like this I don't want mode I don't want being a write on scroll bar all these I don't want I want options so later on I can modify the options by using the typescript so this one is not defined I can go to finish no deals and make it here which will be object currently I visited empty then I will add all the properties so here the error goes okay here is the first slide if we try to scroll this one it would work but here we have only one slide we can do another one content too here of I slide it will show okay in its light I would require image image like this with the source you don't know this one I will need the title the movie makes it in the f5 title movie title then I want the rate so I will use the iron icon oops ion icon like this the name will be I don't want this lot I don't name star okay then the rating like it might find for something I will save this then I repeat this or let me first make this in grid system so I want red here here I want for width columns the image will go in the first column and the rest will be in the second column I will rub the icon in the paragraph tank like this here I will give a class of Worcester column and here it wouldíve a class off oh you know Morgan the same I will apply in the paragraph tag and thank you assign with new class called rate I will bring image pasta English let me use Firefox let me choose movie poster of our choice copy image location placed it here before pasting let me repeat the slides couple of times so in the first two add this image let me here add class of poster I will check that later on okay here I have the last two movies but the first two i don't have the pictures let me repeat this to like this so I will use the same image okay here is our layout is ready now we will go to the style we make first the global styling so I will go to global dot a CSS here and in the iron content I want the background to be silver one with the code f8f8f8 this I will save then we'll change from the wine to this one but I want the tool bomb to have a transparent color so the background of the tool ball I want it RGBA and they can make it like this so now it's transparent this is the global styling I will go to home page CSS here I will start with a segment so I on segment I'll make the Morgan and it's 0 10 pixel so here's some space came in okay then for the ion signal button I want the text transform to be capitalized so here we have all uppercase so I want it to be capitalized like this and I want to transform the scale to be 0.8 so it will be smaller than before and the indicator indicator color I want it to be transparent so I don't want this indicator in here the bottom border so I get rid of it here it is without that water so also I want the color to be the gray one like 9 6 9 6 9 6 so here the color is the silver or gray then I want the ion label okay position:relative to go to the left 4 - 17 pixel and the font weight to be bolder okay like this so now for the active segment we want to differentiate the product so the class name is sigmund button checked segment one unchecked i want the color to be 3 3 3 and here the active one will be darker than the rest like here if I choose different one it will be darker then I want to add this border bottom so I will use the same class the active object 1 then I will go to the B form and the content will be like this and I will position it absolute like this then I will assign left to 0 and assigning bottom to 0 I want the width to be 50% and the border bottom to be like 4 pixel solid and the same color as the text ok we'll save it and it's like this here I can see the segment with the border if it is active then I will go to the iron bed I will use iron badge like this I will assign the bedding to eight pig soul zero like this then I will add the border radius to be equal 18 pixel and to assign a color of HC hchc and the width to be hundred percent and to align the text Center it will be like this I will change the color to white I will go to themes variable in the light one and it will change it all I will copy this one actually copy comment and make this one has ffffff I will save it and it's now like this okay again I will add a border actually border I want each one pixel solid and with the same text color so now it's like this we have the segment and we have the category tags then we can go to the poster column we have added one class rename it foster called column here I will add height to 400 pixel maybe key it's fine then for the image in that column I want the board of radius to be like 40 pixel here I can notice the border radius for the image and the height is 400 pixel okay it's applied for the all slides then folder 8 class hmm I will change the font size to 14 pixel and I would add iron or magic table for pixel this okay it's smaller right now so are you add some style to the icon inside the rate and I want the color to be gold so like this the star now this gold color okay after that I want the f5 for the title to have a marking table of four pixel so enough spacing between the column of the image and the title so I will save it here we have enough space or Morgan now I will go to the slider options from the homepage tortillas in here I have to I will add some properties I will start with the centered slides and make it as true I want everything to be Center and the loop I want it true and the space between this to be minus 18 I will try and I will save this here I can noticed the different slides if I make this hundred to be August so like this I will return back to the CSS and to add some styling to the slides I will start with the swipe or slide previous I will add opacity of 0.5 maybe and I'm on the transform the previous will be this one actually the one previous then the centered one and for the next ie wrote next it will be this one the next slide so for the previous one I won't transform rotate I want to rotate it like - a degree I will copy this and I will change it to next and without the minus I will save this and now you can see whatever I did here like the opacity 0.5 and the rotation here once lying there is no transition so I will add transition to this wine first slide transition I wanted to be point four second all and it will be like this here we have done with everything we started with header we have added the segment the C crawlable segment and we have added the styling like the color and border and everything and we have added the tags with the categories and the list of images all the sliding one and we have added the options for the sliders and the title would rate and we have styled all of these in this tutorial [Music] thank you for watching if you like this video please like and share and subscribe so we will be adding more content or ionic content to the shallow

Channel: Habib AlMawali

Views: 8,254

Keywords: ionic, ionic5, angular, ng, UI, design, ionic UI, ionic design, mobile, mobile application, mobile design, android, IOS, cordova, capacitor, coding, developer, Oman, Omani Programmer

Id: eEegK7kjP58

Length: 26min 45sec (1605 seconds)

Published: Sat Jul 11 2020