Prework Study Guide
✨ Open the Console to See What's Happening ✨
HTML
- The head element contains information about the webpage.
- The body element represents the visible content shown to the user.
CSS
- CSS is used for styling, in simple words for cosmetics or facade of a webpage
- There are three ways to implement CSS code into a website: InLine CSS, Internal CSS, and External CSS
- CSS base architecture consists of a Selector, a Property, and a Value
- A Declaration is composed of aProperty and a Value.
- Class Attributes allows the CSS code to be share with any element thus enabling us to choose will be assigned
- A margin indicates how much space we want around the outside of an element.
- A padding indicates how much space we want around the content inside an element.
- PARTS OF A BOX
- Making up a block box in CSS we have the:
- Content box: The area where your content is displayed; size it is using properties like inline-size and block-size or width and height. .
- Padding box: The padding sits around the content as white space; size it is using padding and related properties. .
- Border box: The border box wraps the content and any padding; size it is using border and related properties.
- Margin box: The area outside the padding and border. It's tranparent.
Git/GitHub
- WHAT IS GIT?
- Git is free and open source software for distributed version control: tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development.
- WHAT IS GITHUB?
- GitHub, Inc., is an Internet hosting service for software development and version control using Git. It provides the distributed version control of Git plus access control, bug tracking, software feature requests, task management, continuous integration, and wikis for every project.
- GIT CLI COMMANDS
- git status: checks what branch we are currently on
- git checkout -b branch-name: creates a new branch and switches to it
- git checkout [dir name]:
- TO SYNC THE GITHUB REPO WITH THE CURRENT WORK
- git add -A: To stage your changes/Add changes
- git commit -m "comment": Commit chnages and explains why the changes
- git pull origin main: Pull in the base branch "Main".
- git push origin feature/project-README: Push up Feature/[branch Name]
JavaScript
- WHAT IS JAVASCRIPT?
- Handles logic and allow users to interact with a website which works alongside HTML and CSS.
- Developed by Brendan Eich in 1995.
- It has the ability to incorporate third party libraries.
- It's an Object Base language, but NOT an Object Oriented language.
- Some examples of JavaScript at work are: Forms, Clicking, Pressing Buttons, and Retrieving Data.
- WHAT IS CONTROL FLOW?
- Control Flow is the order in which computer executes code in a JS file.
- BASIC JAVASCRIPT FEATURES
- Variables: Var is the keyword to decalre a variable in JavaScript. A variable is a container that holds unique information that is assigned to its name uinsg the = sign. A variable can contain different data types.
- Data Types: Integer, BigInt, Symbol, Boolean, Null, Undefined, String, Number
- Functions: A function is a set of instructions or procedures to perform a specific task
- Loops/Iteration: For, Do While, and While loops and others.
- Data Structures:a data structure is a format to organize, manage and store data in a way that allows efficient access and modification. More precisely, a data structure is a collection of data values, the relationships among them, and the functions or operations that can be applied to that data. The four types of basic data structures supported by JavaScript are: array lists, maps, records and JSON tables.
- Methods:A Method is a set of instructions that are associated with an object. Example- Console.log.
- Arguments -vs- Parameters: Function parameters are the names listed in the function's definition. Function arguments are the real values passed to the function. Parameters are initialized to the values of the arguments supplied. e.g.: Console.log and others.
- Conditional Statements:They are features of programming languages that tell the computer to execute certain actions, provided certain conditions are met. Some examples are if/else and true or false.
- Chrome Developer Tools:
- CONSOLE.LOG METHOD EXPLAINED
- method was created to make it easier for developers to test their code. Developers use it daily to debug and test the code that they write.
- WHAT IS AN ARRAY?
- An array is a single variable that is used to hold a group of data. Arrays are typically used to hold data that is related in some way.
- WHAT IS AN INDEX OF AN ARRAY?
- Uses the search and compare tool to return a requested value of an element in the array. Indexing starts with 0, then increments to 1, 2, 3... Example: const array = [2, 9, 9];
Debugging Advise
- ON BUGS
- They occurred because no matter how much research to perform you are not able to catch all or anticipate every USE CASE, different environments, and systems, in ways you never anticipated before.
- BEFORE BUILDING + CODING
- Compile a list of possible scenarios, and issues where things can go wrong or create an error.
- Plan on how to handle support requests or errors once the application is deployed. Is there a system in place to handle the requests for debugging?
- Be mindful of how you design your errors and alerts
- WHAT TO DO TO CATCH ERRORS AKA: BUGS
- IDENTIFY THE PROBLEM
- A developer should identify what the code should be doing or have an idea of its function.
- Get feedback from end-user
- Replicate errors on your side - recreate it on your production environment.
- Move to through the code step-by-step
- Set-up breakpoints to stop and look what's happening before submitting wrongful info to active API connections etc... (Safer this way)
- You can run expressions of variables to test what's going on.
- Go line by line and make comments like a to do list.
- Make changes and test until it's fixed
- Document the solution for the bug and include crucial information
- You can also use "print here" on code with numbers to go through iterations like loops etc.
- DEBBUGING TOOLS
- The end-user
- Adobe Premiere Pro
- VS Code for debugging
- Flask
- Use the Chrome tools (Brave) for Debugging
- Use Kan Ban tools
- NOTE
- Make comments on the code
- Create a troubleshooting section for the user
- Document bug fixes on GitHub - Do a commit
- Have a way of documenting reports of bugs
- Watch YouTube videos on how debugging interface works on VS code
- GitHub Copilot - code predictor - encourages you to write comments