# The Odin Project ## How to ask good programming questions - Be very specific and patient - use screenshots when available - ask questions directly instead of asking to ask ie. "are there any java experts around?" ## Git ### Set up Git - Set username and email ``` git config --global user.name "username" git config --global user.email "email" ``` - If using GitHub, change branch from 'master' to 'main' ``` git config --global init.defaultBranch main ``` - Enable colorful output with git ``` git config --global color.ui auto ``` - Set default branch reconciliation behavior to merging ``` git config --global pull.rebase false ``` - Verify the config ``` git config --get user.name git config --get user.email ``` ## Create an SSH Key for repos - SSH keys are good for avoiding retyping credentials every time - Check to see if there is an existing ssh key ``` ls ~/.ssh/id_ed25519.pub ``` - if nothing appears, then there is no key and one needs to be made - Create ssh key ``` ssh-keygen -t ed25519 -C ``` - press enter when asked for what location to store it unless you have a specific location - add a passphrase and retype it ## Link SSH key to Git - Find the ssh key input on GitHub or repository website of your choice - Click on new ssh key and give it a name and leave the window open for the next steps - Copy the public SSH key ``` cat ~/.ssh/id_ed25519.pub ``` - Paste the key into your settings, it should start with ```ssh-ed25519``` and end with your email ## Change git repository remote ``` git remote set-url origin https://'username':'password'@repositorylink ``` ## Using Git - Check git version by using ```git --version``` - After creating a new repository you can clone it to your current directory by using ``` git clone ``` - After the cloning, check the url with ```git remote -v``` - Use ```git status``` to check the status of the current files within your directory - To commit to the repo you can use ```git commit -m "Add helloworld.txt"``` - Confirm with ```git status``` - You can use ```git log``` to view the most recent commits - After creating a file you can use ```git add ``` to add that specific file or ```git add .``` to add all files within the directory that are not on the repo - We can push the changes to the cloud repository with ```git push origin main```, origin being the remote location and *main* being the branch to upload to - Make sure to only push working code ### Git Best Practices - Atomic commits - A commit that includes changes related to only one feature or task of your program. - Easily reversible if the commit causes breaking changes - Enables you to write more specific commit messages ### Changing the Git Commit Message Editor - Typing ```git config --global core.editor "code --wait"``` into the terminal will give you the option to use either ```git commit -m ``` or ```git commit``` without anything extra. ## Introduction to HTML And CSS - What is HTML? - Stands for **Hypertext Markup Language** - It's the raw data that a webpage is built out of. Includes: - text - links - cards - lists - buttons - What is CSS? - Stands for **Cascading Style Sheets** - It's the styling of the HTML page - Controls colors - Controls Positioning of text and font - HTML and CSS are ***not*** programming languages, technically speaking because they only present information and are not used to compute any logic - JavaScript would be a programming language that leverages both HTML and CSS ### [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) and Tags - HTML defines the structure and content of webpages. - HTML elements are used to create: - paragraphs - headings - lists - images - links - Elements are simply pieces of content wrapped in opening and closing tags - Another way to define them is *containers for content* - Paragraph is `

` - Some tags do not require a closing tag - line break is `
` or `
` - image insert would be `` or `` - There many tags, looking at documentation for most of them is standard [HTML Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element) - [Intro to HTML Video 3:42](https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-&ab_channel=KevinPowell) ### HTML Boilerplate - All HTML docs have the same basic structure that needs to be in place before anything useful can be done. - [index.html](/OdinProject/html-boilerplate/index.html) #### The DOCTYPE - Every HTML page starts with a doctype declaration - The purpose of it is to tell the browser what version of HTML it should use to render the document(current being HTML5) - HTML5 Doctype is `` - The doctypes for older version of HTML were more complicated - Example of doctype for HTML4 ``` ``` #### HTML Element - Now we need to provide an `` element. More commonly known as the *root element* of the document - root means that every other element in the document will be a descendant of that one - The `lang` attribute specifies the language of the text content in that element - primarily used for improving accessibility of the webpage - `en` is used for English - The `` element is where important meta-information about our webpages and items required for our webpages to render correctly in the browser - inside of the `` element, there should not be any element that displays content on the webpage #### The Charset Meta Element - The meta tag for the charset encoding of the webpage in the head element: `` - The encoding ensures that the webpage will display special symbols and characters from different languages correctly in the browser #### Title Element - Should go in the head of an HTML doc `My First Webpage` - It's used to give webpages a human-readable title which is displayed in our webpages' browser tab - The default title for a webpage is it's filename, in this case `index.html` - This is a security risk as you wouldn't want the internet to know what any of your files are named or how they are placed within the project directory - Also would make it difficult for the end user to remember what tab it is if they have multiple open ```HTML My First Webpage ``` #### Body Element