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
HTMLor 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 installRun the project with automatic reloading:
npm start