學習資源: Traversy Media
Thank you.
This is my annual guide to take you from start to finish when it comes to the web development technologies that are available for frontend, backend, and full-stack developers.
Timestamps:
00:00:00 – Intro
00:01:32 – What Is Your Goal?
00:03:54 – Types of Web Developers
00:05:40 – Basic Necessities/Tools
00:09:17 – HTML & CSS
00:11:33 – Sass & PostCSS
00:13:09 – CSS Frameworks
00:16:56 – UI Design Principles
00:18:23 – JavaScript
00:22:02 – Extra Programming Tools
00:25:20 – Deploying Frontend Projects
00:27:19 – Basic Frontend Developer Checklist
00:28:58 – Where To Go From Here
00:31:25 – Frontend Frameworks
00:35:20 – TypeScript
00:36:53 – UI Kits & Libraries
00:39:04 – Testing
00:40:38 – Server-Side Rendering
00:43:28 – Static Site Generators
00:45:59 – Headless CMS
00:48:30 – The Jamstack
00:50:20 – Frontend Superstar Checklist
00:51:51 – Server-Side Languages
00:56:40 – Server-Side Web Frameworks
01:04:05 – Databases
01:10:30 – REST APIs
01:11:21 – GraphQL
01:12:48 – Authentication & Authorization
01:15:25 – WordPress
01:16:36 – Deploying Full Stack Projects
01:20:42 – Backend & Full Stack Checklist
01:21:54 – Mobile App Development
01:23:56 – Web3
01:28:20 – Web Assembly
01:29:18 – Artificial Intelligence
01:30:36 – Thank You!
Why Learn To Code?
There are many reasons to learn to code. Figure out what you want to do with this skill.
- Work as a developer for a company
- Freelance or run your own business
- Build your own products or SaaS (Software as a Service)
- Create educational content
- Code as a hobby
Types Of Web Developers
Fronted Developer
Works on the client side / browser and creates user interfaces.
They use tools like HTML, CSS, JS, DOM, FE frameworks, etc.
Backend Developer
Works on the server and deals with databases.
They use languages like JS, Python, PHP, etc. Databases like Postgres, MongoDB. HTTP, server configuration, deployment, etc.
Full Stack Developer
Works on the frontend and backend and works with a combination of the tools above.
Tools: The Necessities
Basic tools that every web developer uses
- Computer & OS
- MacOS | Windows | Linux | WSL
- Web Browser
- Chrome | Firefox | Brave | Edge | Safari
- Text Editor / IDE
- VS Code | Sublime Text | Vim | Webstorm
- Terminal
- Default | iTerm2 | Powershell | Git Bash | Hyper
- Design Software
- Figma | Adobe XD | Sketch
HTML & CSS
HTML & CSS are the building blocks of web development
- HTML5 Basic & Semantic Tags (Page Layout)
- CSS Fundamentals
- CSS Alignment (Flexbox & CSS Grid)
- Media Queries / Responsive Design
- Simple Animations / Transitions
Sass & PostCSS
Sass is a CSS pre-processor that adds to the functionality of CSS. It offers variables, nesting, mixins, functions, etc.
PostCSS is a tool for transforming CSS with JavaScript. There are plugins to add the stuff Sass offers and more.
CSS Frameworks (Choose One)
CSS frameworks give you predefined classes/components to style elements. The can rapidly speed up the process of creating layouts.
-
Bootstrap 5
- Popular, high level framework
- Tailwind CSS
- Low-level, utility based framework
- Materialize
- Based on material design
- Bulma
- Mobile-first, modular framework
- Foundation
- Advanced CSS framework
UI Design Principles
Frontend devs & web designers should know some basic design principles.
- Color & Contrast
- Text should be readable
- Whitespace
- Check space between elements
- Scale
- Relative element sizing
- Visual Hierarchy (視覺層級)
- Arrange in order of importance
- Typography
- Typeface, sizing, etc
JavaScript
JavaScript is the language of the browser.
Every web developer should have some level of JS knowledge.
- JS Basics
- Data types, data structures, functions, loops
- DOM
- Document object model
- Async JS
- Promises, Async/Await
- Fetch API & HTTP
- Make requests to API’s & understand HTTP
- Array Methods
- map, filter, reduce, etc
Extra Programming Tools
- GIT is a popular version control system. It is used with remote repositories such as GitHub, GitLab and BitBucket.
- NPM is a package manager used to install packages into your project. NPM requires Node.js to be installed.
- Browser dev tools are important for all types of developers Element selector, console, storage, network activity, etc.
- Emmet, Live Server, Prettier, ESLint, GitHub Copilot, etc.
Deploying Frontend Projects
Popular Platforms
- netlify
- Vercel
- cPanel
- amazon $3
Domain Name Registrars
- namecheap
- DOMAIN.COM
- bluehost
- GoDaddy
There are multiple ways to deploy to a hosting platform
GIT, SSH, FTP/SFTP
Basic Frontend Developer
A basic frontend developer should be able to do the following…
- Create website layouts with HTML/CSS
- Understand some basic design principles
- Know JavaScript and how to work with the DOM
- Create basic interactive frontend applications
- Connect to APIs and make requests via Fetch
- Work with GIT and use version control
- Deploy and manage small production projects
Where To Go From Here (Choose one)
- Web Design
- Learn More Design
- Get Better at CSS
- Simple Websites
-
Frontend Framework
- React, Vue, Svelte
- State Managers
- Server-Side Rendering
- Backend
- Node.js, Python, PHP, C#, Go
- Databases – Postgres, MongoDB
- HTTP & API Development
- Advanced JS
- Module Bundlers
- Testing
- Design Patterns
Frontend Frameworks (Choose One)
Frontend JS frameworks used for SPAs (Single Page Apps)
React
- Created & Maintained by Facebook
- Most Popular Framework / Library
- Moderate Learning Curve
React Router, JSX, Hooks, Context API, Redux
Vue
- Second Most Popular Framework
- Great Community
- Low Learning Curve
Vue CLI, Vue Router, Composition API, Vuex
Angular
- Created & Maintained by Google
- Popular in Enterprise
- Steep Learning Curve
Angular CLI, Services, TypeScript, Observables
Svelte
- Gaining Popularity
- Lightweight & Performant Compiler
- Lowest Learning Curve
SvelteKit, Stores
TypeScript
Superset of JavaScript that adds static typing and other features
- Static-Type Checking
- Class & Module Support
- Other ES6+ Features
- Code less prone to errors
- Code is more robust and definitive
UI Kits (Choose One)
Reusable design elements / components
React
- Material UI
- Onsen UI
- Chakra UI
- React Bootstrap
Vue
- Vuetify
- Buefy
- Vue Material
- Bootstrap Vue
Angular
- Angular Material
- Ng-Zorro
- Ng-Bootstrap
- MD Bootstrap
Svelte
- Svelte Material UI
- Materialify
- Smelte
- Sveltestrap
Testing
Common types of testing in programming
- Unit Testing – Test blocks of code (functions, modules, classes)
- Integration Testing – Modules are combined and tested together
- E2E Testing – Emulating a user
JS testing tools include Jest , Cypress and Puppeteer.
Other languages have testing tools as well
Server-Side Rendering (Choose One)
Unlike with a SPA, React/Vue/Svelte apps render on the server-side
Next.js
- React Based
- Data Fetching Methods
- Image Optimization, SEO, etc
Nuxt.js
- Vue Based
- Data Fetching
- Automatic transpilation & Bundling
Remix
- React Based
- Loaders & Actions
- Most Control Over HTTP Request/Response
SvelteKit
- Svelte Based
- Advanced Routing
- Code Splitting & Other features
Static Site Generators (Choose One)
Static sites have a lot of benefits such as performance, SEO and more
Gatsby
- React Based
- GraphQL Data Layer
- Image Optimization, Code Splitting & More
Next.js
- React Based
- Exports Fast Static Websites
- Data Fetching Methods
Gridsome
- Vue Based
- PWA Ready
- SEO Benefits
Jekyll
- Built on Ruby
- Been Around a While
- Liquid Template Engine
Headless CMS (Choose One)
Content management systmes for creating APIs with no frontend
Strapi
- Open Source, Based on Node.js
- Customizable
- Self hosted
Sanity.io
- Powerful & Flexible Platform
- Great for Collaboration
- Sanity Studio Toolkit
ContentFul
- Great for Teams
- Optimized for Speed
- Great for Large Businesses
GraphCMS
- Build a GraphQI API instantly
- Lightweight & Intuitive
- UI Extensions
The JamStack
Broad term to refer to an architectural approach for building websites.
- Variety Of Tools / Tecknologies
- Decoupled
- Static-First
- Serverless Functions
- High Performance, Secure & Affordable
Frontend Superstar
We have gone over just about everything a FE developer could do
- Build user interfaces with a frontend framework
- Understand how to work with local and global state
- Work with REST APIs & HTTP
Added Skills
- Create applications with TypeScript
- Work with SSR & Jamstack technologies (SSG, headless CMS)
- Write unit, integration & e2e tests
Server-Side Language (Choose One)
Many different languages can be used on the server for web development
- Node.js
- GoLang
- Python
- PHP
- C#
- GoLang
- Ruby
- Java
- Kotlin
- Rust
- Scala
- R
- Swift
Server-Side Web Framework (Choose One)
Node.js
- Express
- Fastify
- Koa
- Nest.js
Python
- Django
- Flask
- FastAPI
PHP
- Laravel
- Symfony
- Slim
C#
- ASP.NET
- ASP.NET MVC
GoLang
- Gin
- Beego
Ruby
- Ruby on Rails
- Sinatra
Java
- Spring
- Struts
Kotlin
- Spring
- Vert.x
Scala
- Play
- Lift
Rust
- Rocket
- Actix Web
Databases (Choose One)
Backend & full stack developers work with various databases & tools
- PostgreSQL
- MySQL
- MS SQL Server
- SQLite
- MongoDB
- Firebase
- Supabase
- Redis
ORMs
- Sequelize
- TypeORM
- Mongoose
- Prisma
- SQLAlchemy
- Doctrine
REST APIs
APIs that conform to the REST architectural style and interacts with RESTful services
- Representational State Transfer
- HTTP requests work with data/resources
- Specific URL structure for endpoints
GET /api/todos
POST /api/todos
PUT /api/todos/100
DELETE /api/todos/100
GraphQL
Data query & manipulation language for APIs
- Request specific data points
- Strongly typed
- Less maintenance than REST
- Apollo is a popular GraphQL client
Authentication & Authorization
Authentication is the process of identifying an individual and authorization pertains to the permissions that individual has.
- JSON Web Tokens
- Cookies & Sessions
- OAuth (Login via Google, Twitter, GitHub)
- Authentication libraries (Passport, Grant, etc)
- Password hashing (Bcrypt)
- Protecting endpoints and routes
WordPress
Full-featured PHP content management system
- WordPress is still widely used
- It is great for freelancing
- Small business clients like it
- It can also be used as a headless CMS
Deploying Full Stack Projects & DevOps
Hosting Platforms
- aws
- heroku
- DigitalOcean
Server Software
- APACHE
- NGINX
Containers & Virtualization
- docker
- kubernetes
Image & Video
- Cloudinary
- Amazon S3
Backend & Full Stack Web Developer
A backend web developer should know how to do the following…
- Comfortable with a server-side programming language
- Know how to setup and manage a database & ORM / ODM
- Know how to create REST APIs and implement authentication
- Comfortable with the terminal and Unix commands
- Know how to deploy projects and work with servers
A full stack developer can do this as well as frontend tasks
Mobile Development (Choose One)
There are many web technologies that allow us to create mobile apps
React Native
- React Based
- Code Reusability
- Large Community
Flutter
- Dart Programming Language
- Extremely Fast
- Strong Documentation
Ionic
- Use Any Framework
- Pre-Designed UI Components
- Developer-Friendly Tooling
Xamarin
- Mobile Apps With .NET & C#
- Cross-Platform Apps
- High Performance
Web3
Web3 opens up a whole new possibility of decentralized apps (Dapps) that offer benefits usch as transparency, security, anonymity and more.
- Blockchain
- Ethereum & Smart Contracts
- Solidity Programming
- NFTs (Non-Fungible Tokens)
Web Assembly
A low-level assembly-like language or bytecode for the web
- Develop high-performance web applications
- Write programs in Rust, C, C++ and compile to WASM
- AssemblyScript is a TypeScript variant
- NOT a replacement for JS!
Artificial Intelligence
Machine Learning and AI have a role in web development
- Programming Tools (GitHub Copilot)
- Testing Tools
- ML APIs
- Chatbots, Spam Filters, Suggestions, etc