web-dev-crash-course

Web Development Crash Course for CS19 KMUTT

Content

1. Review

• HTML basic
  • Tag,Attribute
  • Header, Content, Container, Image tag
• HTML Form
• CSS basic
  • Selectors
  • Properties
    • Text, Image, Background, Color, Positioning, Box Model (Padding, Mergin)
• Modern CSS
  • Flex
  • Grid
• Bootstap 4
  • Quick overview of Grid system
  • Overview of component
  • Utilities class
• Basic JavaScript
  • Review of syntax
• Github
  • Review of the purpose and how-to
• SQL
  • Review of SQL query statement
• Environment Variable
• Workflow/Process & Responsibility for each group

2. Advance Github

• Branch & Conflict
• Branch & Commit convention
• GitFlow

3. Modern JavaScript

• let/const
• Arrow function
• Spread operator
• Destructuring array & object
• Array function (map, find, findIndex, filter, reduce, concat, slice, splice)
• Promise
• Async/Await

4. NodeJS

• Call Stack & Event loop
• Module & Require
• File System

5. ExpressJS

• Rounting
• Static file
• Middieware

6. EJS

• Introduction to template engine
• EJS systax
• EJS with ExpressJS

7. RESTful API + Database

• Idea behind RESTful API
• MySQL with Node/Express
• CRUD throungh API
• axios
• Postman

8. Utilities

• lodash
• Moment.js
• SweetAlert 2
• Stripe
• ChartJS

References

Slide

https://drive.google.com/a/mail.kmutt.ac.th/file/d/1Q0DBjfnWYDGor3TO2S3_Hf4Ldi58V-vo/view?usp=sharing

JavaScript codepen

https://codepen.io/pittawat2542/pen/vYYyGpK

HTML reference

https://htmlreference.io/

CSS reference

https://cssreference.io/

JavaScript reference

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference

NodeJS docs

https://nodejs.org/docs/

Expressjs docs

https://expressjs.com/

Bootstap 4 docs

https://getbootstrap.com/docs/4.3/getting-started/introduction/

JQuery

https://api.jquery.com/

Iodash

https://lodash.com/

Momentjs

https://momentjs.com/

Stripe js

https://stripe.com/docs/stripe-js/reference

ChartJS

https://www.chartjs.org/