HTML Practice Session for Beginners – VS Code Setup, Styling with CSS, and Chrome DevTools (Desktop)
Kick off your HTML learning with this live coding practice session for beginners. We’ll walk through setting up Visual Studio Code for HTML, writing your first HTML document, using external CSS, and inspecting styles with Chrome DevTools.
Live coding for HTML. Includes introduction to the de-facto coding environment for web i.e. Visual Studio Code and its extensions before diving into creating a basic HTML document with few elements and styling them. Includes all the basic styling concepts including ability to create an external css file and linking it in multiple html documents. This allows to change styling of multiple documents by editing just one file.
Playlist: • Yet Another Full Stack Development Course
00:00 Introduction
00:28 Introduction to visual studio code and setting it up for HTML
01:59 Installing live preview extension in visual studio code for HTML
03:55 Writing a basic HTML Document in Visual Studio Code
04:11 DOCTYPE Declaration
05:16 Head Section of HTML
06:29 Body Tag of HTML
08:10 Basic HTML Document Explained Fully
11:24 Introduction to br tag in HTML
13:00 Introduction to Style tag and Internal Styling in HTML
15:00 Introduction to colors in HTML styling
16:00 Demo of Cascading styles in HTML
17:00 Basic Introduction and Live Coding of CSS File via Link Element
19:00 Why external CSS is so powerful
21:00 Basic introduction and demo of theming via external CSS
23:30 Introduction to Chrome Developer Tools for HTML Elements
24:20 Analyzing HTML elements in chrome developer tools
25:00 Evaluating cascading styles in chrome developer tools
26:00 External, Internal and Inline styles demo and explanation
This is first practice session and others will follow for detailed coverage with live coding for other HTML documents.
#htmllivecoding #livecoding #htmlpractice #htmlcodingsession #visualstudiocode