Webbo3 Frontend Development · Month 1 · Lesson 1
Setting Up Your Development Environment
Learn to set up a development environment for frontend development and start building projects quickly and efficiently always
When you start learning to build websites, it's easy to get overwhelmed by all the tools and software you need to use. You might be wondering how to get started, what programs to install, and how to set everything up. You might have even tried to write some code, but found it hard to know where to put it, or how to run it. By the end of this lesson, you'll have a clear and simple development environment set up on your computer, and you'll know how to use it to start building your first website. You'll be able to write code in a special program called a code editor, move around your computer using a tool called the terminal, and store your code safely online using a service called GitHub.
Having a good development environment is important because it helps you to focus on learning to code, rather than struggling with your computer. It's like having a clean and organized workspace, where you can find everything you need easily. With a good development environment, you'll be able to try out new things, experiment with different code, and see the results quickly. You'll also be able to work on your projects from anywhere, and share them with others. By the end of this lesson, you'll have installed a code editor called VS Code, and added some special extensions that will help you to write and run your code. You'll also know how to use the terminal to move around your computer, and how to create a new repository on GitHub.
By the end of this lesson, you'll be able to install and configure VS Code with the three extensions that matter most for frontend development, move around your computer using the terminal, and create your first GitHub repository. You'll know how to open a terminal and navigate to different folders on your computer, how to create a new folder and add files to it, and how to create a new repository on GitHub and link it to your local computer. This will give you a solid foundation to start learning to code, and will help you to build your first website. You'll be able to start writing code, running it, and seeing the results, which will help you to learn and understand how websites are built.
What you need before starting
A laptop, an internet connection and about 90 minutes. Work along in your own editor as you read — this lesson is written to be typed, not skimmed.
VS Code Installation and Interface
To start coding, you need a code editor. One popular choice is Visual Studio Code, also known as VS Code. Go to the VS Code website and download the installer for your operating system. Once installed, open VS Code. You will see several sections: the Explorer, the editor pane, and the integrated terminal.
Explorer
The Explorer is where you manage your files and folders. It is usually located on the left side of the VS Code window. You can create a new folder by right-clicking and selecting "New Folder". Let's create a new folder called "myproject". Inside "myproject", create a new file called "index.html".
Editor Pane
The editor pane is where you write your code. Open the "index.html" file you just created. You will see a blank page where you can start writing your HTML code. Let's write a simple "Hello World" HTML page.
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>This code creates a basic HTML page with a title and a heading that says "Hello World". The <html> tag is the root element of the page, the <head> tag contains metadata about the page, and the <body> tag contains the content of the page.
A common mistake beginners make is forgetting to close their HTML tags. For example, if you forget to close the <html> tag, your page may not display correctly. To spot this mistake, look for any opening tags that do not have a corresponding closing tag.
Integrated Terminal
The integrated terminal is where you can run commands and interact with your operating system. You can open the terminal by clicking "View" -> "Terminal" or by using the shortcut "Ctrl + `". In the terminal, you can run commands like "cd myproject" to change your current directory to the "myproject" folder.
Creating a GitHub Account and Choosing a Professional Username
GitHub is a platform where you can store and share your code with others. To create a GitHub account, go to the GitHub website and click "Sign up". Choose a professional username that is easy to remember and pronounce. Avoid using numbers or special characters in your username.
Why a Professional Username is Important
Your GitHub username is how other developers will identify you and your work. A professional username can make a good impression and show that you are serious about your coding career. For example, a username like "john-doe" is more professional than "johndoe123".
Creating a GitHub Repository
Once you have created your GitHub account, you can create a new repository to store your code. A repository is like a folder that stores all your code and its history. To create a new repository, click the "+" button in the top right corner of the GitHub homepage and select "New repository". Give your repository a name, such as "myproject", and click "Create repository". You can then upload your code to the repository using the "Upload files" button. Let's use the terminal in VS Code to create a new repository and upload our "index.html" file. First, navigate to the "myproject" folder in the terminal using the command "cd myproject". Then, initialize a new Git repository using the command "git init".
cd myproject
git initThis will create a new Git repository in the "myproject" folder. You can then add your "index.html" file to the repository using the command "git add index.html".
git add index.htmlFinally, you can commit your changes using the command "git commit -m 'Initial commit'".
git commit -m 'Initial commit'This will create a new commit with the message "Initial commit". You can then link your repository to GitHub using the command "git remote add origin https://github.com/your-username/myproject.git".
git remote add origin https://github.com/your-username/myproject.gitReplace "your-username" with your actual GitHub username. Finally, you can upload your code to GitHub using the command "git push -u origin master".
git push -u origin masterThis will upload your code to the "myproject" repository on GitHub.
Extensions for a Better Development Experience
Why You Need Extensions
When you start building websites, you'll spend most of your time writing code in a text editor or an Integrated Development Environment (IDE). To make your life easier, you can add extensions to your editor. Extensions are like plugins that give your editor extra powers. We'll look at three important extensions: Live Server, Prettier, and Auto Rename Tag.
Live Server
Live Server is an extension that helps you see the changes you make to your code in real-time. Without it, you would have to manually refresh your browser every time you make a change. To install Live Server, search for it in your editor's extension marketplace and click install. Once installed, you can right-click on a folder and select "Open with Live Server" to start the server.
Prettier
Prettier is an extension that helps keep your code looking neat and tidy. It automatically formats your code according to a set of rules, so you don't have to worry about indentation, spacing, and other formatting issues. To use Prettier, you need to configure it to format your code on save. This means that every time you save a file, Prettier will automatically format it for you.
Auto Rename Tag
Auto Rename Tag is an extension that helps you avoid a common mistake: forgetting to close tags. When you type a closing tag, this extension will automatically close the corresponding opening tag. This saves you time and helps prevent errors in your code.
Creating and Cloning Your First Repository
What is a Repository?
A repository, or repo, is a central location where all your code is stored. It's like a folder, but it's hosted online, so you can access it from anywhere. To create a repository, you need to have a GitHub account. If you don't have one, sign up for free on the GitHub website.
Creating a Repository
To create a repository, log in to your GitHub account and click on the "+" button in the top right corner. Select "New repository" and fill in the required information, such as the repository name and description. Then, click on the "Create repository" button.
Cloning a Repository
Cloning a repository means downloading a copy of the repository to your local machine. To clone a repository, you need to use the Git command-line tool. Here's an example of how to clone a repository:
git clone https://github.com/your-username/your-repo-name.gitThis command tells Git to download the repository located at the specified URL. Make sure to replace "your-username" and "your-repo-name" with your actual GitHub username and repository name.
A common mistake beginners make is forgetting to navigate to the correct directory before cloning the repository. To avoid this, make sure to use the "cd" command to change the directory to where you want to clone the repository. For example:
cd Desktop
git clone https://github.com/your-username/your-repo-name.gitThis will clone the repository to your Desktop folder. If you forget to change the directory, the repository will be cloned to the wrong location, and you'll have to start over.
Testing Your Clone
Once you've cloned the repository, you can test it by creating a new file and adding some code. For example, create a new file called "index.html" and add the following code:
<html>
<head>
<title>My First Repository</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>This code creates a simple HTML page with a heading that says "Hello World!". Save the file and open it in a web browser to see the result.
Terminal Basics
Navigating Directories
To start working on your frontend project, you need to know how to navigate through your computer's file system using the terminal. The terminal is a command-line interface where you can type commands to perform various tasks. The first command you should learn is `cd`, which stands for "change directory". This command allows you to move from one directory to another. For example, if you want to move into a directory named "Documents", you would type `cd Documents` and press Enter.
Creating Directories and Files
To create a new directory, you use the `mkdir` command. For instance, if you want to create a directory named "MyProject", you would type `mkdir MyProject`. To create a new file, you use the `touch` command on Linux or macOS, or the `ni` command on Windows. For example, to create a new file named "index.html", you would type `touch index.html` on Linux or macOS, or `ni index.html` on Windows.
Listing Files and Directories
To see the list of files and directories in your current directory, you use the `ls` command on Linux or macOS, or the `dir` command on Windows. This command will display the names of all files and directories in your current directory.
The Standard Project Folder Structure
Creating the Basic Structure
A standard frontend project typically has a specific folder structure. At the root of your project, you should have an `index.html` file, which is the main entry point of your website. You should also have two folders: `images` and `css`. The `images` folder will hold all the images used in your website, while the `css` folder will hold all your stylesheet files.
Example Project Structure
Here's an example of what your project structure might look like:
MyProject/
|-- index.html
|-- images/
|-- css/To create this structure, you would use the following commands:
mkdir MyProject
cd MyProject
touch index.html
mkdir images
mkdir cssOne common mistake beginners make is forgetting to navigate into their project directory before creating the `index.html` file and the `images` and `css` folders. If you don't use `cd MyProject` before running the other commands, your files and folders will be created in the wrong location. To spot this mistake, make sure to check the current directory using the `pwd` command (on Linux or macOS) or the `cd` command (on Windows) before creating any files or folders.
Creating a Simple Web Page
To test your project structure, you can create a simple web page. Open the `index.html` file in a text editor and add the following code:
<p>Hello, World!</p>This code creates a simple paragraph element with the text "Hello, World!". Save the file and open it in a web browser to see the result. If you don't see the text "Hello, World!", make sure you have saved the file and that you are opening the correct file in the browser. Another common mistake is forgetting to save the file or saving it with the wrong file extension (e.g., `.txt` instead of `.html`). To avoid this, make sure to save the file with the correct file extension and to refresh the browser after saving the file.
Do this now
It's time to set up your development environment. This exercise should take about 20-30 minutes to complete, depending on your internet connection and how quickly you can follow the steps. Don't worry if you encounter any issues - we'll guide you through the process. Here's what you need to do:
- Open your terminal and create a new folder called my-first-site using the command
mkdir my-first-site. Then, navigate into the new folder usingcd my-first-site. - Create a new file called index.html inside the my-first-site folder. You can do this using a text editor or the terminal command
touch index.html(on Mac/Linux) ortype nul > index.html(on Windows). - Create two new folders called css and images inside the my-first-site folder. Use the commands
mkdir cssandmkdir imagesto create these folders. - Open the my-first-site folder in VS Code. You can do this by typing
code .in the terminal while you're still in the my-first-site folder. - Install and run the Live Server extension in VS Code to see your website in action. You'll need to open the index.html file in the editor and click the "Go Live" button.
- Finally, create a new GitHub repository and push your my-first-site folder to it. This will help you keep track of your changes and collaborate with others.
How to know you got it right
To verify that you've completed the exercise successfully, check the following:
- You have a new folder called my-first-site with the files and folders index.html, css, and images.
- You can open the my-first-site folder in VS Code and see the files and folders in the explorer panel.
- You can run the Live Server extension and see a blank webpage when you open index.html.
- You have a new GitHub repository with the my-first-site folder and its contents.
Common mistakes
Beginners often make the following mistakes when setting up their development environment:
- Installing the wrong version of a tool: This looks like downloading a version of Node.js that is not compatible with the project's requirements. It happens because beginners may not understand the importance of versioning. The fix is to carefully check the project's documentation for version requirements before installing any tools.
- Forgetting to update the system's PATH environment variable: This looks like being unable to run a command in the terminal after installation. It happens because the system does not know where to find the executable. The fix is to update the PATH variable to include the directory where the executable is located.
- Not restarting the terminal after installing a new tool: This looks like being unable to use a newly installed tool in the terminal. It happens because the terminal does not automatically refresh its environment variables. The fix is to restart the terminal or run the command to refresh the environment variables.
- Installing tools in the wrong directory: This looks like installing a tool in a directory that is not easily accessible. It happens because beginners may not understand the importance of directory structure. The fix is to install tools in a directory that is easy to access, such as the user's home directory.
Questions students ask
Here are some common questions students ask about setting up their development environment:
- What is the difference between a code editor and an IDE? A code editor is a simple text editor, while an IDE provides additional features such as debugging and project management.
- Do I need to install a separate version of Git for each project? No, you can install Git once and use it for all your projects.
- How do I know which version of Node.js to install? Check the project's documentation for version requirements, and install the recommended version.
Quick recap: VS Code Installation and Interface · Creating a GitHub Account and Choosing a Professional Username · Extensions for a Better Development Experience · Creating and Cloning Your First Repository · Terminal Basics · The Standard Project Folder Structure
Next lesson: Who Are You As a Developer?