blackdogcode/WebDevBoot

The Complete 2020 Web Development Bootcamp

References

• HTML
  • Google HTML Style Guide
  • MDN Web Docs, w3schools, devdocs
• Google JavaScript Style Guide
• CSS reference
  • W3C CSS Working Group
• Cross browser testing
• Publishing your website
  • GitHub Pages
  • Google App Engine

Web Dev Tools

• CodePen - ad hoc front-end code snippet testing web environment
• W3C Markup Validation Service
• Chrome DevTools for Web Developers
  • Chrome DevTools Keyboard Shortcuts
• Atom Editor
  • Atom Keyboard Shortcuts

1. Getting started with the Web

• Installing basic software
• What will your website look like?
• How do you set up a local testing server?
• Dealing with files
• How the Web works

2. HTML — Structuring the Web

1. Getting started with HTML
   • HTML element content categories
   • Types_of_CSS_boxes
   • Block Level Elemnt
   • Inline Element
   • HTML entities
2. What’s in the head? Metadata in HTML
   • developer tools
   • HTML <meta> element
   • Character List for UTF-8
   • SEO (Search Engine Optimization)
   • Google's webmaster tools
   • Open Graph Data metadata protocol invented by Facebook
   • Language tags in HTML and XML
   • screen reader for impaired people
3. HTML text fundamentals
   • we usually spend a very short time on a web page
4. Creating hyperlinks
   • How the web works
   • Test your skills: Links

   
   

5. Advanced text formatting
   • <blockquote>: The Block Quotation element
   • <q>: The Inline Quotation element
   • <cite>: The Citation element
   • <abbr>: The Abbreviation element
   • <address>: The Contact Address element
   • <sup>: The Superscript element
   • <sub>: The Subscript element
   • <time>
   • Test your skills: Advanced HTML text
6. Document and website structure
   • <form>
   • <input>: The Input (Form Input) element
   • <main>
   • <article>: The Article Contents element
   • <section>: The Generic Section element
   • <aside>: The Aside element
   • <header>
   • <footer>
   • <nav>: The Navigation Section element
   • Using HTML sections and outlines
7. Debugging HTML
   • Discover browser developer tools
   • Chrome DevTools Keyboard Shortcuts
   • Inspect and Edit Pages and Styles
   • Debugging JavaScript in Chrome DevToolshl=en
8. Assessment: Marking up a letter
9. Assessment: Structuring a page of content

2.1 Multimedia

• <embed>

2.2 HTML Q/A

3. Learn to style HTML using CSS

3-1. CSS first steps

1. What is CSS?
   • Selector (CSS)
   • Universal selectors
   • <color> - named color list
   • Color Hunts
   • CSS Backgrounds and Borders
2. Getting started with CSS
3. CSS Types(inline, internal, external(.css)
   • inline css - not recommended!
   • internal css
   • external css(.css file) - recommended
• <link>: The External Resource Link element
• list-style-type
4. How CSS is structured
• Cascade and inheritance
• '@'At-rules
• Media queries
5. How CSS works
• DOM (Document Object Model)
6. Assesment: Using your new knowledge
   • font-family
   • color
   • border
   • font-weight
   • text-decoration

3-2. CSS building blocks

• The box model
• CSS Position Property
  • static(default flow)
  • absolute: add a margin to its parent elemt i.e. div, p
  • relative: add a margin relative to whree the element should be(static position)
  • fixed

3-3. CSS — Styling the Web

• At-rules
  • @media
• Specificity

3-4. Styling text

• CSS values and units(i.e. rem, em, px)

3-5. CSS layout

3-6. CSS Guideline

4. Bootstrap Front-End Framework

Boot Strap Home

5. JavaScript — Dynamic client-side scripting

5.1 JavaScript first steps overview

1. What is JavaScript?
   • Document Object Model (DOM) APIs
   • Geolocation APIs
     • i.e. Google Maps
   • Canvas API
   • WebGL: 2D and 3D graphics for the web
     • i.e. Chrome Experiments
     • i.e. webglsamples
   • Audio and Video APIs
   • HTMLMediaElement
   • WebRTC
   • Twitter API
   • Google Maps API
   • OpenStreetMap API
2. A first splash into JavaScript
3. Grammar and types

5.2. Data types and data structures

• Standard built-in objects
  • String and Built-in Functions
  • Number and Built-in Functions
  • Math and Built-in Functions

5.3. JavaScript Function

• Function - functions are themselves objects
  • typeof: check data type
  • Parameters
  • Default parameters
  • Rest(mutiple) parameters
  • typeof: check data type
  • Function expression
  • Control Flow and Error Handling
    • Equality comparisons and sameness
    • if-else
    • switch
  • Loops and iteration
• Empty Statment(;)

5.4 Collections

• Indexed collections
• Keyed collections

5.5 DOM(Document Object Model)

• DOM Living Standard
• DOM APIs
  • Document Properties and APIs
    • Document.getElementsByTagName()
    • Document.getElementsByClassName()
    • Document.getElementById()
    • Document.querySelector()
    • Document.querySelectorAll()
  • Element Properties and APIs
• Object Event Handler
• DOM Style Javascript property names
• EventListener
  EventTarget
  • EventTarget.addEventListener()
  • EventTarget.removeEventListener()
  • EventTarget.dispatchEvent()
• HTMLMediaElement

5.6 jQuery

• What is jquery?(MDN)
• jQuery
• jQuery APIs
• jQuery UI
  • jQuery UI APIs
• jQuery Mobile
  • jQuery Mobile APIs
• jQuery Sizzle
• jQuery Qunit - js unit testing
  • jQuery Qunit APIs
• Q&A
  • How to use radio on change event?

5.7 JSON Object

• JSON.parse()

06. Node.js

• npm package manager for JavaScript
• Node JS Documentation
• REPL(Read-Eval-Print-Loop)
• Node Documentation on Exports & the Module Object
• MDN Docs on Javascript Objects
• Katacoda NodeJS Playground

07. Express.js with Node.js

• Express Documentation
• List of HTTP Status Codes

08. APIs

09. EJS

10. MongoDB(NoSQL)

11. Monggose

12. RESTful API

13. Authentication & Security

14. React.js

15. Design Shcool 101

• Curated colour palettes on Color Hunt
• Popular iOS colours from Flat UI Colors
• Popular Android colours from Material Palette
• Nabbing your favourite colours with Color Zilla
• Create Emotion with Color in UX Design
• 26 Digital Typography Rules for Beginners
• XD Essentials: Typography in Mobile Apps
• Need hints for good fonts? Here's 14 typographers with their favorite fonts
• What’s The Difference Between A Font And A Typeface?
• Web Design in 4 Minutes
• Searching Dribbble by a Specific Colour
• Translating Client Speak: What Clients Say and What they Mean
• Golden Rules of User Interface Design
• Designing User Interfaces for My Mother
• Teehanlax.com

Q/A

• What’s The Difference Between JavaScript And ECMAScript
• Difference between var and let in JavaScript
• Java Script 'String' Object
• Working with JSON
• URLSearchParams()
• font-family

Others

• Web Archive - WayBackMachine
• Submarine Cable Map

<li><a href="https://www.tutorialspoint.com/internet_technologies">Internet Technology Overview</a>
<ul>
  <li><a href="https://www.tutorialspoint.com/internet_technologies/internet_reference_models.htm">OSI and TCP/IP Model</a></li>
</ul>

• E-mail Overview
  • E-mail Protocols(SMTP, IMAP, POP)
• Web Server and Its Type
  • Difference Between Web server and Application server
  • Difference between Apache Tomcat server and Apache web server
• What is RIA?
• What is REST?
  • RESTful systems == REST-compliant systems
  • In the REST architectural style, the implementation of the client and tof the server can be done independently.
  • Each side knows what format of messages to send to the other, they can be kept modular and seperate.
  • Statelessness: Server and Client doest not need to know their states in REST Architecture
• What is CRUD(Create, Read, Update, Delete)?
• How does single sign-on work?
• What are IMAP and POP?
• What is CDN(Content Delivery Network)?
• Waht is OAuth?
• Web Server vs. Application Server