Hey there. This video is going to do dual purpose. It's going to show us how to install what's called an extension in Vieques code and that extension is going to show us how to do live updates in our browser rather than going and hitting refresh every time. So we've installed the browser so I've installed the extension, I'm going to change the color here to green. It's going to be green, yellow and watch it change over here. When I have to say I'm not hitting refresh ready. Just updates naturally. I'll show you how I use this, how I set up my workspace. Okay. My physical space with my desktop and my laptop and we'll learn all about extensions in Vieques code. Alright to get started, open up any file I've got our index dot html open. You can have anything open and we're going to go to the extensions tab over here so there's a bunch of icons. Is this the last one? Or at least this one with the square with a square. I don't know how to describe that one, click on that. And the other thing...

that you might, it might look different to mine slightly because of the width of it. So to see this like see my cursor when I get close to this edge here, I can click hold drag it out Okay. And eventually if I drag it big enough, let's just drag it big enough so we can see the icons, it might be a bit big for you but it'll make it easier for us to work out which or you know which extension we're actually looking at. So let's do a search at the top here. Um So I'm gonna put in live preview, let's pretend like I know exactly what we're going to install, but let's pretend you don't feel like I want to do live previewing of my html. So you do a kind of a search in here and you might have to keep typing a few different things to get the extension you want. Now the one we're going to use is this one here called Live Server. Now this is I guess to be clear how extensions are made. So Microsoft. Amazing people made V. S. Code and share that free with us. You're like thank you, Microsoft. What they also did is said, hey, rest of worlds, we will allow other people to build extensions for the software. We won't do it not Microsoft but we'll let other people do it. So it's a big thing to remember. We're using a live server and it feels like it's part of the product but it's not okay if I click on it, it is something made by Republic Day. And one day he decided I'm going to build this plug in that, you know, to help me use V. S. Co because it's not built in by default. So he did it, he made it and other people started downloading it Now. The trouble is is that there might be a better live server out there. There might be another person who have made one and it might hear live server preview. That looks pretty good. But it's got lower stars 3.5 this one here, it's got five stars and it's got a zillion downloads. That's how I judge it. So when I'm looking for an extension to solve my solution, solve my solution to solve my problem. And I type it in and then I go through and say, how many times has it been downloaded versus how many stars it's got? And then it's like um it's like X factor, I kind of just compare them all and see who's got the most stars, who's got the most downloads. And then I just picked that one and I guess I want to show you that because you might be watching this in that distant distant future. Okay. And it might be live server is not that good. Now. It's got like two stars because right, quick day got hit by a bus and nobody has been looking after this application. Okay. So you have to make your own choices here. Okay. But which one you might use and these will change over time we're going to use this one and I'll show you to install it. It's pretty easy to put on. It should appear over here and another little tab. There's my website. He hasn't gone but there's this extension tells me a little bit about it and I generally read through it to make sure it kind of does what I needed to do okay. And it tells you how to install it and I'm sorry, I'm busy being now if you want to maintain the project, See, see this is a good one. There's a note in here from Republic saying I'm not going to support this product, the sixth Engine anymore. I know it works perfectly because I was using it today, but there's going to be a time where it's probably not going to work and the stars will drop off and he says sorry, I'm busy, does anybody else want to look after it? Okay. And that is true of lots of programs now, a lot of software XT is doing it, they're allowing extensions to be added rather than the, the software makers, they just do the core and they let other people make all the interesting extras. So to install, it's easy, click the install button, come on, dan. Should have been at the beginning, you can kind of see it over here. That's your only visual cue that is doing something until it says installed and you can uninstall it if you don't like it, you can run through a couple of them turn them on and off now for this particular one, I don't think we need to restart, obvious code, but a lot of them will, they'll say it's somewhere in here and if it's not working, that's a pretty good way to do it. So if it's not working, let's just do it anyway, let's go to code quick. Visual studio code. Okay. And now I'm going to reopen it and it's probably gonna work. So how this particular plug in works if you read the documentation basically it says have a document open and click this button down here. Okay? So click on, go live, it launches google chrome and it doesn't look much different than we were before, except this one is it'll update live, Okay, we'll show you what I mean by making it a bit smaller and I'm going to push it over here, move this over here so you can see it. So it basically it stops you hitting the refresh button and you might be like, I don't mind hitting the refresh button, then don't install this plug in. It's a, you know, we don't need it, it's just handy. I like it. But if you're like man, that's just too much work and too much hassle just yeah, you can just do it, I think refresh. But I guess what I want to do is mainly in this video, show you how to install other extensions, we'll do another one in the next video. But and yeah, so what ends up happening, So watch this before I had to hit refresh now? It does do I work. Yes, I do and I had saved, can you see it just I saved over the site, it just automatically refreshes. So I'll show you in a second how I use this. But let's just quickly recap, find extension type in what you want to do. Okay. We're going to use FTP later on and we're going to use some code hinting find it, go through and say, oh, they've got about not about the same down there and this one's got twice as many, but these both got really bad reviews. This one's got less, but it's got higher stars. So you kind of make a decision based on stars versus downloads. Oh, this one looks good. That's the one we're going to use And but because it's got 2.3 million downloads, it'll be different when you look at it. Okay? With a high star rating. Okay. And you can close the extensions by clicking back onto your Explorer. Alright. So we're going to preview here and what I've been doing is either having it side by side like this, which is going to work for my really big screen. I'll show you how I normally work though, and I'm going to jump out to my cell phone now and I'll show you hi everyone. It's me, real me, not just computer screen. Me. Um I want to show you how I kind of work. So laptop big screen. Okay? I plugged them in so they're connected and when I'm working on the big screen here. I have that using ves code. Okay? And V. S. Code, I'll launch the cool live server thing so I launch it it goes big. What I do is I just click hold and I drag it and I drag it to over this screen. Okay. And I leave it on there all the time and that's how I kind of do my editing. So I'll over here in Vegas code, I'll try and do something so you can see a change live. So each one I'm gonna go set font size, font size is going to be like 400 pixels massive. Hit save and watch it update over there. Ready? Did it update updated? So I'm always hacking away over here and watching it to make sure the results are good over here. So I have to kind of toggle between screens or switch between them and you're going to have an extra problem while you're learning because you're going to try and do this value. Also need to watch the video that I'm making. So maybe some people use an ipad down here to watch the video on and then do these things here. You might not have, you might have a tiny laptop that you're working on and it's just gonna be fun. You have to talk between all three videos. Um but that's it extensions. Make sure you check the star rating versus the how many times it's been downloaded and make your own choice. Okay. The live server at the moment is pretty good. But it might not be in a year because nobody's looking after it and that is it. That's where it's all the extension life services helpful. I'm babbling. It's hard when you're on live camera. It's easy when you can edit. When you're doing screen cast. I sound a lot more sensible. Right? More rambling. I'll see you in the next video. Bye.

Class Materials

Bonus Materials with Purchase

Exercise Files

Completed Files

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Branding Web Design UX Design Design Projects

Ratings and Reviews

Viwosoft Technologies

Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!

2,000+ classes ranging from fundamentals to advanced techniques.

Testing Your Website

Testing Your Website

Lesson Info

14. Testing Your Website

Lessons

How This Class is Structured

What to Download

Creating Our First Webpage

What is HTML5 & CSS3

Head vs. Body vs. Html Tag

Title & Description

What Code Editor Should I Use

Using Diy Tags

What is a CSS Class

How to Create Nested Divs

Class Project

External CSS

Creating Our Index Style Pages

Testing Your Website

Check Your Code For Errors

What are HTML5 Structure Tags

Add HTML5 structure elements

How to Set the Color of the Background

Adding Images to a Website

How to Center an Image

Change the Font Size & Color

Make a Clickable Link

Stretching Background Image

Making a Div Tag Transparent

Simple Website Text Navigation

CSS Compound Classes

Class Project 02

Class Project 02 - COMPLETE

Add an Email Button to a Website

Add Google Maps to Your Website

Making a Website Live

Uploading via SFTP

Setting Up Our New Project

CSS Reset

Min-height vs. Height

Div Tags Onto One Line

Getting div tags onto one line using Flexbox in HTML & CSS

Evenly Spaced Div Tags

Two Div Tags of Different Sizes

Vertically Center Content

Class Project 3

Class Project 3 - COMPLETE

Change Default Fonts

Installing Google Fonts

What are PX & EM & REM

Change Line Height

SVG vs. JPG vs. PNG

How to Create a SVG, JPG, or PNG

Block Images vs. Background Images

Finishing Up Our Cards

Icons via Font Awesome

Making a Div Container Clickable

Box-sizing & Border-box

How to Make A Colored Button

Why Can't I Add Margin or Paddding

Rounded Corners

Drop Shadows

Backup Your Website

Reusing a Button Class

Class Project 04

Class Project 04 -COMPLETE

Adding a Horizontal Rule

Make Divs Wrap Onto Separate Lines

Hover Color & Animating a Button

Pseudo Classes

Simple Dropdown Navigation

Adding Our Dropdown to the Website

Useful Shortcuts and Tips in VS Code

Large Background Image

How to Connect 2 Pages

Simple PHP Form Work

Placeholder Form Text

Multi Line Form Text Box

Form Check Marks