Bubble.io for Beginners: Integrating HTML & CSS|Real examples

hi today I wanted to talk about HTML CSS some basic knowledge about it and the different ways how we could implement it inside bubble and what ways and for what we could use it um let's start with some some basic of the HTML I will talk about it a bit and then we come back to the bundle and I will use this screenbun.com platform you can check some HTML census courses too and just because we will have a small window and I will be able to show you what I create direct invisible window um let's start with structure of the HTML HTML basically it's just to create some components that um with standard design of the computer um like structure and if you want to add some design on it we will use each CSS like we want to make it red change roundness so change some add Shadow and Etc it's all HTML CSS and HTML just for structure of this okay the all HTML file if we want to make it properly has open and close stack of the HTML this symbol means it's close deck then it has head and open call stack and Body in headteck we can link to the HTML or to the CSS file it's not important we will not use it inside bubble but just to understand it better inside header we can put some metadata or a link for example to an SSS file you can just say link and says that the source is the style CSS energy is already inside body we can put the info that we want for example inside body I want to create a con like them container element it's called div inside HTML we will need to create an open Tech div and then close it um like we see nothing happens because it just prints bounce like um almost the group inside bubble inside the for example we want to put the text we can use for example H1 pack each one it means it's stack for a certain size of the text for example hello and we close it through we if we refresh we will say hello yes we could not create T if it will be the same result but I just wanted to create if to show that for example we can go now and cssh change background for Orvis div and do some other changes um but let's imagine that we have like let's imagine we have like fake containers okay and we won't for each container be a different color of the background we need to identify some how them so we need to give them a class for example we can say this is diff class and give a name for example diff one and just copy it says is diff stiff true and this diff is if free and again nothing changed now we can go inside CSS and give some properties to get stiff we would change property of the class we just put dot and write the class name we called it Tiff one for example and then we put curly bracket and inside them we use some property on for example ground and we can choose a color for example red Rex we see it's change and foreign for example I don't know uh green and blue also we can add pretty much the sample process like inside bubble for example if you want to do that green being bit more down then it's right now we can just say uh margin top and identify how much we want but for example 20 pixels if something changed yes now we can see that it's changed um and it's a lot of properties that we can add inside we can change color of the text for example let's make it white and Etc but basically um it's like in bubble bubble gives us um some HTML basic elements and we can change this properties already on this let's just add for example shape it's like Samurai style applied but by default it's just transparent without crowdness and then by changing properties here we can change CSS bicycle this elements Okay so let's move from this page to the bubble so there is this a couple of ways how we can use this as HTML in bambling for what um from the beginning we will need to go on settings inside check General and check this box so we can allow bubble to have this idea attributes to each element this attribute here it will appear if you checked this box and before we actually apply the CSS we will need also to have this plugin CSS you can go and download it inside this search it will allow us to add some classes and some ID dot to the that we can that we want to apply to element also there is a bit different between how we can identify how to apply this ID to css2id or to class like I showed it here I just use Dot because we use dot for class we identify class here button side bubble we identify ID and for ID um we will need to we will need to use hash so again if you identify class we use Dot and if we identify ID we use hash by default we identify the button by using this plugin we can also create class we can create from ID to class I will show it later I prepared some examples of the HTML and that we can use from this code pen that I own for example we can create this box this with some animation even on the borders like we see in just basically a container div with certain class that called cart and there is a link it's a anchored anchor Tech they use it for a link for this text but we will not take it so how we need to look at this okay we have a container div glass cart and some cases to implement in bubble we can we need to put this CSS tool it's plugin that we downloaded you can just drag and drop it here and then on page slot you can search action CSS um at class to as that class by ID because if we look at this CSS we can see that they use identifier class because they use class here dot class equal Dot and Iz equal hash and to not change it every time on hash I just want to create from ID class I just can copy card here ID card and we will create from ID class from ID card we will create a class ID and Class part and let's give to this container the same basically what we did we say that ID card ID card will be class card so by this logic we will need to change every time this dot on the hash the next will be to apply the CSS um let's add custom Style and we can just copy and paste it here and let's just preview and see what happened so we applied with CSS to this container and interior if we would not use this action so we would not create a class from ID we can we could use just this step number four but in entire code we would need to change this dot on the hash it could be the same uh result but it just would take more long time to us to change this all desktops um and for example let's say we want to use it to create some row with some pricing we could just say for example that's with container be 300 maximum and 100 and just group it inside row put some text there ah it was shape so okay it wasn't container um let's just group it then just to not shoot or we can actually change it it's not so long we just put a new container a new group and give it the same attribute the same idea card oh no 800 and here it is wrong and let's put it inside and let's put the text for example price one let's make it a bit bigger put some patterns make a center [Music] um healing a bit more big I think and let's say that when for example Group B it's Howard um wait okay let's remove it then put this condition on the text this text color on color you'll be white but by default let's put it just oh transparent like zero and just duplicate it paste put some space in between and make it for example maximum 1.2 k let's see what we have yes we can see that with applied to this idea uh because it should be different IDs for this um yes but like we see we can apply this into different type of containers for example with some animation also what we could do let's check for example if you would not change it ID to class let you just change very fast on Cache right hit your result like we can see it's the same just because we use the same ID it's not for each container would need the different ID but uh because it's class but like this if we just Define the CSS by ID by using hash it can be applied to the not only one container and then another example can be for example this different patterns this some nice looking animation let's just check a random button I don't know number five we can copy this let's just do not mix it put in another and change it on and if this ID put some button oh Center button create and let's give it easy like we see this animation applied we just let's check number five this yes we just used this color by default let's let's check if it's orange one not okay let's just leave it like this yes and okay it's some ways of course it's a lot more ways to use CSS HTML inside bubble for example we can change scroll bar inside repeating groups we can hide it if we don't need it we can add scroll uh inside sidebar if it's um this group Focus our floating group and because by default inside floats in group it's not allowed to your scroll but with CSS we can add this feature also for example we can Implement HTML CSS by using HTML element even not applying any idea for example we can take just entire HTML input inside HTML element and copy just copy entire CSS see it's just it's applied but it's just fix this element so 100 to be sure yes like a series applied on this inside this top mostly we can for example use HTML elements to add some animation we can go under a lot of files click and just click on HTML and Define some variables for example if you want to Loop if you want to it's to see control or not copy this code and put it inside HTML element and how I can see we will see this animation inside um thank you for watching I hope it was a useful video and of course it's a lot more ways to use it I just wanted to show some basic of it and just to meet a how to use HTML and CSS instead bubble thank you bye

Channel: Nikita NoCode

Views: 1,373

Keywords:

Id: X4QozsjowII

Length: 21min 41sec (1301 seconds)

Published: Sun Apr 23 2023