https://github.com/5t3ph/howtowebdev-starter
Starter files for the video course "Learn How to Make a Website with Steph"
https://github.com/5t3ph/howtowebdev-starter
Last synced: over 1 year ago
JSON representation
Starter files for the video course "Learn How to Make a Website with Steph"
- Host: GitHub
- URL: https://github.com/5t3ph/howtowebdev-starter
- Owner: 5t3ph
- Created: 2020-01-09T22:28:33.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-01-16T03:42:47.000Z (over 6 years ago)
- Last Synced: 2025-03-29T09:22:51.268Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://www.youtube.com/channel/UC8qc2AyBbNmvgIky6236nHA
- Size: 3.91 KB
- Stars: 9
- Watchers: 3
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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 >**](https://youtu.be/C1jGdht7E44)
[**Subscribe for access to all video courses >**](https://www.youtube.com/channel/UC8qc2AyBbNmvgIky6236nHA/)
[**Support this project on Patreon >**](https://www.youtube.com/channel/UC8qc2AyBbNmvgIky6236nHA/) and get early access to new videos!
[**View the main project repo >**](https://github.com/5t3ph/howtowebdev) 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](https://code.visualstudio.com/download) 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:
```sh
npm install
```
Run the project with automatic reloading:
```sh
npm start
```