Please enable JavaScript.
Coggle requires JavaScript to display documents.
Web Development, Git Commands, Command Line, ADVANCED JAVASCRIPT, CSS, DOM…
Web Development
HTML
Documentation
https://www.w3schools.com/html/
BOOTSTRAP
Download Bootstrap
https://getbootstrap.com/
CDN
https://www.cloudflare.com/learning/cdn/what-is-a-cdn/
Metatag
https://www.w3schools.com/tags/tag_meta.asp
Viewport
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
What is UTF-8?
https://www.quora.com/What-is-UTF8
Full page background
https://css-tricks.com/perfect-full-page-background-image/
Bootstrap Flex
https://getbootstrap.com/docs/4.3/utilities/flex/
Mail Chimp
Create a Landing Page
https://mailchimp.com/help/create-a-landing-page/
Github Project files
https://github.com/aneagoie/startup-of-the-year
Animate
https://animate.style/
Templates
http://www.mashup-template.com/templates.html
JAVASCRIPT
Arrays
https://www.w3schools.com/jsref/jsref_obj_array.asp
Comparison and Logical Operators
Variables
Functions
Lists
Objects
Loops
while
do
for
forEach (new in ECMAScript 5)
Keywords
https://www.w3schools.com/js/js_reserved.asp
online tools and resources
http://codingheroes.io/resources/
Reference
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
RegExp MSDN (manuel)
To see their support among browser-based and other engines, see:
http://caniuse.com/
https://kangax.github.io/compat-table
https://www.w3resource.com/index.php
Practice exercises
Git Commands
GITHUB
Open Source Projects
https://github.com/zero-to-mastery
Guide Lines
https://github.com/zero-to-mastery/start-here-guidelines
https://about.gitlab.com/images/press/git-cheat-sheet.pdf
Git merge master
Git checkout (branch name)
switches to that particular branch.
Git branch (branch name)
creates new branch.
Git branch
to see how many branches are available.
Git pull
update branch from master.
Git push
letting the github to know the changes and it updated the repository.
Git commit -m "message about changes"
locking the changes.
Git add .
for multiple files.
Git add (file)
adds new changes.
Git status
to see the status of folder.
Git clone (path)
copies online git files to local computer.
git checkout -b (branch name)
creates a new branch and switches to this branch.
git push origin (branch name or master)
git diff
to see the changes that we made.
Command Line
Dir
list everything in the current directory.
Cd
current directory.
Cd (path)
goes to three path directory.
Cd..
goes back to the previous directory.
Cls
clears the terminal.
Cd /
goes to root directory.
mkdir (folder name)
creates a new folder.
echo > (file name)
creates a new file.
Start (enter the name of the file to open)
opens a file.
Code
opens visual studio.
Code .
opens current folder in VS code.
RENAME (current filename) (new filename)
renames the existing filename to new filename.
DEL (filename)
removes files.
rmdir /s "(folder name)"
removes folder.
ADVANCED JAVASCRIPT
Scope
control flow
Ternary
Switch
ES5 and ES6
https://babeljs.io/
Advanced Functions
Closures
Currying
Compose
Advanced Arrays
filter
reduce
map
Advance Objects
context
instantiation
reference type
https://sdras.github.io/object-explorer/
Object Methods
Type coercion
Equality Comparisions
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness
ECMA Comparision Algorithm
https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3
Type coercion
https://dorey.github.io/JavaScript-Equality-Table/
E7,E8,E10
Advanced loops
Debugging
Modules
https://medium.com/sungthecoder/javascript-module-module-loader-module-bundler-es6-module-confused-yet-6343510e7bde
More About Modules
https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/
Practice JS
https://github.com/getify/You-Dont-Know-JS
https://javascript.info/
http://dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition/
Motivation Article
https://www.freecodecamp.org/news/how-to-think-like-a-programmer-lessons-in-problem-solving-d1d8bf1de7d2/
CSS
ADVANCED CSS
CSS GRID
+
CSS Layout
Free Design Resources
https://zerotomastery.io/resources/
Media Queries for Standard Devices
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Grid Cheat sheet
http://grid.malven.co/
Auto prefixer
https://autoprefixer.github.io/
Prefixes
http://shouldiprefix.com/
Can I Use?
https://caniuse.com/
Browser Support
https://www.w3schools.com/cssref/css3_browsersupport.asp
Flexbox Froggy
http://flexboxfroggy.com/
More CSS games
https://codepip.com/games/
Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS Minify
https://www.cleancss.com/css-minify/
Code Pen
https://codepen.io/
Google fonts
https://fonts.google.com/
CSS Selectors list
https://www.w3schools.com/cssref/css_selectors.asp
Specificity Calculator
https://specificity.keegan.st/
Color Palette
https://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF
CSS Tricks
https://css-tricks.com/almanac/
free Images
https://unsplash.com/
online images with copyrights
https://www.shutterstock.com/
online hosting
https://imgur.com/
and copy the direct link ending with .png or .jpg and paste it in <img>
-
https://bennettfeely.com/clippy/
clip-path: polygon()
DOM Manipulation
https://www.w3schools.com/js/js_htmldom.asp
Event Reference
https://developer.mozilla.org/en-US/docs/Web/Events
Javascript Char Codes(Key Codes)
https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
Read More about
Callback
https://blog.codeanalogies.com/2016/04/11/javascript-callbacks-explained-using-minions/
Background_Generator
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color
jQuery vs Javascript
http://youmightnotneedjquery.com/
nodejs
https://www.npmjs.com/
https://yarnpkg.com/
similar to npm
https://www.npmjs.com/package/lodash
Nodejs install
https://nodejs.org/en/
Getting latest version of npm
https://docs.npmjs.com/try-the-latest-stable-version-of-npm
Update packages in project(Node semver)
https://semver.npmjs.com/
Live-server package uninstall commands
npm uninstall <name> removes the module from node_modules but does not update package.json
npm uninstall <name> --save also removes it from dependenciesin package.json
npm uninstall <name> --save-dev also removes it from devDependencies in package.json
npm uninstall -g <name> --save also removes it globally
Portfolio
Logo Maker
https://hatchful.shopify.com/
Portfolio Github
https://github.com/cobidev/simplefolio
Difference between
SCSS
and
CSS
https://stackoverflow.com/questions/46400443/what-is-the-difference-between-css-and-scss
http://clipart-library.com/
Visual Studio Code
Some Best Extensions For Web Development
https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for-web-development
For Windows: Customizing Git Bash
https://gist.github.com/RalucaNicola/e9a8746ab6c4e696d3f0d4dcfb57dafa