Installation Instructions
Note:
- If the version number installed in your device is lower than the version provided in the screenshots, follow the steps below to install the updated version of the applications.
- If an updated version of the above provided applications are already installed in your device, the following instructions will still work with minor differences in the version of the app you’re shown in the output which should have no impact during the course of the bootcamp.
Google Chrome
Go to the home page
On the home page, click the Download Chrome button.
A popup will show, click the Accept and Install button.
You will be prompted to download an installer after that, you can save the installer in your Downloads folder.
Use the installer
Execute the ChromeSetup.exe file that was downloaded earlier.
If the User Account Control dialog shows up, click Yes.
The installer will download the necessary files to actually install Google Chrome.
After the installation, the Google Chrome window will automatically open.
Git
Use the installer
Execute the downloaded installer.
If the User Account Control dialog shows up, click Yes.
Click Next.
Let the destination location be in C:\Program Files\Git and click Next.
Do not change the default selected components and click Next.
Allow the installer to create a Start Menu folder and click Next.
Do not change the default editor to be used by Git and click Next.
Allow Git to be used in command-line and from 3rd party software then click Next.
Do not change the HTTPS transport backend to be used and click Next.
Do not change the default line ending conversion configuration and click Next.
Do not change the default terminal emulator for Git bash and click Next.
Do not change the configuration of extra options and click Install.
Wait for the installer to finish.
Uncheck View Release Notes and click Next to close the installer window.
Verify installation
To verify installation of Git, press Windows Key + R then type cmd to open a command prompt.
Inside the command prompt, type git –version to output the version of the installed program.
Sublime Text 4
Use the installer
Execute the downloaded installer.
If the User Account Control dialog shows up, click Yes.
Let the destination location be in C:\Program Files\Sublime Text 3 and click Next.
Leave the Add to explorer context menu unchecked and click Next.
Confirm installation settings by clicking Install.
Wait for the installer to finish.
Click Finish to close the installer window.
Verify installation
Open the Start Menu and scroll down on the installed programs to find Sublime Text.
Postman
Use the installer
Execute the downloaded installer.
Wait for the installer to finish.
After installation, the Postman window will open. Close it afterwards.
NodeJS
Use the installer
Execute the downloaded installer.
Click Next to continue.
Check the checkbox for I accept the terms in the License Agreement and click Next.
Do not change the destination folder and click Next.
Do not change the setup settings and click Next.
Do not check the checkbox shown in Tools for Native Modules and click Next.
Click the Install button to start the installation process.
If the User Account Control dialog shows up, click Yes.
Wait for the installer to finish.
Click FInish to close the installer window.
Additional automatic installation
After the main installation of Node.js, a terminal will appear that asks for any keyboard to continue. After following the instruction from the terminal, a Windows PowerShell program will open. Wait for the additional installation to finish.
Verify installation
Open a command prompt and type node -v and npm -v to check the version of Node and NPM installed in the machine.
MongoDB Compass
Use the installer
Execute the downloaded installer.
If a Security Warning Prompt appears click on Run.
Wait for the installation to finish and the app will open automatically to also verify installation. See screenshot below.
MongoDB Community Edition
Use the installer
Execute the downloaded installer.
If a Security Warning Prompt appears click on Run.
Click on Next.
Tick the checkbox for “I accept the terms in the License Agreement and click on Next.
Click on Complete
Click on Next.
Click on Next again.
Click on Install and wait for the installation to finish.
If a prompt appears and is asking if you want to allow this app to make changes on your device. Click on Yes. and the installation will begin.
MongoDB Shell
Use the installer
Open the downloaded Zip file to extract the contents. It is recommended to extract it inside the C:\Program Files folder location which is the default location for installation for most applications.
Open the directory using File Explorer to and navigate to the bin folder inside the extracted directory.
Clicking the file path at the top will provide the full path to the directory to be added to our environment variables. Copy the full path to the bin folder
In the search bar, type environment variables to show an option to Edit the system environment variables. The search bar is on the lower left side of the screen on Windows 10 and 11.
A window will pop-up for System Properties and you can click Environment Variables.
In the Environment Variables window click on Path to highlight the variable as shown in the screenshot and then click on Edit. Either the top or the bottom Path variables will work. The difference will be that the button at the top half will create it for the currently logged in user, while the button on the lower half will create it for all users on the device.
In the Edit Environment Variable Window click on New and add the path to the bin file to the extracted mongosh folder.
Click on OK on all screens until you exit the System Properties window. Open a terminal and execute the command mongosh to see if it was installed properly similar to the screenshot below. You can press Ctrl + C afterwards to exit Mongo Shell.
Session 0: Pre-Bootcamp Activity
Goal: Check if all the software / applications needed are installed in your machines (computer).
Directions: Follow the set of instructions below.
Expected Output:
- Create a folder in your Documents folder with the name session0.
- Inside the session0 folder, right click on any space and select:
- Windows: Git Bash Here
- Linux / Ubuntu: Open in Terminal
- MacOS: Select session0 folder, select Services, New Terminal Tab at Folder
- Write pwd (present working directory) command in your Git Bash / Terminal to return the value of your current location. Our desired output should show that we are inside the session0 folder.
- Create an images folder inside session0 using the command mkdir images (make directory <directory name>).
- Open your Sublime Text application, select on File on the upper left of your screen, select Open Folder, click on session0 and click Open Folder.
- session0 folder now appears at the left side panel of the Sublime Text application.
- Right click on session0 and select New File.
- Type index.html in the newly opened tab and press ctrl + s (save). A new file called index.html file should appear inside the session0 folder.
- Create a new file again and name it style.css, save it in the session0 folder.
- Now, you are ready to create a skeleton of your session0 activity, double click on the index.html file. Remove everything and create a boilerplate for your html file by typing <html then click tab.
NOTE: If the <meta> tag did not appear, you can manually copy it or leave it as is for now.
- Change the value of the <title> tag to “John Doe | Web Developer Portfolio” (alternatively, John Doe can be replaced by your own name).
NOTE: Make sure to save your changes, you can click on File then save or ctrl + s, you can look at the tab on top, if it is a circle, changes have not been saved, if it is “x”, changes have already been saved.
- Inside the <body> tag, create a <div> tag, this will be the wrapper for the whole layout.
- Add the following tags inside the <div> tag:
- <h1> tag with the value: Full Stack Web Developer
- <p> tag with the value: Hi! My name is John and I love building things from scratch
- Make sure to save your changes, right click anywhere in your Sublime Text application and click Open in Browser, this should open a tab in your Google Chrome browser.
Expected Output in Browser:
- Find a picture (it can be fictional or your own image) and transfer it in the images folder that you created a while ago. A square shaped image is much preferable for this activity.
NOTE: Rename the image into me.jpg. Make sure it ends with proper image extension (jpg, jpeg, png)
- Add an <img> tag inside your <div> tag, put an src attribute with the path (folder/file name) where you can find the image you want to put.
- Save the changes, refresh your browser to check the image, don’t worry about the size, we are going to resize this in your style.css. Now that your skeleton for session0 is done, let’s customize it.
- Open Google Fonts (fonts.google.com) and click on Roboto. Click on View all styles.
- Add font style, click on Select Regular 400 and Select Bold 700.
- After selecting, click on the upper right corner of your Google Fonts, you will see the selected family icon.
- After clicking the icon, a right side panel will appear showing the selected styles as well as the code that you will copy for your html. Copy the <link> tag.
- In the <head> tag, paste the <link> tag from the Google Fonts and add the <link> tag for the CSS file.
- Double click on style.css, to open it, remove the text from a while ago. Declare the font style. Make sure to save your changes and refresh your browser.
- Now, change the font-size and add a background color to the whole page.
NOTE: The asterisk (*) signifies as a universal selector, meaning it targets everything in the page.
- Now let’s center the elements inside our <div> tag, add the following to your style.css.
- Lastly, resize the image by adding the styles below. Make sure to save your changes and refresh your browser
- Expected final output:
- Save your image link through GDrive . Click on the New button on the upper left and select File Upload.
- Once the image is uploaded, right click on the image select Get Link. Set the General Access to Anyone with the Link
If you’ve stumbled upon this blog post and aren’t a bootcamper, you can begin your bootcamp journey with Zuitt by clicking this link:
