Get the essential skills needed to effectively use Visual Studio Code (VS Code) for your frontend development projects.
Created 16th Jul 2024
English
This course is not currently accepting enrolments. Be sure to add your email via the "Register your interest" button to be notified when the course is ready.
Register Your Interest
I'm currently working on the final parts of this course
, so enter your email below and I'll send you a
message when it's been released.
This course is free to enrol for
all registered users who are signed up to my
mailing
list. Not sure if you are signed up? Just click on the "Enrol Now"
button.
Course Levelbeginner
Course LanguageEnglish
Course Chapters
9 chapters
Course Videos
26 videos
Course overview
Welcome to "VS Code Basics for Frontend Web Developers"! This course is designed to equip you with the essential skills needed to effectively use Visual Studio Code (VS Code) for your frontend development projects. Whether you're just starting out or looking to enhance your coding environment, I'll guide you through the installation and setup of VS Code to streamline your workflow and boost productivity...
Welcome to "VS Code Basics for Frontend Web Developers"! This course is designed to equip you with the essential skills needed to effectively use Visual Studio Code (VS Code) for your frontend development projects. Whether you're just starting out or looking to enhance your coding environment, I'll guide you through the installation and setup of VS Code to streamline your workflow and boost productivity.
We'll cover everything from basic navigation and file management to code display and editing features. You'll discover how to use the integrated terminal for running commands and managing your development environment directly within the editor. Additionally, we'll explore useful plugins that can further enhance your coding experience.
By the end of this course, you'll be able to manage your projects efficiently, customise your workspace, and utilise essential plugins to improve your coding workflow.
What you will learn
Install and set up Visual Studio Code on your computer.
Navigate and understand the VS Code interface.
Manage files and projects within VS Code.
Use code display and editing features.
Customise your workspace.
Utilise the integrated terminal.
Install and set up Visual Studio Code on your computer.
Navigate and understand the VS Code interface.
Manage files and projects within VS Code.
Use code display and editing features.
Customise your workspace.
Utilise the integrated terminal.
Discover plugins to enhance your coding experience.
Improve productivity in frontend web development.
Table of contents
Below, you'll find the table of contents for all the videos available in this course. Click on a chapter
to expand and see the videos included.
Course introduction
Let's run through what to expect from this course and what you'll learn by the end of it.
Course goals
The goal of this course is help beginners install and setup VS Code, and to give you a basic introduction to using VS Code.
Course prerequisites
No prior knowledge of VS Code or frontend web development required - this is a beginner friendly course, so jump right in!
Downloading & installing VS Code
Time to get VS Code installed.
Welcome screen
In this video, you'll get familiar with the VS Code welcome screen. We'll explore its features and shortcuts, helping you quickly access recent projects, new files, and helpful resources to get started efficiently.
Sidebar
Let's dive into the side bar of VS Code. You'll learn how to navigate through its various sections, such as Explorer, Search, Source Control, and Extensions, to effectively manage your projects and workflow.
Editor area
In this video, we'll focus on the editor area of VS Code. You'll learn how to open, edit, and manage files within the editor, utilise tabs, and understand the various features that enhance your coding experience.
Status & activity bar
In this video, we'll examine the status and activity bars. You'll learn about the information displayed here and the different functionality available to both, making it easier to navigate your development tasks.
Opening files & folders
We'll cover the different methods for opening your projects and individual files, making it easy to start working on your code quickly.
Explorer view
In this video, we'll take a closer look at the Explorer view in VS Code. You'll learn how to navigate your project directory, manage files and folders, and use the Explorer to streamline your workflow.
Introduction to the command palette
You'll be introduced to the Command Palette, one of VS Code's most powerful features. You'll learn how to access and use it to run commands, perform tasks, and quickly find and execute VS Code functionalities without leaving your keyboard.
Code editor basics
You'll get an overview of the code editor in VS Code. We'll cover the essential features and settings that make coding easier, including how to customise the editor layout to suit your workflow.
The editor area
You'll learn how to use tabs and split views to manage multiple files simultaneously, making it easier to navigate and organise your coding workspace.
Working with line & column numbers
In this video, we'll focus on line and column numbers in the editor. You'll learn how to display line and column numbers, and how to quickly jump to specific lines and columns, enhancing your navigation efficiency.
Text selection & highlighting
This video will teach you how to highlight and select text in VS Code. You'll learn about various selection techniques, including multi-cursor and block selection, to make text manipulation more efficient.
Basic editing shortcuts
In this video, we'll cover the fundamental editing shortcuts in VS Code. You'll learn the common shortcuts for copy, paste, undo, and redo (Ctrl+C, Ctrl+V, Ctrl+Z, Ctrl+Y), as well as additional useful shortcuts to streamline your coding process.
Changing the editor theme
Let's explore various themes available in the marketplace, how to install them, and how to switch between themes to personalise your coding environment.
Customising the editor layout
You'll learn how to adjust the panel and view arrangements, create a layout that suits your workflow, and save your layout settings for future use.
Setting menu
In this video, you'll be introduced to the settings menu in VS Code. We'll explore how to access and navigate the settings, adjust various configurations, and customise your editor to enhance your development experience.
Using the integrated terminal
We'll cover how to open and manage terminal instances, run commands, and utilise the terminal alongside your code editor to streamline your development workflow
Basic terminal commands
This video will teach you the basic terminal commands for navigation. You'll learn essential commands for moving through directories, listing files, and managing your file system directly from the terminal, enhancing your efficiency in VS Code.
Extensions and the extensions marketplace
We'll discuss the importance of extensions, how they can enhance your development experience, and give you an overview of how to find and choose the best extensions for your needs.
How to install extensions
You'll learn how to search for extensions in the marketplace, read reviews and ratings, and install extensions to add new functionalities to your editor.
Install your first extension
You'll learn how to install and activate Live Server, a popular extension that allows you to launch a local development server with live reload feature for static and dynamic pages.
Setup mini-project using extension
In this video, you'll learn how to set up HTML, CSS, and JavaScript files in VS Code. We'll then use the Live Server extension to load these files in your browser, allowing you to see your changes in real-time as you develop your frontend projects.
It's a wrap
That's it - we're done here! Let's go through your next steps on your learning path to becoming a frontend web developer.
Course FAQs
What is this?
This is a web development video course designed to help you improve your frontend
development skills. The course is broken down into smaller chapters, and each chapter contains a series of
related videos.
When can I enrol?
When the course is ready, the "Register your interest" button will be replaced with an "Enrol Now" button.
Be sure to add your email via the "Register your interest" button to be notified when the course is ready.
Additional resources
Frontend web development projects
Beginner-friendly projects focusing on HTML, CSS, and JavaScript.