Notes referring to the study of Computer Science, from TheOdinProject.
Notes from the Webdeveloper Foundations Course by The Odin Project
Foundations Course: 1- Internet, Computer basics 2- Git, GitHub basics 3- Front-end technologies basics (HTML, CSS, Javascript)
Introduction: The Odin Project is an open-source community dedicated to providing the best information sources to take you from zero to (hero) full-stack developer. Don't skip anything.
Introduction: Web developers build and maintain websites. Clients usually are trying to get their product or service onto the wbe. The work is usually project-focused and involves collaborating with a team to coordinate the client's needs into the end product. The work could involve front-end, back-end ou full-stack web development.
Front end development: the stuff you see on the website in your browser, including the presentation of content ans user interface elements. HTML, CSS, Javascript etc. Back end development: the guts of the application, which live on the server. Stores and serves program data to ensure that the front end has what it needs. Can become complicated when a website has millions of users. Java, Python, Roby and Javascript to work with data. Full-stack developers are comfortable workinf with both the front and back ends. This is the focus of The Odin Project, to cover all aspects of web development.
Tools to use regularly: Computer, Google, Text Editor, Command Line Interface (CLI), Stack Overflow, Git, GitHub
Reading assignment: "Why Learning Code is so damn hard"; Wikipedia's take on Web design; and the blog post from Udacity on front-end, back-end and full stack developers. From these, the most important observations I've found were:
- Learn the basic, and build. Once facing challenges upon, try to collab. Also, always learn from other people's codes on your own. Embrace challenges and don't give up.
- Creating a website involves: web designer, web development. But it can (and should) also involve a Graphic designer (logos, layouts, buttons), Internet marketing specialist, SEO writer, Internet copywriter, and User experience (UX) designer. These are all important in the making of an effective website!
- For front-end web development, must learn HTML, CSS and Javascript. Also, must be proficient in web frameworks and libraries like Bootstrap, Foundation, AngularJS, ReactJS, and EmberJS. Node.js is also a powerful tool and enhances workflow when using frameworks like ReactJS and AngularJS. Then, must also acquire experience with Ajax (Asynchronous JavaScript and XML). Also, the front-end developer must have a keen eye to detail and creativity. 3.1 Back-end development of a website consists of a server, an application, and a database. To make the server, application, and database communicate, we use languages like Node.js, Go, PHP, Ruby, Python, Java, and .NET. Can also use tools like MySQL, Oracle, and SQL Server to find, save, or change data and serve it back to the user through front-end code. Python is favored for its readability and simplicity -> repid development. Java is renowned for its performance and scalability -> ideal for large-scale enterprise applications. Jobs for back-end developers often require experience with PHP frameworks like Laravel, Symfony, and CakePHP; version control software like Git; and using Linux as development and deployment system. Knowledge on these tools allow back-end developers to create robust, scalable, secure web applications. 3.2 Full stack developers are a jack-of-all-trades. The term was popularized by Facebook's engineering department. They're a full package.
Reading suggestions I caught were: Hacker news The book Homepage usability: 50 websites deconstructed. According to wikipedia, the authors of this book sustain that the homepage of a website is the most important page (2002). Other web developers contest, arguing that most people go straight to the page they intend to through searching engines. But the book looks really cool still! SMACSS (free version available): Bulletproof Web Design A Book Apart Series O'Reilly books
The brain has two "core" modes: the focus mode and the relaxed mode. Navigate through "focus" and "relaxed" mode in a fluid way so you can learn!
How to Ask for help When asking a question, always provide as much information as possible:
- Your code
- The error message
- Terminal command
- Server output
- Other relevant details
- Ask specifically about the problem, not the solution. E.g. Instead of "How do I complete Step 5 of Rock Paper Scissors Assignment?", ask "Hey, I’m trying to return a string that displays the winner in Rock Paper Scissors, but I’m getting a syntax error on line 12. How can I fix this? Here’s my code.” PS: When it's needed to provide a code that is too long, use CodePen (HTML/CSS/Javascript), Replit (Javascript/Ruby), CodeSandbox(Webpack/React), Pastebin (for error messages or server output). PS1: If there's a question before you're written any code, provide your pseudo code. PS2: After succesfully solving a difficult problem with help, try writing about it on the README.md file of the project yo'ure working on PS3: Still have doubts? Read https://www.theodinproject.com/guides/community/how_to_ask PS4: Avoid de XY Problem (https://xyproblem.info/)
The XY Problem is asking about your attempted solution rather than your actual problem.
- User want to do X.
- Doesn't know, but thinks they can do it through Y
- User asks about Y
- Confusion. The solution is to always include information about a broader picture along with the attempted solution.
Formatting questions If having trouble on the command line, make sure to include both your input and the error message. In chat rooms, code can be displayed differently from normal sentences by using backsticks (''), so: For a single line of code: one backstick before and after the code. 'Your code' For multiple lines of code: three backsticks on a separate line above and below the code: ''' Code ''' You can also use code highlighting to add color to you multi-line code by specifying the language: '''js or JavaScript Multiple lines of code '''
A computer is an electronic device that manipulates information, or data. It has the ability to store, retrieve, and process data.
Hardware is any physical parts of the computer, for example the mouse and headset. It also includes the internal parts, such as HD, SSD, motherboard etc. Software is any set of instructions that tells hardware what to do and how to do it. Without software, the hardware is void and doesn't work. Every computer needs both hardware and software to function.
Types of computers: Personal computer: typically composed by computer case, monitor, keyboard and mouse. Laptop computer: typically composed by a one-serves-all case, which is the whole computer itself. Tablet computer: even samller version on an entire computer in one set, always has touch-sensitive screen function. Server: it's a computer that serves up information to other computers on a network. For example, things that you find on the Internet are typically sotres in a server. Many businesses also use local file servers to store and share files internally.
A new perspective: many of today's electronics are basically speccialized computers, though we don't always think of them that way. It's the case of: Smartphones: browse the Internet and play games; Wearables (fitness trackers and smartwatches): designed to be worn, specific functions; Game consoles: playing video games, usually on a TV; TVs: many TVs nowadays include applications which connects them to the Internet.
PCs(1981) and Macs(1984) The war is endless
Parts of a computer: Computer case (a "tower case" is a type of computer case): is the metal and plastic box that contains the main components of the computer, including the motherboard, central processing unit (CPU), and power supply. The front of the case usually has an On/Off button and one or more optical drives. Monitor: works with a video card, located inside the computer case, to display images and text on the screen. Nowadays, mostly LCD (liquid crystal display) or LED (light-emitting diode) displays.Older monitors use CRT (cathode ray tube) displays. Keyboard: wireless or ergonomic Mouse: It is commonly known as a pointing device and allows you to point, click and move objectts on screen. There are two types, the optical (detects movement using a optical sensor at the bottom) and the mechanical mouse (uses a rolling ball to detect movement and requires regular cleaning to work properly). There are some mouse alternatives such as a trackball and a touchpad. Power cord
Peripherals: Printers: used to print documents, photos etc. There are many types, such as inkjet, laser and photo printers. Also, all-in-one-printers, which can also scan and copy documents. Scanner: copy a physical image or document and save to your computer as a digital (computer-readable) image. The scanner can come included and as part of a all-in-one printer or can be bought as a separate flatbed or handheld scanner. Speaker/headphones: these are output devices, which means they send information from the computer to the user through sounds. Can be used through either audio port or USB ports. Microphone: Input device of sound. You can connect a microphone to record sound or talk to someone eles over the Internet. Web cameras: Input device of videos and pictures. It can also trasmit video over the Internet in real time, which allows for video chat and video conferencing with someone else. Game controllers and joysticks: used to control computer games. These can easily be replaced by keyboard and mouse. Digital cameras, Mobile phones, MP3 players, tablet computers, and other devices: every electronic device that allows a USB port are likely to connect to the computer and share data.
Inside the computer: Motherboard: it's the main circuit board. contains CPU (Central Processing Unit Processor), heatsink (draws away the heat from the processor), RAM (Random access memory) (short term memory that the computer uses when performing calculations; doesn't store data) Hard drive(long-term storage), many PCs use a magnetic platteer to store data but many newer users use a Solid-state drive (faster, more durable, but more expensive) On mini desktops computers, the motherboard has expansions slots that allow the PC to upgrade by adding expansion cards. You can addd a video card to get better graphics performance or you can add a wireless card to connect to your wireless home network. Most laptops don't have expansion slots. Power supply unit: responsible to connecting and directing the power to all o the PC's components and make sure it runs smoothly. Laptops also contain a built-in battery for that purpose. To see the images of everything, watch this Youtube video.
Operating system It's the most important software that runs on a computer. It manages the computer's memory and processes, as well as all of its software and hardware. Allows you to communicate with the computer through translation of commands into machine language. The OS coordinates CPU, memory and storage while programs are running on the same time. Types of OS: they usually come pre-loaded on the computer when it's bought. The three most common OS are Microsoft Windows, macOS and Linux. Modern operating systems use a graphical user interface (GUI, pronounced gooey). Each OS had different GUI, but the principles are the same. Microsoft Windows: created in the mid-1980s. Most recent versions are Windows10(2015), Windows8(2012), Windows7(1009), Windows Vista(2007) macOS: Mojave(2018), High Sierra(2017), Sierra(2016) Linux: a family of open-source OS
Applications, or Apps It's a software that isn't OS and that allows you to perform specific tasks. Some types of desktop applications: word processors, web browsers, media players, and games.
Reference: Most notes came from the Goodwill Community Foundation
The Internet is not a fuzzy cloud, it is a wire. Actually buried underground. It can be accessed by cables, satelittes and wi-fi, but it is acutally a wire. Source There are lots of servers connected to it, and each one has a unique internet protocol adress (IP). Your computer at home is not a server, because it is not connected directly to the Internet. Our computers are called client, because they are connecte dindirectdly to the Internet through a Internet Service Provider (ISP).
Information sent through the Internet is broken down in smaller pieces and they gather up recreating the picture on the receiver's end.
Types of connection to the internet: Dial-up: connects to your phone line, usually slower DSL and Cable: better options. DSL plugs into the phone line and Cable uses a cable TV connection. They're known as broadband internet connections, because they offer a lot more speed. Fiber: the fastest nowadays. Cellular, or Satellite: sold in a few different lengths, such as 4G, LTE and 5G. They're wireless connections often used by smartphones. All of these are offered by an Internet Service Provider (ISP). Modem: Dial-up > telephone modem; DSL > DSL modem ; cable > cable modem ; satellite > satellite adapter. Router: is a hardware device that allows you to connect several computers and other devices to a single internet connection, also known as home network. Many of them are wireless, allowing to create a home wireless network (Wi-Fi network). A router is not necessary, you can plug your computer to your modem through a Ethernet cable.
Websites: Once you are conencted to the Internet, you can access websites using a kind of application called web browser. A website is a collection of related text, images, and other resources. Websites can resemble other form of media (newspaper, TV programs etc) or they can be interactive in a way that's unique to computers. A website's purpose can be anything, newspapers or a forum, os educational, anything. The web browser allows you to connect to and view websites. It isn't the Internet itself, but it displays pages on the Internet. Each website has a unique address. By typing this address into your web browser, you can connect to that website and your web browser will display it. Websites often have links to ther sites, also called hyperlinks. Each website has a unique address, called URL(Uniform Resource Locator). If you're looking for specific information but don't have a URL, or an address, you can use a search engine to help. (Google, Yahoo, Bing etc).
Web app, or web applications: These are apps that run in the cloud and do nor need to be installed on your computer. Examples: Facebook, Pixlr, Google Docs.
Web page: is a simple document displayable by a browser. They are also called just "pages".
Web server: a computer that hosts a websiet on the Internet.
(Website: a collection of web pages which are grouped together and usually connected together in vairous ways. Also called "site".)
Serch engine: a website hosted on the Internet that allows you to search for other websites online.
Web browser: it's a software that allows you to browse through the Internet. Examples: Firefox, Google Chrome, Opera, Microsoft Edge or Apple Safari.
Passwords Never use personal information Use a longer password, at least 6 characters. Include numbers, symbols, uppercase and lowercase letters. Don't use the same password for each account Avoid using words that can be found in the dictionary Random passwords are the strongest. Try using a password generator.
Almost every piece of computer software is created using source code, the technical blueprint that tells a program how to function. Open-source vs. closed-source software Open-source codes are available for anyone to see, and these are usually free. Because they are accessible to anyone, lots of people work on it to solve bugs fast, but there's usually little to no official technical support. In closed source codes, the public is not given access to the source code, so they can't see it or modify it. Usually, these are paid software and because of that, there's plenty of official technical support. Still, the users need to wait for the software's company to solve any bugs, without being able to help.
Eiter macOS or Linux. We are all set up with XUbuntu 24.04 as the instructions directed! Now, installing VSCode (Visual Studio Code).
Soo many Terminal commands!!!!
GUI (Graphic user interface) vs CLI (Command line interface) The first is user-friendly, but the second is better for more accurate things done in less time. The second is essential for working with lots and lots of files. It's really important, not much I have to say about it. It's a whole new language, and here's the tutorial Using the terminal to do things is faster, more accurate, and necessary to be a professional developer. Some commands: whoami / ls (listing) / pwd (print working directory)
whoami --> prints the name of the user pwd --> prints the directory you're at cd --> change directory either to a specific one or to the directory previous to the one which is in use ls --> listing (lists everything on the directory you're at) ls -F ---> lists everything separating directories and executable files / --> directory @ --> link
- --> executable file
Variations of Control+: Control-X Control+X Ctrl-X Ctrl+X ^X C-x
Nano for Linux, or Emacs, Vim, Gedit and VScode. For Windows, Notepad++ or notepad.
$ cd (intended directory) $ nano draft.txt
Will create a txt draft file you can write on.
HTML (Hypertext Markup Language) is the language that determines how documents and web pages are displayed in a web browser, the language for the building blocks of any website. Keywords: building blocks, structure, basics of a website
CSS (Cascading Style Sheets) is a popular style sheet language that determines how a document created in HTML is styled (colors, font styles, layout and responsive features). Keywords: style, improve visuals
JavaScript is a programming language that allows youto change CSS and HTML elements in the website after it's been already loaded. This fives you the ability to make the site more interactive and engaging for users with animations, embedded video media etc. Example: A website that comes with a menu button which reveals a small menu on the side if the page. Ex2: create a calculator for the website; create keyboard shortcuts the allow users to navigate to other pages; play animations when users scroll down pages. Keywords: alter the behavior, interactivity between HTML and CSS elements
The most common web development languages include HTML, CSS, JavaScript, PHP, Python, Ruby and SQL. Ruby and PHP are popular among startups and entrepreneurs, but HTML, CSS and Javascript are a good start and understand the basics of web design and development. Every language has a different purpose. Ruby is a scalable and fast programming language that can help you build an extensive website or program in just a short period of time. With Ruby on Rails framework, the language provides practically everything needed to build a website. For SQL, developers can maintain and optimize large database in a much more streamlined manner. The main language you use depends on the specific project and the business goals that you have.
For front-end elements, learn HTML5, CSS3, Bootstrap and JavaScript. For backend, learn languages like Python, Ruby, and PHP.
HyperText Markup Language. Defines the structure and content of webpages. It is used to create paragraphs, headings, lists, iamges, and links.
HTML is made mostly of pieces of content wrapped in opening and closing HTML tags. Opening tage tell the browser that this is the start of an HTML element. <>;
The actual content goes next. CLosing tags tell the browser where an elemnt ends. </>;
HTML elements sheetCascading Style Sheets is a styling language that provides a nice and neat look to a website. It works well with HTML and Javascript, and has been used for many years now.
It can be incorporated together with the HTML file, but usually there's a "styles.css" file dedicated to most if not all stylization. So, first things first, to try this out create a repository such as "git-test"; then use "touch index.html", write some code and save; and in the same file use "touch styles.css"; and finally add to index.html the text < link rel="stylesheet" href="styles.css" >
git-test
index.html
''' <*link rel="stylesheet" href="styles.css">
git-test
styles.css
[Start writing CSS here]
CSS is basically made up of various rules. These rules are made up of a selector and a semicolon-separated list of declarations, with each of those declarations made up of a property-value pair.
''' selector {
''' property: value;
'''}
''' div {
''' color: blue;
'''}
There are Universal selectors: they select everything.
*(Asteristic) {...}
Type selectors/Element selectors: will select all elements of the given element type, and the syntax is just the name of the element.
''' div {...}
''' p {...}
Class selectors: will select all elements with the given class, which is just an attribute you place on the HTML element.
<!-- index.html -->
''' <div class="alert-text"> ... </div>
/ styles.css */
''' .alert-text {...} \
You can add multiple classes to a single element as a space-separated list, such as class="alert-text severe-alert"
ID selectors: will select an element with a given ID, which is another attribute you place on an HTML element. The difference between classes and IDs is that an element can only jave one ID. It cannot be repeated on a single page and shouldn't contain any whitespace.
<!-- index.html -->
''' <div id="title">...</div>
/ stylex.css */
''' #title {...}
.class.second-class {} >> Is a chaining effect .class .second-class {} >> Is a descendant comabinator
The Cascade is a hierarchy that determines which rules will actually get applied to our HTML. There are three elements that will help the determination:
A CSS declaration that is more specific will take precedence over less specific ones
- Inline styles
- ID selectors
- Class selectors
- Type selectors It will only be taken into account when an element has multiple, conflicting declarations targeting it, sort of like a tie-breaker. When there is no declaration with a selctor of higher specificity, a rule with greater number of selectors of the same type will take precedence over another rule with fewer selectors of the same type. P.S.: *, +, -, >, <, ~, and empty spaces DO NOT interfere with the specificity rule.
Inheritance refers to the inheritance of features that are applied to some elements, even if we don't explicitly write a rule for those. Directly targeting an element always beats inheritance.
The tie-breaker in a conflict of CSS rules, wins the one that was defined last.