Computers - Computer Basics
Instructors: Jess, Carmen, and Eda
Computer Basics
Before this session, please:
- Read Understanding Computer, Internet and Tooling Basics: What Are the Basic Parts of a Computer? and take notes
- Read Understanding Computer, Internet and Tooling Basics: How Can You Effectively Work With Your Keyboard, Mouse, and Other Pointing Devices? and take notes
- Read Understanding Computer, Internet and Tooling Basics: What Are the Different Types of Internet Service Providers? and take notes
- Read Understanding Computer, Internet and Tooling Basics: What Are Safe Ways to Sign Into Your Computer? and take notes
- Read Understanding Computer, Internet and Tooling Basics: What Are the Different Types of Tools Professional Developers Use? and take notes
- Read Working with File Systems: How Can You Use File Management Applications on Your Computer? and take notes
- Read Working with File Systems: What Are Best Practices for Naming Files for Web Applications? and take notes
- Read Working with File Systems: What Are Best Practices for File/Folder Organization in Web Applications? and take notes
- Read Working with File Systems: How Can You Create, Move, and Delete Files and Folders Using Explorer/Finder? and take notes
- Read Working with File Systems: How Can You Search for Files and Folders on Your Computer? and take notes
- Read Working with File Systems: What Are Some Common File Types You Will Work With in Web Applications? and take notes
- Read Browsing the Web Effectively: What Are Some of the Common Web Browsers Available Today and How Do You Install One? and take notes
- Read Browsing the Web Effectively: What Is the Difference Between a Web Browser, a Website, and a Search Engine? and take notes
- Read Browsing the Web Effectively: How to Use a Search Engine Effectively to Achieve Optimal Results and take notes
- Read Computer Basics Review and take notes
- Take Computer Basics Quiz on your own to test your knowledge
During this session, we’ll:
- Review notes and talk through core concepts together
- Assigned for solo work after this class
After this session, please:
- Try working through Build a Curriculum Outline and write down any new concepts or questions
- Complete Debug Camperbot’s Profile Page and record any questions or new concepts
- Read Understanding HTML Attributes: What Role Does HTML Play on the Web? and take notes
- Read Understanding HTML Attributes: What Are Attributes, and How Do They Work? and take notes
Instructor Notes
Understanding Computer, Internet and Tooling Basics: What Are the Basic Parts of a Computer?
Computer: the physical device that’s built to process information to complete a series of tasks. It could be a laptop, a desktop computer, a phone, a tablet, servers or other simpler devices that we won’t have to worry about in this course.
Memory: In order to be able to process information to complete tasks, a computer needs to have memory that lets it hold the information to process. Even simple processes like adding 2 + 5 to get 7 require a computer to hold multiple pieces of information. Here the computer needs memory to retain: the digits 2 and 5, that the process we want to run on them is to add them, what the addition function means and the digit 7 as the answer!
Processing: Computer processes are the ability of the computer to run the series of instructions you give your computer. To add 2 + 5 our computer needs the ability to run, or process these instructions.
Storage: Many computers need to be able to save input into memory. This could be saving a photo you’ve just taken to your phone, saving a song to your laptop or when the freeCodeCamp website saves your work to its server.
Motherboard: an internal part of a computer that holds you computer’s memory and connects the different parts of your computer together.
CPU: A computer chip that lives in the motherboard. It is responsible for managing all the processing your computer needs to do.
RAM (random access memory): A type of memory your computer uses to store temporary information that it needs to access quickly. Things held in RAM disappear when you turn your computer off.
Hard drive: this is the part of your computer where files and data is stored.
Expansion cards: cards that can be added to the motherboard to allow it to do different things. These can include video cards, sometimes called GPU (Graphics Processing Card) to process images. The sound card processes sound. The network card handles internet connections.
Understanding Computer, Internet and Tooling Basics: How Can You Effectively Work With Your Keyboard, Mouse, and Other Pointing Devices?
Keyboard: a physical device with keys for text input that can be found in laptop computers or can be connected to a desktop computer or tablet/phone.
Mouse: a physical pointing device that can be connected to a computer, some laptops have a trackpad instead
Keyboard shortcuts: small preprogrammed processes that are started when you press specific keys on your keyboard
Tips for healthy keyboard and mouse use:
Try not to slouch
Try to have a desk or table at the right height to work from
Get up and take breaks when you can
Understanding Computer, Internet and Tooling Basics: What Are the Different Types of Internet Service Providers?
ISP (Internet service provider): The company or service that allows your computer to connect to the internet. This is usually a paid service but local libraries or cafes may offer free ways for you to connect to the internet.
Internet: A network of globally connected computers. This connection is what makes the web possible, by allowing computers to connect to each other to transfer information.
Web: The World Wide Web is the collection of information that computers can access using the internet. It can include websites, web applications and more. For differences between the internet and the web: Geeks for Geeks
Understanding Computer, Internet and Tooling Basics: What Are Safe Ways to Sign Into Your Computer?
Password: A series of characters that systems on your computer or services on the web can be set to require before they allow access.
Choosing good passwords: Good passwords are random and difficult for other people or automated malicious bots to try and guess. You shouldn’t reuse passwords on different systems because it one system is compromised, bad actors can then get into your other accounts. This means that good passwords can also be hard to remember, so using a password management program can be helpful.
Password manager: programs that are built into your computer’s operating system or external services that store all your different passwords securely
2FA (2 factor authentication): a second layer of security, where the system or program will ask you to confirm that it should allow access by sending a text message or using a dedicated authentication app.
Understanding Computer, Internet and Tooling Basics: What Are the Different Types of Tools Professional Developers Use?
There are too many types of developer tools to cover in this unit, so we’re only looking at these in a very quick overview.
During this course, we’ll be writing most of our code in an in-browser editor on the freeCodeCamp website. But most web development will be done in programs on the developer’s computer.
Code editors: These are programs that let you write text or code, with a few added features to make coding easier. Commonly used code editors include Submine, Notepad++ and others
IDE (integrated development environment): These are code editors that have a lot of added functionality. These include Visual Studio, JetBrains, PyCharm and more
Version control systems: These are systems, programs and services that act like time machines for your code. They let you create different copies of your projects to work on, to send you changes to coworkers to review and allow you to go back and get an earlier version of your code if new changes aren’t working out the way you hoped. GitLab, GitHub and Bitbucket are all common version control services using the Git version control system.
Package managers: Tools that make it easy to download different libraries and dependencies You won’t need to learn about these yet for this course!
Testing frameworks: You won’t need to learn about these yet for this course!
Browsers: The program on your computer you use to access websites and web applications. Ex. Vivaldi, Firefox, Safari, Chrome…
Browser developer tools: Tools built into your browser to make web development easier. We’ll look at these during our learning together!
Working with File Systems: How Can You Use File Management Applications on Your Computer?
When you’ve finished this course and are writing your code in files on your computer, it will be important to be able to find files quickly.
Linux users: Open the File Manager application to search for and open files
Mac users: Open the Finder application to search for and open files
Windows users: Open the File Explorer application to search for and open files
Working with File Systems: What Are Best Practices for Naming Files for Web Applications?
When we finish this course and start writing code on files in our computer, we’ll need to create files that have the right file extension and clear names.
File extension: this is what type of file you’re working with, the file extension will be visible in the letters that follow the . in your filename. For example, index.html is a html file, shoppinglist.txt is a text file.
These files will make up the pages and content of your website when you move them onto a server. You’ll want to name your files in clear, descriptive ways to communicate to your users what the page or file is about.
Filenames on the web can’t have spaces in it, so be ready to use a hyphen!
Working with File Systems: What Are Best Practices for File/Folder Organization in Web Applications?
Folders and file structure can make life easier (or messier, if you’re not careful) both for files on your computer and for the files on a server that make up your website.
Directory: a folder that can contain other folders or files
Root directory: the parent folder that contains all the other folders or files
Working with File Systems: How Can You Create, Move, and Delete Files and Folders Using Explorer/Finder?
Different operating systems (MacOS, Linux, Windows) have different ways to delete, move and save files. Remember to save your work regularly to make sure you don’t accidentally lose it!
Working with File Systems: How Can You Search for Files and Folders on Your Computer?
Different operating systems (MacOS, Linux, Windows) have different ways to search for files.
Working with File Systems: What Are Some Common File Types You Will Work With in Web Applications?
We’ll be writing code for our projects in our browser for most of this course, but after you complete this course you’ll want to write your code in files on your computer which you’ll then move onto a server or hosting provider to get them onto the web.
These files will be different filetypes.
HTML files: These are the files that will make up the different pages on your website and all need to have a .html file extension
CSS files: These files will contain the styling rules for your webpages and need to have a .css file extension. You’ll need to link to .css files in your HTML file in order for your websites to apply to the CSS rules in these files.
JavaScript files: These files will contain the code that allows your websites to add interactivity and need to have a .js file extension. You’ll need to link to .js files in your HTML file in order for your websites to be able to use the JavaScript you’ve written on your webpages.
Images and other media filetypes: include JPEG, PNG, GIF and others. These files will be linked to in your HTML files to allow them to appear on your webpages!
Font files: the fonts the text on your website is written in are files that need to be linked to in your web projects
Readme files: These are commonly included in codebases that more than one person will work on. These are often written in Markdown (a language like HTML) and share information other people working with this project would need to know
Browsing the Web Effectively: What Are Some of the Common Web Browsers Available Today and How Do You Install One?
Web browsers are the programs we use to access the web. The two most common browsers are Google’s Chrome and Apple’s Safari.
You should use the browser that works best for your needs!
Browsing the Web Effectively: What Is the Difference Between a Web Browser, a Website, and a Search Engine?
Web browser: the program you use to access the web
Website: the sites you visit using your web browser
Search engine: a service that lets you try to search for a website or websites about a specific topic
Browsing the Web Effectively: How to Use a Search Engine Effectively to Achieve Optimal Results
Searching on the web is getting harder as search engines get worse, in large part because of the rapid expansion of low quality pages and content being generated by LLMs.
Try using different search terms and wrapping error messages in quotes to search more effectively.
Trying different search engines can also help. DuckDuckGo and Google are common free search engines. Kagi is a paid search engine but has a free trial.
Additional resources:
How Computers Really Work, a book by Matthew Justice
Processing (Computer) Wikipedia: https://en.wikipedia.org/wiki/Process_(computing)