llanoreinaldo / coding-resources

UCF Coding Boot Camp Coding-Resources List

HTML

HTML Reference

1. A free guide to all HTML elements and attributes.

   HTML Reference Guide

CSS

CSS Reference

1. CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.

   CSS Reference Guide

BootStrap CSS Video Help

1. Create a basic web layout using Bootstrap.

   YouTube Video

Bootstrap Text Layout

1. Practice building grid-based layouts with the Bootstrap CSS framework.

   YouTube Video

New CSS Features Are Enhancing Everything You Know About Web Design | CSS-Tricks

1. We just hit you with a slab of observations about CSS Grid in a new post by Manuel Matuzo. Grid has been blowing our minds since it was formally introduced and Jen Simmons is connecting it (among other new features) to what she sees as a larger phenomenon in the evolution of layouts in web design.

   CSS Features

1 HTML Element + 5 CSS Properties = Magic! | CSS-Tricks

1. Let's say I told you we can get the results below with just one HTML element and five CSS properties for each. No SVG, no images (save for the background on the root that's there just to make clear that our one HTML element has some transparent parts), no JavaScript. What would you think that involves?

   CSS Trick

How to Write a Git Commit Message | CSS-Tricks

1. An oldie but goodie, Chris Beams writes about the secret art of writing helpful Git commit messages. Here’s why he thinks it’s so important: If you haven’t given much thought to what makes a great Git commit message, it may be the case that you haven’t spent much time using git log and related tools. There is a...

   Article

30 Seconds of CSS

1. A curated collection of useful CSS snippets you can understand in 30 seconds or less. From foundational elements such as clearfix to gradient text color and gradient cursor tracking to CSS easing and far beyond.

   Github

here are 25 html and CSS tutorials

• Tutorials

FREE Bootstrap 4.0 Course

1. Free 10-part course on Bootstrap 4.0 to help you learn responsive web design:

   Bootstrap 4.0 Course

JavaScript

The ultimate JavaScript cheat sheet (compliments of Ronny!)

• Dev Docs on JavaScript

Grasshopper - JavaScript tutorial

1. Grasshopper is an app that uses puzzles and quizzes to teach you Javascript. If you've always wanted to create your own website but have felt overwhelmed by the complexity involved with learning a programming language, you might be in luck now. One of Google's Area 120 idea incubator teams have successfully developed an…

   Grasshopper Tutorial

For Loops

1. this is one of my favorite videos about for loops. It's actually set to a hip-hop track and all about looping over burritos

   for loops conditionals codin events

Google JavaScript Style Guide (Reading time: 7 min)

1. Google publishes a JavaScript style guide. Here are some key lessons. For anyone who isn’t already familiar with it, Google puts out a style guide for writing JavaScript that lays out (what Google believes to…

   Medium Post

JavaScript: Arrow Functions for Beginners – codeburst (Reading time: 5 min)

1. Last week I published this post on the keyword this for beginners. One of the topics that wasn’t covered in that article was arrow…

   Codeburst Article

JavaScript is Sexy - Understand JavaScript Callback Functions and Use Them

1. Learn JavaScript Higher-order Functions, aka Callback Functions: In JavaScript, functions are first-class objects; that is, functions are of the type Object and they can be used in a first-class m...

   JavaScript Tutorial

Top JavaScript Libraries & Tech to Learn in 2018 – JavaScript Scene – Medium

1. An article rounding up the top tech to learn in 2018. This year there are some surprises. (Reading time: 8 min).

   JavaScript Scene

KeyEventCodes

1. JavaScript Event KeyCodes: Keycode testing tool - which keys map to which keycodes

   Event KeyCodes

JavaScript

1. What is the Execution Context & Stack in JavaScript? by David Shariff

   Blog Article

Functions

1. A quick 5 minute read on functions:

   Codeburst Article

Quick coin flip heads/tails function in JavaScript (Example)

1. A protip by aalaap about math, random, function, javascript, and binary

   Coin Flip Function

##isNaN()

1. The isNaN() function determines whether a value is NaN or not. Note: coercion inside the isNaN function has interesting rules; you may alternatively want to use Number.isNaN(), as defined in ECMAScript 2015.

   MDN Web Docs

JQuery

JQuery Intro

1. Here’s an introduction to jQuery via Kahn Academy as well.

   Khan Academy Article

2. Good Article on what jQuery is and how it fits in with JS:

   Quora Article

DOM Event Documentation

1. MDN DOM events

   Documentation

2. If you’re interested in studying DOM on your own( Which I highly recommend )

   w3school

JQuery Intellisence

1. General instructions for jQuery Intellisense and plugins for VS Code:

   Github Instructions

API/AJAX

API Articles

1. Here's a good article in the differences between an API (in general) and a Web API

   Article

2. Another place you can also search APIs:

   Programmableweb Site

3. What is an API? In English, please. – freeCodeCamp

   Article

4. What are some fun API's to play with?

   Reddit Post

API tutorial

• Tutorial

RESTful API Tutorial

1. HTTP status codes and how to use them in RESTful API or Web Services.

   Tutorial

Firebase

FIREBASE Links

Reference GSTATIC

SASS

1. SASS Tutorial - What is SASS?

   SASS Tutorial

NODE.js

Node.js Documentation

1. Super helpful documentation on Node.js

Node.js Documentation

2. Node.JS Module Patterns: A simple introduction to Node.JS modules by example.

   Github

Node Tutorial

1. I found this Node tutorial to be very helpful, concise, and well-produced (compliments of Joshua N. Harnois)

   YouTube

npm - mysql

1. A node.js driver for mysql. It is written in JavaScript, does not require compiling, and is 100% MIT licensed.

   nmp - mysql package

MySQL

MySQL Tutorial

1. This is a cool SQL primer

   MySQL Tutorial

How to remove MySQL root password

1. I want to remove the password for user root in localhost. How can I do that? By mistake I have set the password of root user. That's why phpmyadmin is giving an error: #1045 - Access denied for us...

   Remove Root Password

TOOL and TIPS

Tools I wish I had known about when I started coding (Reading time: 6 min)

1. In the tech world, there are thousands of tools that people will tell you to use. How are you supposed to know where to start?

   Important Tools Article

tooltip - JSFiddle

1. Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

   JSFiddle Tooltip

How To Create Tooltips

1. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML.

   How to Create Tooltips

Coding Skills Practice Game

1. Great way to practice your coding skills !

   CodeWars Game

Ways to Write a Cleaner Code | Become a Better Programmer

1. Tips on how to write cleane code and become a better programmer

   Cleaner Code

MISCELLANEOUS

GUIDE TO SURVIVING BOOTCAMP

1. 7.5 Ways to Survive Coding Bootcamp: The No-BS Guide to Making It Out Alive (and Sane) | Grant T. Aguinaldo

   Surviving Bootcamp Article

Cheats

1. Posted an awesome link to some cheat sheets. Take a look to this collection of cheat sheets. Including JavaScript, jQuery, CSS, HTML, and more

   OverAPI

Sounds

1. Welcome to Soundboard.com. 496,427 sound clips and sound effects on categorized soundboards from radio to TV to games, travel, science, animals, sound effects and sports. Listen, download and embed music. Free mp3 download or build your own audio soundboard using our innovative tools.

   Soundboard Website

2. Freesound: collaborative database of creative-commons licensed sound for musicians and sound lovers. Have you freed your sound today?

   Freesound Site

Document Write

1. Why is document.write considered a "bad practice"?

   Stack Overflow Reference

Setting up a Twitter app - Twitter Bot Tutorial (compliments of Lee Warrick)

1. YouTube The Coding Train: Hey this seems relevant to the hw: PS: at the end he gets into why you might care about module.exports

   Coding Train Video

Object Oriented Programming

1. WHy is object oriented programming useful with a role playing game:

   Programming Article

2. String.prototype.split() - The split() method splits a String object into an array of strings by separating the string into substrings, using a specified separator string to determine where to make each split.

   MDN Web Docs

An opinionated guide to writing developer resumes in 2017

1. Let’s start by not rating ourselves as experts in Java, and intermediate in C#. Let’s drop Times New Roman, and remind ourselves that there’s a lot more to be done than squashing all text into a page. (Reading time: 18 min read)

   Resume Article

Formating Your Business Cards Articles

1. Great article about what to put on your business card:

   Business Cards

2. MOO | Custom Online Business Printing & Design - Design and print customized Business Cards with MOO! Print a different image on each business card - upload your own design, logo, text and photos online.

   MOO Ordering Site

Whiteboarding

1. GitBook is where you create, write and organize documentation and books with your team.

   Whiteboarding Documentation

Frameworks

1. Since we just started covering frameworks, take a look at this url. It lists the top 8 open source front-end frameworks...with Bootstrap being #1:

   Frameworks

Emoji Cheat Sheet

1. Best Cheat Sheet Ever!

   Emoji Cheat Sheet

SLACK EMOJI'S

1. A directory of the best custom emojis for your Slack chat. Download them all! Works in Discord too. Get the image, then added it to the channel through the emoji interface - and it's all in the wrist

   Slack Emojis

CloudApp

1. Taking screenshots, creating gifs, annotations. Shortcuts are legit and copies to clipboard on save. Ronnie's referral link if you want to check it out:

   CloudApp

VISUAL CODE TIPS

Visual Code Extensions

1. Extension for Visual Studio Code - A customizable extension for colorizing matching brackets

   Marketplace Article

2. Using Emmet abbreviations inside VS Code

   Emmet

VS Code Shortcuts

1. The VS code shortcut to duplicate a line is a nice thing to know:

   Shift+Alt+Down and Shift+Alt+Up

Tips and Tricks Video

1. A pretty helpful video on VSCode Tips and tricks:

   YouTube Video

Test Using a Simple Web Server

1. If you guys are using something that doesn’t run on the file:/// protocol (cough firebase auth cough), and you’re on a Mac, good news:

   1. Start a Simple Web Server from Any Directory on Your Mac OS X: You need only one tiny command to start a web server from any directory through OS X's terminal. If you've got a web site lying around and need to test it out, this is possibly the fastest way to make that happen.

   Lifehacker Article

Run Local PHP Server

1. If you want to run a PHP server in any folder. Just navigate to that folder in your terminal and type: php -s localhost:3000 Then go to localhost:3000 in your browser.

Helpful Video on How to Psuedocode

1. Compliments of Ricky earlier in the program

   YouTube Video

PRE-CLASS PREP NOTES

6.2 Topics to help prep for class 6.2 (function names in bold - some may be review topics):

JSON:

JSON.stringify JSON.parse

Trim:

JavaScript .trim (String.trim()) function

Push:

Array push()

Forms:

1. General form submits (think 'submitting data when clicking the Submit button after filling out a web form'). This usually causes a refresh of page in browser:

   w3school website

2. Preventing default submit (through jQuery) - prevents page refresh and allows you to handle/manipulate submit:

   JQuery Stack Overflow Event PreventDefault JQuery API Event PreventDefaul

3. Adding Event Listeners to Dynamic Elements Generated With jQuery:

   look at best answer

4. jQuery $(this):

   JQuery This Selector

5. API Keys To Sign Up For:

   OpenWeatherMap API Giphy API (choose ‘Create An App’ to get started)

6.3 Class Prep (some material may be review – some may be new):

1. JS && in conditional statements: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators

2. jQuery prepend() Method: https://www.w3schools.com/jquery/html_prepend.asp

3. Data Attributes:

   1. In HTML
   2. WHY to use them
   3. Documentation: Set or get data from using jQuery .attr() function
   4. jQuery.data() - Alternate – be careful, as there are some differences from c above:

      How to get the data Id attribute Data and attr in jQuery

Extras:

4. jQuery Pass Attributes to A Self-Closed Element Creating a div element in jQuery

   Example from link: jQuery('<div/>', { id: 'foo', href: 'http://google.com', title: 'Become a Googler', rel: 'external', text: 'Go to Google!' }).appendTo('#mySelector');

5. JSDoc way of documenting functions in code: a. JSDoc: http://usejsdoc.org/tags-param.html b. StackOverflow: https://stackoverflow.com/questions/5873927/how-to-indicate-param-is-optional-using-inline-jsdoc (edited)

7.1 Prep (may be review or new subjects):*

Forms:

1. General form submits: https://www.w3schools.com/html/html_forms.asp

2. Preventing default submit: • https://www.w3schools.com/jquery/event_preventdefault.asp • https://stackoverflow.com/questions/4426179/jquery-event-preventdefault • https://api.jquery.com/event.preventdefault/

Adding Event Listeners to Dynamic Elements Generated With jQuery: • https://stackoverflow.com/questions/12065329/jquery-adding-event-listeners-to-dynamically-added-elements

jQuery .remove(): • https://api.jquery.com/remove/

Window.localstorage – AKA 'localstorage': • General: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage • setItem/clear: https://developer.mozilla.org/en-US/docs/Web/API/Storage/clear

Window.sessionStorage – AKA 'sessionStorage': • General: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Document.cookie: • https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

substring(): • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substring

charAt(): • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt

split(): • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split

join(): • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join

isArray(): • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray

jQuery selectors: • https://www.w3schools.com/jquery/jquery_ref_selectors.asp (edited)

• https://lodash.com/

Class 7.2 Prep (Firebase Intro):

Firebase (requires Google account): https://firebase.google.com

General Firebase Database Service (Web - JavaScript) Documentation – we'll be focusing on this service: https://firebase.google.com/docs/reference/js/firebase.database

Service Models Firebase is a BaaS (Backend as a Service). Here is a comparison between service models (IaaS, PaaS, SaaS, BaaS) https://assist-software.net/blog/cloud-offering-comparison-between-iaas-paas-saas-baas (edited)

8.1 PreClass 8.1:

CORS: Cross-origin resource sharing: • Some popular API choices do not support CORS. Use https://cors-anywhere.herokuapp.com/ as a workaround. • Docs: https://github.com/Rob--W/cors-anywhere/#documentation • Demo: https://robwu.nl/cors-anywhere.html

GitHub Flow Guide for Teams • https://guides.github.com/introduction/flow/ (edited)

ADDITIONAL HELP VIDEOS

Helpful YouTube Videos

1. Google Maps API
2. Part 1 (Google Books API, AJAX, JSON)
3. Part 2 (Google Books API, AJAX, JSON)
4. jQuery Crash Course [1] - Intro & Selectors
5. jQuery Crash Course [2] - Events
6. JavaScript Higher Order Functions & Arrays
7. jQuery Crash Course [1] - Intro & Selectors
8. jQuery Crash Course [2] - Events
9. jQuery Crash Course [3] - DOM Manipulation
10. JavaScript Fundamentals For Beginners

FILES DIRECTORY

Voluntary Bootcamp Participant Class Directory

Director of Coding Bootcamp Participants

Bootstrap Gulp Zip File Package (Created by Anibal Cruz)

1. Here is a package Cruz created for those of you who want to work in bootstrap 4 and use its src SCSS files. This package contains a Gulp process that works with bootstrap 4’s scss files and handles all the retooling it needs. It will compile, auto-prefix, and minify the bootstrap.scss file into bootstrap.min.css which is in the public/css folder.

2. In order to use this process, you will have to have node installed. If you do not, please follow the pre-work assignment on node installation. If you still have issues or want to try another routed Cruz placed instructions in the misc folder to install NVM without admin access. That installation will install nvm which allows you to specify which node version you want to run and also installs the node package manager (npm) which you will need to install dependencies.

3. To start using, drop the entire folder onto VSC and then open up the integrated terminal from the view option in the top tool bar then type into the terminal window:

   npm install \That will install all the dependencies the process needs.

4. Once you are back at the prompt, type:

   npm run dev\that will open up a browser at localhost:3000 and will be the address you will want to type into the other browsers if you want to have multiple browsers synced.

5. Remember, the scss files are in the scss folder and there is a file in there ready for your custom code: _custom.scss. All your production files will live in the public folder. You will not need to touch the css folder at all. The index file has a bootstrap starter page built in. It also uses placeholder images generated by js so you will have to remove the last js file on the page before pushing to production.

   Bootstrap Gulp Zip