HTML
- HTML is one of the three cornerston language used in web development
- It is made up of elements which work together to provide content and the basic frame work for all pages on the web.
- The head element contains information about the webpage.
- The body element represents the visible content shown to the user.
- The !DOCTYPE html declaration tells the browser what document type it should expect when it is opened.
- metadata is data about our webpage, that the browser uses to effectively serve our webpage to users.
- The title element defines the title for a website; this element is required and is extrmely important for seo.
- The style element defines the css styles associated with a website.
- The base element defines the base URL for a webpage
- The link element connects an external resources to the HTML document.
- The meta element defines metadata such as the character set, description, keywords, author, and viewport.
- The script element embeds client-side scripts in the HTML document.
- The p element represents a paragraph or block of text.
- The UL, OL, LI elements represents unordered lists, ordered lists, and list items.
- The img element contains information about images that are displayed on the webpage.
- The br element create a line or empty space, between two blocks of content.
- The footer element appears at the bottom of the page and usually contains the author, copyright, contact, sitemap, and navigation.
- The section elements are semantic elements that define a section in a document that contains thematic content.
- The a; hyperlink element aka anchor, creates links to the same webpage or other webpages.
- Commonly used elements: Text elements, image elements, header elements, list elements.
- common element types used to divide and describe: mata-related elements, content division elements, semantic elements.
- Declaration are not case-sensitive; HTML elements are case-sensitive.
- HTML attributes are always defined in the beginning elements, never the closing element.
- search engine optimization(seo): is the process of improving the ranking of a website in search engines, such as google or bing.
- The href attribute points to the URL for the link.
- The src attribute is the most important, because it defines the location of the image.
- The alt attribute contains a text string that describes the appearance and functionality of the image.
- It is important to use sematic HTML elements, because they make your HTML easier to read by developers and browser.
- An element refers to the entire element from opening tag to closing tag, whereas a tag refers only to what appears inside the angle brackets.
- The relationship among elements in HTML are called, "parent/child".
- head vs mata elements: head element is a container for metadata, while meta elements contain information about the page that is used by the browser.
CSS
- There are three ways to style a webpage using css
- Inline css: used by developers to style an element directly in HTML file.
- Inline styles apply to a specific HTML tag, using a style attribute with a css rule to style a particular page element only.
- Inline are useful for quick and permanent changes but are less flexible than external and internal style sheets.
- each inline style must be edited individually whenever you make a design change.
- Internal style sheet contains css rules for the webpage in the head section of the HTML file.
- The rules only apply to that page, and you can confiqure css classes and ids, which are used to identify elements.
- A single change to the css rule will apply to all tagged page elements.
- The most common way to style a webpage is by using an external css.
- It allows developers to keep all their css rules in a separate file, which makes design changes easier.
- When using an external style sheet, we link the file using a link element placed in the HTML's head.
- separation concerns: separating code into different files based on use. i.e each section of code should have its own responsibility.
- 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.
- DRY: do not repeat yourself.
Git
- git is a version control system that lets you manage and keep track of each version of your project.
- git is great for tracking changes locally, on your own computer.
- git-hub is a cloud-base hosting service that allows us to keep track of our projects inside repositories that are stored remotely.
- Git Setup
- git config --[firstname lastname]: set a name that is identifiable for credit when review version history.
- git config --[valid-email]: set an email address that will be associated with each history marker.
- git config --global color.ui auto: set automatic command line coloring for git, for easy reviewing.
- Git Setup & Init
- git init: initialize an existing directory as a git repository.
- git clone [URL]: retrive an entire repository from a hosted location via URL.
- Git Stage & Snapshot
- git status: checks what branch we are currently on
- git checkout -b branch-name: creates a new branch and switches to it
- git add[file]: add a file as it looks now to your next commit.
- git reset[file]: un stage a file while retaining the changes in working directory.
- git diff: diff of what is changed but not staged.
- git diff --stage: diff of what is staged but not yet committed.
- git commit -m[descriptive message]: commit your staged content as a now commit snapshot.
- Git Branch & Merge
- git branch: list your branches. a* will appear next to the currently active branch.
- git branch [branch-name]: create a new branch at the current commit.
- git checkout: switch to another branch and check it out into your working directory.
- git merge[branch]: merge the specified branch's history into the current one.
- git log: show all commit in the current branch's history.
- Git Inspect & Compare
- git log: show the commit history for the currently active branch.
- git log branchB..branchA: show the commits on branch A that are not on branchB.
- git log --follow[file]: show the commits that changed file, even across renames.
- git diff branchB..branchA: show the diff of what is in branchA that is not in branchB.
- git show[SHA]: show any object in git in human-readable format.
- Git Share & Update
- git remote add[alias] [URL]: adding a git url as an alias.
- git fetch[alias]: fetch down all the branches from that git remote.
- git merge[alias]/[branch]: merge a remote branch into your current branch to bring it up to date.
- git push[alias][branch]: transmit local branch commits to the remote repository branch.
- git pull: fetch and merge any commits from the tracking remote branch.
- Git Tracking Path Changes
- git rm[file]: delete the file from project and stage the removal for commit.
- git mv [existing-path][new-path]: change an existing file path and stage the move.
- git log --stat -m: show all commit logs with indication of any paths that move.
- Git Rewrite History
- git rebase[branch]: apply any commits of current branch ahead of specified one.
- git reset --hard[commit]: clear staging area, rewrite working tree from specified commit.
- Git Ignoring Patterns
- logs/*.notes pattern*/: save a file with desired patterns as.gitignore with either direct string matches or wildcard globs.
- git config --global core.excludesfile[file]: system wide ignore pattern for all local repositories.
- Git Temporary Commits
- git stash: save modified and staged changes.
- git stash list: list stack-order of stashed file changes.
- git stash pop: write working from top of stash stack.
- git stash drop: discard the changes from top of stash stack.
JavaScript
- what is JavaScript?
- JavaScript is a powerful programming language that can add interactivity
to a website. it was invented by Brendan Eich
- Browser application programming interfaces(APIS)
- Variables are containers that store values.
- JavaScript are case-sensitive.
- you can declar a variable, and give it a value on the same line.
- you retrieve the value by calling the varaiable name.
- note: that variable may hold values that have different data type.
- comments are snippets of text that can be added along with code.
- An operator is a mathematical symbol that produces a result based on two values.
- conditionals are code structures used to test if an expression returns true or not.
- functions are a way of packaging functionality that you wish to reuse.
- The BigInt type is a numeric primitive in javascript that can represent integers with arbitrary magnitude.
- A symbol is a unique and immutable value.
- an object is a value in memory which is possibly referenced by an identifier.
- objects can also be seen as a collection of properties.
- Data property: value, writable, enumerable, confiqurable.
- Accessor property: get and set.
- Arrays are reqular objects for which there is a particular relationship
between integer-keyed properties and the lenght property.
- javascript is a powerful programming langauge that can add interactivity to a website. it was invented by Brendan Eich.
- A variable is a named container that allows us to store data in our code.
- Control flow is the order in which a computer executes code in a script.
- Browser application programming interfaces(APIS).
- javascript is case sensitive.
- you can declar a variable and give it a value on the same line.
- you retrive the value by calling the variable name.
- note: that variable may hold values that have different data types.
- comment are snippets of text that can be added along with code.
- An operator is a mathematical symbol that produce a result based on two values.
- conditionals are code structures used to test if an expression returns true or not.
- Funtions are a way of packaging functionality that you wish to reuse.
- The BigInt type is a numeric primitive in javascript that can represent integers with arbitary magnitude.
- A symbol is a unique and immutable value.
- An object is a value in memory which is possibly referenced by an identifier.
- objects can be seen as a collection of properties.
- Data property: value, writable, enumerable, confiqurable.
- Accessor property: get and set.
- The prototype of an object points to another object or null.
- Arrays are regular objects for which there is particular relationship between integer-keyed properties and the lenght property.