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.
Allow Apps from the App Store and Identified Developers
Reference: https://support.apple.com/en-us/HT202491
To allow installation from the App Store and Identified Developers on your Mac, choose Apple Menu > System Preferences, click Security & Privacy, then click General.
Click the lock and enter your password to make changes. Select App Store and identified developers under the header “Allow apps downloaded from.”
Homebrew
Click the Spotlight Search located at the top-right of your screen (the magnifying glass icon at the right side of the current time) then search and open a program named Terminal.
Inside the Terminal program, copy-paste the code below then press Enter.
| /bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)” |
The terminal should now look like this:
Press Enter and type your password to continue then wait for the install process to finish.
The executed command will install utility tools (specifically for MacOS devices) that will be used in the bootcamp.
Sample screenshots of the outputs in the Terminal while the command is running.
To verify that the installation process is successful, type the following in the Terminal:
| brew -v |
It should output the following:
Git was also installed along the way. To confirm, type git –version and the output should be like this:
If the version number is higher than in the screenshot, it means that it is more updated.
After verifying the success of the install process, keep the Terminal in the dock by right-clicking the program in the dock and choosing the Keep in Dock option.
Google Chrome
Open a web browser (initially Safari) and go to https://google.com/chrome. On the page, click the Download Chrome button.
Note: If you have an iMac or Macbook with the Apple Silicon (M1 or later) chip, click the Mac with Apple chip button. Otherwise, click the Mac with Intel chip button.
After downloading, open the DMG file.
After opening the DMG file, drag the Google Chrome icon to your Applications.
After that, wait for the transfer to finish.
Click the Spotlight Search located at the top-right of your screen (the magnifying glass icon at the right side of the current time) then search and open Google Chrome.
Google Chrome should open normally.
Keep the Google Chrome in the dock by right-clicking the program in the dock and choosing the Keep in Dock option.
Sublime Text 4
Open a web browser (Safari or Google Chrome) and go to Sublime Text’s Download page. On the page, click the OS X download option.
After downloading, open the ZIP file and drag the Sublime Text icon to your Applications. After that, wait for the transfer to finish.
Click the Spotlight Search located at the top-right of your screen (the magnifying glass icon at the right side of the current time) then search and open Sublime Text.
Sublime Text should open normally.
Keep the Sublime Text in the dock by right-clicking the program in the dock and choosing the Keep in Dock option.
Postman
Open a web browser (Safari or Google Chrome) and go to the Download page of Postman. On the page, click the Download the App button.
Open the downloaded ZIP file.
After opening the ZIP file, go to your Downloads folder via Finder and double-click on the Postman.
A prompt will be displayed asking if you want Postman to be moved to the Applications folder. Confirm by clicking the Move to Application Folder button.
Another prompt will be displayed. Click the Ok button.
Finally, wait for the process to finish.
Postman should open normally.
Keep the Postman in the dock by right-clicking the program in the dock and choosing the Keep in Dock option.
Node.js
Open a web browser (Safari or Google Chrome) and go to https://nodejs.org/en/download On the page, click the LTS version download option.
Choose the macOS x64-bit Installer
Go to your Downloads folder
After downloading, open the PKG file then click the Continue button to proceed.
Click the Agree button to proceed.
Then click the Install button to start the installation.
Enter your account password then click the Install Software button.
Wait for the installation to finish.
Click the Spotlight Search located at the top-right of your screen (the magnifying glass icon at the right side of the current time) then search and open a program named Terminal.
Verify the installation by executing node -v. The following output is to be expected:
Additionally, check for the version of NPM by executing npm -v.
If the version number is higher than in the screenshot, it means that it is more updated.
MongoDB Compass
Download MongoDB Compass for your MacOS device. Choose from the following options which one is the best to use. Choose dmg as the package. dmg files are similar to exe files to Windows machines to install applications on a MacOS device.
In the Finder, execute the installer by double clicking on the file.
Drag and drop the MongoDB Compass icon to the Applications folder to initialize the installation.
Using the Spotlight Search, type MongoDB Compass to open the Application to test if it was installed properly.
Open the MongoDB Compass to check if it works.
MongoDB 6.0 Community Edition
Install MongoDB 6.0 Community Edition using homebrew by following these steps:
Run the MongoDB as a service following these instructions:
Alternatively if these steps do not work. You may refer to the documentation on how to install MongoDB Community Edition on your device.
Open a terminal and execute the command mongosh to be able to see if it was installed properly. You may press Ctrl + C after to exit out of the mongosh operation.
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:
