VSCode | HTML and CSS support and configuration

[Music] hi guys welcome to another video in this video we are installing in computer or environment to develop basic web applications at the first time accessing to the visual studio code official site we start with the download of the installer and after the download finish we start with the installation of the visual studio code id in the visual studio called installation we accept the agreement of all of the listen agreements and we have all the options by default and we choose the installer and when we finish the installation we start opening the visual studio code environment and we have a welcome page we have in the top all the menus to control these this tool we have some access that are important in our environment we have the explorer the search the source code roon and extensions and we have in the bottom the manage to control all the settings related to this application we're going to change a little bit the zoom now to continue with the configuration of this application we access to the extensions to download some important extensions to work with the html and css now we are starting searching the html extensions we install the html css support html snippets intellisense for css class names in html we install the html hint extension and we need to look now for the css we install the beautify css and the next we need to look for the intellicode of visual studio and finally the live server and the live server preview all of these tools are important to install these extensions to proof or visual studio code application and we have an example about how to use and implement and construct of course a web an easy web application we have to start creating and opening a folder for our project in this case is a web application once the application restart we can create a different files for example the the home but it's an html and we construct the the design in a css file the extensions that we download at the beginning of this exercise give us the opportunity to construct different parts of your code in an easy way for example we just type the docked word and that gives you all the structure of an html document we have the html tags the head tags and the body tags by default you can change different parts of your code but you have the option to look your change in the open with live server option the access tool to this part if we create some message example hello world and we save this part we change this message in the in in the web browser we have other options we we can show the live server preview and this preview is inside of our visual studio code application and you don't need to change between windows and you just change in this case your code and all the changes after you save the document or document they apply in in the right side for example we have in this part some code that we change and after we save the document the change is applied in this side and of course this applied to the css or the design two in this case we need to link the css files we need to use the link css abbreviation and you only change the name of your css file we save the document and now we change for example the text that we create the color of this text to blue for example and when we change this text change to and of course to the first element we can change the color for example to to red we save and all the changes that we apply to these elements of core after you save the documents and that's it guys see you in the next video

Channel: Code with Sam

Views: 143,094

Keywords: visual studio code, html, vs code, css, sam teach you, sam teach wildcats, live server, visual studio code html, visual studio code tutorial, visual studio code extensions, html5, css3, integrated web browser, integrated live server, live server preview

Id: 5papYtKWTuY

Length: 7min 30sec (450 seconds)

Published: Sun Oct 18 2020