Vue.js 2 Tutorial for 2017 [React vs Angular vs Vue by Example]

Key Takeaways

all right so in this section of the course we're going to go ahead and get focused first on vuejs so if you're just hopping in here without having watched the first section where we did the Prototype design and mockup in Adobe XD then just as a real quick refresher we basically designed a landing page and this landing page is going to serve as the foundation from which we compare react vers angular vers view so like I said we're going to get started with view here first we're going to start with installation the various installation methods that you can use all the way to the HTML SAS and getting actually uh tying into adjacent API that we're going to pull data from and pulling into our fact page that we designed all right so let's go ahead and get started oh but real quick before we begin make sure you check out my site course cra.com where you're going to find a bunch of courses on Modern design and development a lot are free and the others you can access for the cost of buying me like a six-pack each month that's it now also it probably wouldn't hurt to subscribe here on YouTube and be sure to make sure the notifications are turned on all right let's get back to it all right so we're going to go ahead and get up and running and get started with vue.js first for our comparison project now getting started with VJs and installing it is pretty straightforward and like other JavaScript Frameworks you're able to install it through several different methods all right so the first is installing VJs with a CDN which is a Content delivery Network this allows you to use the HTML script tag to use view within your project and it's pretty quick and easy way of getting up and running uh the recommended CDN to use uh is mentioned on the written version of this tutorial which you can find in the description here on YouTube if you're watching at YouTube or on coursetro page uh where the course is located at all right so I you can find the exact script Source you know equals here um as well as the written tutorial we're not going to use this method though for this uh course so because we're going to be using node.js and we can install it so the other two options are installing VJs through npm which is the node package manager and you can install through the command line and this is ideal when you have a more robust project or an existing project that you wish to integrate view with as view is really just relegated to the view now you must have node.js installed along with npm as well so we're going to need to check this so to check if you have it installed if you're not sure in the command line you just type in node hyen V and then also mpm hyphen V and it should spit out version numbers now if not then you need to install it and you have to go to nodejs.org right here downloads and choose either the Windows or Mac installer run through all the default options by default the node package manager npm will be included included and install it and then simply reload or close down your console your command line and then go back and run these two commands and they should be there the command to Simply run it after you have installed which we're not going to actually run it but I wanted to show you is mpm install View and then save it as uh a in your package.json if you already have your project set up now we're not going to use this method the third method that we're going to use is installing VJs with the view command line interface b or CLI and it makes it quick and easy just to start up a view project with basic Scaffolding in place and it provides you with several options that you can also use to set up routing and such so this is the installation method that I mentioned that we're going to use for our project here so to get started in the command line head over to whever you store your code projects at and we're going to run mpm install Global and view hyphen C C so the package is called view hyen CLI and we're using uh the global flag to make sure that we only have to install this once on our machine so it's going to run through I'm going to pause it until it's finished all right so it's done here and to access the CLI all we have to do is just type in View and if you hit enter it'll give you commands and options now there's not a lot here uh so it's fairly straight forward just to get started so to start a new project we type in view init and basically this is the command for generating a new project from a template we're going to specify webpack which is a build tool for handling ad sets and then the project name so I'm going to name mine simply compare hyphen View and that's a naming convention that we're going to use for react and angular as well for the project names uh a little bit later on this course all right so when you run this it's going to give you a series of prompts all right so we can see in the parentheses this is what it will enter if you just hit the enter key so we're just going to leave this all typical all right so now we also have the view build and the one that it's defaulted on is the run time time plus compiler which is recommended for most users uh you can use your keyboards up and down arrow keys to toggle on between these we're just going to use the one that is recommended for most users now do we want to install the view router all we're going to hit why for yes simply because we do intend on having a a fact page which we already designed earlier in the course in Adobe XD all right do we want to use yes lent to lint your code we don't want linting we don't want uh any type of testing so I'm going to hit n for the next three questions all right and there we go so uh after that all we have to do is CD into our new project folder all right and we run mpm install as the CLI simply generates our package.json based on our uh information up here then we have to run npm install and this is unlike for instance the angular command line interface where it runs npm install for you automatically all right so it is finished and at that point your project is ready to go and we can run a another command to actually make the project show up live in the browser and it will automatically rebuild and reload the browser upon certain file changes while you develop your app so the command to run is mpm runev which I will have ran as we develop this project uh so that we could see it in the browser based on the changes so it just loaded up it automatically launches whatever your default browser is I drag it over here real quickly and this is our basic view project right here awesome so in the next section we're going to go ahead and get started and actually begin developing our app based on the mockup that we produced earlier in the course here in Adobe XD okay so in this section we're going to take a look at the basic structure of a view project and and also really pay attention to components and how they work so the first file that's worth taking a look at is right here at index.html all right so the thing to really pay attention to is div ID is app all right so this kind of serves as the entry point of the app and everything in terms of the view is going to be placed within this div ID now we also have to pay attention to the name that ID is bound to so outside of that let's go to the source and then the next file we want to take a look at to understand is main.js so we're importing view an app and the router because we did specify we want the router um for our project next we create a new view app by running New View and then the element is bound to the app ID and this is corresponding to this right here and then we're passing in the router and then the template is app and the component is app and this is in relation to this imported line right here so this is corresponding to this file right here which is app. viw all right so this is a basic component and this is the entry point of our app so we have three different sections components have templates we have this script which defines the logic of our app and then we have styling for our Styles all right so very simple to understand everything is contained within a single file for each component and they are reusable all right so the thing that we want to do here I is open up components so we have a default hello. viw that the CLI generates and again same situation we have a template we have a script for any of our logic and then we have our Styles so for our app that we designed in Adobe XD just to take a quick look at it again to help us understand so we have to look at this layout in terms of their the structure and how we want to structure the components so if you want to think about it this way we have the main app component that we just covered which is app. viw and think of it as being an all-encompassing component that will contain everything and then we must decide okay what about this navigation or this header uh should that have its own component or not uh we also need to think about the fact that we do intend on having you know multiple Pages we designed one of them which is the fact page right here I basically this content right here all this stuff is unique as well as all of this content over here is unique so each of these which we'll call this home will have its own component as well as fact will also have its own component now the header or the navigation bar up here as well as the footer are elements that we want to remain on the page at all time despite you know which page they happen to be on all right so let's go ahead and create our home component and our fact component it and then we'll also a little bit uh in the next lesson we'll go ahead and start doing the HTML for our uh header up here and we'll see that we'll be able to declare the template for the header and the footer right within our app. viw because notice we have this tag called router Router hyphen View and this is where our components will be put into for our home and also our f back okay so let's go ahead I'm going to take this hello view I'm going to uh right click it and just rename it and we're going to call this home now if you're running the mpm rum Dev command the app will break at this point uh because we're renaming files but we'll address that a little bit later um we can go ahead and gut everything between these two HTML elements we want to live leave the div class hello here as well as the temp template otherwise they will break all right so we're just going to call this one home or I'll just put in home there just temporarily we're going to rename it here to home we'll rename this class to home uh we don't need any data right now so we can just get rid of that all right that's good let's go ahead and save this and let's go ahead and also create a new file we're going to name this fa. viw go back to our home just going to copy hitr a and then contrl C and then paste everything in here and for this one again I we'll just make this fact the name's going to be fact we'll change this in text real quickly just to the fact right there and go ahead and save all right so next we need to go into our router so we have a router index file right here and this is where we Define the paths or the URLs along with which component they are associated with in their names so we don't have a Hello component anymore we have home I'll just copy and paste this here and we'll copy this and then also import fact all right so this uh starting uh path for or or the root of our app we're going to make this home we're going to put a comma after this first object and create a second one and this will lead to faac and the name of course is fa right here and here and that's it so this is where you set up all your individual routes and if you were to fully build out this app of of course you would have more objects here to define the other pages so that looks good right here so let's go ahead and save and now uh make sure you have your mpm run Dev command going and here at Local Host 8080 we'll see that we have just this logo because we haven't removed it from the template but we see we have home which is being put in the router View and then also if we go to fact we'll see it changes to fact all right so that's basically how uh The View application works in terms of basic setup and as well as the router and components now of course we're going to get into much more in depth topics regarding those two aspects so in the next section we're going to get focused on integrating the Bulma CSS framework and also probably begin writing out the HTML for our header all right all right so let's let's go ahead and get our balma CSS framework installed all so with balma you can include it with a script tag in HTML or you can use mpm to install it uh so we're going to use that method so um by the way the console that I'm using is called CMD right up here if you can see the um the the heading there I and you can right click at the bottom and create a new console so I've done that already as you can see right here here so I'm leaving this uh npm rum Dev up here open creating a second one just so I don't have to keep on rerunning that uh just to run some an additional command to npm install our balma so real quickly in the project folder we'll type in npm install Bulma and then save it as a dependency in our package.json all right so once that is finished we'll go back to our app Here and balma Now is installed here in a balma folder um and we don't really don't need to worry about that um but that's where it's located so uh to get started we have to actually import it and where we're going to import it is within our basic our starting app here um component and so the way you define this is we have two different steps to concern ourselves with so at the very top we're we're going to put this command which is at import and then the location now notice it's a SAS file Bulma does also include a CSS version as well and if you just navigate to the node modules Bulma folder you'll be able to find out the exact location of that folder um but we're going to use SAS so that we can harness the power of SAS if you wish now this won't work if we save it uh instead right here in the style tag we have to add L equals SAS now once we do this we can see that we have some issues here because SAS does not use these semicolons in these brackets so we delete these and by the way we're not even going to need these anyways but I'll go ahead and just save it anyhow now if we check out the browser we see we have an issue module not found can't resolve SAS loader so because we're using SAS we have to run npm again and to install an additional package now in order to get this work we have to actually install three different packages so mpm install node hyphen SAS SAS loader and style loader so style loader save Dev to save it as a development dependency all right we'll go back to the other console and run mpm run Dev if you already have it running just hit contrl C and hit Y and then run mpm runev and it will bring back up our project so now balma is actually loaded here probably can't tell but the font does change slightly okay so I we're going to go ahead back here to our project I'm going to hit C control B to get up our sidebar and we're going to create a new SAS file just here in The Source folder so we'll go ahead and type in mq. SAS so the mq is uh just short term for media query you can name it whatever you want and right off the bat we're going to create just a couple variables and here in SAS as well as I copied and we're going to paste some different uh mixing that we can use to designate uh for viewports like mobile tablet tablet only desktop desk to only so I first is just a primary color which is that sort of like that teal color and then next I'm just going to copy and paste and and by the way I copied and pasted this from uh some of the SAS files from the bomma uh folder in the node modules so um tablet desktop widescreen full HD this is just just designating the sizes of all them and then I'm going to finally copy and paste in I these mixins right here for mobile tablet tablet only desktop and desktop only and you'll see how we can we will eventually utilize these when we start writing out just a little bit of custom CSS uh going on in the future all right so we'll save this we're going to go back to our app View and we're going to import it all right so to import it again very simple we'll just go ahead and type at import mq all right we'll save that I'm going to copy and we're going to go to our home View and again we want to make sure style Lang equals SAS is added here as well we can just delete all this stuff for now and we're going to import that and by the way we have to change that because we're up one folder there we'll save that copy this go back to our fact style equals Lang oops sorry Lang equals SAS rather and import our media queries so we'll save all right awesome so now based on our mockup in the next section we're going to go ahead and start writing out the HTML for our navigation here okay so let's go ahead in our source and we're going to just follow right here in the app. view and this is where the HTML and Associated CSS is going to be placed uh for the header portion so this router view we're going to leave it here however we're going to get rid of this image Source okay so right now it would be worth uh referring back to the balma CSS documentation to see if there's any specific elements that are already in place for something like a navigation bar or a header okay so here I am at balma doio documentation overview start okay so uh if we click on the layout tab um we can see we don't have anything here we do have a like a hero section we'll use that eventually as well as a footer section if we click on components though we can see we have a nav section all right so we did refer back to this uh earlier in the course when we were working with an adobe XD to see kind of you know how the default navb bar is laid out which is right here so it gives you some example HTML to use and to refer to based on your particular needs so I pretty much followed this you know relatively closely however I did adapt it you know um to go from from something like this to something like this up here at the top as you can see they're basically the same almost okay so I let's go ahead and get started writing out our HTML I'm going to hit C control B just to get rid of that sidebar and all right so the first element that we're going to add is a class of nav so div class equals nav and a a helper class we can actually add a shadow with has and Shadow and this is optional you don't have to add it but it's just barely noticeable so I'm choosing to add it and then inside of here we have div class container and container is also specific to balma and it's defined and it adds a you know a a centered container um from which you can place all of your content now you probably wouldn't add that if you wanted a fluid width layout all right next here is also specific to the nav component so div class equals nav left and this is going to hold our logo so we're going to put in a class nav item and this is another item or class rather that we add for individual items like a logo uh the individual elements um for our links and such so my company all right so just after the closing tag of nav left we're going to add in a a span class of nav toggle so span class equals nav hyen toggle and this is for the hamburger icon menu and the way they have that set up is inside we have three additional spans which serve as each of the three horizontal lines that make that icon up so there's a spans op and closed so copy that paste it three times we will roll I come back to this though to make it actually work and add um some view specific functionality there but we're going to leave it like that for now so div class oops div class equals nav right and nav hyphen menu again we're going to come back to this and add some I view specific stuff inside of that particular class all right and next here is where we have our four links uh right here so home about features and fact so ordinarily you would use like an ah ref um or like a unordered list or something but for us we're going to be using uh something specific to view which is router link so router hyphen link all right two and you can think of this kind of like the hru so we have our first one is going to be home but first let's add a class of nav item and I'm going to add my own class of our hyphen item and we'll Define that later on all right so router link so now we take this and we copy and paste it we have four primary links there each one of these for now I'm just going to make them all point to fact because I'm not creating the other uh Pages it'll be a little bit redundant for the purpose of this course so features about and fact all right and then we're also have an additional button so div class equals naven item and again I got most of this uh this scaffolding if you will from uh the example on the component page that we just took a look at at balma doio so we add pclass equals control and here we have a class equals button is hyphen primary is for designating the primary color I that's associated with our theme here so we're going to make that that that button a primary color and also is outlined and this is a class that makes it so that the uh button is not outlined because if you recall right here we made it kind of hollow well not kind of hollow it is hollow so let's come down here and close that a tag here and then we put in inside of the button a span class of Icon close that out and also I class equals fa for font awesome and fa hyphen download now we didn't actually include font awesome yet so let's do that just in a second let's create the actual text which is span join now and let's save it now if we refer back to the browser at this point if you have MPN runev already ran you'll see uh we have the basic structure here um I do have a little bit of uh margin or pattering up there we'll figure that out out but uh we can see we don't have the actual icon um showing up so let's go ahead and fix that real quick if you go back to the balma io documentation we'll see that at the bottom uh we have font awesome we need to include this in our index.html so copy that control B index just uh right here just above the closing head tag we'll save it and there we go we check this out awesome so obviously the color is not correct but uh we will correct that and this uh top section right here I forgot it's based on the um clii generating some CSS there which we didn't get rid of yet so let's H go back real quick to our app View and all this stuff we're just going to gut it so let's get rid of that now we go back and we could see that that's much better okay let's do some real quick uh CSS SAS to get this thing working a little bit better or looking a little bit better more consistent with our mockup so I'm just kind of dragging this over and we'll see if we can get away with just doing a kind of a split screen so you can see how it updates as we write our CSS so we're going to reference the nav class and we're going to make the background and make sure you endent this correctly as that's how SAS Works background color we'll make it 38 38 38 and that's you can grab that color code by the way from our our mockup that's what I used all right save it we can see how it updates um we're also going to add um we're going to reference rather um the links inside of it in the hover state so a hover hit enter and tab in we're going to make them gray so because right now if you hover over them they're like that make sure you space that out otherwise it won't work now we're pretty much staying the same next we also have uh our let's see here nav hyphen left a so we're going to style the logo and we're going to come in and we're going to make it white and also we're going to make it font way of bold there we go additionally we're going to reference the links with a class of R hyphen item which is a custom class that's not defined in Bulma but one that we're going to do instead we're going to make the color C1 C1 C1 so we'll save that just to make these pop out a little bit more next we're going to give them um a padding so the padding will be 0.5 RS on the top and then 1.75 RS on the bottom we'll save it so it's going to space them out a little bit more and then also just for mobile only so we're going to add mobile here with a plus we're going to make the color gray and their hover state so sorry about that and cool and hover give us some space here we're going to make the background color really light so F1 F1 F1 uh we can't really see this yet because the navigation isn't responsive when we can't see that but uh we'll get to that momentarily all right so I'm going to go ahead and save and that's good for now uh so in the next section we're going to focus on getting this responsive navigation actually working and if you look right here we could see we click on it nothing happens all right so look it's go ahead and get this uh responsive navigation working we can see it does toggle back and forth but if you click on it it doesn't work it's also not styled very well can't really see it so let's go ahead and address those issues so I'm going to expand this just full width for now and in our app view we're going to focus on our span class nav toggle so this is the actual hamburger uh menu that you saw now we have to add a Von click and Von by the way is specific to vuejs and it's a directive so V hyphen on and on what well click and and we set a method here so we'll just call this toggle nav all right so when this hamburger icon menu is clicked it's going to call toggle nav and we'll Define that momentarily we're also going to add the V hyphen bind directive and we could choose style or class here so we'll choose class equals and inside of this object we're going to make a class called is hyphen active to show or bind it to the state of is active and that's a property that we will set in the component class so what's going to happen here is when this is clicked it's going to add or remove is active from this class right here and the reason we do is active is if we refer back to our documentation of Bulma we go to our nav section so we go to components nav it's going to tell you for responsiveness two additional classes are available we have nav toggle for the hamburger menu on uh mobile nav menu for the menu That's collapsible on mobile and we toggle right here is active which is what we're doing now in the code on nav toggle which is is just down here right there and nav menu when nav toggle was clicked okay so a little bit confusing but you'll see how it works here uh we also add the same thing right here so we're going to copy this and on our nav menu we're going to toggle on is active on this element based on whether it is clicked or not up here all right so let's go ahead and save that it's not going to work yet we have to go down to the script section which is where uh the component logic resides so we're going to add in two different properties here and that's going to be data function we're going to return is active because that's what we're referencing here in the template and we're going to set it to false by initial initially uh after this right here we're going to put in a comma we're going to add another object rather in object or methods rather and ours is called toggle nav and we pass in this or we reference rather is active equals oops this dot is active and that will toggle between true and false so let's go ahead and save that we'll go back to our project now if we click it look at that so you can see we have U our custom CSS where we added the light gray background uh change the color of these a little bit so now that is all working um real quickly let's just add the CSS to make that more noticeable because it's you pretty much cannot see it at the moment so let's go ahead back to down here and we'll reference nav hyphen toggle span which is for each of those three lines and the background color we're going to set to C1 C1 C1 so now we go back if I can find it there we go now we could see it cool so so now in the next section we're going to get focused on adding real quickly our footer just down here once the footer is done then we'll focus on the home component and the fact component and by the way the fact component we're not just going to hardcode this all this stuff in here we're going to pull from a public API just so I can show you how to do that and also we can how we can see the differences between our uh react View and angular okay so now let's go ahead and work on this footer that we have down here it's obviously very simple we'll just use Font awesome for these two icons uh and set up two different columns here and just have a single paragraph of text we'll also add the quick ey oops sorry about that quick ey CSS right here all right so let's come back up here now remember uh this is the router view this is where our components for home fact will reside so we can just go underneath this and put in our footer because we want our footer to be always be displayed as well so let's go ahead and write out the CSS for that and as well there is a footer in the layouts section or the tab of the balma doio documentation so you can get or you can reference that if you want on your own what we make a footer tag or element with a class of footer and color is primary div class here is container because we want everything inside of a container and then inside of here div class equals columns because we have columns in that container and then also div class equals column inside of here is where our first uh paragraph goes and I'm going to paste in just off screen or copy off screen some text here and then we have a second one we can get rid of this also we're going to add a helper class has hyphen text hyphen right and this is from balma just to write a line text and then we're going to add in links for social icon so a class equals icon hre not going anywhere because this is fictional I class equals font awesome and then font awesome hyphen Facebook which is the name of it and we want to go ahead and copy this paste it and this is going to be renamed the Twitter and we'll say if we go back we can see that the default color here I is just very light gray so you can't really see it but here are our two icons so let's go ahead and fix up this formatting just a little bit so we'll go back go to the style section and really it's only just a few different things here so we'll have in pass in our footer background color is going to be the the primary and we're going to make this important oops we going to add an important here color is going to be white all right and then we're also going to reference the icons we're going to make them a color of white and a margin left of 20 pixels just to move them away from each other so we'll save that and there we go now obviously it's all crunched up up here at the top uh because our home content is just this home text so that's what we're going to focus on in the next section so let's focus on taking this and making it look like this in our project okay so now we're pretty much done working within our view our main app view so uh what we want to do now is get our uh toolbar or sidebar up go into components and work on our home view so as we can see it's very sparce so what we're going to do is refer back real quickly to our balma documentation and we can see under layout there is a hero section so the hero section is this portion right here that's called a hero section Tada so exciting uh so they have uh some predefined CSS for US based on these hero sections so you can refer to that as you wish but that is roughly what I'll be using this uh styling right here but we're going to make some adjustments of course um to make it custom so let's go back get remove rid of home here and section class equals hero and inside of it we're going to put in div class equals hero hyphen body not her body jeez the hell am I thinking about and then div class equals container and inside of there we have our H1 classes title and again this is specific to balma and just for the fun of it we'll use a interpolation here um so heading interpolation by the way is just to show I basically a property or a variable that's defined here in our component so I just want to show you how that's done it's very simple basic stuff all right and then also we're going to have div class equals is hyphen 2 hyphen 3 column and is hyphen padding lless all right so there's three different things happen Happening Here is 2/3 so what is that exactly we haven't really encountered the column structuring yet um so if we go back to the balus CSS we'll see if we go all the way back up to the grid we'll find that we have all of our grid classes so we can see is 2/3 is one of them and the reason we're adding that to that specific class or that HTML element is because we have right here this subheading and notice we just don't we don't want it to go all the way across so that's why we say is 2/3 all right and then also we also had a helper class there is uh is padding list and column is what you always add um to individual columns contained within uh a columns div essentially all right so now inside of here this is going to be H2 and this is class equals subtitle and is hyphen 4 we'll also use interpolation call this subheading which we create in the uh the the logic section down below all right after that we're going to have a call to action button so we're going to put a class button and again this is from balma so they have a button section which you can check out we're going to add is large which is also from balma and is primary to make it the primary color that we were using in our app ID we're going to make this this learn that's custom and then learn more all right great so that concludes just the hero section so if we save this let's go ahead first before we check anything out and let's create the two properties that we referenced so after name we're going to put in data we're going to return an object consisting of heading soaring to new heights I believe is what we used and then also subheading and this is just our laurum ipsum text so I'm going to copy that and paste it from off screen so we'll save that and we'll go back to our app there we go so we have some issues here with uh margin and padding we don't have our background here either um so let's go ahead and remedy that real quickly so we put in our assets just right up here a source assets for so our image by the way we don't need this um so we'll delete that momentarily so you want to open up the project files that we had with the clouds. JPEG and you can just copy and paste that in where this needs to be so I'm going to right click and reveal on Explorer and drag this over here assets going to get another one up all right so here's my project folder with resources I'm going to take clouds and just put it right there delete logo and we'll go back oh yeah it's not going to show up because we haven't yet done the CSS for that so let's go ahead and do that real quick so we'll come down here we're going to reference the hero class the background is going to be URL and this is coming out a folder to assets clouds. jpeg we're also going to make the background size cover so it expands the entire size and then uh that's good right there we're also going to reference the title inside of it to fix some issues here so on mobile we want the font weight to be bold on tablet we're going to make the font size 2.5 Rems and then on desktop we're going to make the font size large larger than it is by default so four Rams and then margin top is two Rams we're also going to real quickly reference the H2 which is a subtitle and we're going to change the margin there so 1.5 five RS on the top zero on the right two RS on the bottom and zero on the left and we're going to add important here to make sure this works so we'll go back there we go much much better so if we click on fact for instance we'll see it instantly loads our fact component and there we go all right so in the next section we're going to focus on the secondary content which is this stuff just down here and then the home component will be complete all right so now let's go ahead go back and control B just so you have a little bit more space and just underneath this closing section tag we're going to add another section so section class equals section inside of here we're going to have a div class container inside of here we're going to have a div class of columns uh PD is going to be padding that's a custom class we're going to create and then is desktop and that is specific from balma now also inside of here we're going to have a div class of column so this is a column inside of columns so it's is one and this is in reference to that little Cog icon that we have so uh is one by the way is another way to structure The Columns you can either put a like is 2/3 or is hyphen 1 through 12 so it's only one column so we're just going to put is hyphen one and then has text centered in order to Center that Cog in there all right uh so inside of there we put in our I for the actual font awesome icon fa Cog is the name if you recall and then is primary all right then next we have another column just to save ourselves a little bit of time I'll copy this and this second column we're going to make is oops is hyphen one hyphen third hyphen desktop all right so that's also there in the grid section the balma documentation so adding a um a device like desktop here after the column size will make it specific only to that actual device size all right so inside of here this is where we're going to put in just a p class of title and we're going to make it bold because if you recall this is what it looks like right here we can just copy this stuff paste it in actually let's close out the closing P tag real quick and inside of here we'll paste that and then finally we'll copy this one more column and this we just simply put in column it's one of the advantage of a flex boox base layout uh we can get rid of this class here and the strong we're going to Simply p paste in some of that laurum ipsum text that we have so I copied off screen paste that in there like that all right so it's save and this is what that looks like so it does need a little bit of work which we'll fix in CSS momentarily so let's keep on going and focus on the testimonials right here all right so after that part we're not going to create a new section we're just going to add just beneath the closing section right here div class equals columns I'm going to put our PD class which we'll reference shortly div class equals column sorry about that all right and then this is also specific to balma so we created that card layout so if we go back to the doc documentation we go up to elements I believe it's in elements no maybe it's in components there we go card here's all the information you need to know about that so it gives you different HTML scenarios based on this result if you want that type of card or this type of card or this type of card which is more specific to what we want although we're not going to have share buttons or anything like that nobody wants to share testimonials so let's go back here and the structure is div class card inside of here we have div class equals card hyen content and then just start two text based elements so PCL class equals title and I'll just close this out temporarily and then PCL class equals subtitle I'm just going to put in Gary Simon so off screen I'm simply going to copy and paste in uh just uh some default text let me go back to XD actually and do that and this goes right here put a dash in front of my name and then we're going to copy and paste everything from column that ends right there two more times so we have a total of three of them so we'll save that and with any luck if your div structure is all correct this is what we should have so it kind of looks a little bit silly um padding is not very good so let's fix that with CSS come down here and underneath our H2 we're going to reference our CA because if you look at back at the Cog real quick it doesn't look very good it's so small and ugly looking so let's go ahead and fix that fa hyphen Cog is a class that's attached to it font size we're going to make it uh 40 pixels and then learn that was a custom ID that we added and desktop only we're going to make a margin bottom of two RS let me save this just so we could see the result there we go we kind of push things down from the learn more button right there to give it more even spacing all right let's also reference our PD class and it'll be the final element so on tablet only it's going to be a padding of 2 em and zero or tablet and above rather which is pretty much everything so there we go it spaces everything out awesome so uh now let's check it and see how it looks and responds on mobile great works well all right so in the next section we're going to focus on this fact page right here all right so let's go ahead and make this ultimately look like this over here okay so let's go ahead and get our sidebar up with control B click on our fact. view and get started on that so there's less quite a bit less CSS um right here or or HTML rather than the other one other Home component so I we're going to gut out the fact name right there we're going to put in div class of container because we want everything kind of centered within that containing element um we're going to add section class equals section again that's coming from balma inside of here we're going to add our H1 class equals title make it fact and then also H2 for a subtitle class is subtitle and is four and that's for a size so I'm just going to type in real quickly warum ipsum and all of that Jazz all right and then after it we're going to have our column so div class equals columns we're going to add a v if actually and we're going to use also a V4 directive to iterate through a public API just to show you how that's done but let's get the HTML ready first so div class equals member column so you start with columns and then you add a column and is 1/3 right because we're going to have three of these which will add up to 12 inside of here we're going to use cards again so div class equals card we're going to have div class equals card hyen content and then inside of here we're going to have P class equals title I'm just going to put my title for now we'll use interpolation and momentarily and then answer oops not yet uh my answer there we go so if we save that head on over to our app here there we go we got their fact subtitle my title and my answer so let's go ahead and actually pull from a public API it's called Jason placeholder I've I've used it before in other tutorials with angular um and it just allows you to just pull in some mock uh Json uh data like comments and pictures and posts and all that stuff uh so to do that we're going to use an HTTP Library um that works well with view called axios so to do that we're going to use mpm to install it so let's go back to our console we're going to type in mpm install axios and save it all right once that's complete we'll go back to our project and just after the script tag we're going to import it so we import axios from axios very simple all right next here in our exports we're going to have after name we're going to have data and this is an arrow function which we can use and we can pass in fax or name it fax as an array and also if we have any errors as well after that we're going to put in a comma and on the created method for a life cycle so when this component gets created then it's going to call upon axio so axios doget method and then we pass in the URL that we want uh let me just show you the site real quickly that we're going to access us from just for your reference so this is a site uh here's the URL if you want to visit uh and it's basically just a fake online rest API for testing and prototyping and it gives you uh the resources that you can access right here so we're going to use posts which simply has a a title and a body that we can access which we will so uh real quick let's close that out and I'm going to paste that in actually HTTP paste that in and then post all right and then we reference then all right the response and we're going to make it we're going to reference our facts this. fact equals the response. data I it it mentioned on that site it returns like 100 results we don't want that many so we're going to use the slice method to return just the first 10 all right and then optionally we can catch it here e and this. errors. push e all right so let's go ahead and save that and up here we have to do a little bit of work with our view directives so first we say V if fax and so we put double Amper stand fax. length next we put over here vyen 4 fact of facts now we reference fact here through interpolation so for the title we'll put in double curly braces fact. tile copy this this real quick and then also fact. body so we'll save and there we go so uh there's an issue where uh based on Flex box there's uh no wrapping right now so it's kind of just those 10 results are just flying off to the side so let's go ahead and fix up uh that with some real quick CSS so we'll come down here and and we're going to reference real quickly our PD oh it's padding rather 2.5 em 0 1.5 em Z and then also our answer margin top is 10 pixels so we're just kind of pushing it away from the question we going to make the it also gray not Gary gray Jesus and then also finally columns we fix that issue with the wrapping we place in Flex wrap we want it to wrap so let's save it and go back and there we go awesome awesome awesome all right so that's how you create a very simple app here using view JS so hopefully that gave you enough um kind of experience or to get your feed wet with a vue.js app and now in the next portion of this course we're going to focus on recreating the same exact app with our fact page and pulling in from an API both within angular and also react