22/07/14 (Git)
Tags: webdev, beginners, programming, html
Published: 2022-07-14 11:31:50

## Goals for today:

> 1. Learn the basics and background of html and css.
> 2. Gain basic knowledge of Git and download it.
> 3. Push my html and css files to my repository on Github.
> 4. Create basic html and css project.

---

## Notes and What I've Learned
 <p>&nbsp;</p>
### Background of html and css

##### HTML
- Stands for Hyper Text Markup Language
- `<!DOCTYPE html>` declaration must first be made
- `<head>` element contains the metadata; such as title or meta elements.
- `<style>` element is used to define the style information (related to CSS).
- `<p>` element defines a paragraph; can include attributes within the first tag to add style(css). It is considered a block element. 
- `<strong>` & `<em>` elements to **bold** and _italicize_ respectively. 
- Comments are written using `<!-- Comment Content -->`. Comment tags are written differently from HTML and CSS. 
- Alpha values in colors are used to control the transparency. _ex._ (rgba)
- links are called using `<a href="url">_link text_</a>`. Target attribute may be added to open the link in the same tab the link was clicked (`_self`), a new window or tab (`_blank`), the parent frame (`_parent`), or over the full body of the window (`_top`). 
- A local link can be called using the specific relative url (not including the "https://www").
- Images can be called using the `<img src="url">` tag and the `alt` attribute can be added to provide details on the image if it can not load.
- A background image may be set, using the `background-image` attribute. Other css attributes related to background may be used to further improve the styling. 
- Unordered lists are marked with bullets which starts with the `<ul>` tag and each item starts with the `<li>` tag. 
- Ordered lists are numbered which starts with the `<ol>` tag and each item starting with the `<li>` tag.
- `<div>` element defines a division or section and is one of the block-level elements. 
- Block-level elements takes up all the space possible. It must be restricted using the width and height to control.

 <p>&nbsp;</p>
##### CSS
- Cascading Style Sheet
- Edit the layout, colors, fonts, add background, etc. of the html.  
- Can be an external file to be called from the html file through `<link>` within the `<head>` element.
- The class selector can be called from html, which contains a set of styling that can be called whenever needed. Classes are defined using a period in front of the name. 
- The id selector is similar to class, however it may be only called once from the html. Ids are defined using #hashtag sign infront of the name. 


<p>&nbsp;</p>

#### What is Git?

- Git is a free and open source **version control system,** developed by Linus Torvalds in 2005.
- Helps avoid conflict from simultaneous editing and debugging from multiple developers.

> A version control system is used to track and manage changes made to the source code; enabling developers to restore earlier versions and fix errors. (source)

### Basic Git Bash commands

<ul>
    <li><b>git init</b></li>
        <ul>
            <li>New Git Repository</li>
            <li>Adds a .git directory with subdirectories</li>
        </ul>
    <li><b>git add *file* </b></li>
        <ul>
            <li>Adds files to the "staging area" before committing</li>
        </ul>
    <li><b>git status</b></li>
        <ul>
            <li>Check the status of the working tree</li>
        </ul>
    <li><b>git commit</b></li>
        <ul>
            <li>Commit the changes that were added to the "staging area"</li>
        </ul>
    <li><b>git push</b></li>
        <ul>
            <li>"Push" to Github (remote repository)</li>
        </ul>
    <li><b>git pull</b></li>
        <ul>
            <li>"Pull" or get the newer version from repository</li>
        </ul>    
    <li><b>git clone</b></li>
        <ul>
            <li>Cloning a repository to a directory</li>
        </ul>
     <li><b>git rm --cached *file* </b></li>
        <ul>
            <li>Unstages a file</li>
        </ul>
</ul>

#### .gitignore File
- Keeps certain files from being pushed to the repository.

Add a directory with a forward slash _ex._ `/img` or a file using its full extension name _ex._ `index.html` to keep them from being "staged."