Learn How to Make a Website with Steph

Getting Started: Setup Working Environment

This is a blank project that will be the foundation built upon for each lesson in this course.

Watch Episode 1 to learn how to use this >

Subscribe for access to all video courses >

Support this project on Patreon > and get early access to new videos!

View the main project repo > and give it a watch and star :)

VSCode Recommendations

The video series is conducted with the code editor (commonly referred to as an IDE) called VSCode which is freely available for download on both Windows and Mac.

To enhance your experience - and make full use of the tools available in modern web development - the following are recommended extensions for VSCode / beginners to web development.

To add these, open VSCode and navigate to "Extensions" which is found under the sidebar icon that looks like 4 blocks. Then search for the following names and select "Install".

• Auto Rename Tag - reduces errors when changing an HTML or other type of programming language tag by updating the corresponding end tag as you change the opening tag
• Color info - provides inline color information
• IntelliSense for CSS class names - provides inline lookup and insertion of class names available in your project to reduce typos and eliminate the need to perform a manual lookup
• Prettier - Code formatter - can be setup to format your code on file save which has benefits such as increasing readability by fixing differences in spacing

Not critical but still useful is the option to change your editor color scheme and file panel icon scheme. For those I use the following, but many options are available:

• Material Icon Theme - available as an Extension
• Solarized Dark - one of the built-in options

Building and running the project

First install dependencies:

npm install

Run the project with automatic reloading:

npm start