1.

Basic computer skills

1.1 Understanding your operating system

• What is an operating system?

▪ An operating system, or "OS," is a software that communicates with the hardware and
allows other programs to run. Every desktop computer, tablet, and smartphone include an
operating system that provides basic functionality for the device.
▪ An operating system is the most important software that runs on a computer. It manages
the computer's memory and processes, as well as all its software and hardware. It also
allows you to communicate with the computer without knowing how to speak the
computer's language.
▪ The operating system on your computer is a system that helps you do all the small
operations you want to do on your computer. There are different kinds of operating systems
that are popular on the market. The most popular one is Windows. Then there is IOS, Linux
and a bunch of other ones. As you would need to have a good relationship and
understanding with the intern you hire to help you in your store, you also need to have a
good understanding of your operating system to increase your operation efficiency.
• How do you instruct your operating system? What are the things you need to understand to
use your operating system?
▪ Quickly access and open installed applications
▪ Create shortcuts of the applications you use the most
▪ Connect to the Internet
▪ Install/un-install new applications
▪ Understand the menu bars of applications
▪ Adjusting your settings (control panel, background, lighting, sound, etc.)
▪ Task manager (ctr+alt+del) or activiry monitor for mac computers
▪ Understanding user accounts
▪ Using shortcuts to communicate with your operating systems quicker
• Windows short cuts
o ctrl + c = copy
o ctrl + x = cut
o ctrl + v = paste
o ctrl + f = find -
o ctrl + s = save
 o ctrl + z = undo
o ctrl + z = undo
o ctrl + a = select all -
• Mac short cuts
o command+ c = copy
o command + x = cut
o command+ v = paste
o command + f = find
o command + s = save
o command+ z = undo
o Command + a = select all
• Here are YouTube videos for you to watch to understand more about Windows operating system
▪ https://www.youtube.com/playlist?list=PLpQQipWcxwt-AMXTVUZLE9s-XsyUtIsbw
(playlist of videos with total of 18 minutes)
▪ https://www.youtube.com/watch?v=z2r-p7xc7c4 (this video describes Windows 10’s
operating system)

1. 2 Understanding folders, files and applications

• What are files, folders and applications?

▪ Everything in your computer is either a file or a folder. Files are virtual containers in a
computer system for storing information. Information is written and stored on files. Files
used in computers are similar in features to that of paper documents used in library and
office files.
▪ Folders are just virtual containers of files or subfolders. They don't have any information
stored in them. Folders help in storing and organizing files in the computer
▪ An application, or application program, is a software program that runs on your computer.
It is a is a special kind of executable file which has the capability of performing a specific
set of tasks. Web browsers, e-mail programs, Microsoft word processors, games, and
utilities are all applications. The word "application" is used because each program has a
specific application for the user. Mac programs are typically called applications, while
Windows programs are often referred to as executable files. This is why Mac programs use
the .APP file extension, while Windows programs use the .EXE extension. Though they
have different file extensions, both Mac and Windows programs serve the same purpose
and can both be called applications.
• Where are files, folders and applications stored?
▪ Consider your computer as the main storage room. There is usually one drive to store all
your files and folders. It is within the following drives that every single file and folder lives
in your computer:
• For Windows users, it is usually the C drive
• For Mac users it is usually there us the Apple SSD drive
▪ You must at least remember where the most important folders in your computer are located
at. The main folders that you will use most frequently are the following. Please note that
you should organize every other file within these major folders that you quickly remember
where they are located
• c drive or Apple drive
• Desktop
• Downloads
• Program files or applications
• Documents
• User root folder
• If you have a Microsoft Word document file, you need a MS-Word application to open that. If you
have an image file, you need an application that can open the file. The same thing is true for all the
file types you store in your computer. The type of file is identified by the looking at the extension
at the end of the file name. Below are the most common file types with the best application to open
them with. Please note that some of the files can have multiple application that can open and read
them. You can see this by right clicking on the file and hovering on the "open with" option.
▪ Word processor and text files:
• .docx, .doc (Microsoft Word)
• .pdf (Adobe PDF Reader)
▪ Image files/ almost all image readers: (.png, .jpg, .jpg, .psd, .svg)
▪ Video file/ almost all video players: (.m4v, .mp4, .mpg, .mov)
▪ Audio files/ almost all audio players: (.mp3, .wav)
▪ Compressed files/7-zip: .zip, .rar
▪ Data files
• .csv (Excell, or any text editor)
• .sql (any text editor)
• .xsls (MS Excell)
 • .xml
▪ Executable files: these are executable, meaning, they run on their own (.exe, .cgi)
▪ Web files/ any browser: .html, .css, .js
• Here is a list of containing the most common file types and file extensions:
▪ https://www.computerhope.com/issues/ch001789.htm
• How do you set up an application to be a default application to open a certain file?
▪ You will need to right click on the file you want to open > open with > select application
and check the check mark which says choose as default application.

1.3 Compressing (zipping) and decompressing (unzipping)

• Why do we compress or zip files/a folder?

▪ The main purpose of compressing (more commonly referred to as zipping) files is to make
them smaller so that they take up less space on your computer. Zipping a file does not
change the content or structure of a file, it only changes how much space a file takes up on
the computer. Note: Almost all zipped files have the extension .zip, although in rare cases
you might also see .rar depending on the application that was used to create the file.
▪ You can zip a single file, a group of files, or a whole folder. When you zip a folder, all of
the files and sub-folders inside it are automatically included for zipping. Most often, when
you zip a folder and then unzip it later, the newly unzipped folder will keep the file structure
of the original folder.
• When is it recommended to zip a file?
▪ When you need to make space on your computer - in this case, start by zipping files that
are large and which you don't use/access very often
▪ When you need to send a group of files by email
• What applications do we use to zip files?
▪ There are several different programs (some free and some commercial) that you can use to
zip a file. Most of these programs have the same basic functionalities, and all will also
provide a way to unzip a file.
• Once you have zipped a file, you will see that the .zip file is created in addition to your original
file, in the same folder as the original. In fact, a copy is made of your original file, and it is that
copy that is zipped. These two files (the .zip file and the original file) are independent of one
another. This means that you can modify, move or delete one and it will have no effect on the other.
• What is unzipping a file/ a folder?
 ▪ When you unzip a file, you expand it back to its original size. Some compression programs
such as WinZip allow you to preview the content of a .zip file, and the files that are in it.
This means that if your .zip file contains a .doc file, you can open that .doc file to see what
is in it. However, you won't be able to save any changes that you make to that .doc file. In
order to work with a file/folder that has been zipped (edit it, save changes etc.), you MUST
unzip it first, then open the unzipped file/folder and work with it.
• Please refer to these websites to see how to zip and unzip files on:
▪ Windows 10
• (https://www.howtogeek.com/668409/how-to-zip-and-unzip-files-on-windows-
10/)
▪ Mac
• (https://www.macrumors.com/how-to/zip-a-file-on-mac/ )

1.4 Specializing on web related files as a web developer

• As a web developer, you are most interested on web related files and the corresponding application
to open, create and/or modify them with.
• File types you need to master as web developer are:
▪ Text/code files (.html, .css, .js, .txt)
▪ Image files (.png, .jpg, .svg, .psd)
• Applications you need to master as web developer are:
▪ Text editors (Visual Studio Code, recommended, Sublime, Atom, Notepad++)
▪ Browsers (Chrome is recommended, forget the rest, Edge, Safari, Firefox)
▪ Image editors (Photoshop, recommended, Sketch, Paint/alternative to photoshop)
▪ Collaboration tools (Zoom, Slack, GitHub/Git)
• Why do we need text/image editors and browsers?
▪ As a web developer, you need to master your tools to create a new web file, to open and
check them if they are working correctly and sometimes a tool to debug and fix identified
problems.
▪ Your text editor, VS Code/Sublime, is your tool to create, edit and fix problems on your
code.
▪ Remember that you would be working on the same file but opening it with different
applications for different purposes
▪ The two most important tools you use the most are your Text editor (VS Code) and your
browser (Chrome)
1.5 Understanding Visual Studio Code (VSC)

• VSC is a code editor that can be used with a variety of programming languages, including
JavaScript, Node.js and Python. Here are the most common tasks you do using VSC.
▪ Open existing folder or file
▪ Create a new folder in a specific location
▪ Create a new file in a specific location
▪ Make edits and save
▪ Renaming files and/or folders
• Here is a list of VSC extensions (add extra feature to VSC) you must install:
▪ Open in default browser (by peakchen90): to fast open html file in browser
▪ Live Server (by Ritwick Dey): Launch a development local Server with live reload feature
for static & dynamic pages
▪ Material icon theme (by Philipp Kief): provides lots of icons based on Material Design for
VSC
▪ Prettier (by Prettier): a tool that automatically makes your code more readable or formatted
▪ Auto rename tag (by Jun Han): automatically renames paired HTML/XML tags
▪ CSS Peek (by Pranay Prakash): to check the properties attached to a css class or id from
your HTML file. With CSS Peek, you can view a hover image of your CSS from within
you HTML file.
▪ Bracket colorizer (by CoenraadS): for colorizing matching brackets
▪ Indent rainbow (by Odewart) : makes indentation easier to read
▪ JS Snippet (by Gajesh Panigrahi) Javascript, typescript, bootstrap, ES6, typescript-react,
react, react-router code snippet

1.6 Understanding your browser (Chrome)

• As a web developer, there are two major things that you use your browser for:
▪ Opening an HTML file to see how it looks
▪ Debugging (identifying and removing errors, using the inspect extension)
• Things you can do to increase your efficiency in using your browser:
▪ Take advantage of chrome extensions. Ex. Adblockers, Developer Tools
▪ Customize your chrome browser to your likings
• Set it as the default browser
• Set the default download location
 • Set the default search engine on it
▪ Understand how to clear browsing data
▪ Add chrome to your taskbar (Remove every other browser from there)
• Mastering Google
▪ Remember this is the main skill you want to master!! It is google researching that you need
to master more, not Node, or React or JavaScript
▪ Your main goal is decreasing the amount of time it takes you to SEARCH AND FIND an
answer
▪ Use quotes to search for an exact word or phrase
▪ Search answers specifically from certain websites
• Ex. https://stackoverflow.com/ and https://www.w3schools.com/ should be your
go to website to find answers
▪ Search images using Google images
▪ To find a specific file from the internet, use “filetype:pdf “
▪ Master long tail search results by fully writing out your questions
▪ Please refer to this website for some google searching techniques:
https://time.com/4116259/google-search-2/

1.7 Quick revision and improving google search skill

• Below, you will find video resources from YouTube explaining in detail about computers and
operating systems. Here is a very good playlist that explains about computers:
o https://www.youtube.com/watch?v=AQ5F7I7tnsc&list=PLpQQipWcxwt-xhJVJs7MCcU-
XzWYVsTQt (it has 25 videos with an average of 3 minutes each (total of an hour and a half)
o https://www.youtube.com/watch?v=z2r-p7xc7c4 (Windows operating system)
o https://www.computerhope.com/issues/ch001789.htm (Most common file types on your
computer)
o https://time.com/4116259/google-search-2/ (Google search tricks)