Cool CSS Forms with no frameworks or libraries | Varun A | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Cool CSS Forms with no frameworks or libraries

teacher avatar Varun A, Web Designer • Developer • Author

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

12 Lessons (1h 9m)
    • 1. Demo of final version

      1:58
    • 2. Software prerequisites

      2:45
    • 3. Using Color inspector

      4:18
    • 4. Resources and exercise files

      1:41
    • 5. Getting started with basic setup

      7:22
    • 6. Coding Form 01

      3:56
    • 7. Coding Form 02

      12:34
    • 8. Coding Form 03

      9:46
    • 9. Coding Form 04

      7:26
    • 10. Coding Form 05

      5:36
    • 11. Coding Form 06

      6:52
    • 12. Coding Form 07

      4:48
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

33

Students

1

Project

About This Class

In this course we will build a cool looking CSS form, in which we don't use any frameworks or libraries like Semantic UI, Bootstrap, Material UI, or anything like that.

We just use plain CSS and HTML. With this you can understand the power of CSS. And if you're just getting started you can think of this course as a practice also.

Thanks, and I'll see you inside the course.

Music: www.bensound.com

Meet Your Teacher

Teacher Profile Image

Varun A

Web Designer • Developer • Author

Teacher

Hi, I'm Varun! I'm a designer and developer with a great passion for building beautiful new things from scratch. I've been building websites since 2012 and also have a Bachelor's degree.

I’m super passionate about design, development, and business. I’ve been very fortunate to be able to do all three as a career. From a technical standpoint, I spend most of my time working with JavaScript, CSS3, HTML5.  New and open source web technologies make me super excited and I can’t wait to see what is to come of the web in the next few years.

I learn from the community and love to share what I have learned back. I’ve worked for myself my entire life. I’ve graduated from Kakatiya University where I obtained my degree. By which I ... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Demo of final version: Hello, everyone. In this course we are goingto build your formed weather beginning with scratch with north html R North faces get Winder said We're going to build the from completely with only catch Tamil on ceases with no libraries or no frameworks like boot mood step or semantic your for middle listen or something. We will design a form we'll build up from everything with basic HTML and CSS only no famous included. With that said, I want to show you What are we going to build? Get him off the final version over. Of course Project. Okay, I'm loaned open. They're from down there on the from We are going to be together in this score They're going to build complete from like this And we are going to do all shadows on colors. Exactly. Well blown this form together in this course I'm in the next few lessons have give you all the color course off these colors for bag grown on Also every color that issues er in this form This for me. So generally built by me. And I have built this with Kelvin Dorsey Aces. The city is a framework like Moz trip, but it is very different. Okay? But I have millet with the forever. And I'm going to show you how to build the same from without any if framework. So we don't say I didn't see you in the next one. 2. Software prerequisites: Hello, Don. In this video only show you the software's I use in this course 11 is the blows that I used Google Chrome as you're closer to this player. Estimable pages on I use the V escort text Editor We waited our history, militancy assistance I will proffer telling soft Google chrome earned also via score in the description off the scores I I want open the Google Chrome wants toe show you how it looks . This is how the Google from looks You can now get to anyway base nowhere turned on any Internet connection like so you can see this on We scored. I will open the score Extra data. This may take some them. The V s core generally talks some time and you can see that this open side But you have to click on it Generally it is open. Get this open and I'm going toe They move this folder generally you will. Look, you had a we escort. Well, look like this. You can open any folder from here or you can open your folder from the file menu. Also, this will show our file structure on folders files. This is you know such under place. Okay, The evolution. Condolence. This is a bagman which we will not use This four off. This will only use this explode It only now under four twenties 51 is extensions. You can see that I haven't installed any extensions in my brother. So it will look seem letter you if you are using your we escort for the first time. So these are necessary software to follow along this course with me because I used these votes off it. You can use any browser like Firefox or Internet Explorer. Everyone. Ana, you can use any extended it like sublime text our number brackets as which you are comfortable with. 3. Using Color inspector: Hello, everyone. Welcome back on in this video, I said in the previous video, I am going to show you what are the colors usually in this way pitch toe Will this webpage who see the colors to show in the strip it go anywhere on this revision? Right Click on click on the instant as I am using the Google chrome Rose already simply right clicking on clicking on the Inspect or you gonna use the shot occurred control shift I bridges on which works on windows on If you're using this groom, though, that for the first time this in the first looks similar to you on you can see that the settlement stab shows all the estimate tax user to build this webpage, You can expand this or collapse this on a scale of 10 Ellman First click on this inspector icon on the dance but that I contents blue so that it indicates that I got the inspectorate selector are you can hold on any ailment and click on it to selected the title here least selector. You can see that the hitch one day is related in the elements step. So with this element, her later you can see in a style stop that all. Look, unless I played toe all the styles have played So the I turned I is shown here You concede that that I didn't the that I didn't was the class name user who started Lee said one day on which has the color rgb you know tragedy 56 which are the color course off color values off red, green and blue And similarly you can see the mark him before is the class usually go style ? They said June dead, which means, um margin bottom ease Random Similarly, you can see that everything here was shown which is which. Which makes use off the Taliban Remember which I have user toe build this phone Okay with that say Okay I want to show you the last thing The color off the button So click on the inspector and meant to highlight it on click on the button You can see the styles I played So the But then here are you Consider the stuff all styles We told any class or ending in the right Off the style state You can see that the background color days We're gonna spend this? I don't feel it. You can see the other player bad. Naturally. The bag room Qualities not cool. That medium Luna color is given by the baby blue glass, which is 349 You know D c on when you hold on it. If you don't hold on it, it will show the color as 349 year OD See under when you whore on it you can simulate the Khobar by clicking on the struggle in my state and clicking on the over when you were running the calories changes as a suitable to a nine meeting on If you don't over localities 349 year old is he me that you can No, the any color you to tow build any webpage like similar to this. You can try this on anyway. Upset you like on try to see the colors used to build that webpage only if you like it. You can also use it in your own sites or one history, multiple pages. Thank you. And see you in the next one 4. Resources and exercise files: Hello. Everyone will come back. I said in the previous video I will give you all the car s user in the usually in this form . So I'm unsure. What are the colors? These are the collapse You during this swarm usual Build a phone. I'm This is this is the text color You didn't. I did a little the text shadow color user in the title on the page bedroom. We have used the color like this on Similarly, I have given all the colors the button it overrun with over and also the border radius which is unnecessary. We can see it in the course on the smaller decked in a carpet It you may not know this, but they they say it's more doctor here in the border. We just don't cooperate Information on local a user in the in the Helmand is be etc to double. I have saved this file in a lot of money for me which is generally the dignified on you can see that I have separate on my desktop the colors collapsed or family. I'm going to attack this file in the resources section on then you condone noted from the 5. Getting started with basic setup: Hello, everyone. Welcome back from this video. We're going toe build over his team away bitch! We're going to create his Tamerlan. See ASUs fells in this video. So I want to create a new folder for our project. Our neighborhood namely death epic. Sir, I want to include this Colors fell in the up except folder, so I'm moving it into it. I want to open the Google Chrome. I will keep the browser to the left. I I will open the V escort extra editor. Okay. No, I want Tobin my up except folder inside the V A score. So open the exploder on click on open folder are You can go to the file and click on open folder. Then you can now get to know your desktop on you. Gonna Brexit Fuller on a quick selector. Full folder on this will open heart of exit folded inside the V A score. You can see that the color store them. They fell here enough except for lazy is also trading up. He had in the explorer off their score. You can click on this icon you file icon to create a new fell and said that picture folder from within the school. So they go on this new file icon and I want to create a estimable file. So did I. Pissed him index toward his German and I won't do great. Another fell for ceases, which is style or services You can give in in him as you want, but I generally used these names. Close is a clogger on more this way. Yes. Go to the right so that I can easily and I get between a deter under bro's it So I want open this index dot html fell in the browser. So I will drag this into the brother. Simply drag like this. Are you can eat. Also open the folder have exit on that will be going it so that it will open on in there. Brother, you can close this. Okay, I won't do right some basic markup in this video, So I'm going toe type exclamation on you Consider the images showing ladies and Abda vision for this exclamation mark. You can click on this to expand it, or you can simply dressed stabbing the cable. You gonna see that after pressing the damn it is during all this market we just basic markup for the any history. Military bitch. I am going Maginnes it. You can see that there is a doctor testimony. Toa declared. This fella says Gemmell on This is where the estimates starts. The history melody Attending this fellow is in the English language. So we're using the land you and I pay a day's Jim Adele on to show our look at it. Just gotta clean. This tie is useful. Which is Carson, do you defend? It Is the unique or text for mint off something like that on the stag is the report today which is useful to show the pitch correctly in the stop and also the mobile Russians, un de ces, further Internet exploder, which which increases the compatibility with the internet. Exploder on This is the title over on a web page. Okay, this dagger this title is important for us because we continue Does something like, I think said I will form. I named it. I mean, in the died. ELISA picture from You're going to tell you this friend I know today fresh, we can say the file from file say are simply click. Simply use the shortcut control is on the refresh. The below the No. You can see that the title is appearing here. Okay, that I didn't issuing upon the tab name. And similarly, I want to add some content. Like follow Earl. This is just a placeholder. Further questions. So they replaced the brother. You can see that high level sixties are building in Ambrose. It so that therefore the hegemony families written correctly. No, I want to check. This year's is fail with every disassociated with this estimate page or not. So I'm going to write some simple market black body. I'm selecting the body type on, giving you the background color. I can type shockers like BG for background something, and I can hit the tab to expand it. Who's in their mid plugging the bag? Bonus Black? No. Okay. I want to change it to that. It like it when I say the CSS Finn. You can refresh the browser. No, but you can't see the bag room. Call it. I said it. So if you want, If you want to link thesis CSS file to the history mill fell. You want to use a link which have I haven't done in the history felt So go to the history on inside the head adornment detail instead the head dead You see a link this link that must have them I really are three meals a statute on the high street value. I see it is which is in this case, just the style Dog chases unsaved this fan, they test them. You can know. See the bag Brown color has changed. Endured it by this we have made succeeded for the fish Tamerlan CS is friends and we'll continue in the next listen to build a form. 6. Coding Form 01: Hello, everyone. In this video, we're going toe style ever basic html I will show you how do style the background and alders first remove this Hello. And I want to give that I give you a title inside the body and I want Oh, give it Idolize their books this apxs about this novel level I will copy it by clicking on copy on Go to the estimate on school on my pitch one to create a hitch Wendell untied the based on this next here a Texas. About this no other level. I say this felt they fresh. You can see that Topics that I didn disappearing probably on board of the style or spaces on remove this red color as a bag down on my background color. And I have given the color code in the cholesterol family so called Pete, which is a page Bagram basted. No save this felt you can the fish the browser to see that the nice Bagram qualities are bidding in the brother and also that I didn't issue incorrectly. Similarly, I want toe idea formed time. The action is nothing, so I'm giving you death on. I want four elements inside the form, which is three input fields, which are they to input fields On one is a text data input on the four Tonys. But then I'm going to type all those. The 1st 1 is input on the 2nd 1 is input one and died. Start Bonnie's take Stadio under four termination. But But so now I have all those four items so I'm saving This fell under division so you can see that all the food and my start appearing. But you don't have any labels are any texting? Said the button. So I'm going to give the button. Has takes their segment until this refresh. No, you have the submit button or no, I won't go you some placeholders for the three elements like the 1st 1 ease off placeholder on the place for ladies name You are no under 2nd 1 will How the email address? Don't show the place holder will be You worry email in the garden is on message field. So the placeholder will be there in terrible message and say this on the refresh. You can see that the placeholders are appearing inside their text fields 7. Coding Form 02: hello over will come back under in this video. I want those style this elements a little bit So I will go to the style or cirrhosis on. I wouldn't go build up, read some space on by using Lee. When was the celebrant register asked Risk on. I want to give your phone Family a sensitive by this I can get all the elements. Show the same phone lady flicking of a big You can see that although phoned her sensitive you can still all there must values in this actus universe. A selector. Okay, now that it has completed I want o style this input elements for the first time in style The submit my dad for this I will give those have been But tonight's class sub meat but simply there, Or simply toe our the confusion between the button Dagon class I will get give it, submit video I've given the classes, submit video and I will use that last in the CSS fell No have made button on first decade with have typed it correctly or not, I will give you a color off. Right. Say this fell refresh begins either text color inside the but any white. So there I have, even though names have made. But in here in the series is an estimate as see Okay, No, we want the area back. Don't color to it. Background color. The background color is given in the cholesterol, namely fell. We do the button. We don't over gloppy fished. Say this for fish. Okay, They're called a sloppy Nice, but I want some padding inside the submit button. Reduce riding. Let's say six p x. All this tried to use the even emit off padding and margin fresh this on. Generally, we will use them margin and padding for the elements. As Jiro, I won't go type those in the Romans modern. You know, be gentleman's my batting. You By this, you will reject all the Paddington margins for a little miss on your page. And you can you the padding and margins explicitly for each element by using the classes. So you're gonna refresh this? We consider to all the margins and bad things have gone away so that you can easily customize everything you want. I have used the padding here. Okay. Next I want to remove the border more. I will give none. So you consider it. Remove the border here? No, I want some border area said only. So border radius as maybe four pitches. Try England's and you can adjust it later. Okay, Jokes. Nights. So Cape came this? No. Similarly I want to go still All this in both fields. So I will select Oh to select all of day in good foods. I want to give the same guys for all those in blue pills. Since because to our input fields and one is text area, we can't use the input element toe style that or you can simply use the important exterior like this Completely input. Come on, text next day here. Or you can use classes to style all those names I would give them border radius. Same for pixels. Save this. What a fish! You can see that all the elements have the board radius for existing. And I want to remove the border for all the items I have given the border None. The fish you consider it is looking weird because there is no border. So I want you one pixel off water but everything One big sell Sollied and the card will be . I would give in the color. I see. Okay, this is the border color. This is not the border radius. You can see that. Uh I have given the border as one pictures in border with one solid is the style off the border under carries this so I will live fish. You can see that date is looking nice, but I won't be. Increase it by one picture on a professional. Okay? It is not looking less so. I will change it back to one, mixes one. I'm going to finish it. No, I own the idea. A little shallow. So that did this more clear when using this text feels. And also I want you padding. So give more space to Diaby. I want to give the fighting for success. Prayed once. Okay, maybe here the batting is more than four pictures, so I will try to increase this six pixels. Okay, this looking nice. And I said I want to give you some balk Shadows Di bending here it looks clean. Newsom Bulk shadowed the box held over me. I've I want I don't want any box book shadow in the X direction. I don't so I will give General I want well, shadow to the bottom of ailments. So having gave a narco pictures at the bottom on the color, I will use this. I'm sure you first by using a red color Syria the fish. You can see that the box shower is appearing at the bottom. It looks natives, but we want to use the box shows a mess. This form So I've been used the same color as border you can use initiate off green or blue No credo deficient. You can see that there is some dept By using them books, you can hire the blood toe the book shadow by using another value Here Iisten pixels on the it is easy to show he inflicted. Save this at a case. See that there is more blood. This is to show by changing the cholera straight or something. I've learned of this. We'll sell Agnes any esteem element in the box Does this any color? You can see there that it's more blood in the box shadow. By using this 10 pixels value, you can see that by clicking on this icon you will You can customize the box shadow and said the Karam browser using this daily Pato's you can say the exhausted by moving this Are you going to stay here Deedle one big cells Uh on this is the blood radius you can see that radius is This is the spread This is Ah blackberry s. Actually this is a month off space. The box here, a block away on deceased they moved off their in the box. You can see that in reason including lad will glad out the back shadow on the prison will give you a shot shot shot So use Native says four exist maybe And decrease the spread so that you will get there. Nice effect using this box at all. There is, in fact, inside and outside off bookshelves Generally we used the outset only Okay, No, we have all the stairs. Copy the steles into. I will copy this. Copy this into the style or ceases Save the style or ceases. Nobody fish it Now you can see some depth in the import ailments. No one is a final ship. I want all those elements. I was here one off the us all in the Sublette land. So I want explain the Selma size their block elements. So or I will give you mags weight off under percent for dissonance with under the person Try it with 100%. You can see there a little Mr off 100%. So it will look similar to this after some style. So that's it for this video in the next video. I didn't show you how to stay this form similar to how does tell this from Tina Duda finished with us version of this for 8. Coding Form 03: Hello, everyone. Welcome back on in this video we will try toe saying that our content in our body like vertical we will send their vertically And also we'll send a horizontally on. Well, iron this food on my say. I'll copy this first. And I realize this. No, The word for you say you beat it on. We may use the history mill entity here. Further cooperation Well on. Save this fell the flesh. You can see that there Missy is appearing here. No. You can use the body tag to center the content. But Killian part mentally. First, I assure you the height of the boar detail I hate Okay, We can't see the head because we will use the border Five pictures. So I lied. I did. By this we can see the height of the body dead first. Okay. This is the height of the body. No. We will send our pond into using the flex books first. I will use their display flicks on the container. We will also always use the display six on the bare environment Because we want so center all the Children mints. We will use the display fix on their entitlements Which is the body in mint here? No, I will used just a condom center. This property is also use around the parent element to sender. All the tail Entenmann's presented. I would say this fell because of I have returned just three contents in debt. All the tailed elements here, the ideal and the food will be sender horizontally inside the body. Okay, this will be sending you consider whether this is sender or not. Because all the elements are fitted into wonder by using their display flicks or government . Remove this First I will say this another fish you consider By using this prefix, we have all the content centered in a low content fitted into wonder. I know. I will use a container toe wrap this in their content. This do 10. I will keep all the Children minutes in Judah gun dinner? No, I have a container as the chilled off body element on because off this you'll only center you only send of the container a north the Children minutes and we will also make the container into Ovando. And not all the Children other tell governments will be as it is as previous so refreshing You can see that I'll elements hard some little before. No sender elements use that just for a condom. This will send our container inside the body. So three fish. If you consider this a condemnatory center being condemned, you can see No, the Cantonese is sending. You can see that this is the container. No, I want the height of the body as 100% or under a percent off the airport. So I will height 100 village. This will make the height of the body as 100% so that you can easily sentry send out the content inside the body. No, you can see that it is overflowing in the right direction. I'm we are seeing the scroll. But because the bodies over and this happens sometimes on ethics do this is using the bordered box on every element. So to use the bartered box I'm going toe the universe. Is that on drying it over? Yes. Box aging martyr books. By using this property, begin fix all the height and width issues off all elements. You concede it off 30 averaging. All the elements are fitted. Ando the pair indolent No similar to suggest content which aligned several items in the center Unwto ally night. To make this items are gently center. We used just redundant on Go make the items Vertical ascender. We want to use a line item center and by this we have the items hindered horizontally and I was over. But you can't remember this as for gentle and he says What? Really? Because it depends on the flex direction. Generally the flex direction will be door. I'm I mean common date here, just the contents in that will Elaine or just a condom will center items in the main access direction main axis and similarly align items will send her along the cross access These totems exist in the flex books by when using CSS, the main X men access will be the X axis. Then you are using them flex direction. Isadore deflect direction is by default in the door. You can see that there is no change in the browser after the fishing because this is what the browser will defend in default, ready for the fifth direction ISRO on when the flex direction is so, the main access will be exactly is and cross XX will be very access. When the flu extraction is calling, the managers will be rye. Axis on cross excess will be accepted. We can I will commentate here also. X men. Blix, They he's a little, but I do read and them. But this concept, When the doctor Derek Anus it'll the men access will be eggs under clothes. Axis will be okay. We there said I will see you in the next one on. We will use the flex box concept. So Elaine items instead our formals. Thank you on to you in the next front. 9. Coding Form 04: Hello. Everyone will come back on in this video. We will send there we will the style our from under also Elaine, all items intended for fuck dick. We want to use the form inside the style or ceases Save this file. I will more this before, Below the container. I will use the farm. Tell who still the phone. I will give the form batting off off 22 or 24 pixels. See if this type of fish you can see that the for Mr Synder and I will also give the background color. As right this defense. You can also give the box share a border radius. And also the border seemed like the in 10 minutes. So I'll copy this when I will be a student said Therefore say this for I know they fish you know. You can see that the pharmacist knows and no still living bag drunkard on also border radius and book shadow and I will increase the box. But bulk shadow living May 6 pictures and also the via direction. Did he fix us something? No, I havent off studying for our form And now I will use the flex box inside the phone I will display Flex to make all the Children my center. Now I will use the flex direction here. Lexan direction which is my default. Go. You can see that when I refreshed. Since the flex direction it throw all the items are trying to fit in one go. If a generated do color all items will go into the color You can see that it is same as three waste By using flex books I know I will use I will style the submit button. I want to send their the submit button. I won't descended the submit button in the horizontal direction. Seeing the flicks directness call them The whole gentle will be managed by the on line items or a oneself. Elaine, I don't see his user on the pair Entitlement. If we want to use Alan items, we want to use it here. Island Adams Cinder. You use Allan Adam sender. You can do a fish it. You can see the items are Elaine in the whole gentle Since they were dis 100% days, it is looking nice. If we take the picked off input elements 100%. All items will be center either the forwards. If you do with 100% it is enough to style over from if we don't not use the with 100%. If we do not even on item center, the form will look like the previous one on. No. If you want to go, decrease the weight off the button. We want oh style. Lower submit button us a land shelf. Send it, which is which uses the Land Adams concept only for the submit button. If you consider this is our or effect using the Alan items under Lynch's, I will go back to the earlier one. I will remove the self one. A neighbor uncommon, this weird 100 person they will undergo on this island. I don't try playing with this because Netflix boxes growing larger on the conception, the CSS community are getting much popular team, which are flex box under Grid CSS Great and CSS Flux walks. I will provide the resources to land flicks, books and spaces in the description. Now that we have all these, I will take hold of a local air bag down off the container, and before that I will center the contending said the container do that five deck. Go to look on dinner. Same concept here. Using there is Netflix. I do despair flex on dollar items will go into one, bro. You can see that on if you gender flex direction column All items will go into the columns . Okay, Now we want to send her the items for Brenda Lee. So we lose. Elena. Adam sinned. Not just for Ugandan center. Say this, but if fish all items going into them presented No, You can change the weight of the form by using wit with value. Here will Beijing with 100 but in the form will cover in 100 seeing. But I want to use the 95% or 90% since because it looks nice. Okay, it looks nice. Similar to this form will be a fight that for now I also want to remove this This Baghran local er for the container. Let's move it. I say this. That's it for no for this video. On in the next video, I will show you How does style our colors for the text elements 10. Coding Form 05: hello Room will come back and in this video I will show you how to add colors on Eros Duda takes to hear title under food. And for this I would say that the folder by Peter which is only tell Element which has a or no so that ideal is the only hedge funder in over his general. So I will use the history. I will use the hitch Rendell for title which one are now use the color Not a lot for the release given in the color store them they felt no, I wonder idea States shut off it That takes to shadow is similar to the box Shero it has a X value. I'm given the X values one pictures on the value picks it on the latter. You don't let us? Bobick says. Okay under calories given in the caliphate. Our family fell. I copied it. Save this refresh. Now you can see that. Yes. Take shadows. He is showing in that I did similarly We can start the for development which is the big day . Big day, which is the next foreign stays on degrees. The phone says six weeks. I haven't used the world access first. But if just this Okay, it looks nice for me. So I will keep it like this. And I have a long search in the color similar to the cooperate color here based here it is fine. The fish. It looks nice for me And I also want to act some margin in the box top. So margin top Save the world Picture Gariety fishing. Wait. Look nice. I want to remove the border color for this body. So go Toto, Remove the border for this Save. Refresh. Now I want to add some margin to the bottom. Other title picture margin. Bottom margin Barnum's 16. You can try the values off margin bottom safe, for example. Fast you drive it. See, I'd fixes and then 10 after Whelan, then 16 bags for mining. And you will get your nice value. Where you in the reason so clean? No, I want to add a margin bottom to these three elements they're doing but elmerson one texture. We have style both at one place here, so keep the margin bottom Here. Margin bottom Say I exist. Save this. Every link is the parting. May yeah, are diving in case the margin Bottom. Try experimenting with these values. Nice. I want some more margin. Bottom sale fresh. This looks nice, but I would give a damn for pictures. Refresh. This looks nice. And this looks similar to this one. And I also want those tell this Burton's have made. But I won't do in Greece the for us. Boy, I want to wait. Say this very fresh. It looks nice for me. No. And I also want to English The batting similar include elements a deficient. Maybe you can also angry. Some foreign stays se 16 exists or gate looks nice. No, this looks a lot similar toe for when the next reader we liar some labels to our input feels so That way we can complete our from easily Thank you and see you in the next room. 11. Coding Form 06: Hello, everyone. Welcome back on. We are now very close it toe convict our phone. Just we have to act some levels and some colors go to his general Fell on. Give your label for guns. Name? Name is name in blood filled. We have to give you for a table, I'm sure. The important off directive. Yes. No, you live in Save this. How would a fish? You can see that the labels are toe the left off. No, that's all way. Should have the neighbors to lift off from birth. The labels are I learned to ascend. I will take why this is happening. Because would it have on the house? Elena Adam. Sender on This is a reason. A letter, this naval center. So I already movie this. Okay, we can do go types off adjustments with this, we can first remove this are uncommon. This on leafy and commonly on my door affiliate. Who does nt kid, This is happening because off fragments predict on the said of this. You can see there is nothing to send this element level. Birkett this so I will try some styles over this in the developer itself. Like Elaine align himself left. Okay, the sides generate. I said in one. No, those previous videos. Very moving this Elena Adam sender. We can t give the text fields with 100% under also just okay, I haven't said this deficient. Okay, this is a problem. I haven't said Savor this and I'm trying to make this items. Send it on the north Centre. Who have ward idea? No. With all this Elena Adam sender, all the elements are left. Alan basically on because we have 100 bucks in this text area and in Buddha made 100%. No, I want to mix it tastes their size off submit, but down Go. So we can make Alan self. Send it by using Alan Self Center. The only some mid Burton will be centered after that By using a line items for the name label you can send a rate are left telling it as if you want. Okay, we can get good later first. No, we want to our livers to Oliver elements. Well, I bake off now that we have labels for all these three elements way Can't see the use off label and mess. No, no, I go on there. I did. So the fast Tillman first in fulfilled Heidi. This must be similar to the name similar to the farther and farther active value here. The first, the first value name. And I valued them this will, this tool will get lingered. The label will get Lincoln through this first in full because off this far, pretty well done. Because of this idea after linking this to if we difference the brother. Since we have this world linker, if we click on the name this input filled with vitality, you can check it. But a union save this refresh. No way have this toe level and in body Lincoln we can click on the name on the input field will get her later. Right. Clicking on it. Yes, it is getting a later. This is because of the for an idea of the words in the label and input fields. For this reason, we just how the far field for under eye devalues for labels and enforce. I know that we have miss label on input linker. Now you can click on name the you can click on the label under feel girls escalated. This is very helpful if we have over name. If you have a gap between our label and input, it is really useful. I know we have computer. Most of our markup. There is just some styling or for labels on by that real computer course on this. Thank you. And see you in the next one where the style ever neighbors. 12. Coding Form 07: in this video we'll style of levels Wilder styled or ceases on the golden off in Buda, Texas area will be in type label on style, over levels. You sound space A no. Make the foreign from foreign weight. Boulder on the refresh. Okay, this looks nice. The color off the labels will be this fun A copy Clothes by this we continue color. You can see that the calories slightly equal to this title color Similarly, when we type are checked in Saturday in both fields we'll get your black color. So do tender. You can use the same color value inside a input deck stadia based. You'd say this 100 that you will get the same color. So the text inside the fields where you input your values No, I want to use some margin Bottom toe the label margin bottom six big shirts saying this fresh No art form looks a lot cleaner. You can t that The foreign stays here in the form Final version is larger than here, so you can change it. They going to input text area safe. Don't before Meg, You gonna give excess? What? A fish fix. This looks a little more so I didn't excels by experimenting with different values. The margin border Maybe he had Paksas did some difference between these two forms. This is because of the dexterity. Also show you a few minutes. We told this foreign safe say this, but if they with this for days Okay, No, I want you the text area more room because you can have some long Mrs here so blue that I won't drive some street You can see that I can but he say's our text area for gentlemen also But in this we can only sighs over tech stereo You think Stadio Gollum's or text area Magnum By giving maximum with just under continue country says it presented You can only leases it on by giving yeah, it also reading here photos as three You can do more space, baby for yes, it is not much from here Not again. Better beheld a large in between these two forms. Thank you and see you in the next room